/* global React, ReactDOM, SiteCore, SiteSections, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect */
const { useState } = React;
const { Header, Hero, Credentials, Gallery } = window.SiteCore;
const { Approach, PathVsShortcut, Areas, About, Testimonials, Locations, FinalCTA, Footer, WAFloat } = window.SiteSections;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "photo-right",
  "showFloatingWA": true,
  "accentTone": "warmer",
  "density": "editorial",
  "brandStyle": "split"
}/*EDITMODE-END*/;

const ACCENTS = {
  champagne: { accent: "#A8895E", bright: "#C9A876" },
  warmer:    { accent: "#B5814A", bright: "#D49A5C" },
  cooler:    { accent: "#9C8A6E", bright: "#BCAA8A" },
};

const TWEAK_DEFAULTS_FALLBACK = "warmer";

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

  // Apply accent + density to root
  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accentTone] || ACCENTS.champagne;
    root.style.setProperty("--accent", a.accent);
    root.style.setProperty("--accent-bright", a.bright);
    if (tweaks.density === "compact") {
      root.style.setProperty("--section-pad", "72px");
      document.body.classList.add("density-compact");
    } else {
      root.style.removeProperty("--section-pad");
      document.body.classList.remove("density-compact");
    }
  }, [tweaks.accentTone, tweaks.density]);

  return (
    <>
      <Header brandStyle={tweaks.brandStyle} />
      <main>
        <Hero photoLeft={tweaks.heroLayout === "photo-left"} />
        <Credentials />
        <Approach />
        <PathVsShortcut />
        <Areas />
        <Gallery />
        <About />
        <Testimonials />
        <Locations />
        <FinalCTA />
      </main>
      <Footer brandStyle={tweaks.brandStyle} />
      {tweaks.showFloatingWA && <WAFloat />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={[
              { value: "photo-right", label: "Foto direita" },
              { value: "photo-left", label: "Foto esquerda" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Identidade">
          <TweakRadio
            label="Brand block"
            value={tweaks.brandStyle}
            onChange={(v) => setTweak("brandStyle", v)}
            options={[
              { value: "minimal", label: "Minimal" },
              { value: "single-line", label: "Linha única" },
              { value: "stack", label: "Empilhado" },
              { value: "split", label: "Dividido" },
            ]}
          />
          <TweakRadio
            label="Tom do dourado"
            value={tweaks.accentTone}
            onChange={(v) => setTweak("accentTone", v)}
            options={[
              { value: "champagne", label: "Champagne" },
              { value: "warmer", label: "Mais quente" },
              { value: "cooler", label: "Mais frio" },
            ]}
          />
          <TweakRadio
            label="Densidade"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "compact", label: "Compacto" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Conversão">
          <TweakToggle
            label="Botão flutuante WhatsApp"
            value={tweaks.showFloatingWA}
            onChange={(v) => setTweak("showFloatingWA", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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