/* global React */
const { useEffect, useRef, useState, useCallback } = React;

const SoccerBallSVG = ({ size = 44, spinning = false }) => (
  <img
    src="/wp-content/themes/oxxo/images/soccer_ball.png"
    width={size}
    height={size}
    alt="soccer ball"
    style={{ display: 'block' }}
    className={spinning ? 'spin' : ''}
  />
);

window.SoccerBallSVG = SoccerBallSVG;

// ─────────── TOP NAV ───────────
function TopNav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo" aria-label="OXXO home">
          <img src="assets/oxxo-logo.png" alt="OXXO" />
        </a>
        <div className="nav-links">
          <a href="#">Who We Are</a>
          <a href="#">Fleet Cards</a>
          <a href="#">Growth & Real Estate</a>
          <a href="#">Careers</a>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button className="nav-cta">📍 Find My Local OXXO</button>
          <button className="hamburger" aria-label="Menu">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M3 6h14M3 10h14M3 14h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </div>
    </nav>
  );
}
window.TopNav = TopNav;

// ─────────── HERO ───────────
function Hero({ headline1, headline2 }) {
  return (
    <section className="hero">
      <div className="hero-pennants">
        {Array.from({ length: 24 }).map((_, i) => (
          <div key={i} className="pennant" />
        ))}
      </div>
      <div className="hero-stripes" />
      <div className="hero-halftone" />
      <div className="hero-inner">
        <div>
          <div className="hero-eyebrow">
            <span className="whistle">⚽</span>
            FanZone Summer
          </div>
          <h1 className="hero-title">
            <span className="line1">{headline1}</span>
            <span className="line2">{headline2}</span>
          </h1>
          <p className="hero-tag">
            ¡GOAAAAL! That's what you'll be screaming all summer.
            Before the whistle blows, fuel your <b>pasión</b> at OXXO —
            hot Andatti coffee for morning matches, ice-cold 12-packs
            and snacks for the afternoon showdowns.
          </p>
          <div className="hero-actions">
            <button className="btn btn-yellow">📍 Find My Local OXXO</button>
            <button className="btn btn-ghost" onClick={() => document.getElementById('goal-play')?.scrollIntoView({behavior:'smooth'})}>Take Your Shot ↓</button>
          </div>
        </div>
        <div className="hero-art">
          <HeroIllustration />
        </div>
      </div>
      <div style={{ height: 30 }} />
      <div className="hero-bottom-band">
        <div className="marquee">
          {Array.from({ length: 2 }).map((_, k) => (
            <span key={k}>
              <span className="ball" /> Calling all fans
              <span className="ball" /> Every day Goooal
              <span className="ball" /> Make your goal
              <span className="ball" /> See you at OXXO
              <span className="ball" /> Calling all fans
              <span className="ball" /> Every day Goooal
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroIllustration() {
  // Always-on loop: ball arcs into goal, net flexes, sparkle pops.
  return (
    <svg viewBox="0 0 560 540" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" className="hero-illo">
      <defs>
        <radialGradient id="spot" cx="50%" cy="80%" r="60%">
          <stop offset="0%" stopColor="#FEE658" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="#FEE658" stopOpacity="0"/>
        </radialGradient>
        <pattern id="halftone" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="3" cy="3" r="1.5" fill="#FEE658" fillOpacity="0.35"/>
        </pattern>
      </defs>
      <ellipse cx="280" cy="460" rx="260" ry="80" fill="url(#spot)"/>
      <g opacity="0.18">
        <rect x="40" y="120" width="480" height="200" fill="url(#halftone)"/>
      </g>
      {/* goal posts + net (flex on score) */}
      <g className="hero-goal" stroke="#FFEEAB" strokeWidth="6" fill="none" strokeLinecap="round">
        <line x1="120" y1="380" x2="120" y2="180"/>
        <line x1="440" y1="380" x2="440" y2="180"/>
        <line x1="120" y1="180" x2="440" y2="180"/>
        <g opacity="0.45" strokeWidth="1.5" className="hero-net">
          {Array.from({ length: 12 }).map((_, i) => (
            <line key={`v${i}`} x1={120 + i * 27} y1="180" x2={120 + i * 27} y2="380"/>
          ))}
          {Array.from({ length: 8 }).map((_, i) => (
            <line key={`h${i}`} x1="120" y1={180 + i * 25} x2="440" y2={180 + i * 25}/>
          ))}
        </g>
      </g>
      {/* arc trail */}
      <path className="hero-trail" d="M 60 430 Q 200 280 280 230" stroke="#FEE658" strokeWidth="6" strokeLinecap="round" strokeDasharray="4 14" fill="none" opacity="0.85"/>
      {/* animated ball — image centered at SVG (280,230); CSS translate-only animation */}
      <g className="hero-ball">
        <image href="/wp-content/themes/oxxo/images/soccer_ball.png" x="240" y="190" width="80" height="80"/>
      </g>
      {/* sparkle (pops on impact) */}
      <g className="hero-sparkle" fill="#FEE658" stroke="#DF0024" strokeWidth="3">
        <polygon points="280,170 290,200 320,210 290,220 280,250 270,220 240,210 270,200"/>
      </g>
      <g fill="#FEE658">
        <polygon points="80,140 86,156 102,156 89,166 94,182 80,172 66,182 71,166 58,156 74,156"/>
        <polygon points="490,310 494,322 506,322 496,330 500,342 490,335 480,342 484,330 474,322 486,322"/>
      </g>
    </svg>
  );
}

window.Hero = Hero;