/* Home page — mobile-first, dynamic & sporty.
   Sections: Ticker (from app shell), Hero, Next Up spotlight, Open Matches strip,
             How it works, Rules, Big CTA. */

function HomeHero({ onCTA }) {
  const openCount = MATCHES.filter(m => m.status === 'OPEN').length;
  return (
    <section style={{ position: 'relative', background: '#fff', overflow: 'hidden' }}>
      {/* Giant starburst echo */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: '-25%', top: '-15%', width: 620, height: 620, opacity: 0.18, pointerEvents: 'none',
      }}>
        <svg viewBox="0 0 200 200" width="100%" height="100%">
          {Array.from({ length: 14 }).map((_, i) => {
            const deg = (i * 360) / 14 + (i % 2 === 0 ? 0 : 6);
            const r = i % 2 === 0 ? 90 : 64;
            const w = i % 2 === 0 ? 12 : 8;
            const rad = (deg * Math.PI) / 180;
            const x2 = 100 + Math.cos(rad) * r;
            const y2 = 100 + Math.sin(rad) * r;
            return <line key={i} x1="100" y1="100" x2={x2} y2={y2} stroke="var(--orange)" strokeWidth={w} strokeLinecap="round" />;
          })}
          <circle cx="100" cy="100" r="22" fill="var(--orange)" />
        </svg>
      </div>

      {/* Diagonal orange stripe top */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: -40, top: 0, height: 8, width: '70%',
        background: 'var(--orange)', transform: 'skewX(-12deg)',
      }} />

      {/* Dot grid texture */}
      <div aria-hidden="true" className="dot-grid" style={{
        position: 'absolute', inset: 0, opacity: 0.45, pointerEvents: 'none',
      }} />

      <div className="hero-grid" style={{
        position: 'relative', maxWidth: 1200, margin: '0 auto',
        padding: 'clamp(24px, 5vw, 40px) clamp(16px, 4vw, 22px) clamp(32px, 7vw, 64px)',
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 0.85fr)', gap: 'clamp(24px, 5vw, 56px)', alignItems: 'center',
      }}>
        {/* Copy */}
        <div className="slide-up">
          <div className="skew-tag" style={{
            background: 'var(--ink)', color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 18px', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
          }}>
            <span className="skew-tag-inner" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <span className="pulse-dot" style={{ width: 8, height: 8, background: 'var(--orange)', borderRadius: '50%' }} />
              World Cup 2026 · Campaign live
            </span>
          </div>

          <h1 className="font-display hero-title" style={{
            fontSize: 'clamp(32px, 9vw, 88px)', lineHeight: 0.96, margin: 'clamp(12px, 3vw, 20px) 0 clamp(14px, 3vw, 22px)',
            letterSpacing: '-0.02em',
          }}>
            Every receipt is your{' '}
            <span style={{ position: 'relative', whiteSpace: 'nowrap' }}>
              <span style={{
                position: 'absolute', left: -4, right: -4, bottom: '7%', height: '38%',
                background: 'var(--orange)', opacity: 0.9, zIndex: 0, transform: 'skewX(-6deg)',
              }} />
              <span style={{ position: 'relative', color: 'var(--ink)', zIndex: 1 }}>free ticket</span>
            </span>{' '}
            to win.
          </h1>

          <p style={{ color: 'var(--grey-700)', fontSize: 'clamp(15px, 2.4vw, 18px)', maxWidth: 560, lineHeight: 1.55 }}>
            Shop at any SunFront outlet, predict the match winner, and lock yourself into the lucky draw
            for prizes after every game of the World Cup 2026.
          </p>

          {/* live counters */}
          <div style={{ display: 'flex', gap: 16, marginTop: 18, flexWrap: 'wrap' }}>
            <MiniStat label="Open right now" value={String(openCount).padStart(2,'0')} accent="var(--success)" pulse />
            <MiniStat label="Predictions today" value={<AnimatedCounter value={632} />} />
            <MiniStat label="Outlets" value="04" />
          </div>

          <div style={{ display: 'flex', gap: 14, marginTop: 28, flexWrap: 'wrap' }}>
            <button
              onClick={() => onCTA('predict')}
              className="font-display btn-press"
              style={{
                background: 'var(--orange)', color: '#fff', border: 'none',
                borderRadius: 6,
                padding: '18px 26px', fontSize: 15, letterSpacing: '0.06em',
                boxShadow: '0 4px 16px rgba(241,86,35,0.30)',
                display: 'inline-flex', alignItems: 'center', gap: 10,
                textTransform: 'uppercase',
              }}>
              Predict now
              <Icon name="arrow" size={18} />
            </button>
            <button
              onClick={() => onCTA('dashboard')}
              className="font-display btn-press-ink"
              style={{
                background: '#fff', color: 'var(--ink)', border: '1.5px solid var(--ink)',
                borderRadius: 6,
                padding: '16px 26px', fontSize: 15, letterSpacing: '0.06em', textTransform: 'uppercase',
                boxShadow: 'none',
              }}>
              Live stats
            </button>
          </div>

          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 12, fontSize: 13, color: 'var(--grey-600)' }}>
            <Icon name="bolt" size={14} color="var(--orange)" />
            <span>Predictions open <strong style={{ color: 'var(--ink)' }}>24 h</strong> before kickoff · close at first whistle.</span>
          </div>
        </div>

        {/* Ticket card */}
        <div className="hide-mobile">
          <TicketCard />
        </div>
      </div>
    </section>
  );
}

function MiniStat({ label, value, accent, pulse }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{
        fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700,
        color: 'var(--grey-500)', display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>
        {pulse && <span className="pulse-dot" style={{ width: 6, height: 6, background: accent || 'var(--orange)', borderRadius: '50%' }} />}
        {label}
      </div>
      <div className="font-display" style={{ fontSize: 28, lineHeight: 1, color: accent || 'var(--ink)' }}>{value}</div>
    </div>
  );
}

function TicketCard() {
  return (
    <div className="floaty" style={{
      position: 'relative',
      transform: 'rotate(-1.5deg)',
      maxWidth: 380, justifySelf: 'end', width: '100%',
    }}>
      <div className="clip-stub" style={{
        background: '#fff',
        border: '2px solid var(--ink)',
        padding: 0,
        boxShadow: '10px 10px 0 0 var(--ink)',
      }}>
        <div style={{
          background: 'var(--ink)', color: '#fff', padding: '14px 22px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700,
        }}>
          <span style={{ color: 'var(--orange)' }}>Match day pass</span>
          <span className="font-mono" style={{ color: '#d4d4d8' }}>#WC-2026</span>
        </div>
        <div className="stripes-bg" style={{ height: 10 }} />
        <div style={{ padding: '22px 22px 16px' }}>
          <div className="font-display" style={{ fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.01em' }}>
            FIFA World Cup<br />
            <span style={{ color: 'var(--orange)' }}>2026</span>
          </div>
          <div style={{
            marginTop: 8, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--grey-600)', fontWeight: 600,
          }}>
            USA · Canada · Mexico
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 18 }}>
            <Stat label="Outlets" value="04" />
            <Stat label="Matches" value="104" />
          </div>
          <div style={{
            margin: '20px -22px 0', borderTop: '2px dashed var(--grey-300)', position: 'relative',
          }}>
            <span style={{ position: 'absolute', left: -8, top: -10, width: 18, height: 18, background: '#fafafa', borderRadius: '50%' }} />
            <span style={{ position: 'absolute', right: -8, top: -10, width: 18, height: 18, background: '#fafafa', borderRadius: '50%' }} />
          </div>
          <div style={{ paddingTop: 14, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--grey-500)', fontWeight: 600 }}>
            Brought to you by <span style={{ color: 'var(--ink)' }}>SunFront</span> · Quality &amp; Style
          </div>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div style={{ border: '1.5px solid var(--ink)', padding: '10px 12px' }}>
      <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--grey-600)' }}>{label}</div>
      <div className="font-display" style={{ fontSize: 28, lineHeight: 1, marginTop: 4 }}>{value}</div>
    </div>
  );
}

/* ---------- Next-up spotlight ---------- */
function NextUpSpotlight({ onCTA }) {
  // Pick the next OPEN match (closest kickoff); if none, the next SCHEDULED.
  const candidate = useMemo(() => {
    const live = [...MATCHES].filter(m => m.status === 'OPEN').sort((a,b) => a.kickoffMs - b.kickoffMs)[0];
    if (live) return live;
    return [...MATCHES].filter(m => m.status === 'SCHEDULED').sort((a,b) => a.kickoffMs - b.kickoffMs)[0];
  }, []);
  if (!candidate) return null;

  return (
    <section style={{ background: 'var(--ink)', color: '#fff', padding: '48px 0', position: 'relative', overflow: 'hidden' }}>
      {/* diagonal stripe */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: -60, top: -10, width: 320, height: 10,
        background: 'var(--orange)', transform: 'skewX(-12deg)',
      }} />
      <div aria-hidden="true" className="stripes-bg" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 10, opacity: 0.95,
      }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 22px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <Eyebrow color="var(--orange)">Next up · Don't miss</Eyebrow>
          <div className="font-mono" style={{ fontSize: 11, color: 'var(--grey-400)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            {candidate.stage}
          </div>
        </div>

        <div style={{
          marginTop: 18,
          display: 'grid', gridTemplateColumns: '1fr', gap: 26, alignItems: 'center',
        }} className="spotlight-grid">
          {/* Matchup */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, justifyContent: 'space-between' }}>
            <SpotTeam team={candidate.teamA} />
            <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <VSHex size={56} />
              <div className="font-mono" style={{ fontSize: 11, color: 'var(--grey-400)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                Kickoff
              </div>
            </div>
            <SpotTeam team={candidate.teamB} align="right" />
          </div>

          {/* Countdown row */}
          <div style={{ display: 'grid', gap: 14 }}>
            <div className="font-mono" style={{ fontSize: 12, color: 'var(--grey-400)', letterSpacing: '0.18em', textTransform: 'uppercase', textAlign: 'center' }}>
              {candidate.status === 'OPEN' ? 'Predictions close in' : 'Opens for predictions in'}
            </div>
            <BigCountdown to={candidate.kickoffMs} />

            <button onClick={() => onCTA('predict')} className="font-display btn-press" style={{
              justifySelf: 'center',
              background: 'var(--orange)', color: '#fff', border: 'none',
              borderRadius: 6,
              padding: '16px 32px', fontSize: 15, letterSpacing: '0.06em', textTransform: 'uppercase',
              boxShadow: '0 4px 16px rgba(241,86,35,0.30)',
              display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 6,
            }}>
              {candidate.status === 'OPEN' ? 'Lock my pick' : 'See the bracket'}
              <Icon name="arrow" size={18} />
            </button>
          </div>
        </div>

        <div style={{ marginTop: 22, fontSize: 12.5, color: 'var(--grey-400)', textAlign: 'center', letterSpacing: '0.06em' }}>
          <Icon name="pin" size={12} color="var(--orange)" /> {candidate.venue}
        </div>
      </div>
    </section>
  );
}

function SpotTeam({ team, align = 'left' }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: align === 'right' ? 'flex-end' : 'flex-start',
      gap: 12, minWidth: 0, flex: 1,
    }}>
      <Flag code={team.flag} w={64} h={42} rounded={5} />
      <div className="font-display" style={{ fontSize: 'clamp(20px, 4.5vw, 32px)', lineHeight: 1, letterSpacing: '-0.01em', textAlign: align }}>
        {team.name}
      </div>
    </div>
  );
}

/* Big segmented countdown — D / H / M / S */
function BigCountdown({ to }) {
  const now = useNow(1000);
  const p = diffParts(to - now);
  const seg = (val, lbl) => (
    <div style={{
      background: '#fff', color: 'var(--ink)',
      border: '1.5px solid var(--orange)',
      borderRadius: 8,
      minWidth: 76, padding: '10px 8px 6px',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      boxShadow: '0 4px 12px rgba(241,86,35,0.15)',
    }}>
      <span className="font-display" style={{ fontSize: 'clamp(28px, 7vw, 44px)', lineHeight: 1, letterSpacing: '-0.02em' }}>{pad(val)}</span>
      <span style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--grey-600)', fontWeight: 700, marginTop: 4 }}>{lbl}</span>
    </div>
  );
  const colon = <span className="font-display" style={{ color: 'var(--orange)', fontSize: 28, alignSelf: 'center' }}>:</span>;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
      {p.d > 0 && <>{seg(p.d, 'Days')}{colon}</>}
      {seg(p.h, 'Hrs')}{colon}
      {seg(p.m, 'Min')}{colon}
      {seg(p.s, 'Sec')}
    </div>
  );
}

/* ---------- Open matches strip (horizontal scroll on mobile, grid on desktop) ---------- */
function OpenMatchesStrip({ onCTA }) {
  const open = MATCHES
    .filter(m => m.status === 'OPEN' || m.status === 'SCHEDULED')
    .sort((a,b) => a.kickoffMs - b.kickoffMs)
    .slice(0, 6);
  if (open.length === 0) return null;
  return (
    <section style={{ padding: '56px 0 40px', background: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 22px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 14, marginBottom: 22 }}>
          <div>
            <Eyebrow>The fixtures</Eyebrow>
            <h2 className="font-display" style={{ fontSize: 'clamp(28px, 5vw, 42px)', lineHeight: 1, margin: '12px 0 0', letterSpacing: '-0.02em' }}>
              Open for picks.
            </h2>
          </div>
          <button onClick={() => onCTA('predict')} className="font-display" style={{
            background: 'none', border: 'none', color: 'var(--ink)',
            fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer',
          }}>
            See all <Icon name="arrow" size={16} />
          </button>
        </div>

        <div className="open-matches">
          {open.map(m => <MatchMini key={m.id} match={m} onClick={() => onCTA('predict')} />)}
        </div>
      </div>
    </section>
  );
}

function MatchMini({ match, onClick }) {
  return (
    <button onClick={onClick} className="lift" style={{
      width: '100%', minWidth: 260, textAlign: 'left',
      background: '#fff', border: '1px solid var(--grey-200)',
      borderRadius: 10, overflow: 'hidden',
      padding: 0, cursor: 'pointer',
      boxShadow: '0 2px 10px rgba(17,6,24,0.06)',
    }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(241,86,35,0.18)'; e.currentTarget.style.borderColor = 'var(--orange)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 10px rgba(17,6,24,0.06)'; e.currentTarget.style.borderColor = 'var(--grey-200)'; }}
    >
      {/* status header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '10px 14px', borderBottom: '1px solid var(--grey-200)',
      }}>
        <StatusBadge status={match.status} size="sm" />
        <Countdown to={match.kickoffMs} tone="light" size="sm" prefix={match.status === 'OPEN' ? 'CLOSE' : 'OPEN'} />
      </div>
      {/* teams */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 8,
        padding: '18px 14px 14px',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <Flag code={match.teamA.flag} w={48} h={32} />
          <div className="font-display" style={{ fontSize: 14, textAlign: 'center' }}>{match.teamA.name}</div>
        </div>
        <VSHex size={32} />
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <Flag code={match.teamB.flag} w={48} h={32} />
          <div className="font-display" style={{ fontSize: 14, textAlign: 'center' }}>{match.teamB.name}</div>
        </div>
      </div>
      {/* foot */}
      <div style={{
        background: 'var(--grey-50)', padding: '8px 14px', fontSize: 11, color: 'var(--grey-600)',
        display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--grey-200)',
        letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600,
      }}>
        <span>{match.stage}</span>
        <span style={{ color: 'var(--orange)' }}>Pick →</span>
      </div>
    </button>
  );
}

/* ---------- How it works ---------- */
const STEPS = [
  { n: '01', t: 'Make a purchase',  icon: 'receipt', d: "Shop at any SunFront outlet. Keep the bill — that's your entry." },
  { n: '02', t: 'Tap the Viber link', icon: 'message', d: 'A Viber message with the prediction link arrives right after you pay.' },
  { n: '03', t: 'Pick the winner',  icon: 'target',  d: 'Choose any match opening in 24 hours. Pick a team — or a draw.' },
  { n: '04', t: 'Win prizes',       icon: 'trophy',  d: 'Right prediction? Your name enters the per-match lucky draw.' },
];

function HowItWorks() {
  return (
    <section style={{ background: '#fff', padding: '72px 0 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 22px' }}>
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>01 / Mechanics</Eyebrow>
            <h2 className="font-display" style={{ fontSize: 'clamp(28px, 5vw, 46px)', lineHeight: 1, margin: '14px 0 0', letterSpacing: '-0.02em' }}>
              Four moves to win big.
            </h2>
          </div>
          <p style={{ color: 'var(--grey-600)', maxWidth: 360, margin: 0, fontSize: 14 }}>
            Quick, clean and run from the receipt in your hand. No app, no signup.
          </p>
        </div>

        <div className="step-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 36,
        }}>
          {STEPS.map(s => <StepCard key={s.n} {...s} />)}
        </div>
      </div>
    </section>
  );
}

function StepCard({ n, t, icon, d }) {
  return (
    <div className="lift lift-hover" style={{
      position: 'relative',
      background: '#fff',
      border: '1px solid var(--grey-200)',
      borderRadius: 10,
      padding: '24px 20px 20px',
      boxShadow: '0 2px 10px rgba(17,6,24,0.06)',
      overflow: 'hidden',
    }}>
      <div className="clip-tri-tr font-display" style={{
        position: 'absolute', top: 0, right: 0, width: 76, height: 76, background: 'var(--orange)',
        color: '#fff', fontSize: 17, padding: 8, display: 'flex', justifyContent: 'flex-end',
      }}>
        {n}
      </div>
      <div style={{
        width: 52, height: 52, background: 'var(--ink)', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transform: 'rotate(-3deg)',
        marginBottom: 18,
      }}>
        <Icon name={icon} size={26} color="var(--orange)" stroke={2} />
      </div>
      <div className="font-display" style={{ fontSize: 18, letterSpacing: '-0.01em', marginBottom: 6 }}>{t}</div>
      <p style={{ color: 'var(--grey-600)', fontSize: 13.5, margin: 0, lineHeight: 1.5 }}>{d}</p>
    </div>
  );
}

/* ---------- Rules ---------- */
const RULES = [
  'Predictions open exactly 24 hours before kickoff and close the moment the match begins.',
  'One bill = one prediction per match. Use a fresh bill for each new game.',
  'Name, mobile, outlet and bill are required so we can contact you if you win.',
  'Customer details stay private. Live stats show only aggregated totals.',
];

function Rules() {
  return (
    <section style={{ background: 'var(--grey-50)', padding: '64px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 22px' }}>
        <Eyebrow>The rules</Eyebrow>
        <h2 className="font-display" style={{ fontSize: 'clamp(28px, 5vw, 46px)', lineHeight: 1, margin: '12px 0 28px', letterSpacing: '-0.02em' }}>
          Simple. Fair. Transparent.
        </h2>
        <div className="rules-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16,
        }}>
          {RULES.map((r, i) => <RuleCard key={i} i={i + 1} text={r} />)}
        </div>
      </div>
    </section>
  );
}

function RuleCard({ i, text }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--grey-200)',
      borderRadius: 10,
      padding: '20px 22px',
      display: 'flex', alignItems: 'flex-start', gap: 16,
      boxShadow: '0 2px 10px rgba(17,6,24,0.06)',
    }}>
      <div className="clip-paral font-display" style={{
        width: 60, height: 52, background: 'var(--orange)', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 20, flexShrink: 0,
      }}>
        {String(i).padStart(2, '0')}
      </div>
      <p style={{ margin: 0, color: 'var(--grey-700)', fontSize: 14.5, lineHeight: 1.55 }}>{text}</p>
    </div>
  );
}

/* ---------- Big bottom CTA ---------- */
function BigCTA({ onCTA }) {
  return (
    <section style={{ background: '#fff', padding: '40px 0 80px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 22px' }}>
        <div style={{
          position: 'relative', background: 'var(--orange)', color: '#fff',
          padding: '44px 28px', overflow: 'hidden',
          borderRadius: 12,
          boxShadow: '0 8px 32px rgba(17,6,24,0.12)',
        }}>
          <div className="dot-grid" aria-hidden="true" style={{
            position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 22 }}>
            <div style={{ maxWidth: 600 }}>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700, opacity: 0.9 }}>
                Got a SunFront receipt?
              </div>
              <div className="font-display" style={{ fontSize: 'clamp(26px, 5vw, 40px)', lineHeight: 1, marginTop: 8, letterSpacing: '-0.02em' }}>
                Make it count. Place your prediction.
              </div>
            </div>
            <button onClick={() => onCTA('predict')} className="font-display btn-press-ink" style={{
              background: 'var(--ink)', color: '#fff', border: 'none',
              borderRadius: 6,
              padding: '18px 26px', fontSize: 15, letterSpacing: '0.06em', textTransform: 'uppercase',
              boxShadow: '0 4px 16px rgba(17,6,24,0.28)',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              Predict now <Icon name="arrow" size={18} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Compose page ---------- */
function HomePage({ onNav }) {
  return (
    <main>
      <HomeHero onCTA={onNav} />
      <NextUpSpotlight onCTA={onNav} />
      <OpenMatchesStrip onCTA={onNav} />
      <HowItWorks />
      <Rules />
      <BigCTA onCTA={onNav} />
    </main>
  );
}

Object.assign(window, { HomePage });
