/* app.jsx — composición + Tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0d57a8",
  "fontPair": "archivo",
  "animIntensity": 1,
  "heroTitle": "Dra. María Eugenia Terán.",
  "heroRole": ""
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  archivo:  { display: '"Archivo", Helvetica, sans-serif',          body: '"Manrope", Helvetica, sans-serif' },
  grotesk:  { display: '"Space Grotesk", Helvetica, sans-serif',    body: '"Manrope", Helvetica, sans-serif' },
  helvetica:{ display: '"Helvetica Neue", Helvetica, Arial, sans-serif', body: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
  plex:     { display: '"IBM Plex Sans", Helvetica, sans-serif',    body: '"IBM Plex Sans", Helvetica, sans-serif' },
};

function accentBright(hex) {
  // lighten the accent for the "bright" variable
  try {
    const c = hex.replace("#", "");
    const r = parseInt(c.slice(0, 2), 16), g = parseInt(c.slice(2, 4), 16), b = parseInt(c.slice(4, 6), 16);
    const mix = (x) => Math.round(x + (255 - x) * 0.28);
    return `rgb(${mix(r)}, ${mix(g)}, ${mix(b)})`;
  } catch (e) { return hex; }
}
function accentSoft(hex) {
  try {
    const c = hex.replace("#", "");
    const r = parseInt(c.slice(0, 2), 16), g = parseInt(c.slice(2, 4), 16), b = parseInt(c.slice(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, 0.10)`;
  } catch (e) { return "#e8f0fb"; }
}

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

  // apply tweaks to :root
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-bright", accentBright(t.accent));
    r.setProperty("--accent-soft", accentSoft(t.accent));
    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.archivo;
    r.setProperty("--font-display", fp.display);
    r.setProperty("--font-body", fp.body);
    r.setProperty("--anim-scale", String(t.animIntensity));
  }, [t.accent, t.fontPair, t.animIntensity]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero t={t} />
        <Profile />
        <RDMAX />
        <Course />
        <Gallery />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakColor
          label="Acento clínico"
          value={t.accent}
          options={["#0d57a8", "#0e4d92", "#1565a8", "#155e63", "#0a2540"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Familia"
          value={t.fontPair}
          options={[
            { value: "archivo", label: "Archivo + Manrope" },
            { value: "grotesk", label: "Space Grotesk + Manrope" },
            { value: "helvetica", label: "Helvetica Neue" },
            { value: "plex", label: "IBM Plex Sans" },
          ]}
          onChange={(v) => setTweak("fontPair", v)}
        />
        <TweakSection label="Movimiento" />
        <TweakSlider
          label="Intensidad de animación"
          value={t.animIntensity}
          min={0} max={1.6} step={0.1}
          onChange={(v) => setTweak("animIntensity", v)}
        />
        <TweakSection label="Textos del hero" />
        <TweakText
          label="Título"
          value={t.heroTitle}
          onChange={(v) => setTweak("heroTitle", v)}
        />
        <TweakText
          label="Especialidad"
          value={t.heroRole}
          onChange={(v) => setTweak("heroRole", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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