const { useState, useEffect } = React;

const Nav = ({ onCta }) => (
  <nav className="nav">
    <div className="wrap nav-inner">
      <div className="logo">crayon<span className="dot">.</span></div>
      <div className="nav-links">
        <a href="#what" className="lnk">How it works</a>
        <a href="#why" className="lnk">What you get</a>
        <a href="#network" className="lnk">The network</a>
        <button className="btn" onClick={onCta} style={{padding:"10px 16px",fontSize:14,boxShadow:"3px 3px 0 var(--ink)"}}>
          Get early access <span className="arrow">→</span>
        </button>
      </div>
    </div>
  </nav>
);

const App = () => {
  // Load tweak defaults from JSON block
  const defaults = (() => {
    try {
      const raw = document.getElementById("crayon-tweaks").textContent;
      const m = raw.match(/\{[\s\S]*\}/);
      return JSON.parse(m[0]);
    } catch(e) { return {heroVariant:"speed",primaryAccent:"coral",playfulness:"high"}; }
  })();

  const [tweaks, setTweaks] = useState(() => {
    try { return JSON.parse(localStorage.getItem("crayon-tweaks")) || defaults; }
    catch(e){ return defaults; }
  });
  const [modalOpen, setModalOpen] = useState(false);
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    try { localStorage.setItem("crayon-tweaks", JSON.stringify(tweaks)); } catch(e){}
    // push to host for file persistence
    try {
      window.parent.postMessage({type:"__edit_mode_set_keys", edits: tweaks}, "*");
    } catch(e){}
  }, [tweaks]);

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

  const onCta = () => setModalOpen(true);
  const accent = tweaks.primaryAccent;
  const playful = tweaks.playfulness === "high";

  const HeroComp = tweaks.heroVariant === "reach" ? window.HeroReach
                : tweaks.heroVariant === "outcome" ? window.HeroOutcome
                : window.HeroSpeed;
  const WhatYouGet = window.WhatYouGet;
  const WhyItMatters = window.WhyItMatters;
  const NetworkScale = window.NetworkScale;
  const Footer = window.Footer;
  const SignupModal = window.SignupModal;
  const TweaksPanel = window.TweaksPanel;

  return (
    <div>
      <Nav onCta={onCta}/>
      <HeroComp accent={accent} onCta={onCta} playful={playful}/>
      <div id="what"><WhatYouGet accent={accent} onCta={onCta}/></div>
      <div id="why"><WhyItMatters/></div>
      <div id="network"><NetworkScale accent={accent} onCta={onCta}/></div>
      <Footer/>
      <SignupModal open={modalOpen} onClose={()=>setModalOpen(false)} accent={accent}/>
      <TweaksPanel open={editMode} state={tweaks} setState={setTweaks}/>
    </div>
  );
};

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