// Pages: News, Recruit, Contact
const { useState: useStateP3 } = React;

// ============================================================
// NEWS / MEDIA
// ============================================================
function NewsPage() {
  const articles = [
    { tag: 'RECAP', date: 'APR 20 · 2026', title: 'PACK DOMINATES LAKEPOINT POOL PLAY', excerpt: 'Wolfpack 12U opened the April tournament with back-to-back run-rule wins…' },
    { tag: 'FEATURE', date: 'APR 12 · 2026', title: 'BEHIND THE STANDARD: INSIDE SPRING CAMP', excerpt: 'Four weeks. One roster. A relentless pursuit of excellence.' },
    { tag: 'ANNOUNCE', date: 'APR 05 · 2026', title: 'SUMMER TRYOUTS OFFICIALLY OPEN', excerpt: 'Registration is live for 12U. Spots are limited.' },
    { tag: 'RECAP', date: 'MAR 30 · 2026', title: '10-2 RUN-RULE OVER COBB CRUSH', excerpt: 'A full bullpen day and a patient offense sealed an early weekend win.' },
    { tag: 'SPOTLIGHT', date: 'MAR 22 · 2026', title: 'PLAYER SPOTLIGHT: 12U PITCHING ROTATION', excerpt: 'Meet the arms keeping opponents under 3 runs per game.' },
    { tag: 'COMMUNITY', date: 'MAR 15 · 2026', title: 'WOLFPACK AT BARTOW YOUTH CLINIC', excerpt: 'Our athletes coached 60+ young softball players at a free weekend clinic.' },
  ];
  return (
    <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
      <div className="container">
        <SectionHeader num="07" kicker="NEWS · MEDIA · FILM" title="THE PACK REPORT." tagline="Recaps, player spotlights, community coverage." />

        {/* Featured */}
        <div style={{ marginTop: 48 }} className="corners">
          <div className="card" style={{
            padding: 0, border: '1px solid rgba(196,30,58,0.3)',
            display: 'grid', gridTemplateColumns: '1fr', gap: 0,
          }}>
            <style>{`@media (min-width: 900px) { .featured { grid-template-columns: 1fr 1fr !important; } }`}</style>
            <div className="featured" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0 }}>
              <div className="ph" style={{ aspectRatio: '16/10', borderRadius: 0, border: 'none' }}>
                <div className="mono">[FEATURE HERO IMAGE]</div>
                <div style={{ position: 'absolute', top: 16, left: 16, padding: '4px 10px', background: 'var(--wolf-red)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em' }}>FEATURE</div>
              </div>
              <div style={{ padding: 'clamp(24px, 4vw, 40px)' }}>
                <div className="mono">APR 20 · 2026</div>
                <h3 className="display" style={{ fontSize: 'clamp(32px, 4vw, 52px)', marginTop: 16, lineHeight: 0.9 }}>
                  PACK DOMINATES LAKEPOINT POOL PLAY
                </h3>
                <p style={{ marginTop: 20, color: 'var(--bone-dim)', lineHeight: 1.7, fontSize: 15 }}>
                  Wolfpack 12U opened the April LakePoint tournament with back-to-back run-rule wins, flashing the pitching depth and offensive patience that's defined the spring season. Full recap with box scores inside.
                </p>
                <a href="#" className="btn ghost" style={{ marginTop: 28 }}>READ FULL RECAP <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
        </div>

        {/* Article grid */}
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
          <style>{`@media (min-width: 700px) { .news-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1100px) { .news-grid { grid-template-columns: repeat(3, 1fr) !important; } }`}</style>
          <div className="news-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
            {articles.map((a, i) => (
              <a href="#" key={i} className="card" style={{ padding: 0, overflow: 'hidden', display: 'block' }}>
                <div className="ph" style={{ aspectRatio: '4/3', borderRadius: 0, border: 'none' }}>
                  <div style={{ position: 'absolute', top: 12, left: 12, padding: '3px 8px', background: 'var(--ink)', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em', color: 'var(--wolf-red-hot)', border: '1px solid var(--wolf-red)' }}>{a.tag}</div>
                  <div className="mono">[IMG]</div>
                </div>
                <div style={{ padding: 20 }}>
                  <div className="mono">{a.date}</div>
                  <h4 className="head" style={{ fontSize: 17, letterSpacing: '0.06em', marginTop: 10, lineHeight: 1.2 }}>{a.title}</h4>
                  <p style={{ marginTop: 10, fontSize: 13, color: 'var(--bone-dim)', lineHeight: 1.6 }}>{a.excerpt}</p>
                </div>
              </a>
            ))}
          </div>
        </div>

        {/* Gallery */}
        <h3 className="display" style={{ fontSize: 'clamp(36px, 6vw, 64px)', marginTop: 80 }}>GALLERY.</h3>
        <div className="mono" style={{ marginTop: 10 }}>◆ RECENT FRAMES · 2026 SEASON</div>
        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          <style>{`@media (min-width: 700px) { .gallery { grid-template-columns: repeat(4, 1fr) !important; } }`}</style>
          <div className="gallery" style={{ gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="ph" style={{ aspectRatio: '1/1', borderRadius: 0 }}>
                <div className="mono">IMG {String(i + 1).padStart(2, '0')}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// RECRUIT / TRYOUTS
// ============================================================
function RecruitPage() {
  const [step, setStep] = useStateP3(1);
  const [data, setData] = useStateP3({ name: '', email: '', phone: '', dob: '', age: '12U', position: 'P', school: '', exp: '' });

  const dates = [
    { group: '12U', date: 'JUN 14', day: 'SAT', time: '10:00 AM' },
    { group: '12U · MAKEUP', date: 'JUN 21', day: 'SAT', time: '10:00 AM' },
  ];

  return (
    <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
      <div className="container">
        <SectionHeader num="08" kicker="TRYOUTS · 2026-27 SEASON" title="EARN YOUR SPOT." tagline="Tryouts open for 12U. Demo placeholder dates." />

        {/* Dates */}
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 8 }}>
          <style>{`@media (min-width: 700px) { .dates-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1100px) { .dates-grid { grid-template-columns: repeat(4, 1fr) !important; } }`}</style>
          <div className="dates-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 8 }}>
            {dates.map((d, i) => (
              <div key={i} className="corners" style={{ padding: 24, background: 'var(--ink-3)', borderLeft: '3px solid var(--wolf-red)' }}>
                <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>{d.group}</div>
                <div className="display" style={{ fontSize: 36, marginTop: 10 }}>{d.date}</div>
                <div className="mono" style={{ marginTop: 6 }}>{d.day} · {d.time}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Form + info */}
        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
          <style>{`@media (min-width: 900px) { .form-grid { grid-template-columns: 1.3fr 1fr !important; } }`}</style>
          <div className="form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
            {/* Multi-step form */}
            <div className="corners" style={{ padding: 'clamp(24px, 4vw, 36px)', background: 'var(--ink-2)' }}>
              <div className="eyebrow">REGISTRATION · STEP {step} OF 3</div>
              <h3 className="display" style={{ fontSize: 40, marginTop: 14 }}>SIGN UP.</h3>

              {/* Progress */}
              <div style={{ marginTop: 24, display: 'flex', gap: 6 }}>
                {[1,2,3].map(n => (
                  <div key={n} style={{ flex: 1, height: 4, background: n <= step ? 'var(--wolf-red)' : 'rgba(255,255,255,0.08)', transition: 'background 300ms' }}/>
                ))}
              </div>

              <div style={{ marginTop: 32, display: 'grid', gap: 16 }}>
                {step === 1 && <>
                  <FormField label="ATHLETE NAME" value={data.name} onChange={v => setData({...data, name: v})} placeholder="JANE DOE"/>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    <FormField label="DATE OF BIRTH" value={data.dob} onChange={v => setData({...data, dob: v})} placeholder="MM/DD/YYYY"/>
                    <FormSelect label="AGE DIVISION" value={data.age} onChange={v => setData({...data, age: v})} options={['12U']}/>
                  </div>
                  <FormField label="SCHOOL" value={data.school} onChange={v => setData({...data, school: v})} placeholder="HIGH SCHOOL / MIDDLE SCHOOL"/>
                </>}
                {step === 2 && <>
                  <FormSelect label="PRIMARY POSITION" value={data.position} onChange={v => setData({...data, position: v})} options={['P','C','1B','2B','3B','SS','LF','CF','RF','UTIL']}/>
                  <FormField label="YEARS OF EXPERIENCE" value={data.exp} onChange={v => setData({...data, exp: v})} placeholder="e.g. 4 YEARS TRAVEL"/>
                  <div style={{ padding: 16, border: '1px dashed rgba(196,30,58,0.4)', fontSize: 13, color: 'var(--bone-dim)', lineHeight: 1.5 }}>
                    Upload highlight video <span style={{ color: 'var(--wolf-red-hot)' }}>(optional)</span><br/>
                    <span className="mono">[ DRAG FILE OR BROWSE ]</span>
                  </div>
                </>}
                {step === 3 && <>
                  <FormField label="PARENT/GUARDIAN EMAIL" value={data.email} onChange={v => setData({...data, email: v})} placeholder="parent@example.com"/>
                  <FormField label="PARENT PHONE" value={data.phone} onChange={v => setData({...data, phone: v})} placeholder="(404) 555-0100"/>
                  <label style={{ display: 'flex', gap: 12, alignItems: 'start', fontSize: 13, color: 'var(--bone-dim)' }}>
                    <input type="checkbox" style={{ marginTop: 4 }}/>
                    <span>I acknowledge the tryout waiver and confirm the athlete is medically cleared to participate.</span>
                  </label>
                </>}
              </div>

              <div style={{ marginTop: 32, display: 'flex', gap: 10, justifyContent: 'space-between' }}>
                <button className="btn ghost" onClick={() => setStep(Math.max(1, step - 1))} disabled={step === 1} style={{ opacity: step === 1 ? 0.3 : 1 }}>← BACK</button>
                {step < 3
                  ? <button className="btn" onClick={() => setStep(step + 1)}>NEXT STEP <span className="arrow">→</span></button>
                  : <button className="btn" onClick={() => alert('Demo: would submit now')}>SUBMIT <span className="arrow">→</span></button>}
              </div>
            </div>

            {/* What to bring */}
            <div style={{ display: 'grid', gap: 24 }}>
              <div className="corners" style={{ padding: 28, background: 'var(--ink-3)' }}>
                <div className="eyebrow">WHAT TO BRING</div>
                <div style={{ marginTop: 20, display: 'grid', gap: 14 }}>
                  {['Glove, cleats, batting helmet','Bat & protective gear','Water & snacks','Registration confirmation','Tryout fee: $25 (cash or venmo)','Positive attitude. No exceptions.'].map((x, i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', fontSize: 14 }}>
                      <span style={{ color: 'var(--wolf-red-hot)' }}>◆</span>
                      <span style={{ color: 'var(--bone)' }}>{x}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="corners" style={{ padding: 28, background: 'var(--ink-3)' }}>
                <div className="eyebrow">LOCATION</div>
                <div className="display" style={{ fontSize: 28, marginTop: 12 }}>JOE COWAN<br/>PARK</div>
                <div className="mono" style={{ marginTop: 14, color: 'var(--bone-dim)', lineHeight: 1.8 }}>
                  EUHARLEE, GA<br/>
                  PRIVATE TRYOUTS AVAILABLE
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FormField({ label, value, onChange, placeholder }) {
  return (
    <label style={{ display: 'block' }}>
      <div className="mono" style={{ marginBottom: 6 }}>{label}</div>
      <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        style={{
          width: '100%', padding: 14,
          background: 'var(--ink-3)', border: '1px solid rgba(255,255,255,0.1)',
          color: 'var(--bone)', fontFamily: 'var(--font-head)', fontSize: 15, letterSpacing: '0.06em',
        }}/>
    </label>
  );
}
function FormSelect({ label, value, onChange, options }) {
  return (
    <label style={{ display: 'block' }}>
      <div className="mono" style={{ marginBottom: 6 }}>{label}</div>
      <select value={value} onChange={(e) => onChange(e.target.value)}
        style={{
          width: '100%', padding: 14,
          background: 'var(--ink-3)', border: '1px solid rgba(255,255,255,0.1)',
          color: 'var(--bone)', fontFamily: 'var(--font-head)', fontSize: 15, letterSpacing: '0.06em',
        }}>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

// ============================================================
// CONTACT
// ============================================================
function ContactPage() {
  const [sent, setSent] = useStateP3(false);
  return (
    <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
      <div className="container">
        <SectionHeader num="08" kicker="CONTACT · TRYOUTS · GENERAL" title="HOWL AT US." tagline="Questions about tryouts, sponsorship, press, or the program — this is where to reach us." />

        {/* TRYOUTS CALLOUT — most important thing on this page */}
        <div className="corners" style={{
          marginTop: 48, position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, rgba(196,30,58,0.18), rgba(5,5,6,0.6))',
          border: '1px solid rgba(230,57,70,0.45)',
          padding: 'clamp(28px, 4vw, 48px)',
        }}>
          <div aria-hidden style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280, background: 'radial-gradient(circle, rgba(230,57,70,0.3), transparent 65%)', pointerEvents: 'none' }}/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 28, position: 'relative' }}>
            <style>{`@media (min-width: 820px) { .tryouts-cta { grid-template-columns: 1.25fr 1fr !important; } }`}</style>
            <div className="tryouts-cta" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 28 }}>
              <div>
                <div className="eyebrow"><span className="live-dot"/>&nbsp;&nbsp;TRYOUTS · 2026-27 SEASON</div>
                <h3 className="display" style={{ fontSize: 'clamp(40px, 7vw, 72px)', marginTop: 10, lineHeight: 0.95 }}>
                  EARN YOUR<br/><span style={{ color: 'var(--wolf-red-hot)' }}>SPOT.</span>
                </h3>
                <p style={{ marginTop: 16, fontSize: 15, color: 'var(--bone-dim)', lineHeight: 1.65, maxWidth: 520 }}>
                  12U tryouts are <strong style={{ color: 'var(--bone)' }}>closed for now</strong>. We're looking for athletes who compete, lead, and hold each other to <strong style={{ color: 'var(--wolf-red-hot)' }}>THE STANDARD</strong>. Private tryouts available on request.
                </p>
                <div className="mono" style={{ marginTop: 18, color: 'var(--bone-dim)', lineHeight: 1.9 }}>
                  ◆ WHAT TO BRING — GLOVE · CLEATS · HELMET · BAT<br/>
                  ◆ WATER · REGISTRATION CONFIRMATION<br/>
                  ◆ TRYOUT FEE · $25 · CASH OR VENMO
                </div>
              </div>
              <div style={{ display: 'grid', gap: 12, alignContent: 'start' }}>
                {[
                  { kicker: 'PRIMARY DATES', value: 'TBD · 2026', sub: 'Check back or message us for confirmed dates.' },
                  { kicker: 'LOCATION', value: 'EUHARLEE, GA', sub: 'Bartow County · Field TBD' },
                  { kicker: 'AGE GROUP', value: '12U', sub: 'Other age groups — inquire via the form below.' },
                ].map(r => (
                  <div key={r.kicker} style={{ padding: 18, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(5,5,6,0.55)' }}>
                    <div className="mono" style={{ color: 'var(--wolf-red-hot)', fontSize: 9, letterSpacing: '0.24em' }}>◆ {r.kicker}</div>
                    <div className="head" style={{ fontSize: 18, letterSpacing: '0.08em', marginTop: 8 }}>{r.value}</div>
                    <div className="mono" style={{ marginTop: 6, color: 'var(--bone-dim)', textTransform: 'none', letterSpacing: '0.05em' }}>{r.sub}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div id="contact-form" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
          <style>{`@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
          <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
            {/* Info */}
            <div style={{ display: 'grid', gap: 20 }}>
              {/* Home base map */}
              <MapPanel />
              {[
                { label: 'GENERAL', value: 'info@ngwolfpack.com', sub: 'Responses within 48h' },
              ].map(c => (
                <div key={c.label} className="corners" style={{ padding: 24, background: 'var(--ink-3)' }}>
                  <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>◆ {c.label}</div>
                  <div className="head" style={{ fontSize: 18, letterSpacing: '0.06em', marginTop: 10 }}>{c.value}</div>
                  <div className="mono" style={{ marginTop: 6, color: 'var(--bone-dim)' }}>{c.sub}</div>
                </div>
              ))}
              <div className="corners" style={{ padding: 24, background: 'var(--ink-3)' }}>
                <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>◆ FOLLOW THE PACK</div>
                <div style={{ marginTop: 14, display: 'flex', gap: 12 }}>
                  {['IG','FB','X','YT'].map(s => (
                    <a key={s} href="#" style={{ width: 36, height: 36, border: '1px solid rgba(255,255,255,0.12)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-head)', fontSize: 11, letterSpacing: '0.1em' }}>{s}</a>
                  ))}
                </div>
              </div>
            </div>

            {/* Form */}
            <div className="corners" style={{ padding: 'clamp(24px, 4vw, 36px)', background: 'var(--ink-2)', alignSelf: 'start' }}>
              <div className="eyebrow">{sent ? 'MESSAGE RECEIVED' : 'SEND A MESSAGE'}</div>
              {sent ? (
                <div style={{ padding: '48px 0', textAlign: 'center' }}>
                  <div className="display" style={{ fontSize: 60, color: 'var(--wolf-red-hot)' }}>◆ SENT</div>
                  <p style={{ marginTop: 14, color: 'var(--bone-dim)' }}>We'll respond within 48 hours. Stay sharp.</p>
                  <button className="btn ghost" style={{ marginTop: 28 }} onClick={() => setSent(false)}>NEW MESSAGE</button>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ marginTop: 24, display: 'grid', gap: 16 }}>
                  <FormField label="YOUR NAME" value="" onChange={() => {}} placeholder="JANE DOE" />
                  <FormField label="EMAIL" value="" onChange={() => {}} placeholder="jane@example.com" />
                  <FormSelect label="REASON" value="General" onChange={() => {}} options={['General','Tryouts','Sponsorship','Press','Other']} />
                  <label>
                    <div className="mono" style={{ marginBottom: 6 }}>MESSAGE</div>
                    <textarea placeholder="Tell us what's up..." rows={5}
                      style={{
                        width: '100%', padding: 14,
                        background: 'var(--ink-3)', border: '1px solid rgba(255,255,255,0.1)',
                        color: 'var(--bone)', fontFamily: 'var(--font-body)', fontSize: 14, resize: 'vertical',
                      }}/>
                  </label>
                  <button type="submit" className="btn" style={{ width: '100%', justifyContent: 'center' }}>
                    SEND MESSAGE <span className="arrow">→</span>
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NewsPage, RecruitPage, ContactPage });