// Hero — bold matchday-programme energy with team photo
const Hero = ({ setPage }) => {
  // Countdown to Sat 02 May 2026 15:00
  const target = new Date('2026-05-02T15:00:00').getTime();
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);

  return (
    <section style={{ position: 'relative', background: 'var(--ink)', color: '#fff', overflow: 'hidden' }}>
      {/* Background photo */}
      <div data-hero-bg style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/team-hero.png)',
        backgroundSize: 'cover', backgroundPosition: 'center 30%',
        filter: 'saturate(1.05)',
      }} />
      {/* Layered gradients */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(14,15,18,0.55) 0%, rgba(14,15,18,0.2) 35%, rgba(14,15,18,0.85) 85%, var(--ink) 100%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(14,15,18,0.85) 0%, rgba(14,15,18,0.2) 50%, rgba(14,15,18,0.6) 100%)',
      }} />
      {/* Diagonal red wedge */}
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: '38%',
        background: 'linear-gradient(120deg, var(--red) 0%, rgba(200,16,46,0.0) 100%)',
        mixBlendMode: 'multiply', opacity: 0.5,
      }} />

      <div className="container" data-hero-container style={{ position: 'relative', padding: '64px 28px 0', minHeight: 720 }}>
        {/* Top meta strip */}
        <div style={{
          display: 'flex', gap: 12, alignItems: 'center', marginBottom: 28,
        }}>
          <Chip tone="red">Next Match · NWCFL Premier</Chip>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.7)' }}>
            SAT 02 MAY · 15:00 KO · AFC FYLDE MILL FARM
          </span>
        </div>

        {/* Main display */}
        <h1 className="display" style={{
          fontSize: 'clamp(48px, 11vw, 188px)', margin: 0, color: '#fff',
          textTransform: 'uppercase', maxWidth: 1100,
        }}>
          Wrens<br />
          <span style={{ color: 'var(--red)' }}>fly higher</span><br />
          this season.
        </h1>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, marginTop: 32,
          alignItems: 'end',
        }}>
          <div>
            <p style={{
              fontSize: 18, lineHeight: 1.55, maxWidth: 540, color: 'rgba(255,255,255,0.85)',
              fontWeight: 400, margin: 0,
            }}>
              A proper Lancashire football club. Men's, women's and twelve junior teams playing out of the Fylde coast — built by volunteers, backed by the community, ninety years and counting.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <Btn variant="primary" size="lg" onClick={() => setPage('fixtures')}>Fixtures &amp; Results</Btn>
              <Btn variant="outlineLight" size="lg" onClick={() => setPage('community')}>Join the Club</Btn>
            </div>
          </div>

          {/* Next match card */}
          <div data-hero-card style={{
            background: 'rgba(14,15,18,0.85)',
            backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255,255,255,0.12)',
            padding: 0,
          }}>
            <div style={{
              padding: '14px 22px', borderBottom: '1px solid rgba(255,255,255,0.12)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
                ● NEXT FIXTURE — MEN'S 1ST
              </span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.6)' }}>
                NWCFL PREMIER
              </span>
            </div>
            <div style={{ padding: '24px 22px' }}>
              <div data-hero-card-teams style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 16, alignItems: 'center', marginBottom: 18 }}>
                <div style={{ textAlign: 'center' }}>
                  <img src="assets/logo.jpg" alt="" style={{ width: 56, height: 56, margin: '0 auto', objectFit: 'cover' }} />
                  <div className="display" style={{ fontSize: 18, marginTop: 8, lineHeight: 1.05 }}>WREN<br />ROVERS</div>
                  <div className="mono" style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', marginTop: 4, letterSpacing: '0.18em' }}>HOME</div>
                </div>
                <div className="display" style={{ fontSize: 28, color: 'rgba(255,255,255,0.4)' }}>VS</div>
                <div style={{ textAlign: 'center' }}>
                  <TextBadge initials="CR" color="#fff" invert={false} />
                  <div className="display" style={{ fontSize: 18, marginTop: 8, lineHeight: 1.05 }}>CHARNOCK<br />RICHARD</div>
                  <div className="mono" style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', marginTop: 4, letterSpacing: '0.18em' }}>AWAY</div>
                </div>
              </div>

              {/* Countdown */}
              <div data-hero-card-countdown style={{
                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6,
                borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 16,
              }}>
                {[['DAYS', d], ['HRS', h], ['MIN', m], ['SEC', s]].map(([k, v]) => (
                  <div key={k} style={{ textAlign: 'center' }}>
                    <div className="display" style={{ fontSize: 32, color: '#fff' }}>{String(v).padStart(2, '0')}</div>
                    <div className="mono" style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.22em' }}>{k}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
                <Btn variant="primary" size="sm">Match Preview</Btn>
                <Btn variant="outlineLight" size="sm" icon={false}>Add to Calendar</Btn>
              </div>
            </div>
          </div>
        </div>

        {/* Stat strip */}
        <div style={{
          marginTop: 64, marginBottom: 0, display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
          background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.12)',
        }}>
          {[
            { k: 'LEAGUE POSITION', v: '3rd', sub: 'NWCFL Premier' },
            { k: 'POINTS', v: '71', sub: 'from 38 played' },
            { k: 'TEAMS', v: '14', sub: '1st, women + 12 juniors' },
            { k: 'MEMBERS', v: '240+', sub: 'players & volunteers' },
          ].map((x, i) => (
            <div key={i} data-hero-stat style={{ background: 'var(--ink)', padding: '20px 22px' }}>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)' }}>{x.k}</div>
              <div className="display" style={{ fontSize: 44, color: '#fff', marginTop: 4 }}>{x.v}</div>
              <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{x.sub}</div>
            </div>
          ))}
        </div>
      </div>
      <StripeRule height={6} />
    </section>
  );
};

Object.assign(window, { Hero });