// 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="EXCEED THE STANDARD" title="WHO ARE WE." tagline="A question we answer with our on and off the field actions." />
          <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 softball organization based on a single idea: Family.
                </p>
                <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7, color: 'var(--bone-dim)' }}>
                  We develop athletes who play 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. COMMITMENT.
                </p>
                <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.7, color: 'var(--bone-dim)' }}>
                  Based in Bartow County, we want athletes who want more than just a team logo. They want a family. They want to fight. They want to commit.
                </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 12U travel fastpitch program — moving up to 14U for Fall 2026.'],
                  ['HOW', 'Year-round training, nationally ranked tournaments.'],
                  ['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 currently (moving up to 14U for Fall 2026)
// ============================================================
const AGE_GROUPS = ['12U'];

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

  // Real 12U Chastain roster (moving up to 14U for Fall 2026)
  const players = [
    { num:  4, name: 'Coleigh Chastain',   pos: 'TBD', photo: 'assets/players/coleigh.jpg' },
    { num:  8, name: 'Carissa Mann',       pos: 'TBD', photo: 'assets/players/carissa.jpg' },
    { num:  9, name: 'Presley Weeks',      pos: 'TBD', photo: 'assets/players/presley.jpg' },
    { num: 10, name: 'Addy Gravitt',       pos: 'TBD', photo: 'assets/players/addy.jpg' },
    { num: 11, name: 'Kylie Bernhardt',    pos: 'TBD', photo: 'assets/players/kylie.jpg' },
    { num: 12, name: 'Helena Roer',        pos: 'TBD', photo: 'assets/players/helena.jpg' },
    { num: 13, name: 'Zaylee Hudson',      pos: 'TBD', photo: 'assets/players/zaylee.jpg' },
    { num: 14, name: 'Quinn Eppers',       pos: 'TBD', photo: 'assets/players/quinn.jpg' },
    { num: 22, name: 'Reagan Jones',       pos: 'TBD', photo: 'assets/players/reagan.jpg' },
    { num: 33, name: 'Zahaven Wheeler',    pos: 'TBD', nickname: '"Sticker"', photo: 'assets/players/sticker.jpg' },
  ];

  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="2012 Wolfpack 12U · Chastain · Moving up to 14U for Fall 2026." />

          {/* 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} photo={p.photo} photoPos={p.photoPos} />
                ))}
                {/* Open recruitment slot — visually distinct from player cards */}
                <a href="#recruit" className="ph" style={{
                  aspectRatio: '3 / 4',
                  textDecoration: 'none',
                  border: '1px dashed rgba(230,57,70,0.65)',
                  background: 'linear-gradient(135deg, rgba(196,30,58,0.18), rgba(5,5,6,0.65))',
                  display: 'block',
                  position: 'relative',
                }}>
                  <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--wolf-red-hot)', letterSpacing: '0.2em', zIndex: 2 }}>
                    ◆ OPEN
                  </div>
                  <div style={{ position: 'absolute', top: 12, right: 12, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--bone)', letterSpacing: '0.2em', zIndex: 2 }}>
                    P / UTIL
                  </div>
                  <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', transform: 'translateY(-50%)', textAlign: 'center', padding: '0 12px', zIndex: 2 }}>
                    <div className="display" style={{ fontSize: 'clamp(36px, 5.5vw, 60px)', color: 'var(--wolf-red-hot)', lineHeight: 0.9, letterSpacing: '0.02em' }}>
                      JOIN<br/>THE<br/>PACK
                    </div>
                    <div className="mono" style={{ marginTop: 12, fontSize: 10, color: 'var(--bone)', letterSpacing: '0.2em' }}>
                      PITCHER · UTILITY
                    </div>
                  </div>
                  <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, fontFamily: 'var(--font-head)', fontSize: 12, letterSpacing: '0.14em', color: 'var(--bone)', zIndex: 2, display: 'flex', justifyContent: 'space-between' }}>
                    <span>OPEN POSITION</span>
                    <span style={{ color: 'var(--wolf-red-hot)' }}>TRY OUT →</span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ============================================================
// COACHES
// ============================================================
function CoachesPage() {
  const coaches = [
    { name: 'COLE CHASTAIN',  role: 'HEAD COACH',      photo: 'assets/coaches/cole.jpg' },
    { name: 'SHANE MANN',     role: 'ASSISTANT COACH', photo: 'assets/coaches/shane.jpg' },
    { name: 'CHAZ HUDSON',    role: 'ASSISTANT COACH', photo: 'assets/coaches/chaz.jpg' },
    { name: 'TIM EPPERS',     role: 'ASSISTANT COACH', photo: 'assets/coaches/tim.jpg' },
    { name: 'CANDICE JONES',  role: 'ASSISTANT COACH', photo: 'assets/coaches/candice.jpg', photoPos: 'center top' },
  ];

  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)' }}>
                  {c.photo ? (
                    <>
                      <img src={c.photo} alt={c.name} loading="lazy"
                        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: c.photoPos || 'center 30%', filter: 'contrast(1.05) saturate(1.05)' }}/>
                      <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%)' }}/>
                      <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', boxShadow: 'inset 0 0 40px rgba(196,30,58,0.2)' }}/>
                    </>
                  ) : (
                    <>
                      <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>
                {c.bio && <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 });