// VersionB_Gameday.jsx — Loud, editorial, stadium-energy take
// Dark-first. Oversized condensed type. Concert-poster hero. Heavy use of the marquee.

const BGameday = {
  bg: '#0A0908',
  bg2: '#121110',
  ink: '#F5F3EF',
  ink2: '#A8A49C',
  ink3: '#5C5852',
  line: '#222120',
  accent: '#FF4410',     // loud orange-red
  accent2: '#FFD84D',    // stadium gold
};

// Huge condensed display font — we use Inter Tight at 900 with negative tracking as stand-in
const displayStyle = {
  fontFamily: 'var(--font-sans)',
  fontWeight: 900,
  letterSpacing: '-0.04em',
  lineHeight: 0.88,
  textTransform: 'uppercase',
  fontStretch: 'condensed',
};

const BNav = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(10, 9, 8, 0.85)',
    backdropFilter: 'blur(14px)',
    borderBottom: `1px solid ${BGameday.line}`,
  }}>
    <div className="container" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68,
    }}>
      <Logo />
      <nav style={{ display: 'flex', gap: 28 }}>
        {['Marketplace', 'Team Hubs', 'Fan Cards', 'Sell', 'Download'].map(l => (
          <a key={l} href="#" style={{
            fontSize: 12, color: BGameday.ink, textDecoration: 'none',
            fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
          }}>{l}</a>
        ))}
      </nav>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <a href="#" style={{ fontSize: 12, color: BGameday.ink2, textDecoration: 'none', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Sign in</a>
        <a href="#download" style={{
          padding: '10px 18px', fontSize: 12, fontWeight: 800, letterSpacing: '0.08em',
          textTransform: 'uppercase',
          background: BGameday.accent, color: '#fff',
          borderRadius: 0, textDecoration: 'none',
          border: `1px solid ${BGameday.accent}`,
        }}>Download ▸</a>
      </div>
    </div>
  </header>
);

// Giant running marquee — repeats
const Marquee = ({ items, speed = 40, reverse = false, size = 80, color, stroke = false }) => (
  <div style={{ overflow: 'hidden', width: '100%', whiteSpace: 'nowrap' }}>
    <div style={{
      display: 'inline-block', paddingLeft: '100%',
      animation: `marquee-${reverse ? 'r' : 'l'} ${speed}s linear infinite`,
    }}>
      {[...Array(3)].map((_, rep) => items.map((item, i) => (
        <span key={`${rep}-${i}`} style={{
          ...displayStyle, fontSize: size,
          color: stroke ? 'transparent' : (color || BGameday.ink),
          WebkitTextStroke: stroke ? `1.5px ${color || BGameday.ink}` : 'none',
          marginRight: 40,
          display: 'inline-block',
        }}>
          {item}
          <span style={{ color: BGameday.accent, margin: '0 24px' }}>✦</span>
        </span>
      )))}
    </div>
  </div>
);

const BHero = () => (
  <section style={{ background: BGameday.bg, color: BGameday.ink, position: 'relative', overflow: 'hidden', paddingBottom: 60 }}>
    {/* Top marquee */}
    <div style={{ padding: '24px 0 0', borderBottom: `1px solid ${BGameday.line}`, paddingBottom: 20 }}>
      <Marquee items={['NO FEES', 'FAN TO FAN', 'BUILT DIFFERENT', 'LAUNCHING WITH THE RAIDERS']} size={18} speed={60} color={BGameday.ink2}/>
    </div>

    <div className="container" style={{ paddingTop: 40, paddingBottom: 20, position: 'relative' }}>
      {/* Metadata row above headline */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: BGameday.ink3, letterSpacing: '0.1em', textTransform: 'uppercase',
        marginBottom: 40,
      }}>
        <span>[ EST. 2025 / LAS VEGAS ]</span>
        <span>EDITION Nº 001 — THE FAN ISSUE</span>
        <span>FOR FANS • BY FANS</span>
      </div>

      {/* Massive headline */}
      <div style={{ position: 'relative' }}>
        <h1 style={{ ...displayStyle, fontSize: 'clamp(80px, 14vw, 220px)', margin: 0, color: BGameday.ink }}>
          Join for<br/>
          the tickets.<br/>
          <span style={{ color: BGameday.accent }}>Stay for</span><br/>
          <span style={{
            color: 'transparent',
            WebkitTextStroke: `2px ${BGameday.ink}`,
          }}>the fans.</span>
        </h1>
      </div>

      {/* Bottom info row */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 40,
        paddingTop: 40, marginTop: 40,
        borderTop: `1px solid ${BGameday.line}`,
      }}>
        <div>
          <div style={{ fontSize: 18, lineHeight: 1.45, color: BGameday.ink, maxWidth: 460 }}>
            The fan-to-fan marketplace. No buyer fees. Ever. Stripe-verified
            sellers. Team Hubs where your people hang. Built by a season ticket
            holder who got tired of the $80 "convenience" charge.
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
            <a href="#" style={{
              padding: '16px 24px', background: BGameday.accent, color: '#fff',
              fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
              fontSize: 13, textDecoration: 'none',
            }}>App Store ▸</a>
            <a href="#" style={{
              padding: '16px 24px', background: 'transparent', color: BGameday.ink,
              fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
              fontSize: 13, textDecoration: 'none', border: `1px solid ${BGameday.ink}`,
            }}>Google Play ▸</a>
          </div>
        </div>

        {[
          { n: '0%', l: 'Buyer fees' },
          { n: '100%', l: 'Verified fans' },
        ].map(s => (
          <div key={s.l} style={{ borderLeft: `1px solid ${BGameday.line}`, paddingLeft: 24 }}>
            <div style={{ ...displayStyle, fontSize: 72, color: BGameday.accent2, lineHeight: 0.9 }}>{s.n}</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: BGameday.ink2, letterSpacing: '0.1em', textTransform: 'uppercase',
              marginTop: 8,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>

    {/* Big marquee strip */}
    <div style={{ paddingTop: 24, borderTop: `1px solid ${BGameday.line}`, paddingBottom: 20 }}>
      <Marquee items={['RAIDERS', 'DODGERS', 'GOLDEN KNIGHTS', 'ACES', 'ATHLETICS']} size={120} stroke color={BGameday.ink}/>
    </div>
  </section>
);

// Ticket stub style "no fees" comparison
const BNoFees = () => {
  const price = 180;
  return (
    <section style={{ background: BGameday.bg, color: BGameday.ink, padding: '100px 0', borderTop: `1px solid ${BGameday.line}` }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: BGameday.accent, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>
              ⟶ The math
            </div>
            <h2 style={{ ...displayStyle, fontSize: 'clamp(54px, 8vw, 120px)', margin: 0 }}>
              What you<br/>
              see is what<br/>
              <span style={{ color: BGameday.accent }}>you pay.</span>
            </h2>
            <div style={{ fontSize: 17, color: BGameday.ink2, marginTop: 24, maxWidth: 460, lineHeight: 1.5 }}>
              Others tack on 20-30% in fees. We add $0.
              Sellers keep more. Buyers pay sticker.
            </div>
          </div>

          {/* Ticket stubs */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { name: 'Other Platforms', listed: price, fees: 45.80, total: 225.80, red: true },
              { name: 'SeatConnect', listed: price, fees: 0, total: 180, red: false },
            ].map(p => (
              <div key={p.name} style={{
                background: p.red ? '#1a0808' : '#0A2510',
                border: `1px solid ${p.red ? '#4a1d1d' : '#1d4a2a'}`,
                padding: '26px 28px',
                position: 'relative',
                borderLeft: `4px solid ${p.red ? '#d9463b' : BGameday.accent2}`,
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  color: p.red ? '#d9463b' : BGameday.accent2,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                }}>{p.name}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 10 }}>
                  <div style={{ fontSize: 13, color: BGameday.ink2 }}>Ticket listed</div>
                  <div style={{ fontSize: 16, fontWeight: 600 }}>${p.listed.toFixed(2)}</div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 6 }}>
                  <div style={{ fontSize: 13, color: BGameday.ink2 }}>Fees & "service"</div>
                  <div style={{ fontSize: 16, fontWeight: 600, color: p.red ? '#d9463b' : BGameday.accent2 }}>
                    {p.fees > 0 ? `+$${p.fees.toFixed(2)}` : '$0.00'}
                  </div>
                </div>
                <div style={{ height: 1, background: BGameday.line, margin: '14px 0', borderTop: `1px dashed ${BGameday.line}`, borderBottom: 'none' }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ ...displayStyle, fontSize: 22 }}>You pay</div>
                  <div style={{ ...displayStyle, fontSize: 36, color: p.red ? '#d9463b' : BGameday.accent2 }}>
                    ${p.total.toFixed(2)}
                  </div>
                </div>
              </div>
            ))}
            <div style={{
              textAlign: 'center', padding: '14px',
              background: BGameday.accent, color: '#fff',
              fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 13,
            }}>You save $45.80 per ticket ▸</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// How it works — huge numbered editorial blocks
const BHowItWorks = () => (
  <section style={{ background: BGameday.bg2, color: BGameday.ink, padding: '100px 0', borderTop: `1px solid ${BGameday.line}` }}>
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60 }}>
        <h2 style={{ ...displayStyle, fontSize: 'clamp(48px, 7vw, 100px)', margin: 0 }}>
          How it works
        </h2>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: BGameday.ink2, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          03 STEPS — NO BULLSHIT
        </div>
      </div>

      {[
        { n: '01', t: 'Find your seats', d: 'Browse by team, section, or by the fans in them. Every listing comes from a verified human — often a season ticket holder.', side: 'SEARCH' },
        { n: '02', t: 'Chat, then buy', d: 'Message the seller before you commit. Negotiate. Ask if they\'re tailgating. Buy Now or Make an Offer — your call.', side: 'CONNECT' },
        { n: '03', t: 'Show up, meet people', d: 'Tickets drop straight into your wallet. See who else in your section is on the app. Make friends or don\'t — up to you.', side: 'GAMEDAY' },
      ].map((s, i) => (
        <div key={s.n} style={{
          display: 'grid', gridTemplateColumns: '180px 1fr 300px', gap: 40,
          padding: '40px 0',
          borderTop: `1px solid ${BGameday.line}`,
          alignItems: 'flex-start',
        }}>
          <div style={{ ...displayStyle, fontSize: 120, color: BGameday.accent, lineHeight: 0.85 }}>{s.n}</div>
          <div>
            <div style={{ ...displayStyle, fontSize: 56, marginBottom: 12, color: BGameday.ink }}>{s.t}</div>
            <div style={{ fontSize: 17, color: BGameday.ink2, lineHeight: 1.5, maxWidth: 560 }}>{s.d}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ ...displayStyle, fontSize: 24, color: 'transparent', WebkitTextStroke: `1px ${BGameday.ink3}` }}>
              {s.side}
            </div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

// Fan cards — treat as trading cards in a shop window
const BFanCards = () => (
  <section style={{ background: BGameday.bg, color: BGameday.ink, padding: '100px 0 60px', borderTop: `1px solid ${BGameday.line}`, overflow: 'hidden' }}>
    <div className="container">
      <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 50 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: BGameday.accent, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>
            ⟶ Fan Cards
          </div>
          <h2 style={{ ...displayStyle, fontSize: 'clamp(54px, 8vw, 120px)', margin: 0 }}>
            Show your<br/>
            <span style={{ color: BGameday.accent }}>colors.</span>
          </h2>
        </div>
        <div style={{ fontSize: 16, color: BGameday.ink2, lineHeight: 1.5, maxWidth: 460 }}>
          Optional, free, and stackable. One Fan Card per team you root for.
          Each one unlocks that Team Hub and the fan-gated listings inside.
          Your people, your people only.
        </div>
      </div>
    </div>

    {/* Scrolling cards row */}
    <div style={{ display: 'flex', gap: 20, padding: '20px 40px', overflowX: 'auto', scrollbarWidth: 'none' }}>
      {[
        { team: 'RAIDERS', teamColor: '#000', teamEmoji: '🏴‍☠️', avatarColor: '#A5ACAF', avatarInk: '#000', initials: 'MC', city: 'Henderson, NV', since: '2018', badges: ['📍 My Section', '🍔 Stadium Foodie'] },
        { team: 'DODGERS', teamColor: '#005A9C', teamEmoji: '⚾', avatarColor: '#EF3E42', avatarInk: '#fff', initials: 'MC', city: 'Henderson, NV', since: '2015', badges: ['🎉 Meet Ups', '🍻 Tailgate'] },
        { team: 'GOLDEN KNIGHTS', teamColor: '#B4975A', teamEmoji: '⚔️', avatarColor: '#333F42', avatarInk: '#fff', initials: 'MC', city: 'Henderson, NV', since: '2017', badges: ['🔥 Die Hard'] },
        { team: 'ATHLETICS', teamColor: '#003831', teamEmoji: '🟢', avatarColor: '#EFB21E', avatarInk: '#000', initials: 'MC', city: 'Henderson, NV', since: '2022', badges: ['✈️ Away Games'] },
        { team: 'ACES', teamColor: '#ED1C24', teamEmoji: '🏀', avatarColor: '#000', avatarInk: '#fff', initials: 'MC', city: 'Henderson, NV', since: '2023', badges: ['🎟️ Season'] },
      ].map((c, i) => (
        <div key={i} style={{ flex: '0 0 auto' }}>
          <MiniFanCard {...c} width={240}/>
        </div>
      ))}
    </div>

    <div className="container" style={{ marginTop: 40 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, paddingTop: 30, borderTop: `1px solid ${BGameday.line}` }}>
        {[
          ['Optional', 'Collect cards only for teams you love. No minimum, no pressure.'],
          ['Unlocks Hubs', 'Your card gets you into that team\'s live community. Fans only.'],
          ['Fan-gated tickets', 'Sellers can lock listings to their own fanbase. Real fans get real seats.'],
        ].map(([t, d]) => (
          <div key={t}>
            <div style={{ ...displayStyle, fontSize: 28, marginBottom: 10, color: BGameday.accent2 }}>{t}</div>
            <div style={{ fontSize: 15, color: BGameday.ink2, lineHeight: 1.5 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Team Hubs — concert poster style
const BTeamHubs = () => (
  <section style={{ background: BGameday.bg2, color: BGameday.ink, padding: '100px 0', borderTop: `1px solid ${BGameday.line}` }}>
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto 60px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: BGameday.accent, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>
          ⟶ Team Hubs
        </div>
        <h2 style={{ ...displayStyle, fontSize: 'clamp(64px, 10vw, 160px)', margin: 0 }}>
          365 days<br/>
          of <span style={{ color: BGameday.accent }}>gameday.</span>
        </h2>
      </div>

      <div style={{
        background: BGameday.bg,
        border: `1px solid ${BGameday.line}`,
        display: 'grid', gridTemplateColumns: '1fr 1fr',
      }}>
        {/* LEFT: feed */}
        <div style={{ padding: 36, borderRight: `1px solid ${BGameday.line}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24, paddingBottom: 16, borderBottom: `1px solid ${BGameday.line}` }}>
            <div style={{ width: 40, height: 40, background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🏴‍☠️</div>
            <div>
              <div style={{ ...displayStyle, fontSize: 22 }}>RAIDERS HUB</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: BGameday.ink2, letterSpacing: '0.1em', textTransform: 'uppercase' }}>12,847 FANS • LIVE</div>
            </div>
          </div>

          {[
            { n: 'Marcus J.', h: '2m', t: 'Pre-game at Sporting House @ 10. Who\'s in?' },
            { n: 'Priya K.', h: '18m', t: 'Sec 138 row 12 been CRAZY loud lately. Welcome to the family 🔥' },
            { n: 'Devon T.', h: '1h', t: 'Dropping 4 tickets to Chargers game — fan-only.' },
            { n: 'Alex C.', h: '2h', t: 'Took my dad to his first game yesterday. Worth every penny ✨' },
          ].map(m => (
            <div key={m.n} style={{ padding: '14px 0', borderBottom: `1px solid ${BGameday.line}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{m.n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: BGameday.ink3 }}>{m.h}</div>
              </div>
              <div style={{ fontSize: 14, color: BGameday.ink2, lineHeight: 1.5 }}>{m.t}</div>
            </div>
          ))}
        </div>

        {/* RIGHT: stats */}
        <div style={{ padding: 36, display: 'flex', flexDirection: 'column', gap: 30 }}>
          {[
            { n: '12.8K', l: 'Raiders fans in hub', s: 'Active weekly' },
            { n: '+847', l: 'Posts this week', s: 'Gameday + tickets + chat' },
            { n: '1,240', l: 'Listings inside', s: 'Many fan-gated to members' },
          ].map(s => (
            <div key={s.l} style={{ borderLeft: `3px solid ${BGameday.accent}`, paddingLeft: 20 }}>
              <div style={{ ...displayStyle, fontSize: 72, color: BGameday.ink, lineHeight: 0.9 }}>{s.n}</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: BGameday.ink, marginTop: 8 }}>{s.l}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: BGameday.ink3, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// Trust — lowkey, factual, stamped
const BTrust = () => (
  <section style={{ background: BGameday.bg, color: BGameday.ink, padding: '100px 0', borderTop: `1px solid ${BGameday.line}` }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: BGameday.accent, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>
            ⟶ Trust
          </div>
          <h2 style={{ ...displayStyle, fontSize: 'clamp(40px, 5vw, 80px)', margin: 0 }}>
            No bots.<br/>
            No scalpers.<br/>
            No bullshit.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: `1px solid ${BGameday.line}` }}>
          {[
            ['Stripe verified', 'ID checks before listing or buying. Payments secured by Stripe.'],
            ['Two-way ratings', 'Every buyer and seller gets rated. Reputation follows you.'],
            ['Verified fans only', 'Season members, direct sellers, verified resellers. No scalper farms.'],
            ['Direct chat', 'Talk to the person before you buy. No middlemen.'],
          ].map(([t, d], i) => (
            <div key={t} style={{
              padding: 28,
              borderRight: i % 2 === 0 ? `1px solid ${BGameday.line}` : 'none',
              borderBottom: i < 2 ? `1px solid ${BGameday.line}` : 'none',
            }}>
              <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: BGameday.ink3, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                Nº 0{i + 1}
              </div>
              <div style={{ ...displayStyle, fontSize: 30, marginTop: 8 }}>{t}</div>
              <div style={{ fontSize: 14, color: BGameday.ink2, marginTop: 10, lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const BDownloadCTA = () => (
  <section style={{ background: BGameday.accent, color: '#fff', padding: '120px 0 60px', position: 'relative', overflow: 'hidden' }}>
    <div className="container" style={{ textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>
        ⟶ Get the app
      </div>
      <h2 style={{ ...displayStyle, fontSize: 'clamp(72px, 12vw, 200px)', margin: 0, color: '#fff' }}>
        Join the<br/>
        <span style={{ color: '#000' }}>movement.</span>
      </h2>
      <div style={{ fontSize: 18, maxWidth: 540, margin: '28px auto 0', lineHeight: 1.5 }}>
        Launching with the Raiders at Allegiant. More teams every month. Be
        the first in line.
      </div>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36 }}>
        <a href="#" style={{
          padding: '18px 32px', background: '#000', color: '#fff',
          fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
          fontSize: 14, textDecoration: 'none',
        }}>App Store ▸</a>
        <a href="#" style={{
          padding: '18px 32px', background: '#fff', color: '#000',
          fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
          fontSize: 14, textDecoration: 'none',
        }}>Google Play ▸</a>
      </div>
    </div>

    {/* Bottom marquee */}
    <div style={{ marginTop: 80 }}>
      <Marquee items={['SEATCONNECT', 'FAN TO FAN', 'NO FEES', 'BUILT DIFFERENT']} size={140} stroke color="#000"/>
    </div>
  </section>
);

const BFooter = () => (
  <footer style={{ background: BGameday.bg, color: BGameday.ink2, padding: '60px 0 40px', borderTop: `1px solid ${BGameday.line}` }}>
    <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={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: BGameday.ink3 }}>
          © 2026 — For fans, by fans
        </div>
      </div>
      <div style={{ display: 'flex', gap: 24 }}>
        {['Privacy', 'Terms', 'Contact', 'Instagram', 'X'].map(l => (
          <a key={l} href="#" style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
            color: BGameday.ink2, textDecoration: 'none',
          }}>{l}</a>
        ))}
      </div>
    </div>
  </footer>
);

const VersionBGameday = () => (
  <div style={{ background: BGameday.bg, color: BGameday.ink, minHeight: '100vh' }} data-mode="dark">
    <style>{`
      @keyframes marquee-l { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
      @keyframes marquee-r { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
    `}</style>
    <BNav />
    <BHero />
    <BNoFees />
    <BHowItWorks />
    <BFanCards />
    <BTeamHubs />
    <BTrust />
    <BDownloadCTA />
    <BFooter />
  </div>
);

Object.assign(window, { VersionBGameday });