const brandsV2Styles = {
  wrap: { padding: '96px 0', background: 'var(--paper)' },
  head: { textAlign: 'center', maxWidth: 760, margin: '0 auto 48px' },
  micro: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginBottom: 16 },
  head2: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4.5vw, 60px)', color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.035em' },
  sub: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(16px, 1.8vw, 20px)', color: 'var(--muted)', marginTop: 20, lineHeight: 1.5 },
  marqWrap: { overflow: 'hidden', WebkitMaskImage: 'linear-gradient(90deg, transparent, black 6%, black 94%, transparent)', maskImage: 'linear-gradient(90deg, transparent, black 6%, black 94%, transparent)' },
  logo: { opacity: 0.7, filter: 'grayscale(1)', transition: 'opacity .2s ease, filter .2s ease' },

  // Advisor / supporter / collaborator pills (second row)
  advItem: { display: 'inline-flex', alignItems: 'center', gap: 13, marginRight: 48 },
  advAvatar: { width: 48, height: 48, borderRadius: '50%', background: 'var(--ink)', color: 'var(--yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 16, letterSpacing: '-0.02em', flexShrink: 0 },
  advAvatarImg: { width: 48, height: 48, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0 },
  advText: { display: 'flex', flexDirection: 'column', gap: 1, whiteSpace: 'nowrap' },
  advName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 15, color: 'var(--ink)', letterSpacing: '-0.01em' },
  advRole: { fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'var(--muted)' },
};

const BRAND_LOGOS_V2 = [
  { src: 'assets/logos/google-logo.png', alt: 'Google', h: 28 },
  { src: 'assets/logos/adobe-logo.png', alt: 'Adobe', h: 30 },
  { src: 'assets/logos/shopify-logo.png', alt: 'Shopify', h: 30 },
  { src: 'assets/logos/hubspot-logo.png', alt: 'HubSpot', h: 26 },
  { src: 'assets/logos/notion-logo.png', alt: 'Notion', h: 24 },
  { src: 'assets/logos/lovable-logo.png', alt: 'Lovable', h: 28 },
  { src: 'assets/logos/hp-logo.png', alt: 'HP', h: 32 },
  { src: 'assets/logos/alibaba-logo.png', alt: 'Alibaba', h: 24 },
  { src: 'assets/logos/whoop-logo.png', alt: 'Whoop', h: 18 },
  { src: 'assets/logos/nba-logo.png', alt: 'NBA', h: 30 },
  { src: 'assets/logos/fiverr-logo.png', alt: 'Fiverr', h: 26 },
  { src: 'assets/logos/wix-logo.png', alt: 'Wix', h: 24 },
  { src: 'assets/logos/pipedrive-logo.png', alt: 'Pipedrive', h: 24 },
  { src: 'assets/logos/solana-logo.png', alt: 'Solana', h: 22 },
  { src: 'assets/logos/stan-logo.png', alt: 'Stan', h: 26 },
];

const ADVISORS = [
  { mono: 'AO', name: 'Anton Osika', role: 'Founder, Lovable', img: 'assets/adv-anton-osika.jpg' },
  { mono: 'SS', name: 'Sam Stoffel', role: 'Founder, Outplayed', img: 'assets/adv-sam-stoffel.jpg' },
  { mono: 'DP', name: 'Dan Priestley', role: 'Founder, ScoreApp & Dent', img: 'assets/adv-dan-priestley.jpg' },
  { mono: 'RS', name: 'Roei Samuel', role: 'Founder, Connectd', img: 'assets/adv-roei-samuel.jpg' },
  { mono: 'DM', name: 'Dan Murray', role: 'Founder, Heights & Secret Leaders', img: 'assets/adv-dan-murray.jpg' },
  { mono: 'PL', name: 'Piers Linney', role: 'Founder, Implement AI · ex-Dragons’ Den', img: 'assets/adv-piers-linney.jpg' },
  { mono: 'SD', name: 'Sara Davies', role: 'Founder, Crafter’s Companion · ex-Dragons’ Den', img: 'assets/adv-sara-davies.jpg' },
  { mono: 'BF', name: 'Ben Francis', role: 'Founder & CEO, Gymshark', img: 'assets/adv-ben-francis.jpg' },
  { mono: 'RS', name: 'Roy Shabby', role: 'Founder, TradeStars', img: 'assets/adv-roy-shabby.jpg' },
  { mono: 'RH', name: 'Richard Harpin', role: 'Founder, HomeServe', img: 'assets/adv-richard-harpin.jpg' },
  { mono: 'JC', name: 'John Caudwell', role: 'Founder, Phones 4u', img: 'assets/adv-john-cauldwell.jpg' },
  { mono: 'JV', name: 'John Vincent', role: 'Co-founder, Leon', img: 'assets/adv-john-vincent.jpg' },
  { mono: 'JL', name: 'Jamie Laing', role: 'Founder, Candy Kittens', img: 'assets/adv-jamie-lang.jpg' },
  { mono: 'YS', name: 'Yat Siu', role: 'Co-founder, Animoca Brands', img: 'assets/adv-yat-siu.jpg' },
  { mono: 'AH', name: 'Alex Hormozi', role: 'Founder, Acquisition.com', img: 'assets/adv-alex-hormozi.jpg' },
  { mono: 'RB', name: 'Richard Branson', role: 'Founder, Virgin Group', img: 'assets/adv-richard-branson.jpg' },
  { mono: 'RS', name: 'Rory Sutherland', role: 'Vice Chairman, Ogilvy', img: 'assets/adv-rory-sutherland.jpg' },
  { mono: 'AA', name: 'Ali Abdaal', role: 'Creator & best selling author', img: 'assets/adv-ali-abdaal.jpg' },
  { mono: 'CD', name: 'Chris Do', role: 'Founder, The Futur', img: 'assets/adv-chris-do.jpg' },
  { mono: 'SS', name: 'Simon Sinek', role: 'Author, Start With Why', img: 'assets/adv-simon-sinek.jpg' },
  { mono: 'BS', name: 'Brian Scudamore', role: 'Founder, 1-800-GOT-JUNK · Shark Tank Canada', img: 'assets/adv-brian-scudamore.jpg' },
  { mono: 'TA', name: 'Tim Armoo', role: 'Co-founder, Fanbytes', img: 'assets/adv-tim-armoo.jpg' },
];

function BrandsV2() {
  const loop = [...BRAND_LOGOS_V2, ...BRAND_LOGOS_V2];
  const advLoop = [...ADVISORS, ...ADVISORS];
  return (
    <section id="partners" style={brandsV2Styles.wrap}>
      <div className="container">
        <div style={brandsV2Styles.head}>
          <div style={brandsV2Styles.micro}>● Partners &amp; supporters</div>
          <h2 style={brandsV2Styles.head2}>The brands and people who back the mission.</h2>
          <p style={brandsV2Styles.sub}>Companies we've worked with, invested in, advised or partnered with, and the founders, advisors and collaborators in our corner.</p>
        </div>
      </div>

      <div style={brandsV2Styles.marqWrap}>
        <div className="marquee-track brand-track">
          {loop.map((l, i) => (
            <div key={i} className="marquee-item" style={{ paddingRight: 56 }}>
              <img src={l.src} alt={l.alt} style={{ ...brandsV2Styles.logo, height: l.h }} />
            </div>
          ))}
        </div>
      </div>

      <div style={{ ...brandsV2Styles.marqWrap, marginTop: 28 }}>
        <div className="marquee-track adv-track">
          {advLoop.map((a, i) => (
            <div key={i} style={brandsV2Styles.advItem} className="adv-item">
              {a.img
                ? <img src={a.img} alt={a.name} style={brandsV2Styles.advAvatarImg} />
                : <div style={brandsV2Styles.advAvatar}>{a.mono}</div>}
              <div style={brandsV2Styles.advText}>
                <div style={brandsV2Styles.advName}>{a.name}</div>
                {a.role ? <div style={brandsV2Styles.advRole}>{a.role}</div> : null}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .adv-track { animation-duration: 95s; animation-direction: reverse; }
        .brand-track:hover, .adv-track:hover { animation-play-state: paused; }
        .adv-item { opacity: .62; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
        .adv-item:hover { opacity: 1; filter: grayscale(0); }
      `}</style>
    </section>
  );
}