// App entry — composes the WaitWhatWeb site
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8FF3D",
  "type": "grotesk",
  "mode": "dark",
  "headline": "We build digital experiences that connect brands and people."
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--accent", t.accent);
  if (t.mode === "light") {
    root.style.setProperty("--bg", "#F5F2EC");
    root.style.setProperty("--bg-elev", "#EDE9E1");
    root.style.setProperty("--bg-card", "#E8E3D8");
    root.style.setProperty("--ink", "#0A0A0A");
    root.style.setProperty("--ink-dim", "#545454");
    root.style.setProperty("--ink-mute", "#8A8A8A");
    root.style.setProperty("--rule", "rgba(10,10,10,0.08)");
    root.style.setProperty("--rule-strong", "rgba(10,10,10,0.18)");
    root.style.setProperty("--accent-ink", "#0A0A0A");
  } else {
    root.style.setProperty("--bg", "#0A0A0A");
    root.style.setProperty("--bg-elev", "#111111");
    root.style.setProperty("--bg-card", "#131313");
    root.style.setProperty("--ink", "#EDEDED");
    root.style.setProperty("--ink-dim", "#8A8A8A");
    root.style.setProperty("--ink-mute", "#545454");
    root.style.setProperty("--rule", "#1F1F1F");
    root.style.setProperty("--rule-strong", "#2A2A2A");
    root.style.setProperty("--accent-ink", "#0A0A0A");
  }
  if (t.type === "serif") {
    root.style.setProperty("--display-family", "'Instrument Serif', serif");
    document.body.classList.add("type-serif");
  } else {
    root.style.setProperty("--display-family", "'Geist', sans-serif");
    document.body.classList.remove("type-serif");
  }
}

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

  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // Tweaks panel host protocol
  const [tweaksOpen, setTweaksOpen] = useState(false);
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setTweaksOpen(true);
      if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

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

  return (
    <>
      <CustomCursor />
      <Nav />
      <Hero headline={tweaks.headline} />
      <Marquee items={[
        "Web Development", "UI / UX Design", "System Development",
        "E-commerce", "Custom Tools", "Brand Systems", "Performance"
      ]} />
      <TrustedClients />
      <About />
      <Services />
      <Principles />
      <Team />
      <Process />
      <FAQ />
      <CTA />
      <Footer />

      {tweaksOpen && (
        <TweaksPanel title="Tweaks" onClose={() => {
          setTweaksOpen(false);
          window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
        }}>
          <TweakSection title="Mode">
            <TweakRadio
              value={tweaks.mode}
              onChange={(v) => setT("mode", v)}
              options={[
                { value: "dark", label: "Dark" },
                { value: "light", label: "Light" },
              ]}
            />
          </TweakSection>

          <TweakSection title="Accent">
            <TweakColor value={tweaks.accent} onChange={(v) => setT("accent", v)} />
            <div style={{ display: "flex", gap: 6, marginTop: 8, flexWrap: "wrap" }}>
              {["#C8FF3D", "#FF5C1F", "#3D5AFE", "#E8E3D8", "#FF3DAA", "#3DFFCB"].map((c) => (
                <button key={c} onClick={() => setT("accent", c)}
                  style={{ width: 22, height: 22, borderRadius: 999, background: c, border: tweaks.accent === c ? "2px solid #fff" : "1px solid rgba(255,255,255,.2)", cursor: "pointer" }} />
              ))}
            </div>
          </TweakSection>

          <TweakSection title="Display Type">
            <TweakRadio
              value={tweaks.type}
              onChange={(v) => setT("type", v)}
              options={[
                { value: "grotesk", label: "Grotesk" },
                { value: "serif", label: "Serif" },
              ]}
            />
          </TweakSection>

          <TweakSection title="Hero Headline">
            <TweakText value={tweaks.headline} onChange={(v) => setT("headline", v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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