// VersionC_Social.jsx — Social-first: app framed as a fan community, not a marketplace
// Feed-dominant hero. People over products. Discord/Reddit landing vibe.

const CSocial = {
  bg: '#FBFAF7',
  bg2: '#F2EEE6',
  bgDeep: '#0E0D0B',
  ink: '#0B0D10',
  ink2: '#464C54',
  ink3: '#6B7280',
  line: '#E8E5E0',
  accent: '#6B3DE8',
  accentSoft: '#EFE8FE',
};

// Tiny avatar with initials
const CAvatar = ({ name, size = 32, color = CSocial.accent, ink = '#fff' }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: color, color: ink,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: size * 0.4, fontWeight: 700, flexShrink: 0,
  }}>{name.split(' ').slice(0, 2).map(w => w[0]).join('')}</div>
);

const CNav = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(251, 250, 247, 0.88)',
    backdropFilter: 'blur(12px)',
    borderBottom: `1px solid ${CSocial.line}`,
  }}>
    <div className="container" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68,
    }}>
      <Logo />
      <nav style={{ display: 'flex', gap: 28 }}>
        {['Community', 'Team Hubs', 'Fan Cards', 'Tickets', 'About'].map(l => (
          <a key={l} href="#" style={{ fontSize: 14, color: CSocial.ink2, textDecoration: 'none', fontWeight: 500 }}>{l}</a>
        ))}
      </nav>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <a href="#" style={{ fontSize: 14, color: CSocial.ink2, textDecoration: 'none', fontWeight: 500 }}>Sign in</a>
        <a href="#" style={{
          padding: '10px 18px', fontSize: 14, fontWeight: 600,
          background: CSocial.accent, color: '#fff',
          borderRadius: 999, textDecoration: 'none',
        }}>Join the community</a>
      </div>
    </div>
  </header>
);

// Hero: live feed + headline
const CHero = () => {
  const [feedIdx, setFeedIdx] = React.useState(0);
  const feed = [
    { name: 'Marcus James', team: '🏴‍☠️ Raiders', color: '#6B3DE8', t: 'Anyone watching pre-game at Sporting House tonight?', tag: 'Raiders Hub', time: 'now' },
    { name: 'Priya Kapoor', team: '⚾ Dodgers', color: '#005A9C', t: 'Sec 138 row 12 been wild lately — welcome to the family 🔥', tag: 'Dodgers Hub', time: '2m' },
    { name: 'Devon Taylor', team: '⚔️ Golden Knights', color: '#B4975A', ink: '#000', t: 'Dropping 4 to tonight\'s game, fan-only.', tag: 'Knights Hub', time: '4m' },
  ];
  React.useEffect(() => {
    const i = setInterval(() => setFeedIdx(x => (x + 1) % feed.length), 2800);
    return () => clearInterval(i);
  }, []);

  return (
    <section style={{ background: CSocial.bg, padding: '80px 0 100px', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          {/* LEFT */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              background: CSocial.accentSoft, color: CSocial.accent,
              fontSize: 12, fontWeight: 600,
              marginBottom: 24,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: CSocial.accent }}/>
              12,847 fans online right now
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(52px, 7vw, 96px)', margin: 0, lineHeight: 1 }}>
              The ticket app<br/>
              that's <em style={{ color: CSocial.accent }}>actually</em><br/>
              a fan club.
            </h1>
            <p style={{ fontSize: 19, color: CSocial.ink2, marginTop: 24, lineHeight: 1.55, maxWidth: 520 }}>
              SeatConnect is where fans hang year-round — not just when they're buying tickets.
              Join your team's Hub. Meet the fans in your section. Get tickets straight from people you know.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 32, flexWrap: 'wrap' }}>
              <a href="#" style={{
                padding: '14px 24px', background: CSocial.accent, color: '#fff',
                borderRadius: 999, fontWeight: 600, fontSize: 15, textDecoration: 'none',
              }}>Download the app</a>
              <a href="#" style={{
                padding: '14px 24px', background: 'transparent', color: CSocial.ink,
                borderRadius: 999, fontWeight: 600, fontSize: 15, textDecoration: 'none',
                border: `1px solid ${CSocial.line}`,
              }}>See how it works</a>
            </div>

            {/* Stacked avatars trust */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 32 }}>
              <div style={{ display: 'flex' }}>
                {[
                  { n: 'Maria C.', c: '#6B3DE8' },
                  { n: 'Marcus J.', c: '#005A9C' },
                  { n: 'Priya K.', c: '#B4975A', ink: '#000' },
                  { n: 'Devon T.', c: '#EF3E42' },
                  { n: 'Alex C.', c: '#000' },
                ].map((a, i) => (
                  <div key={i} style={{ marginLeft: i === 0 ? 0 : -10, border: '2px solid #fff', borderRadius: '50%' }}>
                    <CAvatar name={a.n} size={36} color={a.c} ink={a.ink || '#fff'}/>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 13, color: CSocial.ink2 }}>
                <strong style={{ color: CSocial.ink }}>4,200+ Raiders fans</strong> joined this week
              </div>
            </div>
          </div>

          {/* RIGHT: live feed panel */}
          <div style={{
            background: '#fff', borderRadius: 20,
            border: `1px solid ${CSocial.line}`,
            boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 24px 60px -12px rgba(0,0,0,0.08)',
            overflow: 'hidden',
          }}>
            <div style={{ padding: '16px 20px', borderBottom: `1px solid ${CSocial.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Live across Team Hubs</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#22c55e', fontWeight: 600 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22c55e' }}/>
                LIVE
              </div>
            </div>
            <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 8, minHeight: 400 }}>
              {feed.map((m, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 12, padding: 14,
                  background: i === feedIdx ? CSocial.accentSoft : 'transparent',
                  borderRadius: 12,
                  transition: 'all 0.4s ease',
                  opacity: i === feedIdx ? 1 : 0.6,
                }}>
                  <CAvatar name={m.name} color={m.color} ink={m.ink || '#fff'} size={40}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</div>
                      <div style={{ fontSize: 11, color: CSocial.ink3 }}>{m.time}</div>
                    </div>
                    <div style={{ fontSize: 11, color: CSocial.ink3, marginTop: 1 }}>in {m.tag}</div>
                    <div style={{ fontSize: 14, color: CSocial.ink, marginTop: 6, lineHeight: 1.5 }}>{m.t}</div>
                  </div>
                </div>
              ))}

              <div style={{ marginTop: 'auto', padding: '12px 14px', borderTop: `1px solid ${CSocial.line}`, display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{
                  flex: 1, padding: '10px 14px', background: CSocial.bg2, borderRadius: 999,
                  fontSize: 13, color: CSocial.ink3,
                }}>Say something to your hub…</div>
                <div style={{ width: 36, height: 36, background: CSocial.accent, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14 }}>→</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Team Hubs — the main value prop in this version
const CTeamHubs = () => (
  <section style={{ background: CSocial.bg2, padding: '120px 0' }}>
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 60px' }}>
        <div className="eyebrow" style={{ marginBottom: 16, color: CSocial.accent, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', fontSize: 12 }}>Team Hubs</div>
        <h2 className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 72px)', margin: 0 }}>
          A home for<br/>
          every fandom.
        </h2>
        <p style={{ fontSize: 18, color: CSocial.ink2, marginTop: 20, lineHeight: 1.55 }}>
          Every team has a Hub. Talk tickets, talk takes, talk the game.
          Unlocked by your Fan Card. Fans-only, always.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {[
          { team: 'RAIDERS', color: '#000', emoji: '🏴‍☠️', members: '12,847', online: 847, topic: 'Pre-game at Sporting House tonight?' },
          { team: 'DODGERS', color: '#005A9C', emoji: '⚾', members: '28,402', online: 2104, topic: 'Who\'s in Chavez tomorrow?' },
          { team: 'GOLDEN KNIGHTS', color: '#B4975A', emoji: '⚔️', members: '9,218', online: 412, topic: 'Sec 105 got ROWDY last night' },
        ].map(h => (
          <div key={h.team} style={{
            background: '#fff', borderRadius: 20,
            border: `1px solid ${CSocial.line}`,
            overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ background: h.color, padding: '32px 24px', color: '#fff' }}>
              <div style={{ fontSize: 28, marginBottom: 10 }}>{h.emoji}</div>
              <div style={{ fontWeight: 800, fontSize: 22, letterSpacing: '0.04em' }}>{h.team} HUB</div>
              <div style={{ fontSize: 12, opacity: 0.8, marginTop: 4 }}>
                {h.members} members • <span style={{ color: '#7FE07F' }}>● {h.online} online</span>
              </div>
            </div>
            <div style={{ padding: 20, flex: 1 }}>
              <div style={{ fontSize: 11, color: CSocial.ink3, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>
                TRENDING NOW
              </div>
              <div style={{ fontSize: 14, color: CSocial.ink, lineHeight: 1.5, marginBottom: 16 }}>
                "{h.topic}"
              </div>
              <div style={{ display: 'flex', marginBottom: 16 }}>
                {[0, 1, 2, 3].map(i => (
                  <div key={i} style={{ marginLeft: i === 0 ? 0 : -8, border: '2px solid #fff', borderRadius: '50%' }}>
                    <CAvatar name={`F${i}`} size={28} color={['#6B3DE8', '#EF3E42', '#B4975A', '#005A9C'][i]} ink={i === 2 ? '#000' : '#fff'}/>
                  </div>
                ))}
                <div style={{ fontSize: 12, color: CSocial.ink3, alignSelf: 'center', marginLeft: 10 }}>+ 24 others</div>
              </div>
              <div style={{
                padding: '10px 16px', background: CSocial.accentSoft, color: CSocial.accent,
                borderRadius: 999, fontSize: 13, fontWeight: 600, textAlign: 'center',
              }}>Join the Hub</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Fan Cards — profile-style
const CFanCards = () => (
  <section style={{ background: CSocial.bg, padding: '120px 0' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ position: 'relative', height: 520 }}>
          <div style={{ position: 'absolute', left: '10%', top: 60, zIndex: 1, transform: 'rotate(-8deg)' }}>
            <MiniFanCard team="GOLDEN KNIGHTS" teamColor="#B4975A" teamEmoji="⚔️"
              avatarColor="#333F42" avatarInk="#fff" initials="MC" city="Henderson, NV" since="2017"
              badges={['🔥 Die Hard']} width={210}/>
          </div>
          <div style={{ position: 'absolute', left: '30%', top: 10, zIndex: 2 }}>
            <MiniFanCard team="RAIDERS" teamColor="#000" teamEmoji="🏴‍☠️"
              avatarColor="#A5ACAF" avatarInk="#000" initials="MC" city="Henderson, NV" since="2018"
              badges={['📍 My Section', '🍔 Stadium Foodie']} width={230}/>
          </div>
          <div style={{ position: 'absolute', right: '5%', top: 70, zIndex: 1, transform: 'rotate(8deg)' }}>
            <MiniFanCard team="DODGERS" teamColor="#005A9C" teamEmoji="⚾"
              avatarColor="#EF3E42" avatarInk="#fff" initials="MC" city="Henderson, NV" since="2015"
              badges={['🎉 Meet Ups', '🍻 Tailgate']} width={210}/>
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 16, color: CSocial.accent, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', fontSize: 12 }}>Fan Cards</div>
          <h2 className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 72px)', margin: 0 }}>
            Tell the world<br/>
            who you <em style={{ color: CSocial.accent }}>root for</em>.
          </h2>
          <p style={{ fontSize: 18, color: CSocial.ink2, marginTop: 20, lineHeight: 1.55, maxWidth: 480 }}>
            Optional, free, and stackable. Make a Fan Card for every team you love.
            Each one is your key into that Hub — and the fan-gated listings inside.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              '📇  Show your fandom — years, section, style',
              '🔑  Unlocks Team Hubs — your people, year-round',
              '🎟️  Unlocks fan-only listings — real fans, real seats',
              '🤝  Discover fans in your section and city',
            ].map(t => (
              <li key={t} style={{
                padding: '10px 16px', background: '#fff',
                border: `1px solid ${CSocial.line}`, borderRadius: 12,
                fontSize: 15, color: CSocial.ink,
              }}>{t}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

// Tickets — low-key, since social is the hero
const CTickets = () => (
  <section style={{ background: CSocial.bg2, padding: '120px 0' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16, color: CSocial.accent, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', fontSize: 12 }}>Tickets, oh yeah</div>
          <h2 className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 72px)', margin: 0 }}>
            And you<br/>
            get <em style={{ color: CSocial.accent }}>tickets</em> too.
          </h2>
          <p style={{ fontSize: 18, color: CSocial.ink2, marginTop: 20, lineHeight: 1.55 }}>
            Because this is still a ticket app. Buy directly from verified fans with zero buyer fees,
            zero bots, and a chat with the seller before you commit. Sellers keep more.
            Buyers pay less. Nobody in the middle.
          </p>
          <div style={{ display: 'flex', gap: 30, marginTop: 32, flexWrap: 'wrap' }}>
            {[['0%', 'Buyer fees'], ['100%', 'Stripe-verified'], ['$45', 'Avg. savings / ticket']].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, color: CSocial.ink, lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 13, color: CSocial.ink3, marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Chat + ticket preview */}
        <div style={{
          background: '#fff', borderRadius: 20,
          border: `1px solid ${CSocial.line}`,
          padding: 24,
          boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 20px 40px -12px rgba(0,0,0,0.08)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20, paddingBottom: 16, borderBottom: `1px solid ${CSocial.line}` }}>
            <CAvatar name="Devon T." size={40} color="#000"/>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
                Devon T. <VerifiedBadge size={14}/>
              </div>
              <div style={{ fontSize: 12, color: CSocial.ink3 }}>Raiders fan since 2005</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ alignSelf: 'flex-start', background: CSocial.bg2, padding: '10px 14px', borderRadius: 16, borderBottomLeftRadius: 4, maxWidth: '80%', fontSize: 14 }}>
              Still have the 4 tickets to Chargers?
            </div>
            <div style={{ alignSelf: 'flex-end', background: CSocial.accent, color: '#fff', padding: '10px 14px', borderRadius: 16, borderBottomRightRadius: 4, maxWidth: '80%', fontSize: 14 }}>
              Yep — sec 138, row 12. Aisle seats.
            </div>
            <div style={{ alignSelf: 'flex-start', background: CSocial.bg2, padding: '10px 14px', borderRadius: 16, borderBottomLeftRadius: 4, maxWidth: '80%', fontSize: 14 }}>
              Perfect. Taking 'em.
            </div>
          </div>
          <div style={{
            marginTop: 20, padding: 16,
            background: CSocial.bg2, borderRadius: 12,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Raiders vs. Chargers</div>
              <div style={{ fontSize: 11, color: CSocial.ink3 }}>Sat Nov 8 • Sec 138 • Row 12 • 4 seats</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 18, fontWeight: 700 }}>$245</div>
              <div style={{ fontSize: 10, color: CSocial.ink3 }}>per seat • no fees</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const CDownload = () => (
  <section style={{ background: CSocial.bgDeep, color: '#fff', padding: '120px 0' }}>
    <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
      <div style={{ fontSize: 12, color: CSocial.accent, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 20 }}>
        Join the community
      </div>
      <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 96px)', margin: 0, color: '#fff' }}>
        Your people are<br/>
        already <em style={{ color: CSocial.accent }}>inside</em>.
      </h2>
      <p style={{ fontSize: 18, color: '#cfcfcf', marginTop: 24, lineHeight: 1.5 }}>
        Launching with Raiders fans at Allegiant. More teams every month.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
        <AppStoreBadge variant="apple"/>
        <AppStoreBadge variant="android"/>
      </div>
    </div>
  </section>
);

const CFooter = () => (
  <footer style={{ background: CSocial.bgDeep, color: '#888', padding: '40px 0', borderTop: '1px solid #222' }}>
    <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <Logo height={20}/>
        <div style={{ fontSize: 12 }}>© 2026 SeatConnect — Join for the tickets. Stay for the fans.</div>
      </div>
      <div style={{ display: 'flex', gap: 20, fontSize: 12 }}>
        {['Privacy', 'Terms', 'Contact', 'Instagram', 'X'].map(l => <a key={l} href="#" style={{ color: '#888', textDecoration: 'none' }}>{l}</a>)}
      </div>
    </div>
  </footer>
);

const VersionCSocial = () => (
  <div style={{ background: CSocial.bg, color: CSocial.ink, minHeight: '100vh' }}>
    <CNav />
    <CHero />
    <CTeamHubs />
    <CFanCards />
    <CTickets />
    <CDownload />
    <CFooter />
  </div>
);

Object.assign(window, { VersionCSocial });