// Hero — animated marquee + massive display type
const { useState, useEffect, useRef } = React;

// Animated round-counter ring — isolated so per-frame state doesn't re-render the rest of Hero
function RoundBadge({ accent }) {
  const startRef = useRef(Date.now());
  const [, force] = useState(0);
  useEffect(() => {
    let raf;
    const loop = () => {
      force((n) => (n + 1) % 1e6);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const ROUND_MS = 6000; // 6 seconds per round
  const TOTAL_ROUNDS = 6;
  const elapsed = Date.now() - startRef.current;
  const round = (Math.floor(elapsed / ROUND_MS) % TOTAL_ROUNDS) + 1;
  const ringProgress = (elapsed % ROUND_MS) / ROUND_MS;
  const roundLabel = String(round).padStart(2, "0");
  return (
    <div className="ko-round-badge">
      <div className="ko-mono" style={{ fontSize: 10, opacity: 0.6 }}>
        ROUND
      </div>
      <div className="ko-round-num" style={{ color: accent }}>
        {roundLabel}
      </div>
      <div className="ko-mono" style={{ fontSize: 10, opacity: 0.6 }}>
        OF 06
      </div>
      <svg className="ko-round-ring" viewBox="0 0 100 100">
        <circle
          cx="50"
          cy="50"
          r="46"
          fill="none"
          stroke="currentColor"
          strokeOpacity="0.15"
          strokeWidth="2"
        />
        <circle
          cx="50"
          cy="50"
          r="46"
          fill="none"
          stroke={accent}
          strokeWidth="2"
          strokeDasharray="289"
          strokeDashoffset={289 - 289 * ringProgress}
          transform="rotate(-90 50 50)"
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
}

// Live calorie counter — isolated for the same reason
function CalorieStat({ accent }) {
  const [time, setTime] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTime((t) => t + 1), 200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="ko-stat">
      <div className="ko-stat-num">
        {(180 + (Math.floor(time / 4) % 40)).toLocaleString()}
        <span style={{ color: accent }}>·</span>
      </div>
      <div className="ko-stat-lbl ko-mono">CALORIES / RD</div>
    </div>
  );
}

function Hero({ accent, density }) {
  const pad =
    density === "compact"
      ? "clamp(80px, 12vh, 140px)"
      : "clamp(120px, 18vh, 200px)";

  return (
    <section
      className="ko-hero"
      style={{ paddingTop: pad, paddingBottom: pad }}
    >
      {/* Background image with vignette */}
      <div className="ko-hero-bg">
        <img
          src="https://images.unsplash.com/photo-1599058917765-a780eda07a3e?w=2400&q=80"
          alt=""
          onError={(e) => {
            e.target.style.opacity = 0;
          }}
        />
        <div className="ko-hero-vignette" />
        <div className="ko-hero-grain" />
      </div>

      <div className="ko-container ko-hero-inner">
        {/* Left side meta */}
        <div className="ko-hero-meta">
          <div className="ko-mono ko-meta-row">
            <span className="ko-dot" style={{ background: accent }} /> NOW OPEN
            · LAKE MARY, FL
          </div>
          <div className="ko-mono ko-meta-row ko-meta-coords">
            905 WILLISTON PARK POINT · SUITE #3
          </div>
        </div>

        {/* Headline */}
        <h1 className="ko-hero-headline">
          <span className="ko-line">
            <span className="ko-display">KICK</span>
          </span>
          <span className="ko-line ko-line-mid">
            <span className="ko-display">THE EXTRA</span>
            <span className="ko-hero-tag" aria-hidden>
              <span className="ko-mono">[ EST. 2018 ]</span>
              <span className="ko-mono">ALL LEVELS WELCOME</span>
            </span>
          </span>
          <span className="ko-line">
            <span
              className="ko-display ko-display-stroke"
              style={{ WebkitTextStroke: `2px ${accent}` }}
            >
              WEIGHT.
            </span>
          </span>
        </h1>

        {/* Sub + CTAs */}
        <div className="ko-hero-foot">
          <div className="ko-hero-sub">
            <p>
              Lake Mary's fitness kickboxing gym. High-energy classes, real
              results, and coaches who know your name.{" "}
              <span style={{ color: accent }}>Come have some fun.</span>
            </p>
          </div>
          <div className="ko-hero-cta">
            <button
              className="ko-btn ko-btn-primary"
              style={{ background: accent, borderColor: accent }}
            >
              <span>CLAIM FREE TRIAL CLASS</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path
                  d="M5 12h14M13 5l7 7-7 7"
                  stroke="currentColor"
                  strokeWidth="2.5"
                  strokeLinecap="square"
                />
              </svg>
            </button>
            <button className="ko-btn ko-btn-ghost">
              <span
                className="ko-play-icon"
                style={{ borderLeftColor: accent }}
              />
              SEE THE GYM
            </button>
          </div>

          {/* Stats strip */}
          <div className="ko-hero-stats">
            <div className="ko-stat">
              <div className="ko-stat-num">
                357<span style={{ color: accent }}>+</span>
              </div>
              <div className="ko-stat-lbl ko-mono">5★ REVIEWS</div>
            </div>
            <CalorieStat accent={accent} />
            <div className="ko-stat">
              <div className="ko-stat-num">
                98<span style={{ color: accent }}>%</span>
              </div>
              <div className="ko-stat-lbl ko-mono">RECOMMEND</div>
            </div>
            <div className="ko-stat">
              <div className="ko-stat-num">
                6<span style={{ color: accent }}>WK</span>
              </div>
              <div className="ko-stat-lbl ko-mono">TRANSFORM</div>
            </div>
          </div>
        </div>
      </div>

      <RoundBadge accent={accent} />
    </section>
  );
}

window.Hero = Hero;