// Pages: Schedule, Fundraise
const { useState: useStateP2, useEffect: useEffectP2, useRef: useRefP2 } = React;

// ============================================================
// SCHEDULE
// ============================================================
function SchedulePage() {
  const hostRef = useRefP2(null);
  const initedRef = useRefP2(false);

  useEffectP2(() => {
    if (initedRef.current) return;
    const targetId = 'gc-schedule-widget-td7v-sched';

    function initWidget() {
      if (window.GC && window.GC.team && window.GC.team.schedule && hostRef.current) {
        const mount = hostRef.current.querySelector('#' + targetId);
        if (mount) mount.innerHTML = '';
        window.GC.team.schedule.init({
          target: '#' + targetId,
          widgetId: '342d2631-8593-412a-841e-0b17fde203e3',
          maxVerticalGamesVisible: 12,
        });
        initedRef.current = true;
      }
    }

    if (window.GC) {
      initWidget();
    } else {
      const existing = document.querySelector('script[data-gc-sdk]');
      if (existing) {
        existing.addEventListener('load', initWidget);
      } else {
        const s = document.createElement('script');
        s.src = 'https://widgets.gc.com/static/js/sdk.v1.js';
        s.async = true;
        s.dataset.gcSdk = 'true';
        s.onload = initWidget;
        document.body.appendChild(s);
      }
    }
  }, []);

  return (
    <>
      <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
        <div className="container">
          <SectionHeader num="04" kicker="LIVE SCHEDULE · GAMECHANGER" title="THE HUNT." tagline="12U Chastain · live sync from GameChanger — schedule, results & stats." />

          {/* Wolfpack-styled GC widget frame */}
          <div ref={hostRef} className="gc-wolfpack-frame corners" style={{
            marginTop: 40,
            position: 'relative',
            background: 'linear-gradient(135deg, var(--ink-3), var(--ink-2))',
            border: '1px solid rgba(196,30,58,0.3)',
            padding: 'clamp(20px, 3vw, 36px)',
            overflow: 'hidden',
          }}>
            {['tl','tr','bl','br'].map(pos => {
              const s = { tl:{top:0,left:0,borderTop:'2px solid var(--wolf-red)', borderLeft:'2px solid var(--wolf-red)'},
                          tr:{top:0,right:0,borderTop:'2px solid var(--wolf-red)', borderRight:'2px solid var(--wolf-red)'},
                          bl:{bottom:0,left:0,borderBottom:'2px solid var(--wolf-red)', borderLeft:'2px solid var(--wolf-red)'},
                          br:{bottom:0,right:0,borderBottom:'2px solid var(--wolf-red)', borderRight:'2px solid var(--wolf-red)'} }[pos];
              return <div key={pos} aria-hidden style={{ position: 'absolute', width: 18, height: 18, ...s, zIndex: 2, pointerEvents: 'none' }}/>;
            })}
            <div aria-hidden style={{ position: 'absolute', top: -60, right: -60, width: 260, height: 260, background: 'radial-gradient(circle, rgba(196,30,58,0.25), transparent 65%)', pointerEvents: 'none' }}/>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginBottom: 24, position: 'relative', zIndex: 2 }}>
              <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>
                <span className="live-dot"></span>&nbsp;&nbsp;LIVE SYNC · GAMECHANGER
              </div>
              <a href="https://web.gc.com/teams/hOv2dnLHWLy" target="_blank" rel="noopener" className="mono" style={{
                color: 'var(--wolf-red-hot)', border: '1px solid var(--wolf-red)', padding: '6px 12px',
              }}>OPEN IN GC →</a>
            </div>

            <div style={{ position: 'relative', zIndex: 2 }}>
              <div id="gc-schedule-widget-td7v-sched"></div>
            </div>

            <div className="mono" style={{ marginTop: 20, color: 'var(--bone-dim)', fontSize: 10, position: 'relative', zIndex: 2 }}>
              Schedule, scores, and stats update automatically after each game
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ============================================================
// FUNDRAISE
// ============================================================
function FundraisePage() {
  const [amt, setAmt] = useStateP2(100);
  const tiers = [
    { name: 'BRONZE', price: '$250', perks: ['Logo on team banner','Social media shout','Thank-you letter'], color: '#c68a4a' },
    { name: 'SILVER', price: '$500', perks: ['Everything in Bronze','Logo on warm-up tee','Season program ad'], color: '#b8b8b8' },
    { name: 'GOLD', price: '$1,000', perks: ['Everything in Silver','Logo on game jersey sleeve','VIP tournament passes','Framed team photo'], color: '#d4af37' },
    { name: 'ALPHA', price: '$2,500+', perks: ['Everything in Gold','Logo on outfield banner','Naming rights on event','Dedicated web feature'], color: 'var(--wolf-red-hot)' },
  ];
  const merch = [
    { name: 'WOLFPACK HOODIE', price: '$55', badge: 'BESTSELLER' },
    { name: 'THE STANDARD TEE', price: '$28' },
    { name: 'WP SNAPBACK', price: '$32' },
    { name: 'TEAM HELMET BAG', price: '$65' },
  ];

  return (
    <>
      <section className="section grid-bg" style={{ paddingTop: 'clamp(120px, 14vw, 160px)' }}>
        <div className="container">
          <SectionHeader num="06" kicker="FUNDRAISE · SUPPORT THE PACK" title="FUEL THE HUNT." tagline="Tournaments, travel, gear, scholarships. Every dollar keeps athletes on the field." />

          {/* Goal tracker */}
          <div className="corners" style={{ marginTop: 48, padding: 32, background: 'var(--ink-3)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 240, height: 240, background: 'radial-gradient(circle, rgba(196,30,58,0.2), transparent 65%)' }}/>
            <div className="eyebrow">2026 SEASON GOAL</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 20, marginTop: 16 }}>
              <style>{`@media (min-width: 700px) { .goal-grid { grid-template-columns: 1fr auto !important; align-items: end !important; } }`}</style>
              <div className="goal-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 20 }}>
                <div>
                  <div className="display" style={{ fontSize: 'clamp(48px, 7vw, 84px)', color: 'var(--bone)' }}>
                    $XX,XXX&nbsp;<span style={{ color: 'var(--bone-dim)', fontSize: '0.6em' }}>/ $XX,XXX</span>
                  </div>
                </div>
              </div>
              <div style={{ height: 8, background: 'rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
                <div style={{
                  position: 'absolute', inset: 0, width: '64.8%',
                  background: 'linear-gradient(90deg, var(--wolf-red-deep), var(--wolf-red-hot))',
                  boxShadow: '0 0 20px var(--wolf-red-glow)',
                }}>
                  <div style={{
                    position: 'absolute', inset: 0,
                    backgroundImage: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px)',
                    animation: 'stripeMove 2s linear infinite',
                  }}/>
                </div>
              </div>
            </div>
          </div>

          {/* Direct donation */}
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>
            <style>{`@media (min-width: 900px) { .donate-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
            <div className="donate-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>
              <div className="corners" style={{ padding: 32, background: 'var(--ink-2)' }}>
                <div className="eyebrow">DIRECT DONATION</div>
                <h3 className="display" style={{ fontSize: 48, marginTop: 14 }}>JOIN THE PACK.</h3>
                <p style={{ marginTop: 10, color: 'var(--bone-dim)' }}>Any amount helps. 100% of proceeds go to team operations.</p>

                <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                  {[25, 50, 100, 250].map(v => (
                    <button key={v} onClick={() => setAmt(v)}
                      style={{
                        padding: '14px 8px',
                        border: amt === v ? '1px solid var(--wolf-red)' : '1px solid rgba(255,255,255,0.1)',
                        background: amt === v ? 'rgba(196,30,58,0.12)' : 'transparent',
                        fontFamily: 'var(--font-head)', fontSize: 15, letterSpacing: '0.08em',
                        color: 'var(--bone)',
                      }}>
                      ${v}
                    </button>
                  ))}
                </div>
                <input type="number" value={amt} onChange={(e) => setAmt(Number(e.target.value) || 0)}
                  style={{
                    width: '100%', marginTop: 10, padding: 14,
                    background: 'var(--ink-3)', border: '1px solid rgba(255,255,255,0.1)',
                    color: 'var(--bone)', fontFamily: 'var(--font-display)', fontSize: 28,
                    textAlign: 'center',
                  }}/>
                <button className="btn" style={{ width: '100%', marginTop: 14, justifyContent: 'center' }}>
                  DONATE ${amt.toLocaleString()} NOW <span className="arrow">→</span>
                </button>
                <div className="mono" style={{ marginTop: 14, textAlign: 'center', color: 'var(--bone-dim)' }}>
                  SECURE CHECKOUT
                </div>
              </div>

              <div className="corners" style={{ padding: 32, background: 'var(--ink-2)' }}>
                <div className="eyebrow">WHERE IT GOES</div>
                <h3 className="display" style={{ fontSize: 48, marginTop: 14 }}>EVERY DOLLAR.</h3>
                <div style={{ marginTop: 24, display: 'grid', gap: 10 }}>
                  {[
                    ['40%', 'TOURNAMENT FEES', 'var(--wolf-red-hot)'],
                    ['25%', 'TRAVEL & LODGING', 'var(--wolf-red)'],
                    ['20%', 'TRAINING & FACILITIES', 'var(--wolf-red-deep)'],
                    ['15%', 'UNIFORMS & GEAR', 'var(--steel)'],
                  ].map(([pct, label, c]) => (
                    <div key={label}>
                      <div style={{ fontSize: 13, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', marginBottom: 4 }}>
                        <span>{label}</span>
                      </div>
                      <div style={{ height: 4, background: 'rgba(255,255,255,0.06)' }}>
                        <div style={{ width: pct, height: '100%', background: c }}/>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Sponsor tiers */}
          <h3 className="display" style={{ fontSize: 'clamp(36px, 6vw, 64px)', marginTop: 80 }}>SPONSORSHIP TIERS.</h3>
          <div className="mono" style={{ marginTop: 10 }}>◆ BUSINESS & CORPORATE PARTNERS</div>

          <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
            <style>{`@media (min-width: 700px) { .tier-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1100px) { .tier-grid { grid-template-columns: repeat(4, 1fr) !important; } }`}</style>
            <div className="tier-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
              {tiers.map((t, i) => (
                <div key={t.name} className="corners" style={{
                  padding: 28,
                  background: 'var(--ink-3)',
                  borderTop: `3px solid ${t.color}`,
                  position: 'relative', overflow: 'hidden',
                }}>
                  {t.name === 'ALPHA' && (
                    <div style={{
                      position: 'absolute', top: 14, right: 14,
                      fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em',
                      color: 'var(--wolf-red-hot)',
                      border: '1px solid var(--wolf-red)', padding: '3px 8px',
                    }}>MOST IMPACT</div>
                  )}
                  <div className="mono" style={{ color: t.color }}>[{String(i + 1).padStart(2, '0')}]</div>
                  <h4 className="display" style={{ fontSize: 36, marginTop: 10, color: t.color }}>{t.name}</h4>
                  <div className="display" style={{ fontSize: 44, marginTop: 6, color: 'var(--bone)' }}>{t.price}</div>
                  <div style={{ marginTop: 20, display: 'grid', gap: 10 }}>
                    {t.perks.map(p => (
                      <div key={p} style={{ display: 'grid', gridTemplateColumns: '18px 1fr', gap: 8, fontSize: 13, color: 'var(--bone-dim)' }}>
                        <span style={{ color: t.color }}>▸</span>
                        <span>{p}</span>
                      </div>
                    ))}
                  </div>
                  <button className="btn ghost" style={{ marginTop: 24, width: '100%', justifyContent: 'center', fontSize: 12 }}>
                    BECOME {t.name}
                  </button>
                </div>
              ))}
            </div>
          </div>

        </div>
      </section>
    </>
  );
}

Object.assign(window, { SchedulePage, FundraisePage });