// site/hero.jsx

function Hero() {
  const scrollRef = React.useRef(null);
  React.useEffect(() => {
    const handle = () => {
      const y = window.scrollY;
      const root = document.documentElement;
      root.style.setProperty('--scroll-y', y + 'px');
      const courtEl = document.querySelector('.hero-court');
      if (courtEl) courtEl.style.transform = `translateY(${y * 0.15}px)`;
      const claimEl = document.querySelector('.claim');
      if (claimEl) claimEl.style.transform = `translateY(${y * -0.05}px)`;
    };
    window.addEventListener('scroll', handle, { passive: true });
    return () => window.removeEventListener('scroll', handle);
  }, []);

  // SVG path representing the bouncing serve trajectory
  const trail = "M -40 60 Q 100 380 220 700 Q 320 460 420 300 Q 510 460 600 700 Q 670 510 740 410 Q 820 560 900 700 Q 960 580 1020 510 Q 1090 600 1160 700 Q 1210 620 1260 580 Q 1320 660 1380 700 L 1700 720";

  return (
    <section className="hero" id="top">
      {/* Court markings parallax */}
      <svg className="hero-court" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
        <g stroke="var(--accent-deep)" strokeWidth="1.5" fill="none" opacity="0.5">
          {/* Outer baselines / sidelines like a court abstraction */}
          <line x1="80" y1="120" x2="1520" y2="120"/>
          <line x1="80" y1="780" x2="1520" y2="780"/>
          <line x1="80" y1="120" x2="80" y2="780"/>
          <line x1="1520" y1="120" x2="1520" y2="780"/>
          {/* service line */}
          <line x1="240" y1="120" x2="240" y2="780"/>
          <line x1="1360" y1="120" x2="1360" y2="780"/>
          {/* center service */}
          <line x1="240" y1="450" x2="1360" y2="450"/>
          <line x1="800" y1="240" x2="800" y2="660"/>
        </g>
      </svg>

      {/* Trajectory + bouncing ball */}
      <svg className="hero-trail-svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="ballGrad" cx="35%" cy="35%" r="65%">
            <stop offset="0%" stopColor="#F0FF98"/>
            <stop offset="55%" stopColor="#C8FF3C"/>
            <stop offset="100%" stopColor="#7AAB10"/>
          </radialGradient>
          <filter id="ballShadow" x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx="0" dy="6" stdDeviation="6" floodColor="#7AAB10" floodOpacity="0.45"/>
          </filter>
        </defs>
        <path id="serveTrail" className="serve-line" d={trail}/>
        {/* shadow on baseline */}
        <ellipse className="ball-shadow" rx="14" ry="3.5">
          <animateMotion dur="9s" repeatCount="indefinite" rotate="0">
            <mpath xlinkHref="#serveTrail"/>
          </animateMotion>
        </ellipse>
        {/* the ball */}
        <g filter="url(#ballShadow)">
          <circle r="20" fill="url(#ballGrad)">
            <animateMotion dur="9s" repeatCount="indefinite" rotate="auto">
              <mpath xlinkHref="#serveTrail"/>
            </animateMotion>
          </circle>
          <path d="M -16 0 A 16 16 0 0 1 16 0" fill="none" stroke="rgba(255,255,255,0.85)" strokeWidth="2">
            <animateMotion dur="9s" repeatCount="indefinite" rotate="auto">
              <mpath xlinkHref="#serveTrail"/>
            </animateMotion>
            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.2s" repeatCount="indefinite" additive="sum"/>
          </path>
        </g>
      </svg>

      <div className="hero-grid">
        <div className="hero-meta">
          <span><span className="pip"></span> EST. 2026</span>
          <span><span className="pip live-pip"></span> ATP TOUR</span>
          <span><span className="pip"></span> iOS 17+</span>
          <span style={{ marginLeft: 'auto' }}>v1.2 BETA</span>
        </div>

        <h1 className="claim h-display">
          Live<br/>
          the <span className="accent">tour.</span>
        </h1>

        <p className="hero-sub">
          <strong>Setly</strong> turns your iPhone into a courtside companion. Live scores, every Grand Slam,
          every Masters 1000, every surface — pinned to your home screen.
        </p>

        <div className="cta-row">
          <a href="#download" className="btn btn-primary">
            Get TestFlight access <span className="arrow">→</span>
          </a>
          <a href="#features" className="btn btn-ghost">
            See the widgets <span className="arrow">↓</span>
          </a>
        </div>

        <div className="hero-foot">
          <div className="hero-stat">
            <div className="num">14<span className="unit">.</span></div>
            <div className="lbl">Tournaments tracked</div>
          </div>
          <div className="hero-stat">
            <div className="num">04<span className="unit">.</span></div>
            <div className="lbl">Surface palettes</div>
          </div>
          <div className="hero-stat">
            <div className="num">06<span className="unit">.</span></div>
            <div className="lbl">Widget sizes</div>
          </div>
          <div className="hero-stat">
            <div className="num">∞<span className="unit">.</span></div>
            <div className="lbl">Aces, every season</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });