// HeroScene.jsx — looping hero visual for Conversion Works.
// A central "YOUR WEBSITE" device powers on first; then, one surface at a time,
// a connector arrow draws toward a CRO card and that card loads in. The order
// sweeps around the device: top-left → middle-left → bottom-left → bottom →
// bottom-right → middle-right → top-right. After the full state, it holds, then
// loops. Cards are transparent cutouts (normal blend); arrows are glow-on-black
// (screen blend). Honors prefers-reduced-motion (everything shown at rest).

const HS_A = (p) => assetUrl("assets/hero-scene/" + p);

const HS_CARDS = [
  { k: "card-pdp-v3.avif",        cls: "hs-pdp" },
  { k: "card-checkout-v3.avif",   cls: "hs-checkout" },
  { k: "card-reviews-v3.avif",    cls: "hs-reviews" },
  { k: "card-heatmap-v3.avif",    cls: "hs-heatmap" },
  { k: "card-cart-v3.avif",       cls: "hs-cart" },
  { k: "card-tracking-v3.avif",   cls: "hs-tracking" },
  { k: "card-analytics-v3.avif",  cls: "hs-analytics" },
];

// connector arrows — each art-on-black asset bridges its card to the central device.
const HS_STREAKS = [
  { k: "arrow-pdp.avif",       cls: "hs-ar-pdp" },
  { k: "arrow-cart.avif",      cls: "hs-ar-cart" },
  { k: "arrow-heatmap.avif",   cls: "hs-ar-heatmap" },
  { k: "arrow-checkout.avif",  cls: "hs-ar-checkout" },
  { k: "arrow-reviews.avif",   cls: "hs-ar-reviews" },
  { k: "arrow-tracking.avif",  cls: "hs-ar-tracking" },
  { k: "arrow-analytics.avif", cls: "hs-ar-analytics" },
];

// reveal order: device, then arrow→card around the layout. Keys match the class
// suffix after "hs-" (e.g. card "hs-pdp" → "pdp", arrow "hs-ar-pdp" → "ar-pdp").
const HS_ORDER = [
  "tablet",
  "ar-pdp", "pdp",
  "ar-heatmap", "heatmap",
  "ar-reviews", "reviews",
  "ar-tracking", "tracking",
  "ar-analytics", "analytics",
  "ar-checkout", "checkout",
  "ar-cart", "cart",
];

// per-key reveal time (ms). The card loads almost the instant its arrow lands, and
// the next arrow follows a split-second later — no empty beats.
const HS_TIMING = (() => {
  const t = { tablet: 250 };
  const pairs = ["pdp", "heatmap", "reviews", "tracking", "analytics", "checkout", "cart"];
  pairs.forEach((p, i) => {
    const arrow = 480 + i * 290;   // next arrow fires before the previous card finishes
    t["ar-" + p] = arrow;
    t[p] = arrow + 90;             // card loads right behind its arrow
  });
  return t;
})();
const HS_LOOP_AT = 480 + 6 * 290 + 90 + 3200;  // last card + ~3.2s hold, then loop

function HeroScene() {
  const reduce = typeof window !== "undefined" && window.matchMedia &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [shown, setShown] = useState(() => reduce ? new Set(HS_ORDER) : new Set());

  useEffect(() => {
    if (reduce) return;
    let timers = [];
    const run = () => {
      setShown(new Set());
      HS_ORDER.forEach((key) => {
        timers.push(setTimeout(() => {
          setShown((prev) => { const n = new Set(prev); n.add(key); return n; });
        }, HS_TIMING[key]));
      });
      timers.push(setTimeout(run, HS_LOOP_AT));
    };
    const start = setTimeout(run, 300);
    timers.push(start);
    return () => timers.forEach(clearTimeout);
  }, []);

  const sc = (cls) => cls.replace("hs-", ""); // class → reveal key

  return (
    <div className="hs-box" aria-hidden="true">
      <div className="hs-haze" />
      <div className="hs-slab" />
      <img className="hs-beam hs-beam-top" src={assetUrl("assets/hero-beam-purple.avif")} alt="" />
      <img className="hs-beam hs-beam-bottom" src={assetUrl("assets/hero-beam-purple.avif")} alt="" />
      <div className="hs-scene">
        {HS_STREAKS.map((s) => (
          <img key={s.k} src={HS_A(s.k)} alt=""
            className={"hs-streak " + s.cls + (shown.has(sc(s.cls)) ? " is-shown" : "")} />
        ))}
        <img className={"hs-tablet" + (shown.has("tablet") ? " is-shown" : "")}
          src={HS_A("tablet-1920.avif")} alt="" />
        {HS_CARDS.map((c) => (
          <img key={c.k} src={HS_A(c.k)} alt=""
            className={"hs-card " + c.cls + (shown.has(sc(c.cls)) ? " is-shown" : "")} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HeroScene });