/* ===========================================================
   IGEC — App principal + Tweaks
   =========================================================== */

const ACCENTS = ["#0b83c7", "#5f9a45", "#2f8f86", "#7a86c0"];
const HEAD_FONTS = {
  "auto":      null,
  "spectral":  { family: '"Spectral", Georgia, serif',                 w: 600, s: "-0.01em" },
  "newsreader":{ family: '"Newsreader", Georgia, serif',               w: 600, s: "-0.01em" },
  "hanken":    { family: '"Hanken Grotesk", system-ui, sans-serif',    w: 800, s: "-0.025em" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "a",
  "intensity": "sereno",
  "accent": "#0b83c7",
  "headFont": "auto"
}/*EDITMODE-END*/;

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

  const rootStyle = { "--accent": t.accent };
  const hf = HEAD_FONTS[t.headFont];
  if (hf) { rootStyle["--font-head"] = hf.family; rootStyle["--head-weight"] = hf.w; rootStyle["--head-spacing"] = hf.s; }

  return (
    <div className="igec-root" data-variant={t.variant} data-intensity={t.intensity} style={rootStyle}>
      <Navbar data={data} />
      <main>
        <Hero data={data} />
        <Historia data={data} />
        <Servicios data={data} />
        <Profesionales data={data} />
        <Visitanos data={data} />
        <Contacto data={data} />
      </main>
      <Footer data={data} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Dirección de diseño" />
        <TweakRadio label="Variante" value={t.variant}
          options={[{ value: "a", label: "A · Editorial" }, { value: "b", label: "B · Moderna" }]}
          onChange={(v) => setTweak("variant", v)} />
        <TweakRadio label="Intensidad" value={t.intensity}
          options={[{ value: "sereno", label: "Sereno" }, { value: "equilibrado", label: "Equilibrado" }]}
          onChange={(v) => setTweak("intensity", v)} />

        <TweakSection label="Color y tipografía" />
        <TweakColor label="Acento" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSelect label="Títulos" value={t.headFont}
          options={[
            { value: "auto", label: "Según variante" },
            { value: "spectral", label: "Spectral (serif)" },
            { value: "newsreader", label: "Newsreader (serif)" },
            { value: "hanken", label: "Hanken (sans)" },
          ]}
          onChange={(v) => setTweak("headFont", v)} />
      </TweaksPanel>
    </div>
  );
}

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