// Home page — hero + supporting sections
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// Full State of Georgia outline with Bartow County (NW) highlighted
function NGMap() {
  // Accurate Georgia state outline (simplified from US Census TIGER data)
  // viewBox 0 0 600 600 — will be normalized
  const gaPath = `M 104.3 33.8 L 107.1 36.2 L 126.9 38.7 L 149.6 40.5 L 173.8 41.9 L 201.2 42.6 L 230.1 43.8 L 258.4 44.9 L 288.8 45.3 L 318.6 46.1 L 347.4 47.3 L 366.7 48.1 L 381.3 52.4 L 385.9 59.8 L 391.4 71.6 L 398.7 84.2 L 406.1 96.5 L 411.8 107.3 L 416.2 118.6 L 421.9 130.4 L 427.3 142.1 L 431.8 153.7 L 436.9 165.2 L 441.3 176.8 L 446.2 188.1 L 451.7 199.4 L 456.8 210.3 L 461.2 222.5 L 465.9 234.6 L 470.1 247.3 L 474.6 259.8 L 478.9 272.1 L 483.2 284.7 L 486.9 297.2 L 490.4 309.8 L 493.1 322.4 L 496.2 334.9 L 498.7 347.3 L 500.4 359.4 L 499.1 371.8 L 495.6 382.3 L 489.7 390.1 L 481.3 394.2 L 470.8 396.1 L 458.6 395.7 L 445.9 393.2 L 434.6 392.8 L 424.1 395.3 L 414.2 398.7 L 402.8 401.2 L 389.7 402.6 L 376.3 403.8 L 362.1 404.1 L 347.6 403.9 L 332.4 404.3 L 316.8 404.8 L 300.9 404.6 L 285.3 403.9 L 269.7 403.1 L 254.2 402.4 L 238.9 401.8 L 223.1 399.6 L 207.4 394.8 L 203.2 384.7 L 201.8 373.4 L 199.2 361.6 L 196.3 348.9 L 193.4 336.1 L 190.7 323.4 L 188.1 310.6 L 185.8 297.9 L 183.2 285.2 L 180.6 272.3 L 177.8 259.6 L 174.9 246.8 L 171.8 234.1 L 168.4 221.4 L 164.9 208.6 L 161.3 195.9 L 157.6 183.1 L 154.2 170.4 L 150.6 157.7 L 146.9 144.9 L 143.1 132.2 L 139.3 119.5 L 135.6 106.8 L 131.9 94.1 L 128.1 81.4 L 124.4 68.7 L 120.7 56.1 L 116.9 43.4 L 112.8 35.9 Z`;

  return (
    <svg viewBox="0 0 800 500" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      pointerEvents: 'none',
    }}>
      <defs>
        <radialGradient id="mapGlow" cx="28%" cy="27%" r="12%">
          <stop offset="0%" stopColor="#e63946" stopOpacity="0.9"/>
          <stop offset="60%" stopColor="#c41e3a" stopOpacity="0.2"/>
          <stop offset="100%" stopColor="#c41e3a" stopOpacity="0"/>
        </radialGradient>
        <pattern id="mapGrid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="0.5"/>
        </pattern>
        <clipPath id="gaClip">
          <path d={gaPath}/>
        </clipPath>
      </defs>

      {/* Grid backdrop (full) */}
      <rect width="800" height="500" fill="url(#mapGrid)" opacity="0.5"/>

      {/* State fill + grid inside */}
      <g>
        <path d={gaPath} fill="rgba(196,30,58,0.05)" />
        <g clipPath="url(#gaClip)">
          <rect width="800" height="500" fill="rgba(255,255,255,0.025)"/>
          <rect width="800" height="500" fill="url(#mapGrid)" opacity="0.9"/>
          <rect width="800" height="500" fill="url(#mapGlow)"/>
          {/* Inner county hash lines */}
          {[120, 180, 240, 300, 360].map((y, i) => (
            <line key={'h'+i} x1="150" y1={y} x2="760" y2={y} stroke="rgba(255,255,255,0.07)" strokeWidth="0.5"/>
          ))}
          {[250, 330, 410, 490, 570, 650].map((x, i) => (
            <line key={'v'+i} x1={x} y1="60" x2={x} y2="440" stroke="rgba(255,255,255,0.07)" strokeWidth="0.5"/>
          ))}
          {/* Faint city dots */}
          {[
            [300, 185, 'ATL'],     // Atlanta — central GA, SE of Bartow
            [410, 290, 'MACON'],
            [600, 360, 'SAV'],     // Savannah on coast
            [585, 390, 'BRNS'],
            [380, 400, 'VALD'],
            [225, 150, 'ROME'],    // Rome — NW GA, near Bartow
          ].map((p, i) => (
            <g key={'city'+i}>
              <circle cx={p[0]} cy={p[1]} r="2.5" fill="rgba(255,255,255,0.55)"/>
              <text x={p[0]+6} y={p[1]+3} fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(255,255,255,0.5)" letterSpacing="1">{p[2]}</text>
            </g>
          ))}
        </g>

        {/* State outline stroke */}
        <path d={gaPath} fill="none" stroke="rgba(230,57,70,0.7)" strokeWidth="1.5" strokeLinejoin="round"/>

        {/* Bartow County — small hex in NW GA */}
        <g transform="translate(265, 155)">
          <polygon points="0,-14 12,-7 12,7 0,14 -12,7 -12,-7"
            fill="rgba(230,57,70,0.35)"
            stroke="#ff3b52"
            strokeWidth="1.5"/>
        </g>
      </g>

      {/* Neighboring state labels — outside the outline */}
      <text x="360" y="75" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(255,255,255,0.45)" letterSpacing="4">TENNESSEE</text>
      <text x="155" y="260" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(255,255,255,0.35)" letterSpacing="3" transform="rotate(-90 155 260)">ALABAMA</text>
      <text x="635" y="130" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.35)" letterSpacing="2">N.C.</text>
      <text x="680" y="180" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.35)" letterSpacing="2">S.C.</text>
      <text x="480" y="460" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(255,255,255,0.35)" letterSpacing="3" textAnchor="middle">FLORIDA</text>
      <text x="735" y="300" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(255,255,255,0.3)" letterSpacing="2" transform="rotate(90 735 300)">ATLANTIC</text>

      {/* Compass rose */}
      <g transform="translate(738, 50)" opacity="0.55">
        <circle r="14" fill="none" stroke="rgba(230,57,70,0.5)" strokeWidth="0.8"/>
        <path d="M 0 -12 L 3 0 L 0 12 L -3 0 Z" fill="#e63946"/>
        <text y="-17" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#e63946">N</text>
      </g>

      {/* Coordinate ticks */}
      <text x="168" y="82" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(230,57,70,0.7)" letterSpacing="1">35.0°N</text>
      <text x="240" y="160" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(230,57,70,0.9)" letterSpacing="1">◆ BARTOW</text>
    </svg>
  );
}

// Crosshair over Bartow County — centered at the map's 42%, 52% point
function Crosshair() {
  return (
    <div aria-hidden style={{
      position: 'absolute', top: '52%', left: '42%',
      transform: 'translate(-50%, -50%)',
      width: 'min(220px, 36vw)', height: 'min(220px, 36vw)',
      pointerEvents: 'none',
      zIndex: 2,
    }}>
      {/* Pulsing rings */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        border: '1px solid rgba(230,57,70,0.55)',
        animation: 'chRing 3s ease-out infinite',
      }}/>
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        border: '1px solid rgba(230,57,70,0.4)',
        animation: 'chRing 3s ease-out infinite 1s',
      }}/>
      <div style={{
        position: 'absolute', inset: '30%', borderRadius: '50%',
        border: '1px dashed rgba(230,57,70,0.7)',
        animation: 'rotate360 30s linear infinite',
      }}/>
      {/* Center dot */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 10, height: 10, borderRadius: '50%',
        background: '#e63946',
        boxShadow: '0 0 20px #e63946, 0 0 40px rgba(230,57,70,0.6)',
      }}/>
      {/* Cross lines */}
      <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(230,57,70,0.8), transparent)' }}/>
      <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'linear-gradient(180deg, transparent, rgba(230,57,70,0.8), transparent)' }}/>

      {/* Label callout */}
      <div style={{
        position: 'absolute', top: '100%', left: '50%',
        transform: 'translate(-50%, 12px)',
        fontFamily: 'var(--font-mono)',
        fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: '#e63946',
        border: '1px solid rgba(230,57,70,0.5)',
        background: 'rgba(5,5,6,0.75)',
        padding: '6px 10px',
        whiteSpace: 'nowrap',
      }}>
        ◆ BARTOW CO · 34.24°N, 84.84°W
      </div>
    </div>
  );
}

function MapPanel() {
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '1 / 1',
      maxWidth: 720,
      margin: '0 auto',
      width: '100%',
      background: 'linear-gradient(135deg, rgba(20,20,28,0.8), rgba(10,10,14,0.6))',
      border: '1px solid rgba(196,30,58,0.25)',
      overflow: 'hidden',
    }}>
      {/* Grid scanlines */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(230,57,70,0.04) 0 1px, transparent 1px 3px)',
        pointerEvents: 'none',
      }}/>

      {/* Corner HUD */}
      {['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} style={{ position: 'absolute', width: 22, height: 22, ...s }}/>;
      })}

      {/* HUD status bar */}
      <div style={{ position: 'absolute', top: 12, left: 12, right: 12, display: 'flex', justifyContent: 'space-between', zIndex: 3 }}>
        <div className="mono flicker" style={{ color: 'var(--wolf-red-hot)', fontSize: 9 }}>
          <span className="live-dot"></span>&nbsp;&nbsp;LOCKED ON TARGET
        </div>
        <div className="mono" style={{ color: 'var(--bone-dim)', fontSize: 9 }}>
          N.GEORGIA · SECTOR-07
        </div>
      </div>

      {/* Georgia map image (transparent PNG with red/white outline + glow) */}
      <img src="assets/georgia-map-transparent.png" alt="Georgia" aria-hidden
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'contain',
          pointerEvents: 'none',
        }}
      />

      {/* Crosshair over Bartow County (NW GA) — on the provided image, Bartow sits ~22% from left / 22% from top */}
      <div aria-hidden style={{
        position: 'absolute', top: '22%', left: '22%',
        transform: 'translate(-50%, -50%)',
        width: 'clamp(110px, 26%, 170px)', aspectRatio: '1',
        pointerEvents: 'none', zIndex: 4,
      }}>
        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '1px solid rgba(230,57,70,0.55)', animation: 'chRing 3s ease-out infinite' }}/>
        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '1px solid rgba(230,57,70,0.4)', animation: 'chRing 3s ease-out infinite 1s' }}/>
        <div style={{ position: 'absolute', inset: '30%', borderRadius: '50%', border: '1px dashed rgba(230,57,70,0.7)', animation: 'rotate360 30s linear infinite' }}/>
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 10, height: 10, borderRadius: '50%', background: '#e63946', boxShadow: '0 0 20px #e63946, 0 0 40px rgba(230,57,70,0.6)' }}/>
        <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(230,57,70,0.8), transparent)' }}/>
        <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'linear-gradient(180deg, transparent, rgba(230,57,70,0.8), transparent)' }}/>
      </div>

      {/* Target callout */}
      <div style={{
        position: 'absolute', top: '22%', left: '22%',
        transform: 'translate(calc(-50% + clamp(60px, 16%, 90px)), -10px)',
        zIndex: 5, pointerEvents: 'none',
      }}>
        <svg width="80" height="40" viewBox="0 0 80 40" style={{ display: 'block' }}>
          <line x1="0" y1="20" x2="70" y2="20" stroke="#e63946" strokeWidth="1" strokeDasharray="3 3"/>
          <circle cx="0" cy="20" r="2" fill="#e63946"/>
        </svg>
      </div>
      <div style={{
        position: 'absolute', top: '22%', left: '22%',
        transform: 'translate(calc(-50% + clamp(130px, 26%, 180px)), -50%)',
        fontFamily: 'var(--font-mono)',
        fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: '#e63946',
        border: '1px solid rgba(230,57,70,0.6)',
        background: 'rgba(5,5,6,0.9)',
        padding: '8px 12px',
        zIndex: 5, whiteSpace: 'nowrap',
        boxShadow: '0 0 20px rgba(230,57,70,0.3)',
      }}>
        <div style={{ color: 'var(--bone)' }}>◆ BARTOW CO, GA</div>
        <div style={{ marginTop: 4, color: 'var(--bone-dim)', fontSize: 9 }}>34.24°N · 84.84°W</div>
      </div>

      {/* Bottom readout */}
      <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, display: 'flex', justifyContent: 'space-between', zIndex: 3 }}>
        <div className="mono" style={{ color: 'var(--bone-dim)', fontSize: 9 }}>◆ HOME TERRITORY</div>
        <div className="mono" style={{ color: 'var(--wolf-red-hot)', fontSize: 9 }}>THE HUNT STARTS HERE</div>
      </div>
    </div>
  );
}

function HeroCopy() {
  return (
    <div style={{ position: 'relative', zIndex: 4, textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
      {/* Red slash */}
      <div className="fadeup" style={{ animationDelay: '120ms' }}>
        <div style={{
          position: 'relative', height: 6, maxWidth: 420, margin: '0 auto',
          background: 'linear-gradient(90deg, transparent, var(--wolf-red-hot) 20%, var(--wolf-red) 60%, transparent)',
          transform: 'skewX(-18deg)',
          filter: 'drop-shadow(0 0 12px rgba(230,57,70,0.7))',
        }}/>
      </div>

      <p className="fadeup" style={{
        animationDelay: '220ms',
        marginTop: 24, marginLeft: 'auto', marginRight: 'auto',
        maxWidth: 680,
        fontFamily: "'Oswald', sans-serif",
        fontWeight: 500,
        fontSize: 'clamp(18px, 2.2vw, 24px)',
        letterSpacing: '0.02em',
        lineHeight: 1.45,
        color: '#ffffff',
        textTransform: 'uppercase',
        textShadow: '0 2px 8px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.7)',
      }}>
        Competitive fastpitch travel team out of <span style={{ color: 'var(--wolf-red-hot)', fontWeight: 700 }}>Bartow County, Georgia</span>. We focus on <span style={{ fontWeight: 700 }}>player development</span> and creating a <span style={{ fontWeight: 700 }}>competitive culture</span>.
      </p>

      <div className="fadeup" style={{ animationDelay: '340ms', marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
        <a href="#recruit" className="btn">TRY OUT FOR THE PACK <span className="arrow">→</span></a>
        <a href="#about" className="btn ghost">LEARN MORE <span className="arrow">↓</span></a>
      </div>

      {/* Sanction badges */}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <SanctionBadges />
      </div>
    </div>
  );
}

function SanctionBadges() {
  const badges = [
    {
      key: 'USFA',
      main: 'USFA',
      sub: 'UNITED STATES FASTPITCH ASSOCIATION',
      color: '#1a4d8f',
    },
    {
      key: 'PGF',
      main: 'PGF',
      sub: 'PREMIER GIRLS FASTPITCH',
      color: '#e63946',
    },
    {
      key: 'ESA',
      main: 'ESA',
      sub: 'ELITE SPORTS ASSOCIATION',
      color: '#d4a017',
    },
  ];

  return (
    <div className="fadeup" style={{ animationDelay: '580ms', marginTop: 36 }}>
      <div className="mono" style={{
        fontSize: 10, letterSpacing: '0.28em', color: 'var(--bone-dim)',
        marginBottom: 12, textTransform: 'uppercase',
      }}>
        <span style={{ color: 'var(--wolf-red-hot)' }}>◆</span>&nbsp;&nbsp;WHERE WE COMPETE
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10, alignItems: 'stretch' }}>
        {badges.map(b => (
          <div key={b.key} style={{
            position: 'relative',
            padding: '10px 16px',
            background: 'linear-gradient(135deg, rgba(20,20,28,0.9), rgba(10,10,14,0.7))',
            border: '1px solid rgba(255,255,255,0.08)',
            borderLeft: `3px solid ${b.color}`,
            display: 'flex', alignItems: 'center', gap: 12,
            minWidth: 0,
          }}>
            {/* Shield glyph */}
            <svg width="28" height="32" viewBox="0 0 28 32" style={{ flexShrink: 0 }}>
              <path d="M 14 1 L 26 5 L 26 16 Q 26 25 14 31 Q 2 25 2 16 L 2 5 Z"
                fill={b.color} fillOpacity="0.15"
                stroke={b.color} strokeWidth="1.2"/>
              <path d="M 14 6 L 22 8.5 L 22 17 Q 22 22 14 26 Q 6 22 6 17 L 6 8.5 Z"
                fill="none" stroke={b.color} strokeOpacity="0.5" strokeWidth="0.6"/>
              <text x="14" y="19" textAnchor="middle" fontFamily="'Anton', sans-serif" fontSize="9" fill={b.color} letterSpacing="0.5">★</text>
            </svg>
            <div style={{ minWidth: 0 }}>
              <div style={{
                fontFamily: "'Anton', sans-serif",
                fontSize: 18, letterSpacing: '0.06em',
                color: b.color,
                lineHeight: 1,
              }}>
                {b.main}
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 8, letterSpacing: '0.18em',
                color: 'var(--bone-dim)',
                marginTop: 4,
                textTransform: 'uppercase',
              }}>
                {b.sub}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function WhoAreWeBanner() {
  return (
    <div className="fadeup" style={{
      position: 'relative', textAlign: 'center', marginBottom: 'clamp(32px, 5vw, 56px)',
      zIndex: 5,
    }}>
      <h2 style={{
        fontFamily: "'Anton', 'Oswald', sans-serif",
        fontWeight: 400,
        fontStyle: 'italic',
        background: 'linear-gradient(180deg, #ffffff 0%, #f5f5f5 45%, #c9c9c9 65%, #ffffff 100%)',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        color: 'transparent',
        WebkitTextStroke: '1.5px rgba(0,0,0,0.85)',
        filter: 'drop-shadow(0 8px 0 #000) drop-shadow(0 0 40px rgba(230,57,70,0.45))',
        fontSize: 'clamp(72px, 14vw, 200px)',
        letterSpacing: '-0.02em',
        lineHeight: 0.85,
        transform: 'skewX(-6deg)',
        textTransform: 'uppercase',
        whiteSpace: 'nowrap',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'clamp(12px, 2vw, 28px)' }}>
          <span>WHO ARE <span style={{
            color: '#e63946',
            background: 'none',
            WebkitBackgroundClip: 'border-box',
            backgroundClip: 'border-box',
            WebkitTextFillColor: '#e63946',
            textShadow: '0 0 0 #e63946',
          }}>WE?</span></span>
          <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            {/* Dark radial backdrop behind the logo so it pops against a darkened area */}
            <span aria-hidden style={{
              position: 'absolute',
              width: 'clamp(140px, 24vw, 320px)',
              height: 'clamp(140px, 24vw, 320px)',
              background: 'radial-gradient(circle, rgba(5,5,6,0.9) 0%, rgba(5,5,6,0.7) 40%, rgba(5,5,6,0.3) 70%, rgba(5,5,6,0) 100%)',
              borderRadius: '50%',
              transform: 'skewX(6deg)',
              pointerEvents: 'none',
              zIndex: 0,
            }}/>
            <img src="assets/logo-main-transparent.png" alt="Wolfpack" style={{
              height: 'clamp(90px, 16vw, 220px)',
              width: 'auto',
              transform: 'skewX(6deg)',
              filter: 'drop-shadow(0 6px 0 #000) drop-shadow(0 0 18px rgba(0,0,0,0.8))',
              display: 'block',
              position: 'relative',
              zIndex: 1,
            }}/>
          </span>
        </span>
      </h2>
      <div style={{
        margin: '18px auto 0', height: 4, maxWidth: 620,
        background: 'linear-gradient(90deg, transparent, var(--wolf-red-hot), var(--wolf-red), transparent)',
        transform: 'skewX(-18deg)',
        filter: 'drop-shadow(0 0 12px rgba(230,57,70,0.6))',
      }}/>
    </div>
  );
}

// Cinematic HUD overlay laid over the team photo — sweep, embers, reticles,
// brackets, ticker, duotone flash, grain, glitch, WP watermark, STANDARD banner.
function HeroPhotoHUD() {
  // Stable ember params (don't regenerate on render)
  const embers = useRefH(null);
  if (!embers.current) {
    embers.current = Array.from({ length: 22 }, (_, i) => ({
      left: Math.random() * 100,
      size: 1.5 + Math.random() * 2.5,
      dur: 6 + Math.random() * 6,
      delay: -Math.random() * 12,
      drift: (Math.random() - 0.5) * 60,
      hue: Math.random() > 0.7 ? '#ffd0a0' : '#ff6070',
    }));
  }

  // Reticle locks — fixed positions on players. % coords tuned for the team photo (16:7 crop).
  const reticles = [
    { top: 46, left: 16, label: 'WP · #7',  side: 'right', meta: 'PITCHER' },
    { top: 40, left: 56, label: 'WP · #22', side: 'right', meta: 'CAPTAIN' },
    { top: 68, left: 78, label: 'WP · #19', side: 'left',  meta: 'POWER' },
  ];

  const tickerItems = [
    'THE STANDARD', 'WHO ARE WE', 'WP', 'NO SHORTCUTS',
    'LEAD THE PACK', 'GRIT OVER GLORY', 'CHASTAIN · 2026',
    'BARTOW CO · GA', '34.24°N · 84.84°W',
  ];

  return (
    <>
      {/* (WP watermark and THE STANDARD banner removed per user request) */}

      {/* Duotone red flash */}
      <div className="hp-duotone" aria-hidden/>

      {/* Chromatic fringe */}
      <div className="hp-fringe" aria-hidden/>

      {/* Film grain */}
      <div className="hp-grain" aria-hidden/>

      {/* Glitch slices */}
      <div className="hp-glitch" style={{ '--top': '34%', '--delay': '0s' }} aria-hidden/>
      <div className="hp-glitch" style={{ '--top': '62%', '--delay': '5.5s' }} aria-hidden/>

      {/* Embers rising */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 5, pointerEvents: 'none', overflow: 'hidden' }} aria-hidden>
        {embers.current.map((e, i) => (
          <span key={i} className="hp-ember" style={{
            left: e.left + '%',
            width: e.size, height: e.size,
            animationDuration: e.dur + 's',
            animationDelay: e.delay + 's',
            '--drift': e.drift + 'px',
            background: `radial-gradient(circle, ${e.hue} 0%, #e63946 45%, rgba(196,30,58,0) 100%)`,
          }}/>
        ))}
      </div>

      {/* Breathing L-brackets at 4 corners of the photo */}
      <svg className="hp-corner" style={{ top: 10, left: 10, animationDelay: '0s' }} viewBox="0 0 44 44" aria-hidden>
        <path d="M 2 16 L 2 2 L 16 2" fill="none" stroke="#e63946" strokeWidth="2"/>
        <path d="M 6 14 L 6 6 L 14 6" fill="none" stroke="rgba(230,57,70,0.6)" strokeWidth="1"/>
      </svg>
      <svg className="hp-corner" style={{ top: 10, right: 10, animationDelay: '0.8s' }} viewBox="0 0 44 44" aria-hidden>
        <path d="M 28 2 L 42 2 L 42 16" fill="none" stroke="#e63946" strokeWidth="2"/>
        <path d="M 30 6 L 38 6 L 38 14" fill="none" stroke="rgba(230,57,70,0.6)" strokeWidth="1"/>
      </svg>
      <svg className="hp-corner" style={{ bottom: 10, left: 10, animationDelay: '1.6s' }} viewBox="0 0 44 44" aria-hidden>
        <path d="M 2 28 L 2 42 L 16 42" fill="none" stroke="#e63946" strokeWidth="2"/>
        <path d="M 6 30 L 6 38 L 14 38" fill="none" stroke="rgba(230,57,70,0.6)" strokeWidth="1"/>
      </svg>
      <svg className="hp-corner" style={{ bottom: 10, right: 10, animationDelay: '2.4s' }} viewBox="0 0 44 44" aria-hidden>
        <path d="M 28 42 L 42 42 L 42 28" fill="none" stroke="#e63946" strokeWidth="2"/>
        <path d="M 30 38 L 38 38 L 38 30" fill="none" stroke="rgba(230,57,70,0.6)" strokeWidth="1"/>
      </svg>

      {/* Targeting reticles (no labels) */}
      {reticles.map((r, i) => (
        <div key={i} className="hp-reticle" style={{ top: r.top + '%', left: r.left + '%', animationDelay: (i * 0.4) + 's' }} aria-hidden>
          <div className="ring"/>
          <div className="ring d"/>
          <div className="dash"/>
          <div className="cross-h"/>
          <div className="cross-v"/>
          <div className="dot"/>
        </div>
      ))}

      {/* Enhanced sweep — glow beam + bright leading line */}
      <div className="hp-sweep-beam" aria-hidden/>
      <div className="hp-sweep-line" aria-hidden/>

      {/* Ticker along top edge */}
      <div className="hp-ticker" style={{ top: 0, height: 26 }} aria-hidden>
        <div className="hp-ticker-track">
          {[...tickerItems, ...tickerItems, ...tickerItems].map((t, i) => (
            <span key={i} className={i % 4 === 0 ? 'hot' : ''}>{t}<i>◆</i></span>
          ))}
        </div>
      </div>
    </>
  );
}

function Hero() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: 'clamp(100px, 12vw, 140px)',
      paddingBottom: 'clamp(40px, 6vw, 72px)',
      background: 'var(--ink)',
      borderBottom: '1px solid rgba(196,30,58,0.35)',
    }}>
      {/* Radial red glow behind everything */}
      <div aria-hidden style={{
        position: 'absolute', top: '50%', left: '50%',
        width: 'min(1200px, 140vw)', height: 'min(1200px, 140vw)',
        transform: 'translate(-50%, -50%)',
        background: 'radial-gradient(circle, rgba(196,30,58,0.18), transparent 55%)',
        pointerEvents: 'none', zIndex: 0,
      }}/>

      {/* Dotted grid bg */}
      <div aria-hidden className="hero-dots" style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.5px)',
        backgroundSize: '120px 120px',
        opacity: 0.6,
      }}/>

      <ScanLines count={2} />

      {/* TOP: Who Are We banner */}
      <div className="container" style={{ position: 'relative', zIndex: 3, marginBottom: 'clamp(24px, 4vw, 40px)' }}>
        <WhoAreWeBanner />
      </div>

      {/* MIDDLE: Full-width team photo with cinematic HUD overlay */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        {/* Red accent rules top & bottom */}
        <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 2, background: 'linear-gradient(90deg, transparent, var(--wolf-red-hot), var(--wolf-red), transparent)', zIndex: 9 }}/>
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, background: 'linear-gradient(90deg, transparent, var(--wolf-red-hot), var(--wolf-red), transparent)', zIndex: 9 }}/>
        {/* Animated grid over image only, subtle */}
        <div aria-hidden className="hero-grid-anim" style={{
          position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none',
          backgroundImage: 'linear-gradient(rgba(230,57,70,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(230,57,70,0.08) 1px, transparent 1px)',
          backgroundSize: '60px 60px',
          maskImage: 'linear-gradient(180deg, rgba(0,0,0,0.6), transparent 20%, transparent 80%, rgba(0,0,0,0.6))',
          WebkitMaskImage: 'linear-gradient(180deg, rgba(0,0,0,0.6), transparent 20%, transparent 80%, rgba(0,0,0,0.6))',
        }}/>
        {/* Photo cropped to focus on team, background drowned out by heavy vignette + red wash */}
        <div style={{
          position: 'relative', width: '100%',
          aspectRatio: '16 / 7',
          overflow: 'hidden',
          background: '#050506',
        }}>
          <img src="assets/team-photo.png" alt="North Georgia Wolfpack Chastain roster" style={{
            position: 'absolute', left: 0, width: '100%',
            top: '-8%',
            filter: 'contrast(1.08) brightness(0.92) saturate(1.05)',
          }}/>
          {/* Subtle edge vignette — keeps focus on team without crushing the image */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none',
            background: 'radial-gradient(ellipse 80% 90% at center, transparent 45%, rgba(5,5,6,0.3) 80%, rgba(5,5,6,0.7) 100%)',
          }}/>
          {/* Top/bottom dark bands — just enough to blend into the section */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none',
            background: 'linear-gradient(180deg, rgba(5,5,6,0.55) 0%, rgba(5,5,6,0.05) 15%, transparent 35%, transparent 65%, rgba(5,5,6,0.1) 85%, rgba(5,5,6,0.55) 100%)',
          }}/>
          {/* Soft red side wash — kept light so the photo reads clean */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none',
            background: 'linear-gradient(90deg, rgba(120,15,30,0.3) 0%, transparent 12%, transparent 88%, rgba(120,15,30,0.3) 100%)',
            mixBlendMode: 'multiply',
          }}/>

          {/* Cinematic HUD overlay — sweep, embers, reticles, brackets, ticker, duotone, grain, glitch, watermark, STANDARD banner */}
          <HeroPhotoHUD/>
        </div>
        {/* HUD corner tags */}
        <div className="container" style={{
          position: 'absolute', left: 0, right: 0, bottom: 'clamp(10px, 1.5vw, 20px)',
          display: 'flex', justifyContent: 'space-between', zIndex: 4, pointerEvents: 'none',
        }}>
          <div className="mono" style={{
            color: 'var(--bone)', fontSize: 10,
            background: 'rgba(5,5,6,0.75)', padding: '4px 8px',
            backdropFilter: 'blur(4px)',
          }}>
            <span className="live-dot"></span>&nbsp;&nbsp;<span style={{ color: 'var(--wolf-red-hot)' }}>THE PACK · 2026</span>
          </div>
          <div className="mono" style={{
            color: 'var(--bone)', fontSize: 10,
            background: 'rgba(5,5,6,0.75)', padding: '4px 8px',
            backdropFilter: 'blur(4px)',
          }}>
            CHASTAIN · BARTOW CO, GA
          </div>
        </div>
      </div>

      {/* BOTTOM: Copy + CTAs */}
      <div className="container" style={{ position: 'relative', zIndex: 3, marginTop: 'clamp(32px, 5vw, 56px)' }}>
        <HeroCopy />
      </div>
    </section>
  );
}

// ------------------------------------------------------------
function StandardStrip() {
  const phrases = ['THE STANDARD', 'WHO ARE WE', 'WP', 'NO SHORTCUTS', 'LEAD THE PACK', 'GRIT OVER GLORY'];
  return <Marquee items={phrases} speed={40} />;
}

// ------------------------------------------------------------
function NextGameCard() {
  return (
    <div className="corners" style={{
      position: 'relative',
      background: 'linear-gradient(135deg, var(--ink-3), var(--ink-2))',
      padding: 32,
      border: '1px solid rgba(196,30,58,0.3)',
      overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: -40, right: -40, width: 220, height: 220, background: 'radial-gradient(circle, rgba(196,30,58,0.25), transparent 65%)' }}/>
      <div className="eyebrow"><span className="live-dot"></span> NEXT GAME · SAT 05.03.26</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 16, alignItems: 'center', marginTop: 24 }}>
        <div>
          <img src="assets/logo-icon.png" alt="" style={{ width: 64, height: 64, objectFit: 'contain', marginBottom: 10 }}/>
          <div className="head" style={{ fontSize: 14, letterSpacing: '0.14em' }}>NG WOLFPACK</div>
          <div className="mono" style={{ marginTop: 4 }}>CHASTAIN · 12U</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div className="display" style={{ fontSize: 'clamp(40px, 8vw, 72px)', color: 'var(--wolf-red-hot)' }}>VS</div>
          <div className="mono" style={{ marginTop: 4 }}>1ST · 11:00 AM EST</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ width: 64, height: 64, marginLeft: 'auto', marginBottom: 10, border: '1px dashed rgba(255,255,255,0.15)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--bone-dim)' }}>OPP</div>
          <div className="head" style={{ fontSize: 14, letterSpacing: '0.14em' }}>ATL THUNDER</div>
          <div className="mono" style={{ marginTop: 4 }}>GOLD · 14U</div>
        </div>
      </div>
      <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <div className="mono">RINGOLD · FIELD 7 · EMERSON, GA</div>
        <a href="#schedule" style={{ fontFamily: 'var(--font-head)', fontSize: 12, letterSpacing: '0.18em', color: 'var(--wolf-red-hot)' }}>FULL SCHEDULE →</a>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
function ScoreboardPreview() {
  const games = [
    { opp: 'ATL Thunder', score: '8–3', result: 'W', date: 'APR 19' },
    { opp: 'GA Bombers', score: '6–4', result: 'W', date: 'APR 13' },
    { opp: 'Lanier Elite', score: '5–7', result: 'L', date: 'APR 06' },
    { opp: 'Cobb Crush', score: '10–2', result: 'W', date: 'MAR 30' },
  ];
  return (
    <div style={{ display: 'grid', gap: 1, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.06)' }}>
      {games.map((g, i) => (
        <div key={i} style={{ background: 'var(--ink-2)', padding: '18px 20px', display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 16, alignItems: 'center' }}>
          <div className="mono" style={{ color: 'var(--bone-dim)', minWidth: 60 }}>{g.date}</div>
          <div className="head" style={{ fontSize: 14, letterSpacing: '0.1em' }}>WOLFPACK vs <span style={{ color: 'var(--bone-dim)' }}>{g.opp}</span></div>
          <div className="display tabnum" style={{ fontSize: 22, letterSpacing: '0.04em' }}>{g.score}</div>
          <div className="head" style={{ fontSize: 12, letterSpacing: '0.18em', color: g.result === 'W' ? 'var(--wolf-red-hot)' : 'var(--steel)', minWidth: 16 }}>{g.result}</div>
        </div>
      ))}
    </div>
  );
}

function HomeSchedulePreview() {
  const hostRef = useRefH(null);
  const initedRef = useRefH(false);

  useEffectH(() => {
    if (initedRef.current) return;
    const uid = 'td7v';
    const targetId = 'gc-schedule-widget-' + uid;

    function initWidget() {
      if (window.GC && window.GC.team && window.GC.team.schedule && hostRef.current) {
        // Clear any previous render (if React re-mounted)
        const mount = hostRef.current.querySelector('#' + targetId);
        if (mount) mount.innerHTML = '';
        window.GC.team.schedule.init({
          target: '#' + targetId,
          widgetId: '342d2631-8593-412a-841e-0b17fde203e3',
          maxVerticalGamesVisible: 4,
        });
        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">
      <div className="container">
        <SectionHeader num="04" kicker="SCHEDULE · RESULTS" title="ON THE HUNT" tagline="Live from GameChanger · 12U Chastain" />

        {/* 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',
        }}>
          {/* HUD corner accents */}
          {['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' }}/>;
          })}
          {/* Red glow corner */}
          <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' }}/>

          {/* Status line */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginBottom: 20, 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>

          {/* Widget mount */}
          <div style={{ position: 'relative', zIndex: 2 }}>
            <div id={'gc-schedule-widget-' + 'td7v'}></div>
          </div>

          <div className="mono" style={{ marginTop: 20, color: 'var(--bone-dim)', fontSize: 10, position: 'relative', zIndex: 2 }}>
            Widget may take a moment to load · Stats update automatically after each game
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
function SectionHeader({ num, kicker, title, tagline, align = 'left' }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 800 : 'none', margin: align === 'center' ? '0 auto' : 0 }}>
      <div className="eyebrow" style={{ display: 'flex', gap: 14, alignItems: 'center', justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
        <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--wolf-red-hot)' }}>[ {num} ]</span>
        <span style={{ width: 40, height: 1, background: 'var(--wolf-red)' }}></span>
        <span>{kicker}</span>
      </div>
      <h2 className="display" style={{ fontSize: 'clamp(42px, 8vw, 96px)', marginTop: 16, lineHeight: 0.88 }}>{title}</h2>
      {tagline && <p className="mono" style={{ marginTop: 14, color: 'var(--bone-dim)' }}>{tagline}</p>}
    </div>
  );
}

// ------------------------------------------------------------
function AboutPreview() {
  return (
    <section className="section" style={{ background: 'var(--ink-2)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', top: '50%', left: -80, transform: 'translateY(-50%)',
        fontFamily: 'var(--font-display)', fontSize: 'clamp(200px, 30vw, 520px)',
        color: 'transparent', WebkitTextStroke: '1px rgba(255,255,255,0.04)',
        pointerEvents: 'none', lineHeight: 0.8,
      }}>WP</div>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <SectionHeader num="02" kicker="THE PACK · FAMILY" title="FAMILY." />
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>
          <style>{`@media (min-width: 900px) { .about-grid { grid-template-columns: repeat(3, 1fr) !important; } }`}</style>
          <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>
            {[
              { n: '01', title: 'GRIT', body: 'Every rep earned. Every inning a proving ground. We outwork, out-prepare, and out-last.' },
              { n: '02', title: 'PACK', body: 'No one competes alone. We rise together — sisters in the dirt, warriors in the circle.' },
              { n: '03', title: 'STANDARD', body: 'Uncompromising. On the field, in school, in life. This is what WOLFPACK means.' },
            ].map(v => (
              <div key={v.n} className="card corners" style={{ padding: 32, minHeight: 260 }}>
                <div className="mono" style={{ color: 'var(--wolf-red-hot)' }}>[{v.n}]</div>
                <h3 className="display" style={{ fontSize: 56, marginTop: 20, color: 'var(--bone)' }}>{v.title}</h3>
                <p style={{ marginTop: 16, color: 'var(--bone-dim)', lineHeight: 1.6 }}>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
function JoinStrip() {
  return (
    <section className="section" style={{
      padding: '100px var(--pad)',
      background: 'linear-gradient(180deg, #7a0d1f 0%, #c41e3a 50%, #7a0d1f 100%)',
      position: 'relative', overflow: 'hidden',
      borderTop: '1px solid rgba(0,0,0,0.5)',
      borderBottom: '1px solid rgba(0,0,0,0.5)',
    }}>
      {/* Dark vignette / scan lines */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px)',
        pointerEvents: 'none',
      }}/>
      {/* Subtle grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(0,0,0,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.12) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        opacity: 0.35,
        maskImage: 'linear-gradient(180deg, transparent, black 20%, black 80%, transparent)',
        WebkitMaskImage: 'linear-gradient(180deg, transparent, black 20%, black 80%, transparent)',
        pointerEvents: 'none',
      }}/>
      {/* Big oversize black "STANDARD" watermark */}
      <div aria-hidden style={{
        position: 'absolute', top: '-20px', right: '-40px',
        fontFamily: "'Anton', sans-serif",
        fontSize: 'clamp(180px, 26vw, 380px)',
        color: 'rgba(0,0,0,0.18)',
        lineHeight: 0.8,
        letterSpacing: '-0.03em',
        transform: 'skewX(-8deg)',
        pointerEvents: 'none',
        whiteSpace: 'nowrap',
        textTransform: 'uppercase',
      }}>
        THE STANDARD
      </div>
      {/* Crosshair target, bottom-left */}
      <div aria-hidden style={{
        position: 'absolute', bottom: -40, left: -40,
        width: 280, height: 280,
        opacity: 0.25,
        pointerEvents: 'none',
      }}>
        <svg viewBox="0 0 280 280" width="100%" height="100%">
          <circle cx="140" cy="140" r="130" fill="none" stroke="#000" strokeWidth="1"/>
          <circle cx="140" cy="140" r="95" fill="none" stroke="#000" strokeWidth="1" strokeDasharray="6 6"/>
          <circle cx="140" cy="140" r="55" fill="none" stroke="#000" strokeWidth="1"/>
          <line x1="0" y1="140" x2="280" y2="140" stroke="#000" strokeWidth="1"/>
          <line x1="140" y1="0" x2="140" y2="280" stroke="#000" strokeWidth="1"/>
        </svg>
      </div>
      {/* Corner brackets */}
      {['tl','tr','bl','br'].map(pos => {
        const s = { tl:{top:20,left:20,borderTop:'2px solid #000', borderLeft:'2px solid #000'},
                    tr:{top:20,right:20,borderTop:'2px solid #000', borderRight:'2px solid #000'},
                    bl:{bottom:20,left:20,borderBottom:'2px solid #000', borderLeft:'2px solid #000'},
                    br:{bottom:20,right:20,borderBottom:'2px solid #000', borderRight:'2px solid #000'} }[pos];
        return <div key={pos} aria-hidden style={{ position: 'absolute', width: 28, height: 28, ...s, pointerEvents: 'none' }}/>;
      })}

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <style>{`@media (min-width: 800px) { .join-grid { grid-template-columns: 1fr auto !important; } }`}</style>
        <div className="join-grid" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32, alignItems: 'center' }}>
          <div>
            <h2 className="display" style={{
              fontSize: 'clamp(48px, 8vw, 104px)',
              color: 'var(--bone)',
              lineHeight: 0.9,
              textShadow: '0 4px 0 rgba(0,0,0,0.35), 0 0 30px rgba(0,0,0,0.3)',
            }}>
              EARN YOUR PLACE<br/>IN THE <span style={{ fontStyle: 'italic', textDecoration: 'underline', textDecorationThickness: 6, textUnderlineOffset: 8 }}>PACK</span>.
            </h2>
            <div style={{
              marginTop: 18, height: 4, maxWidth: 360,
              background: 'linear-gradient(90deg, #000, rgba(0,0,0,0.4), transparent)',
              transform: 'skewX(-18deg)',
            }}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 280 }}>
            <a href="#recruit" className="btn" style={{ background: 'var(--ink)', borderColor: 'var(--ink)', color: 'var(--bone)' }}>
              REGISTER FOR TRYOUTS <span className="arrow">→</span>
            </a>
            <a href="#contact" className="btn" style={{ background: 'var(--bone)', borderColor: 'var(--bone)', color: 'var(--ink)' }}>
              QUESTIONS? CONTACT US <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
function HomePage() {
  return (
    <>
      <Hero />
      <StandardStrip />
      <AboutPreview />
      <HomeSchedulePreview />
      <JoinStrip />
    </>
  );
}

Object.assign(window, { HomePage, SectionHeader, NextGameCard, ScoreboardPreview, MapPanel });
