// Main app — composes the home page

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "typography": "sans",
  "heroVariant": "form",
  "tarifaVariant": "cards"
}/*EDITMODE-END*/;

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

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

  return (
    <>
      <Nav />
      <Hero variant={tweaks.heroVariant} />
      <Servicios />
      <Flota />
      <Tarifas variant={tweaks.tarifaVariant} />
      <Calculator />
      <Coverage />
      <Trust />
      <Nosotros />
      <Footer />
      <WhatsAppFab />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Apariencia">
          <TweakRadio
            label="Tema"
            value={tweaks.theme}
            options={[
              { value: "dark", label: "Oscuro" },
              { value: "light", label: "Claro" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakRadio
            label="Tipografía"
            value={tweaks.typography}
            options={[
              { value: "sans", label: "Sans" },
              { value: "serif", label: "Serif display" },
            ]}
            onChange={(v) => setTweak("typography", v)}
          />
        </TweakSection>

        <TweakSection title="Hero">
          <TweakRadio
            label="Variante"
            value={tweaks.heroVariant}
            options={[
              { value: "form", label: "Con formulario" },
              { value: "text", label: "Tipográfico" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>

        <TweakSection title="Tarifas">
          <TweakRadio
            label="Estilo de tarjeta"
            value={tweaks.tarifaVariant}
            options={[
              { value: "cards", label: "Tarjetas" },
              { value: "list", label: "Lista" },
              { value: "minimal", label: "Mínimo" },
            ]}
            onChange={(v) => setTweak("tarifaVariant", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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