// app.jsx — root component + tweaks wiring

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D9B97A",
  "typePair": "cormorant-instrument",
  "mirrorEcho": true,
  "grain": 0.55,
  "showStarOrnament": true
}/*EDITMODE-END*/;

const TYPE_PAIRS = {
  'cormorant-instrument': {
    serif: '"Cormorant Garamond", "EB Garamond", Georgia, serif',
    sans:  '"Instrument Sans", ui-sans-serif, system-ui, sans-serif',
    label: 'Cormorant · Instrument',
  },
  'newsreader-geist': {
    serif: '"Newsreader", "EB Garamond", Georgia, serif',
    sans:  '"Geist", ui-sans-serif, system-ui, sans-serif',
    label: 'Newsreader · Geist',
  },
  'tenor-dmsans': {
    serif: '"Tenor Sans", Georgia, serif',
    sans:  '"DM Sans", ui-sans-serif, system-ui, sans-serif',
    label: 'Tenor · DM Sans',
  },
};

const ACCENT_OPTIONS = [
  '#D9B97A', // candle gold (default)
  '#C9CFD9', // moonlight
  '#B86653', // burnt umber / death
  '#E8E2D5', // bone
];

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--star', t.accent);
    // soft variant
    root.style.setProperty('--star-soft', hexToRgba(t.accent, 0.18));
    root.style.setProperty('--grain', String(t.grain));
    const pair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS['cormorant-instrument'];
    root.style.setProperty('--serif', pair.serif);
    root.style.setProperty('--sans', pair.sans);
    // Mirror echo toggle
    document.body.classList.toggle('no-echo', !t.mirrorEcho);
    document.body.classList.toggle('no-star-orn', !t.showStarOrnament);
  }, [t.accent, t.grain, t.typePair, t.mirrorEcho, t.showStarOrnament]);

  return (
    <React.Fragment>
      <NavBar />
      <Hero />
      <Consciencia />
      <SerID />
      <Testimoniales />
      <SobreSerendeepity />
      <Banner />
      <Diagnostico />
      <Closer />

      <TweaksPanel title="Tweaks · Serendeepity">
        <TweakSection label="Luz" />
        <TweakColor
          label="Acento"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSlider
          label="Grano"
          value={t.grain}
          min={0} max={1} step={0.05}
          onChange={(v) => setTweak('grain', v)}
        />

        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Pareja"
          value={t.typePair}
          options={Object.entries(TYPE_PAIRS).map(([k, v]) => ({ value: k, label: v.label }))}
          onChange={(v) => setTweak('typePair', v)}
        />

        <TweakSection label="Detalles" />
        <TweakToggle
          label="Eco del titular"
          value={t.mirrorEcho}
          onChange={(v) => setTweak('mirrorEcho', v)}
        />
        <TweakToggle
          label="Estrella en hero"
          value={t.showStarOrnament}
          onChange={(v) => setTweak('showStarOrnament', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.substring(0, 2), 16);
  const g = parseInt(h.substring(2, 4), 16);
  const b = parseInt(h.substring(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

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