/* global React, ReactDOM */
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "flow",
  "stickyCta": true
}/*EDITMODE-END*/;

function App() {
  const [editMode, setEditMode] = useState(false);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);

  useEffect(() => {
    const onMessage = (event) => {
      const data = event.data || {};
      if (data.type === "__activate_edit_mode") setEditMode(true);
      if (data.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMessage);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMessage);
  }, []);

  useEffect(() => {
    const elements = document.querySelectorAll(".reveal, .trail-step");
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) entry.target.classList.add("is-visible");
      });
    }, { threshold: 0.14, rootMargin: "0px 0px -48px 0px" });
    elements.forEach((element) => observer.observe(element));
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const scrollToHash = () => {
      if (!window.location.hash) return;
      const target = document.querySelector(window.location.hash);
      if (!target) return;
      const top = target.getBoundingClientRect().top + window.scrollY - 84;
      window.scrollTo({ top: Math.max(0, top), behavior: "auto" });
    };
    const timers = [120, 480, 900, 1800, 3000].map((delay) => window.setTimeout(scrollToHash, delay));
    window.addEventListener("hashchange", scrollToHash);
    return () => {
      timers.forEach((timer) => window.clearTimeout(timer));
      window.removeEventListener("hashchange", scrollToHash);
    };
  }, []);

  const updateTweak = (key, value) => {
    setTweaks((previous) => {
      const next = { ...previous, [key]: value };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*");
      return next;
    });
  };

  return (
    <>
      <Header />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <AudienceIntro />
        <OutcomeShift />
        <WhatIsPod />
        <BlueprintSection />
        <DeploymentFlow />
        <GovernanceFeatures />
        <BoundarySection />
        <MarketplacePreview />
        <UseCases />
        <Ecosystem />
        <Testimonials />
        <LogoSection />
        <PartnerProgram />
        <Faq />
        <FinalCta />
      </main>
      <Footer />
      <StickyCta enabled={tweaks.stickyCta} />

      {editMode && (
        <TweaksPanel onClose={() => {
          setEditMode(false);
          window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
        }}>
          <TweakSection label="Hero Diagram">
            <TweakRadio
              label="Visual model"
              value={tweaks.heroVariant}
              onChange={(value) => updateTweak("heroVariant", value)}
              options={[
                { value: "flow", label: "Service flow" },
                { value: "pod", label: "POD structure" },
                { value: "trail", label: "Assurance trail" }
              ]}
            />
          </TweakSection>
          <TweakSection label="Conversion">
            <TweakToggle
              label="Sticky CTA"
              value={tweaks.stickyCta}
              onChange={(value) => updateTweak("stickyCta", value)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);