// App shell: state, reveal-on-scroll, Tweaks panel, mount.
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "red",
  "heroVariant": "default",
  "showGrain": true
}/*EDITMODE-END*/;

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

const ACCENTS = {
  red:    { red:"#A52525", red2:"#C83C3C", deep:"#8B1F1F" },
  crimson:{ red:"#8B1F1F", red2:"#B02828", deep:"#6C1515" },
  oxblood:{ red:"#5E1414", red2:"#8A1F1F", deep:"#3F0D0D" },
  amber:  { red:"#B8963E", red2:"#D4B050", deep:"#8A6F25" },
};

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksOn, setTweaksOn] = useState(false);
  const [login, setLogin] = useState(false);
  const emailRef = useRef(null);

  useReveal();

  // Tweaks integration
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setTweaksOn(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOn(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // Apply accent
  useEffect(() => {
    const a = ACCENTS[tweaks.accentHue] || ACCENTS.red;
    document.documentElement.style.setProperty("--red", a.red);
    document.documentElement.style.setProperty("--red-soft", a.red2);
    document.documentElement.style.setProperty("--red-deep", a.deep);
    const grain = document.querySelector(".grain");
    if (grain) grain.style.opacity = tweaks.showGrain ? 0.55 : 0;
  }, [tweaks]);

  const updateTweak = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  const openWaitlist = () => {
    const el = document.getElementById("pricing");
    if (el) el.scrollIntoView({ behavior:"smooth", block:"start" });
    setTimeout(()=> emailRef.current && emailRef.current.focus(), 700);
  };

  return (
    <>
      <Nav onLogin={()=>setLogin(true)} openWaitlist={openWaitlist} />
      <Hero onCta={openWaitlist} variant={tweaks.heroVariant} />
      <Experience />
      <Firm />
      <Audience />
      <AIQuestion />
      <Pricing openWaitlist={openWaitlist} emailRef={emailRef} />
      <Footer />
      <LoginModal open={login} onClose={()=>setLogin(false)} />

      {/* Tweaks */}
      <div className={"tweaks " + (tweaksOn ? "on" : "")}>
        <h5>Tweaks</h5>
        <div className="grp">
          <div className="lbl">Hero Copy</div>
          <div className="row">
            {["default","billable","draft"].map(v => (
              <button key={v}
                className={"opt " + (tweaks.heroVariant === v ? "active" : "")}
                onClick={()=>updateTweak("heroVariant", v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="grp">
          <div className="lbl">Grain Texture</div>
          <div className="row">
            {[["on",true],["off",false]].map(([l,v]) => (
              <button key={l}
                className={"opt " + (tweaks.showGrain === v ? "active" : "")}
                onClick={()=>updateTweak("showGrain", v)}>{l}</button>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

// Smooth anchor scroll
document.addEventListener("click", (e) => {
  const a = e.target.closest && e.target.closest('a[href^="#"]');
  if (!a) return;
  const id = a.getAttribute("href").slice(1);
  if (!id) return;
  const el = document.getElementById(id);
  if (!el) return;
  e.preventDefault();
  el.scrollIntoView({ behavior:"smooth", block:"start" });
});

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