// Pages: About, Roster, Coaches
const { useState: useStateP1, useEffect: useEffectP1 } = React;

// ============================================================
// ABOUT
// ============================================================
function AboutPage() {
  return (
    <>
      <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
        <div className="container">
          <SectionHeader num="02" kicker="THE STANDARD · MANIFESTO" title="WHO ARE WE." tagline="A question we answer with every pitch." />
          <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: '1fr', gap: 40 }}>
            <style>{`@media (min-width: 900px) { .about-body { grid-template-columns: 1.2fr 1fr !important; } }`}</style>
            <div className="about-body" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 40 }}>
              <div>
                <p style={{ fontSize: 'clamp(18px, 2.2vw, 24px)', lineHeight: 1.5, color: 'var(--bone)' }}>
                  The <span style={{ color: 'var(--wolf-red-hot)' }}>North Georgia Wolfpack — Chastain</span> is a travel fastpitch softball program built on a single idea: standards you refuse to lower.
                </p>
                <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7, color: 'var(--bone-dim)' }}>
                  We develop athletes who compete in competitive tournaments — but more importantly, we develop young women who lead. Everything we do on the diamond, from the first drill of fall ball to the last out of summer nationals, is rooted in three words: GRIT. PACK. STANDARD.
                </p>
                <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.7, color: 'var(--bone-dim)' }}>
                  Based in Bartow County, we pull athletes from across North Georgia who want more than another team logo. They want a family. They want a fight. They want THE STANDARD.
                </p>
              </div>
              <div className="corners" style={{ padding: 32, background: 'var(--ink-3)', border: '1px solid rgba(196,30,58,0.3)', alignSelf: 'start' }}>
                <div className="eyebrow">MISSION BRIEF</div>
                <h3 className="display" style={{ fontSize: 40, marginTop: 14, marginBottom: 20 }}>ELITE DEVELOPMENT.<br/>RELENTLESS CULTURE.</h3>
                {[
                  ['WHAT', 'A high-performance travel fastpitch program for 12U.'],
                  ['HOW', 'Year-round training, nationally ranked tournaments, college exposure.'],
                  ['WHY', 'Because a pack that commits together, wins together.'],
                ].map(([k, v]) => (
                  <div key={k} style={{ padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'grid', gridTemplateColumns: '60px 1fr', gap: 16 }}>
                    <span className="mono" style={{ color: 'var(--wolf-red-hot)' }}>{k}</span>
                    <span style={{ fontSize: 13, color: 'var(--bone)', lineHeight: 1.5 }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pillars grid */}
      <section className="section" style={{ background: 'var(--ink-2)' }}>
        <div className="container">
          <SectionHeader num="02.1" kicker="CORE PILLARS" title="THE CODE." />
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
            <style>{`@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr) !important; } }`}</style>
            <div className="pillars" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
              {[
                { n: '01', t: 'OUTWORK', b: 'Practice is sacred. Extra reps, extra heart. Effort isn\'t optional.' },
                { n: '02', t: 'OUTSMART', b: 'Game IQ separates good from great. We study, we plan, we adjust in-inning.' },
                { n: '03', t: 'OUTLAST', b: 'Tournaments aren\'t won in inning one. They\'re won when the game is over.' },
                { n: '04', t: 'OUTCLASS', b: 'Respect the game, respect opponents, respect officials. Always.' },
              ].map((p, i) => (
                <div key={p.n} style={{ background: 'var(--ink-3)', padding: 32, position: 'relative', minHeight: 260 }}>
                  <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>[{p.n}]</div>
                  <h3 className="display" style={{ fontSize: 44, marginTop: 24 }}>{p.t}</h3>
                  <p style={{ marginTop: 14, fontSize: 14, color: 'var(--bone-dim)', lineHeight: 1.6 }}>{p.b}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Program snapshot */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>
            <style>{`@media (min-width: 900px) { .snap-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
            <div className="snap-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>
              <div className="corners" style={{ padding: 40, background: 'var(--ink-3)' }}>
                <div className="eyebrow">PROGRAM SNAPSHOT</div>
                <h3 className="display" style={{ fontSize: 48, marginTop: 14 }}>BY THE NUMBERS</h3>
                <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
                  {[
                    ['12U', 'AGE DIVISION'],
                    ['11', 'ROSTERED ATHLETES'],
                    ['8+', 'TOURNAMENTS / YR'],
                    ['5', 'COACHES & STAFF'],
                  ].map(([v, l]) => (
                    <div key={l}>
                      <div className="display" style={{ fontSize: 64, color: 'var(--wolf-red-hot)' }}>{v}</div>
                      <div className="mono" style={{ marginTop: 4 }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ position: 'relative', overflow: 'hidden', minHeight: 400, background: 'var(--ink-2)' }}>
                <img src="assets/logo-main.png" alt="" style={{ position: 'absolute', inset: '10%', width: '80%', height: '80%', objectFit: 'contain', opacity: 0.85 }}/>
                <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20, display: 'flex', justifyContent: 'space-between' }}>
                  <span className="mono">◆ BARTOW CO, GA</span>
                  <span className="mono" style={{ color: 'var(--wolf-red-hot)' }}>EST 2024</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ============================================================
// ROSTER — 12U only (only team right now)
// ============================================================
const AGE_GROUPS = ['12U'];

function RosterPage() {
  const [group, setGroup] = useStateP1('12U');

  // Real 12U Chastain roster
  const players = [
    { num: 22, name: 'Reagan Jones',       pos: 'TBD' },
    { num: 10, name: 'Addy Gravitt',       pos: 'TBD' },
    { num:  8, name: 'Carissa Mann',       pos: 'TBD' },
    { num:  4, name: 'Coleigh Chastain',   pos: 'TBD' },
    { num: 12, name: 'Helena Roer',        pos: 'TBD' },
    { num: 11, name: 'Kylie Bernhardt',    pos: 'TBD' },
    { num: 53, name: 'LJ Thompson',        pos: 'TBD' },
    { num:  9, name: 'Presley Weeks',      pos: 'TBD' },
    { num: 14, name: 'Quinn Eppers',       pos: 'TBD' },
    { num: 33, name: 'Zahaven Wheeler',    pos: 'TBD', nickname: '"Sticker"' },
    { num: 13, name: 'Zaylee Hudson',      pos: 'TBD' },
  ];

  return (
    <>
      <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
        <div className="container">
          <SectionHeader num="03" kicker="THE ROSTER" title="MEET THE PACK." tagline="2026 Wolfpack 12U · Chastain. Player portraits coming soon." />

          {/* Age selector */}
          <div style={{ marginTop: 48, display: 'flex', gap: 0, overflowX: 'auto', border: '1px solid rgba(255,255,255,0.08)' }}>
            {AGE_GROUPS.map(g => (
              <button key={g} onClick={() => setGroup(g)}
                style={{
                  flex: 1, minWidth: 80, padding: '18px 12px',
                  fontFamily: 'var(--font-display)',
                  fontSize: 28,
                  background: group === g ? 'var(--wolf-red)' : 'transparent',
                  color: group === g ? 'var(--bone)' : 'var(--bone-dim)',
                  borderRight: '1px solid rgba(255,255,255,0.08)',
                  transition: 'all 200ms ease',
                }}>
                {g}
              </button>
            ))}
          </div>

          {/* Team header */}
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr', gap: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 16 }}>
              <div>
                <div className="eyebrow">{group} · CHASTAIN</div>
                <h3 className="display" style={{ fontSize: 'clamp(48px, 8vw, 88px)' }}>WOLFPACK {group}</h3>
              </div>
              <div className="mono" style={{ textAlign: 'right' }}>
                HEAD COACH: COLE CHASTAIN<br/>
                <span style={{ color: 'var(--wolf-red-hot)' }}>2026 SEASON</span>
              </div>
            </div>

            {/* Grid */}
            <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              <style>{`@media (min-width: 700px) { .roster-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 1100px) { .roster-grid { grid-template-columns: repeat(4, 1fr) !important; } }`}</style>
              <div className="roster-grid" style={{ gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
                {players.map(p => (
                  <PlayerPlaceholder key={p.num} num={p.num} pos={p.pos} name={p.name.toUpperCase()} nickname={p.nickname} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ============================================================
// COACHES
// ============================================================
function CoachesPage() {
  const coaches = [
    { name: 'COLE CHASTAIN',  role: 'HEAD COACH',      bio: 'Full bio coming soon.' },
    { name: 'SHANE MANN',     role: 'ASSISTANT COACH', bio: 'Full bio coming soon.' },
    { name: 'CHAZ HUDSON',    role: 'ASSISTANT COACH', bio: 'Full bio coming soon.' },
    { name: 'TIM EPPERS',     role: 'ASSISTANT COACH', bio: 'Full bio coming soon.' },
    { name: 'CANDICE JONES',  role: 'ASSISTANT COACH', bio: 'Full bio coming soon.' },
  ];

  return (
    <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
      <div className="container">
        <SectionHeader num="05" kicker="THE STAFF" title="THE PACK LEADERS." tagline="Coach bios & photos — placeholder for now." />

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
          <style>{`@media (min-width: 700px) { .coach-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1100px) { .coach-grid { grid-template-columns: repeat(3, 1fr) !important; } }`}</style>
          <div className="coach-grid" style={{ gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: '1fr', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
            {coaches.map((c, i) => (
              <div key={i} style={{ background: 'var(--ink-3)', padding: 28, position: 'relative', minHeight: 320 }}>
                <div style={{ aspectRatio: '1/1', background: 'var(--ink-2)', marginBottom: 20, position: 'relative', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.06)' }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 40%, rgba(196,30,58,0.25), transparent 60%)' }}/>
                  <div style={{ position: 'absolute', top: 12, left: 12 }} className="mono" >[ COACH PHOTO ]</div>
                  <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                    <div className="display" style={{ fontSize: 120, color: 'var(--wolf-red)', opacity: 0.3 }}>WP</div>
                  </div>
                </div>
                <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>{c.role}</div>
                <h3 className="head" style={{ fontSize: 22, letterSpacing: '0.1em', marginTop: 6 }}>{c.name}</h3>
                <p style={{ marginTop: 10, fontSize: 13, color: 'var(--bone-dim)', lineHeight: 1.6 }}>{c.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutPage, RosterPage, CoachesPage });