// HeroConcept.jsx — looping hero visual: an outdated site is fed by strategy
// modules, connectors carry those inputs in, and a polished homepage concept
// (desktop + mobile) takes focus while the old site recedes into the background.
function HeroConcept() {
  const reduce = typeof window !== "undefined" && window.matchMedia &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [phase, setPhase] = useState(reduce ? 5 : 0);

  useEffect(() => {
    if (reduce) return;
    let timers = [];
    const at = (ms, fn) => timers.push(setTimeout(fn, ms));
    const run = (off) => {
      off = off || 0;
      setPhase(0);
      at(300 + off, () => setPhase(1));   // 1. current website appears
      at(1250 + off, () => setPhase(2));  // 2. strategy modules appear around it
      at(2550 + off, () => setPhase(3));  // 3. connectors feed inputs in
      at(3850 + off, () => setPhase(4));  // 4. polished desktop concept takes focus
      at(4850 + off, () => setPhase(5));  // 5. mobile concept slides in (final)
      at(11200 + off, () => run(0));      // 6. hold final state, then loop
    };
    run(450);
    return () => timers.forEach(clearTimeout);
  }, []);

  const A = (p) => assetUrl("assets/hero/" + p);
  const modules = [
    { key: "proof-module.svg", cls: "m-proof" },
    { key: "reviews-module.svg", cls: "m-reviews" },
    { key: "services-module.svg", cls: "m-services" },
    { key: "media-module.svg", cls: "m-media" },
    { key: "seo-aeo-module.svg", cls: "m-seo" },
    { key: "mobile-ready-module.svg", cls: "m-mobready" },
    { key: "cta-path-module.svg", cls: "m-cta" },
  ];

  return (
    <div className={"hc-stage hc-p" + phase} aria-hidden="true">
      {/* old / current website — first the focus, then recedes to the back */}
      <img className="hc-old" src={A("old-site-card.svg")} alt="" />

      {/* connector lines carrying strategy inputs into the site */}
      <svg className="hc-conn" viewBox="0 0 560 540" fill="none" preserveAspectRatio="none">
        <defs>
          <linearGradient id="hcOrange" x1="0" y1="0" x2="560" y2="0" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FF7A1A" stopOpacity="0.95" />
            <stop offset="1" stopColor="#FFB06A" stopOpacity="0.55" />
          </linearGradient>
          <linearGradient id="hcPurple" x1="0" y1="0" x2="560" y2="0" gradientUnits="userSpaceOnUse">
            <stop stopColor="#7B5CFF" stopOpacity="0.82" />
            <stop offset="1" stopColor="#A973FF" stopOpacity="0.52" />
          </linearGradient>
        </defs>
        <g className="hc-lines">
          <path d="M122,120 C160,120 150,170 166,196" stroke="url(#hcOrange)" />
          <path d="M118,278 C150,278 150,258 170,256" stroke="url(#hcPurple)" />
          <path d="M130,420 C168,420 156,346 172,330" stroke="url(#hcOrange)" />
          <path d="M432,100 C432,140 432,168 430,196" stroke="url(#hcPurple)" />
          <path d="M438,244 C420,236 415,228 408,214" stroke="url(#hcOrange)" />
          <path d="M430,386 C432,346 430,330 430,312" stroke="url(#hcPurple)" />
          <path d="M266,450 C266,420 274,392 282,360" stroke="url(#hcOrange)" />
        </g>
      </svg>

      {/* strategy / input modules — transient; fade once the concept forms */}
      {modules.map((m, i) => (
        <img key={m.key} className={"hc-mod " + m.cls} style={{ transitionDelay: i * 80 + "ms" }}
          src={A(m.key)} alt="" />
      ))}

      {/* polished concept — desktop becomes the focus, mobile lands last */}
      <img className="hc-desk" src={A("homepage-concept-desktop.svg")} alt="" />
      <img className="hc-mob" src={A("homepage-concept-mobile.svg")} alt="" />
    </div>
  );
}
Object.assign(window, { HeroConcept });