/* Illuma Energy — shared sections: SectionHead, FAQ, CTA, SubHero */

function SectionHead({ label, title, intro, center, width = 1000, light }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: center ? "center" : "flex-start", textAlign: center ? "center" : "left" }}>
      <Label>{label}</Label>
      <h2 className="ill-h2" style={{ maxWidth: width, color: light ? "#fff" : undefined, textWrap: "balance" }}>{title}</h2>
      {intro && <p className="ill-body" style={{ maxWidth: width, margin: 0, color: light ? "rgba(255,255,255,0.8)" : "var(--color-black)" }}>{intro}</p>}
    </div>
  );
}

function FAQ({ items, heading = "Frequently Asked Questions", support = "Can\u2019t find the answer you\u2019re looking for?", cta = "Get in touch" }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "120px 0", background: "#fff" }}>
      <div className="ill-main ill-faq-grid" style={{ display: "grid", gridTemplateColumns: "451px 841px", gap: 108 }}>
        <div>
          <Label>FAQ</Label>
          <h2 className="ill-h2" style={{ margin: "16px 0 32px", maxWidth: 380 }}>{heading}</h2>
          <p className="ill-body" style={{ color: "var(--color-black-70)", maxWidth: 360, marginBottom: 28 }}>{support}</p>
          <Button variant="berry" as="a" href="contact.html">{cta}</Button>
        </div>
        <div>
          {items.map((it, i) => (
            <div key={i} className={"ill-faq-item" + (open === i ? " open" : "")}>
              <button className="ill-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}<span className="ill-faq-plus" />
              </button>
              <div className="ill-faq-a"><p className="ill-body" style={{ color: "var(--color-black-70)" }}>{it.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({
  heading = "Interested in working with us?",
  support = "Whether you\u2019re a partner, supplier, community member or investor, we\u2019d like to hear from you.",
  cta = "Contact our team",
  href = "contact.html",
}) {
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    const section = sectionRef.current;
    if (!section) return;
    const DEG = Math.PI / 180;
    const SPREAD = 10 * DEG;          // half-angle of the beam cone (~20° total)
    const DEFAULT = -20 * DEG;        // resting diagonal direction (up-right)
    const MINC = -74 * DEG, MAXC = -7 * DEG;   // clamp so the cone never collapses

    let cur = DEFAULT, target = DEFAULT, raf = 0;

    // project a cone edge FAR past the box so the clipped white region fills
    // every box corner the cone spans (lets the beam reach through top-right)
    function far(a, W, H) {
      const R = Math.hypot(W, H) * 2.4;
      return [((R * Math.cos(a)) / W) * 100, ((H + R * Math.sin(a)) / H) * 100];
    }
    function paint(a) {
      const r = section.getBoundingClientRect();
      if (!r.width || !r.height) return;
      const [ux, uy] = far(a - SPREAD, r.width, r.height);
      const [lx, ly] = far(a + SPREAD, r.width, r.height);
      section.style.setProperty(
        "--beam-clip",
        `polygon(0% 100%, ${ux.toFixed(2)}% ${uy.toFixed(2)}%, ${lx.toFixed(2)}% ${ly.toFixed(2)}%)`
      );
    }
    paint(cur);

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const desktop = window.matchMedia("(min-width: 1280px) and (pointer: fine)").matches;
    if (!desktop || reduce) return; // mobile / reduced-motion: CSS keyframes (or static) take over

    function loop() {
      cur += (target - cur) * 0.12;
      paint(cur);
      if (Math.abs(target - cur) > 0.0004) raf = requestAnimationFrame(loop);
      else raf = 0;
    }
    function kick() { if (!raf) raf = requestAnimationFrame(loop); }
    function onMove(e) {
      const r = section.getBoundingClientRect();
      let a = Math.atan2((e.clientY - r.top) - r.height, e.clientX - r.left);
      target = Math.max(MINC, Math.min(MAXC, a));
      kick();
    }
    function onLeave() { target = DEFAULT; kick(); }
    function onResize() { paint(cur); }
    section.addEventListener("mousemove", onMove);
    section.addEventListener("mouseleave", onLeave);
    window.addEventListener("resize", onResize);
    return () => {
      section.removeEventListener("mousemove", onMove);
      section.removeEventListener("mouseleave", onLeave);
      window.removeEventListener("resize", onResize);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  const layer = (variant) => (
    <div
      className={`ill-cta-content cta-content cta-content--${variant}`}
      aria-hidden={variant === "dark" ? "true" : undefined}
    >
      <h2 className="ill-cta-h2">{heading}</h2>
      <p className="ill-cta-support">{support}</p>
      <Button variant={variant === "dark" ? "berry" : "pink"} as="a" href={href}>{cta}</Button>
    </div>
  );

  return (
    <section ref={sectionRef} className="ill-cta interactive-cta">
      <div className="ill-cta-bg cta-bg" />
      <div className="ill-cta-beam spotlight-beam" />
      {layer("light")}
      {layer("dark")}
    </section>
  );
}

// Subpage hero — matches Homepage hero structure; full-screen image-led with centered content overlay
function SubHero({ img, title, intro, kicker, height = 620 }) {
  const { sectionRef, imgRef } = useHeroParallax(70);
  return (
    <section ref={sectionRef} style={{ position: "relative", minHeight: "100vh", overflow: "hidden" }}>
      <img ref={imgRef} src={img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", transform: "scale(1.2)", transformOrigin: "center center" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(33,31,33,0.4) 0%, rgba(33,31,33,0.2) 50%, rgba(33,31,33,0.45) 100%)" }} />
      <div style={{ position: "relative", zIndex: 1, minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 32, padding: "120px 24px" }}>
        {kicker && <div style={{ fontFamily: "var(--font-secondary)", fontSize: 14, opacity: 0.85, color: "#fff" }}>{kicker}</div>}
        <h1 className="ill-h1" style={{ color: "#fff", maxWidth: 1100 }}>{title}</h1>
        {intro && <p className="ill-body-lg" style={{ color: "rgba(255,255,255,0.9)", maxWidth: 720, margin: 0 }}>{intro}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, FAQ, CTA, SubHero });