/* global React, ReactDOM, Hero, Procedimentos, MuitoPrazer, BeforeAfter, Depoimentos, Contato, WhatsAppFloat,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakSlider */
const { useEffect, useState } = React;

const FONT_PRESETS = {
  classic:    { serif: '"Cormorant Garamond", Georgia, serif',  sans: '"Inter", system-ui, sans-serif' },
  modern:     { serif: '"Playfair Display", Georgia, serif',     sans: '"Manrope", system-ui, sans-serif' },
  encorpada:  { serif: '"DM Serif Display", Georgia, serif',     sans: '"Poppins", system-ui, sans-serif' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fonts": "classic",
  "heroLayout": "split",
  "procDensity": "default",
  "tmSpeed": 80
}/*EDITMODE-END*/;

function LandingPage({ embedded = false }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply font preset to root vars
  useEffect(() => {
    const preset = FONT_PRESETS[t.fonts] || FONT_PRESETS.classic;
    const root = document.documentElement;
    root.style.setProperty("--serif", preset.serif);
    root.style.setProperty("--sans", preset.sans);
  }, [t.fonts]);

  return (
    <div className="lp-root">
      <Hero
        photo="assets/dra-hero.jpg"
        avatar="assets/dra-perfil2.jpg"
        layout={t.heroLayout}
      />
      <Procedimentos
        bgPhoto="assets/dra-lado.jpg"
        density={t.procDensity}
      />
      <MuitoPrazer photo="assets/dra-perfil.jpg" />
      <BeforeAfter />
      <Depoimentos speed={t.tmSpeed} />
      <Contato avatar="assets/dra-perfil2.jpg" />
      <WhatsAppFloat />

      {!embedded && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Tipografia">
            <TweakSelect
              label="Fontes"
              value={t.fonts}
              onChange={(v) => setTweak("fonts", v)}
              options={[
                { value: "classic",   label: "Cormorant + Inter" },
                { value: "modern",    label: "Playfair + Manrope" },
                { value: "encorpada", label: "DM Serif + Poppins" },
              ]}
            />
          </TweakSection>

          <TweakSection label="Hero">
            <TweakRadio
              label="Layout"
              value={t.heroLayout}
              onChange={(v) => setTweak("heroLayout", v)}
              options={[
                { value: "split",       label: "50/50" },
                { value: "asymmetric",  label: "Assim." },
              ]}
            />
          </TweakSection>

          <TweakSection label="Procedimentos">
            <TweakRadio
              label="Densidade"
              value={t.procDensity}
              onChange={(v) => setTweak("procDensity", v)}
              options={[
                { value: "compact", label: "Compac." },
                { value: "default", label: "Padrão" },
                { value: "airy",    label: "Arejada" },
              ]}
            />
          </TweakSection>

          <TweakSection label="Depoimentos">
            <TweakSlider
              label="Velocidade carrossel"
              value={t.tmSpeed}
              onChange={(v) => setTweak("tmSpeed", v)}
              min={30} max={140} step={5}
              unit="s"
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

window.LandingPage = LandingPage;