/* global React, ReactDOM, Nav, Hero, Problem, Calculator, Sistema, StatRow, DayTimeline, Pricing, CaseStudy, Testimonials, Quiz, FAQ, Contact, Footer, FloatingWA, useRevealObserver */
const { useEffect: useEffectApp, useState: useStateApp } = React;

function App() {
  useRevealObserver();

  const defaults = window.TWEAK_DEFAULTS || {};
  const [tweaks, setTweaks] = useStateApp(defaults);
  const [showPanel, setShowPanel] = useStateApp(false);

  useEffectApp(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setShowPanel(true);
      if (d.type === "__deactivate_edit_mode") setShowPanel(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // apply tweaks
  useEffectApp(() => {
    const r = document.documentElement;
    // accent — set --accent, --accent-2, --accent-3 (deeper variant), --accent-soft (subtle bg tint)
    if (tweaks.accentChoice === "amber") {
      r.style.setProperty("--accent", "#e8a85c");
      r.style.setProperty("--accent-2", "#d96b3a");
      r.style.setProperty("--accent-3", "#c2473e");
      r.style.setProperty("--accent-soft", "#2a1f12");
    } else if (tweaks.accentChoice === "lime") {
      r.style.setProperty("--accent", "#cfe860");
      r.style.setProperty("--accent-2", "#9bd142");
      r.style.setProperty("--accent-3", "#7dba2c");
      r.style.setProperty("--accent-soft", "#1a2210");
    } else if (tweaks.accentChoice === "rose") {
      r.style.setProperty("--accent", "#e8709a");
      r.style.setProperty("--accent-2", "#c44676");
      r.style.setProperty("--accent-3", "#a23560");
      r.style.setProperty("--accent-soft", "#2a1018");
    } else if (tweaks.accentChoice === "violet") {
      r.style.setProperty("--accent", "#b39ce8");
      r.style.setProperty("--accent-2", "#8a6ec4");
      r.style.setProperty("--accent-3", "#6d4ea0");
      r.style.setProperty("--accent-soft", "#1a1428");
    }
    // bg theme
    if (tweaks.theme === "midnight") {
      r.style.setProperty("--bg", "#0a0d12");
      r.style.setProperty("--bg-2", "#0d1118");
      r.style.setProperty("--surface", "#13171f");
      r.style.setProperty("--surface-2", "#181c25");
      r.style.setProperty("--surface-3", "#1f2430");
      r.style.setProperty("--line", "#222732");
      r.style.setProperty("--ink", "#e8ecf2");
      r.style.setProperty("--ink-mute", "#8a93a3");
    } else if (tweaks.theme === "olive") {
      r.style.setProperty("--bg", "#0d100a");
      r.style.setProperty("--bg-2", "#10130c");
      r.style.setProperty("--surface", "#161a10");
      r.style.setProperty("--surface-2", "#1c2114");
      r.style.setProperty("--surface-3", "#23291a");
      r.style.setProperty("--line", "#252b18");
      r.style.setProperty("--ink", "#ecedde");
      r.style.setProperty("--ink-mute", "#9a9e83");
    } else {
      r.style.setProperty("--bg", "#0f0c08");
      r.style.setProperty("--bg-2", "#161108");
      r.style.setProperty("--surface", "#1c1610");
      r.style.setProperty("--surface-2", "#241c14");
      r.style.setProperty("--surface-3", "#2d2418");
      r.style.setProperty("--line", "#2a2218");
      r.style.setProperty("--ink", "#f5ede0");
      r.style.setProperty("--ink-mute", "#a89c87");
    }
    // density
    if (tweaks.density === "compact") {
      r.style.setProperty("--gutter", "clamp(12px, 2vw, 24px)");
    } else if (tweaks.density === "airy") {
      r.style.setProperty("--gutter", "clamp(24px, 5vw, 64px)");
    } else {
      r.style.setProperty("--gutter", "clamp(16px, 3vw, 40px)");
    }
    // radius
    if (tweaks.roundness === "sharp") {
      r.style.setProperty("--radius", "8px");
      r.style.setProperty("--radius-lg", "16px");
    } else if (tweaks.roundness === "extra") {
      r.style.setProperty("--radius", "32px");
      r.style.setProperty("--radius-lg", "48px");
    } else {
      r.style.setProperty("--radius", "22px");
      r.style.setProperty("--radius-lg", "36px");
    }
  }, [tweaks]);

  const update = (k, v) => {
    setTweaks(p => {
      const n = typeof k === "object" ? { ...p, ...k } : { ...p, [k]: v };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: typeof k === "object" ? k : { [k]: v } }, "*");
      return n;
    });
  };

  return (
    <>
      <Nav />
      <Hero />
      <div className="spacer"></div>
      <Problem />
      <div className="spacer"></div>
      <Calculator />
      <div className="spacer"></div>
      <Sistema />
      <div className="spacer"></div>
      <StatRow />
      <div className="spacer"></div>
      <DayTimeline />
      <div className="spacer"></div>
      <Pricing />
      <div className="spacer"></div>
      <CaseStudy />
      <div className="spacer"></div>
      <Quiz />
      <div className="spacer"></div>
      <FAQ />
      <div className="spacer"></div>
      <Contact />
      <Footer />
      <FloatingWA />

      {showPanel && (
        <TweaksPanel onClose={() => setShowPanel(false)}>
          <TweakSection title="Color de acento">
            <TweakRadio value={tweaks.accentChoice} onChange={v => update("accentChoice", v)} options={[
              { value: "amber", label: "Ámbar" },
              { value: "lime", label: "Lima" },
              { value: "rose", label: "Rosa" },
              { value: "violet", label: "Violeta" },
            ]} />
          </TweakSection>
          <TweakSection title="Tema oscuro">
            <TweakRadio value={tweaks.theme} onChange={v => update("theme", v)} options={[
              { value: "warm", label: "Cálido" },
              { value: "midnight", label: "Medianoche" },
              { value: "olive", label: "Oliva" },
            ]} />
          </TweakSection>
          <TweakSection title="Esquinas">
            <TweakRadio value={tweaks.roundness} onChange={v => update("roundness", v)} options={[
              { value: "sharp", label: "Definidas" },
              { value: "default", label: "Suaves" },
              { value: "extra", label: "Extra" },
            ]} />
          </TweakSection>
          <TweakSection title="Densidad">
            <TweakRadio value={tweaks.density} onChange={v => update("density", v)} options={[
              { value: "compact", label: "Compacto" },
              { value: "default", label: "Cómodo" },
              { value: "airy", label: "Aireado" },
            ]} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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