function TalkModal({ lang, onClose }) {
  const [sent, setSent] = React.useState(false);
  const [pain, setPain] = React.useState("");
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        {!sent ? (
          <>
            <div style={{fontFamily:"var(--font-mono)",fontSize:".65rem",letterSpacing:".2em",textTransform:"uppercase",color:"var(--fg-muted)",marginBottom:"1rem"}}>
              {lang === "de" ? "Erstgespräch · 30 min" : "First call · 30 min"}
            </div>
            <h3>{lang === "de" ? "Zeig uns, wo es wehtut." : "Show us where it hurts."}</h3>
            <p className="lead">{lang === "de" ? "Wir antworten innerhalb von 24 Stunden. Kein Pitch." : "We'll reply within 24 hours. No pitch."}</p>
            <div className="field">
              <label>{lang === "de" ? "Name" : "Name"}</label>
              <input placeholder={lang === "de" ? "Wie dürfen wir euch nennen?" : "What shall we call you?"} />
            </div>
            <div className="field">
              <label>{lang === "de" ? "Unternehmen" : "Company"}</label>
              <input placeholder="Musterbetrieb GmbH" />
            </div>
            <div className="field">
              <label>{lang === "de" ? "Wo schmerzt es?" : "Where does it hurt?"}</label>
              <textarea rows="3" value={pain} onChange={(e)=>setPain(e.target.value)} placeholder={lang === "de" ? "Angebotsprozess dauert 4 Stunden. Jedes Mal." : "Quoting process takes 4 hours. Every time."} />
            </div>
            <div className="modal-actions">
              <button className="btn btn-copper" onClick={() => setSent(true)}>{lang === "de" ? "Senden →" : "Send →"}</button>
              <button className="btn-text" onClick={onClose}>{lang === "de" ? "Abbrechen" : "Cancel"}</button>
            </div>
          </>
        ) : (
          <>
            <div style={{fontFamily:"var(--font-mono)",fontSize:".65rem",letterSpacing:".2em",textTransform:"uppercase",color:"var(--shyft-copper)",marginBottom:"1rem"}}>
              ✓ {lang === "de" ? "Angekommen" : "Received"}
            </div>
            <h3>{lang === "de" ? "Danke. Wir melden uns." : "Thanks. We'll be in touch."}</h3>
            <p className="lead">
              {lang === "de" ? "Meistens innerhalb von 24 Stunden — eine von uns, nicht ein Formular." : "Usually within 24 hours — one of us, not a form."}
            </p>
            <div className="modal-actions">
              <button className="btn btn-dark" onClick={onClose}>{lang === "de" ? "Schließen" : "Close"}</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ---- Tweaks -------------------------------------------------------------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tileMotif": true,
  "showTestimonials": true,
  "showFAQ": true
}/*EDITMODE-END*/;

function useTweaks() {
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setActive(true);
      if (d.type === "__deactivate_edit_mode") setActive(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);
  function update(patch) {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  }
  return [tweaks, update, active];
}

function TweaksPanel({ tweaks, update }) {
  return (
    <div className="tweaks-panel">
      <div className="tweaks-title">Tweaks</div>
      <label className="tweak-toggle">
        <input type="checkbox" checked={!!tweaks.tileMotif} onChange={(e) => update({ tileMotif: e.target.checked })} />
        <span>Tile motif in Pillars</span>
      </label>
      <label className="tweak-toggle">
        <input type="checkbox" checked={!!tweaks.showTestimonials} onChange={(e) => update({ showTestimonials: e.target.checked })} />
        <span>Show Testimonials</span>
      </label>
      <label className="tweak-toggle">
        <input type="checkbox" checked={!!tweaks.showFAQ} onChange={(e) => update({ showFAQ: e.target.checked })} />
        <span>Show FAQ</span>
      </label>
    </div>
  );
}

function App() {
  const [lang, setLang] = useLang();
  const [talkOpen, setTalkOpen] = React.useState(false);
  const [tweaks, updateTweaks, tweaksActive] = useTweaks();
  return (
    <div className={"shyft site" + (tweaks.tileMotif ? "" : " no-tile-motif")}>
      <Nav lang={lang} setLang={setLang} onTalk={() => setTalkOpen(true)} />
      <Hero lang={lang} onTalk={() => setTalkOpen(true)} />
      <Services lang={lang} />
      <Process lang={lang} />
      <Pillars lang={lang} />
      <CaseStudy lang={lang} />
      {tweaks.showTestimonials && <Testimonials lang={lang} />}
      <ComparisonTable lang={lang} />
      <Founders lang={lang} />
      {tweaks.showFAQ && <FAQ lang={lang} />}
      <ClaimBlock lang={lang} onTalk={() => setTalkOpen(true)} />
      <Footer lang={lang} />
      {talkOpen && <TalkModal lang={lang} onClose={() => setTalkOpen(false)} />}
      {tweaksActive && <TweaksPanel tweaks={tweaks} update={updateTweaks} />}
    </div>
  );
}

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