/* global React, NA_DATA, NASite */
const { useState, useMemo } = React;

// ============== HOMEPAGE ==============
function HomePage({ setPage, heroVariant }) {
  const { Photo, Stat, SquadCard, FixtureRow, Pill } = NASite;
  const { SQUADS, FIXTURES, SPONSORS, NEWS } = NA_DATA;

  const upcoming = FIXTURES.filter(f => f.status === 'upcoming').slice(0, 3);
  const recent = FIXTURES.filter(f => f.status === 'past').slice(0, 2);
  const nextFx = upcoming[0];
  const [expandedFx, setExpandedFx] = useState(null);

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <div className="eyebrow eyebrow-orange">Nottingham · Founded 2024</div>
              <h1 className="hero-display">
                One club.<br />
                <em>Eleven</em> teams.<br />
                <span className="accent">One standard</span>.
              </h1>
              <p className="hero-lede">
                Nottingham Athletic is a basketball club — and a community programme. Eleven teams from U12 to senior men, across National League, YBL and Local League. 250+ members. A schools arm reaching across the city. Basketball is where it starts — more to follow.
              </p>
              <div className="hero-cta">
                <button className="btn btn-accent btn-lg" onClick={() => setPage('contact')}>
                  Join the club
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" width="16" height="16">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                  </svg>
                </button>
                <button className="btn btn-soft btn-lg" onClick={() => setPage('teams')}>
                  See the teams
                </button>
              </div>
              <div className="hero-meta">
                <Stat label="Members" value="250+" sub="across the club" />
                <Stat label="Teams" value="11" sub="U12 → Senior" />
                <Stat label="In NBL" value="2" sub="Divisions 2 & 3" />
              </div>
            </div>

            {/* Hero RHS — cycles based on heroVariant */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {heroVariant === 'scoreboard' && (
                <>
                  <div className="scoreboard">
                    <div className="scoreboard-head">
                      <span><span className="live-dot"></span>Next fixture</span>
                      <span>Senior Men · NBL Div 3</span>
                    </div>
                    <div className="scoreboard-body">
                      <div className="team-side home">
                        <div className="team-meta">Home</div>
                        <div className="team-name">Nottingham<br />Athletic</div>
                      </div>
                      <div className="vs">vs</div>
                      <div className="team-side away" style={{ opacity: 0.55 }}>
                        <div className="team-meta">Opponent</div>
                        <div className="team-name" style={{ fontStyle: 'italic' }}>To be<br />confirmed</div>
                      </div>
                    </div>
                    <div className="scoreboard-foot">
                      <div><div className="lbl">Date</div><div className="val">TBC</div></div>
                      <div><div className="lbl">Tip-off</div><div className="val">TBC</div></div>
                      <div><div className="lbl">Venue</div><div className="val">TBC</div></div>
                    </div>
                  </div>
                  <Photo variant="photo-v3" tag="Senior Men · Melbourne Park"
                         style={{ aspectRatio: '16/10' }} />
                </>
              )}
              {heroVariant === 'photo' && (
                <>
                  <Photo variant="photo-v1" tag="Senior Men · Melbourne Park"
                         style={{ aspectRatio: '4/5', flex: 1 }} />
                </>
              )}
              {heroVariant === 'stats' && (
                <div className="card-deep" style={{ padding: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignContent: 'space-between', height: '100%' }}>
                  <Stat label="Sessions / week" value="11" sub="across all squads" />
                  <Stat label="Win rate" value="74%" sub="2025/26 season" />
                  <Stat label="University placements" value="6" sub="last 12 months" />
                  <Stat label="New trialists" value="38" sub="last open trials" />
                  <div style={{ gridColumn: '1 / -1', borderTop: '1px solid var(--line)', paddingTop: 16, fontSize: 13, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between' }}>
                    <span>Founded in Nottingham.</span>
                    <a onClick={() => setPage('about')} style={{ fontWeight: 600, color: 'var(--na-navy-600)' }}>About the club →</a>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE RIBBON */}
      <div className="ribbon">
        <div className="ribbon-track">
          {[...Array(2)].map((_, i) => (
            <React.Fragment key={i}>
              <span className="ribbon-item">Train hard <span className="sep"></span></span>
              <span className="ribbon-item">Travel far <span className="sep"></span></span>
              <span className="ribbon-item">Play for each other <span className="sep"></span></span>
              <span className="ribbon-item">National League · YBL · Local League · U12 <span className="sep"></span></span>
              <span className="ribbon-item">Nottingham Athletic <span className="sep"></span></span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* SQUADS */}
      <section className="section">
        <div className="wrap">
          <div className="flex jcs aic mb-6" style={{ flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">The squads</div>
              <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '8px 0 0' }}>
                Eleven teams. One badge.
              </h2>
            </div>
            <button className="btn btn-soft" onClick={() => setPage('teams')}>All teams →</button>
          </div>
          <div className="squads">
            {SQUADS.filter(s => ['senior','u23','u16-national','u14-national','u18-ybl','mens-ll','u12'].includes(s.id)).map(s => <SquadCard key={s.id} squad={s} onClick={() => setPage('teams')} />)}
          </div>
        </div>
      </section>

      {/* FIXTURES */}
      <section className="section section-deep">
        <div className="wrap">
          <div className="home-fixtures-row">
            <div>
              <div className="eyebrow">Upcoming</div>
              <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '8px 0 16px' }}>
                Next on the schedule.
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: '46ch', marginBottom: 24 }}>
                Fixtures across all our squads. Tap a row for venue, tip-off, and travel notes.
              </p>
              <button className="btn btn-primary" onClick={() => setPage('fixtures')}>Full schedule</button>
            </div>
            <div className="fixtures-table">
              {upcoming.length > 0 ? (
                upcoming.map(fx => (
                  <FixtureRow key={fx.id} fx={fx}
                              expanded={expandedFx === fx.id}
                              onToggle={() => setExpandedFx(expandedFx === fx.id ? null : fx.id)} />
                ))
              ) : (
                <div className="card card-pad" style={{ padding: 40, textAlign: 'center', color: 'var(--ink-soft)' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.01em', color: 'var(--ink)' }}>Schedule to be announced.</div>
                  <p style={{ fontSize: 14, margin: '8px 0 0', lineHeight: 1.5 }}>Fixtures will appear here as soon as the coaches publish them.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* DUAL ENTITY CTA */}
      <section className="section section-navy">
        <div className="wrap">
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 12 }}>One organisation · Two arms</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(36px, 5vw, 64px)', letterSpacing: '-0.02em', margin: '0 0 48px', lineHeight: 1, color: '#fff', maxWidth: '20ch' }}>
            Performance club. Community programme.
          </h2>
          <div className="home-dual-row">
            {[
              { tag: 'Nottingham Athletic', t: 'Play for the club', d: 'Eleven teams, U12 to senior — National League, YBL and Local League. Trials and open sign-ups each season.', cta: 'See teams', go: 'teams' },
              { tag: 'Athletic Academy CIC', t: 'Schools partnership', d: 'In-school coaching, TA placements, behaviour mentoring, Y6 transition. Booked by trust or by school.', cta: 'For schools', go: 'academy' },
              { tag: 'Travel teams', t: 'Tour with us', d: 'Nottingham Athletic aims to be a mainstay programme in the EYBL for all age groups. Register your interest.', cta: 'See tours', go: 'travel' },
            ].map((c, i) => (
              <div key={i} style={{ background: '#0f1d33', borderRadius: 'var(--radius)', padding: 28, border: '1px solid rgba(255,255,255,0.08)' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--na-yellow)', fontWeight: 700, marginBottom: 16 }}>{c.tag}</div>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 28, letterSpacing: '-0.01em', color: '#fff', margin: '0 0 12px' }}>{c.t}</h3>
                <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5, marginBottom: 24 }}>{c.d}</p>
                <button className="btn btn-accent" onClick={() => setPage(c.go)}>{c.cta} →</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NEWS */}
      <section className="section">
        <div className="wrap">
          <div className="flex jcs aic mb-6" style={{ flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">Latest</div>
              <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '8px 0 0' }}>
                From the club.
              </h2>
            </div>
            <button className="btn btn-soft">All updates →</button>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {NEWS.map(n => (
              <div className="news-card" key={n.id}>
                <Photo variant={n.photo} tag={n.label} />
                <div>
                  <div className="news-meta tabular">{n.date} · {n.label}</div>
                  <h3 style={{ marginTop: 8 }}>{n.title}</h3>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SPONSORS STRIP */}
      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow text-center mb-6">Partners of Nottingham Athletic</div>
          <div className="sponsors-strip">
            {SPONSORS.map((s, i) => (
              <div className="sponsor-cell" key={i}>
                <div className="sponsor-name">{s.name}</div>
                <div className="sponsor-tag">{s.tag}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;