// app.jsx — composes the page + tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "A",
  "accent": "#c9a24b",
  "showBadge": true
}/*EDITMODE-END*/;

function FloatingWA() {
  return (
    <a href={WA_AGENDAR} target="_blank" rel="noopener" aria-label="Escribir por WhatsApp"
       className="fixed bottom-6 right-6 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[0_10px_30px_-6px_rgba(37,211,102,0.7)] transition-transform hover:scale-105">
      <span className="block h-7 w-7"><Icon name="wa" /></span>
      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#25D366] opacity-30"></span>
    </a>
  );
}

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

  React.useEffect(() => {
    const hex = (t.accent || "#c9a24b").replace("#", "");
    const r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
    const lt = (c) => Math.round(c + (255 - c) * 0.28);
    const root = document.documentElement.style;
    root.setProperty("--accent", `${r} ${g} ${b}`);
    root.setProperty("--accent-lt", `${lt(r)} ${lt(g)} ${lt(b)}`);
  }, [t.accent]);

  return (
    <div>
      <Nav />
      <main>
        <Hero variant={t.heroVariant} showBadge={t.showBadge} />
        <Areas />
        <Faq />
        <Contact />
      </main>
      <Footer />
      <FloatingWA />

      <TweaksPanel>
        <TweakSection label="Portada (Hero)" />
        <TweakRadio label="Versión del hero" value={t.heroVariant}
          options={["A", "B", "C"]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <p className="px-1 -mt-1 mb-1 text-[11.5px] leading-snug text-black/45">A · retrato dividido · B · imagen completa · C · editorial</p>
        <TweakToggle label="Mostrar badge consulta inicial" value={t.showBadge}
          onChange={(v) => setTweak("showBadge", v)} />

        <TweakSection label="Color de marca" />
        <TweakColor label="Acento" value={t.accent}
          options={["#c9a24b", "#0e4a5e", "#a9763f", "#2f6d63", "#8a3b2f"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </div>
  );
}

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