// App composition + Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#10b981",
  "displayFont": "Instrument Serif",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENTS = [
  ["#10b981", "rgba(16,185,129,0.14)"],   // emerald (default)
  ["#059669", "rgba(5,150,105,0.14)"],    // emerald deep
  ["#34d399", "rgba(52,211,153,0.14)"],   // emerald light
  ["#0d7c5c", "rgba(13,124,92,0.14)"],    // forest
];

const FONTS = [
  "Instrument Serif",
  "Fraunces",
  "Cormorant Garamond",
];

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Scroll to URL hash after the React tree mounts. The browser's native
  // scroll-to-anchor runs before our content exists (everything is rendered
  // by React via Babel-transpiled JSX), so links like /#caminos arriving
  // from another route would land at the top of the page. This re-runs the
  // jump once the section is actually in the DOM.
  React.useEffect(() => {
    if (!window.location.hash) return;
    const id = window.location.hash;
    let attempts = 0;
    const tryScroll = () => {
      const el = document.querySelector(id);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
        return;
      }
      if (attempts++ < 20) setTimeout(tryScroll, 80);
    };
    requestAnimationFrame(() => setTimeout(tryScroll, 80));
  }, []);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const swatch = ACCENTS.find((a) => a[0] === t.accent) || ACCENTS[0];
    r.setProperty("--accent", swatch[0]);
    r.setProperty("--accent-soft", swatch[1]);
    r.setProperty("--display", `"${t.displayFont}", "Times New Roman", serif`);
    if (t.density === "compact") {
      r.setProperty("--section-y", "clamp(60px, 7vw, 110px)");
      r.setProperty("--pad-x", "clamp(16px, 3vw, 56px)");
    } else {
      r.setProperty("--section-y", "clamp(80px, 10vw, 160px)");
      r.setProperty("--pad-x", "clamp(20px, 4vw, 80px)");
    }

    if (t.displayFont !== "Instrument Serif" && !document.getElementById("extra-font")) {
      const l = document.createElement("link");
      l.id = "extra-font";
      l.rel = "stylesheet";
      l.href = `https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;1,400&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap`;
      document.head.appendChild(l);
    }
  }, [t]);

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TC = window.TweakColor;
  const TR = window.TweakRadio;
  const TSel = window.TweakSelect;

  return (
    <>
      <Nav />
      <Hero />
      <Problem />
      <Caminos />
      <Modulos />
      <Industria />
      <Suite />
      <Agencia />
      <Timeline />
      <Creditos />
      <Tessa />
      <Simulador />
      <Anti />
      <Precios />
      <Herramientas />
      <FAQ />
      <CTA />
      <Foot />

      {TP && (
        <TP title="Tweaks">
          <TS title="Acento">
            <TC
              label="Color"
              value={t.accent}
              options={ACCENTS.map((a) => a[0])}
              onChange={(v) => setTweak("accent", v)}
            />
          </TS>
          <TS title="Tipografía">
            <TSel
              label="Display font"
              value={t.displayFont}
              options={FONTS}
              onChange={(v) => setTweak("displayFont", v)}
            />
          </TS>
          <TS title="Densidad">
            <TR
              label="Espaciado"
              value={t.density}
              options={[
                { value: "comfortable", label: "Espacioso" },
                { value: "compact", label: "Compacto" },
              ]}
              onChange={(v) => setTweak("density", v)}
            />
          </TS>
        </TP>
      )}
    </>
  );
}

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