/* ========== EternisIA — App ========== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "heroVariant": "A",
  "accentHue": 22
}/*EDITMODE-END*/;

const HERO_OPTIONS = [
  { value: 'A', label: 'A · No saber código' },
  { value: 'B', label: 'B · Cambio carrera' },
  { value: 'C', label: 'C · FOMO 2026' },
  { value: 'D', label: 'D · Primera app' },
];

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
  }, [tweaks.theme]);

  React.useEffect(() => {
    // Recompute orange tones from accent hue (OKLCH).
    const h = tweaks.accentHue;
    const root = document.documentElement;
    root.style.setProperty('--orange-1', `oklch(0.65 0.22 ${h})`);
    root.style.setProperty('--orange-2', `oklch(0.72 0.20 ${h + 8})`);
    root.style.setProperty('--orange-3', `oklch(0.78 0.16 ${h + 14})`);
    root.style.setProperty('--orange-glow', `oklch(0.65 0.22 ${h} / 0.35)`);
  }, [tweaks.accentHue]);

  const logoSrc = tweaks.theme === 'dark' ? 'assets/logo-blanco.png' : 'assets/logo-negro.png';

  return (
    <>
      <Nav logoSrc={logoSrc} />
      <Hero variant={tweaks.heroVariant} isoSrc="assets/isologo-color.png" />
      <CredBar />
      <Pain />
      <Solution />
      <Verticals />
      <How />
      <About portraitSrc="assets/jose.jpg" />
      <Cases />
      <WhyFree />
      <FAQ />
      <FinalCTA isoSrc="assets/isologo-color.png" />
      <Footer logoSrc={logoSrc} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Tema">
          <TweakRadio
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'dark', label: 'Oscuro' },
              { value: 'light', label: 'Claro' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Variante de hero">
          <TweakSelect
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={HERO_OPTIONS}
          />
        </TweakSection>

        <TweakSection title={`Tono naranja · hue ${tweaks.accentHue}°`}>
          <TweakSlider
            value={tweaks.accentHue}
            onChange={(v) => setTweak('accentHue', v)}
            min={0}
            max={60}
            step={1}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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