// Hero — matchday-programme energy with team photo + live league stats.
const Hero = ({ setPage, league }) => {
  const wrens = league && league.wrens;
  const topScorers = (league && league.topScorers) || [];
  const wrensScorers = topScorers.filter(s => /Wren|wren/.test(s.team || '')); // team field not populated by Pitchero — fallback below
  const topScorer = wrensScorers[0] || topScorers[0] || null;

  const ord = (n) => {
    if (!n) return '';
    const s = ['th', 'st', 'nd', 'rd'];
    const v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
  };

  const stats = [
    {
      k: 'LEAGUE POSITION',
      v: wrens ? ord(wrens.position) : '—',
      sub: 'West Lancs Premier',
    },
    {
      k: 'POINTS',
      v: wrens ? wrens.points : '—',
      sub: wrens ? `from ${wrens.played} played` : '',
    },
    {
      k: 'GOALS FOR',
      v: wrens ? wrens.goalsFor : '—',
      sub: wrens ? `${wrens.goalDifference > 0 ? '+' : ''}${wrens.goalDifference} difference` : '',
    },
    {
      k: 'TEAMS',
      v: '14',
      sub: '1st, women + 12 juniors',
    },
  ];

  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: 560 }}>
        {/* Top meta strip */}
        <div style={{
          display: 'flex', gap: 12, alignItems: 'center', marginBottom: 28, flexWrap: 'wrap',
        }}>
          <Chip tone="red">West Lancs Premier · 2025/26</Chip>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.7)' }}>
            EST. 1936 · BREWS PARK, BLACKPOOL
          </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={{ marginTop: 32, maxWidth: 720 }}>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)',
            fontWeight: 400, margin: 0,
          }}>
            A proper Lancashire football club playing out of Brews Park, Blackpool. Men's, women's and junior teams — 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('community')}>Join the Club</Btn>
            <Btn variant="outlineLight" size="lg" onClick={() => setPage('sponsors')}>Sponsor Us</Btn>
          </div>
        </div>

        {/* Stat strip — live from the WLL scrape */}
        <div style={{
          marginTop: 64, display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
          background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.12)',
        }}>
          {stats.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 });