// Main app for Industrolearn homepage

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "italTreatment": "saffron",
  "routerLayout": "cards",
  "manifestoLayout": "pullquote",
  "programsLayout": "hero",
  "studioLayout": "grid",
  "founderLayout": "portrait"
}/*EDITMODE-END*/;

function App() {
  const [tweak, setTweak] = useTweaks(DEFAULT_TWEAKS);

  // Scroll to URL hash once the React tree has mounted (anchors don't exist
  // at initial paint, so the browser's native hash-jump misses).
  React.useEffect(() => {
    const id = window.location.hash.slice(1);
    if (!id) return;
    requestAnimationFrame(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  }, []);

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.is-in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [tweak]);

  return (
    <>
      <Nav />
      <Hero tweak={tweak} setTweak={setTweak} />
      <Router tweak={tweak} />
      <Manifesto tweak={tweak} />
      <Programs tweak={tweak} />
      <Studio tweak={tweak} />
      <Events />
      <Proof />
      <Founder tweak={tweak} />
      <LeadMagnet />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero — italic word treatment">
          <TweakRadio
            value={tweak.italTreatment}
            onChange={(v) => setTweak("italTreatment", v)}
            options={[
              { value: "default", label: "Serif italic" },
              { value: "saffron", label: "Saffron italic" },
              { value: "underline", label: "Underline" },
              { value: "fill", label: "Saffron fill" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Three-path router">
          <TweakRadio
            value={tweak.routerLayout}
            onChange={(v) => setTweak("routerLayout", v)}
            options={[
              { value: "cards", label: "Cards" },
              { value: "list", label: "Editorial list" },
              { value: "stack", label: "Typographic stack" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Manifesto block">
          <TweakRadio
            value={tweak.manifestoLayout}
            onChange={(v) => setTweak("manifestoLayout", v)}
            options={[
              { value: "centered", label: "Centered column" },
              { value: "pullquote", label: "Pull-quote" },
              { value: "letter", label: "Signed letter" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Programs strip">
          <TweakRadio
            value={tweak.programsLayout}
            onChange={(v) => setTweak("programsLayout", v)}
            options={[
              { value: "cards", label: "Equal cards" },
              { value: "hero", label: "Builder hero" },
              { value: "table", label: "Comparison" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Studio strip">
          <TweakRadio
            value={tweak.studioLayout}
            onChange={(v) => setTweak("studioLayout", v)}
            options={[
              { value: "grid", label: "5-card grid" },
              { value: "ladder", label: "Priced ladder" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Founder block">
          <TweakRadio
            value={tweak.founderLayout}
            onChange={(v) => setTweak("founderLayout", v)}
            options={[
              { value: "portrait", label: "Portrait + text" },
              { value: "fullbleed", label: "Full-bleed cover" },
              { value: "signature", label: "Signature card" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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