const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Hero — animated/scroll-driven. Logo, headline, support, CTA, scroll indicator.
function Hero({ tweaks }) {
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const onScroll = () => setScroll(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Parallax + fade on scroll
  const heroProgress = Math.min(1, scroll / 700);
  const variant = tweaks.heroVariant || "split";

  return (
    <section className="hero" data-variant={variant} id="hero">
      <div className="hero-bg" style={{ transform: `translate3d(0, ${scroll * 0.3}px, 0)` }}>
        <div className="hero-grid-lines"></div>
        <div className="hero-gradient"></div>
      </div>

      <div className="hero-marquee" aria-hidden="true">
        <div className="marquee-track">
          {Array.from({ length: 6 }).map((_, i) => (
            <span key={i}>
              BORN&nbsp;IN&nbsp;RACING <em>·</em> CHARGING&nbsp;THE&nbsp;FUTURE <em>·</em>
            </span>
          ))}
        </div>
      </div>

      <div className="hero-inner" style={{ opacity: 1 - heroProgress * 0.6 }}>
        <div className="hero-left">
          <div className="hero-badge">
            <span className="badge-dot"></span>
            Official RFN Distributor in Georgia — Zava Motors
          </div>

          <h1 className="hero-headline">
            <span className="line">RFN</span>
            <span className="line accent">ელექტრო Dirt Bike</span>
            <span className="line">საქართველოში</span>
          </h1>

          <p className="hero-sub">
            Racing დნმ, ელექტრო ძალა და ახალი თაობის off-road გამოცდილება — ბავშვებისთვის,
            მოზარდებისთვის და პროფესიონალი rider-ებისთვის.
          </p>

          <div className="hero-cta">
            <a href="#families" className="btn btn-primary">
              <span>მოდელების ნახვა</span>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M3 9h12m0 0l-5-5m5 5l-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/>
              </svg>
            </a>
            <a href="#contact" className="btn btn-ghost">კონსულტაციის მიღება</a>
          </div>

          <div className="hero-stats">
            <div className="stat">
              <div className="stat-num"><Counter to={2020} /></div>
              <div className="stat-label">დაარსდა</div>
            </div>
            <div className="stat">
              <div className="stat-num"><Counter to={5} /></div>
              <div className="stat-label">პროდუქტის ხაზი</div>
            </div>
            <div className="stat">
              <div className="stat-num"><Counter to={17} /></div>
              <div className="stat-label">მოდელი</div>
            </div>
            <div className="stat">
              <div className="stat-num"><Counter to={100} suffix="%" /></div>
              <div className="stat-label">ელექტრო</div>
            </div>
          </div>
        </div>

        <div className="hero-right">
          <div className="hero-bike-frame" style={{ transform: `translate3d(0, ${-scroll * 0.08}px, 0) rotate(-2deg)` }}>
            <video
              className="hero-video"
              src="assets/rfnwarriorproe15plusreel.mp4"
              poster="assets/RFN SX-E15 Plus Warrior Pro Electric Dirt Bike.webp"
              autoPlay
              muted
              loop
              playsInline
              preload="metadata"
            />
            <div className="hero-bike-tag tag-tl">
              <div className="tag-k">PEAK POWER</div>
              <div className="tag-v">15 kW</div>
            </div>
            <div className="hero-bike-tag tag-br">
              <div className="tag-k">TOP SPEED</div>
              <div className="tag-v">100 <span>კმ/სთ</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-scroll-indicator">
        <div className="scroll-line"></div>
        <span>SCROLL</span>
      </div>
    </section>
  );
}

window.Hero = Hero;