/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect, TweakToggle,
   SocialBar, Header, Hero, Marquee, About, Process, Services, Presence, Quote, FAQ, CTA, Footer */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "es",
  "palette": "brand",
  "headlineStyle": "mixed",
  "showMarquee": true,
  "showQuote": true
}/*EDITMODE-END*/;

const PALETTES = {
  brand:   { primary: "oklch(0.50 0.16 252)", primary2: "oklch(0.40 0.18 256)", tint: "oklch(0.93 0.05 250)", accent: "oklch(0.78 0.11 230)" },
  navy:    { primary: "oklch(0.32 0.14 258)", primary2: "oklch(0.24 0.12 260)", tint: "oklch(0.90 0.04 250)", accent: "oklch(0.74 0.13 230)" },
  sky:     { primary: "oklch(0.58 0.13 238)", primary2: "oklch(0.46 0.15 245)", tint: "oklch(0.93 0.05 240)", accent: "oklch(0.82 0.10 215)" },
  azure:   { primary: "oklch(0.44 0.18 264)", primary2: "oklch(0.34 0.18 266)", tint: "oklch(0.92 0.05 255)", accent: "oklch(0.76 0.12 220)" },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState("top");
  const [booking, setBooking] = useState({ name:"", company:"", email:"", phone:"", zip:"", service:"" });

  // Apply palette tokens to :root
  useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.brand;
    const r = document.documentElement.style;
    r.setProperty("--primary", p.primary);
    r.setProperty("--primary-2", p.primary2);
    r.setProperty("--primary-tint", p.tint);
    r.setProperty("--accent", p.accent);
  }, [t.palette]);

  // Scroll spy
  useEffect(() => {
    const ids = ["top","nosotros","proceso","servicios","presencia","faq","reservar"];
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setActive(e.target.id === "top" ? "top" : (
          e.target.id === "nosotros" ? "top" :
          e.target.id === "proceso" ? "proceso" :
          e.target.id === "servicios" ? "servicios" :
          e.target.id === "presencia" ? "presencia" :
          e.target.id === "faq" ? "faq" : "reservar"
        ));
      });
    }, { rootMargin: "-45% 0px -50% 0px" });
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  const lang = t.lang || "es";

  return (
    <>
      <SocialBar lang={lang} setLang={(v) => setTweak("lang", v)} />
      <Header active={active} lang={lang} setLang={(v) => setTweak("lang", v)} />
      <Hero
        lang={lang}
        booking={booking}
        onBookingChange={(patch) => setBooking({...booking, ...patch})}
      />
      {t.showMarquee && <Marquee lang={lang} />}
      <About lang={lang} />
      <Process lang={lang} />
      <Services lang={lang} />
      <Presence lang={lang} />
      {t.showQuote && <Quote lang={lang} />}
      <FAQ lang={lang} />
      <CTA lang={lang} />
      <Footer lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            label="Idioma"
            value={lang}
            onChange={(v) => setTweak("lang", v)}
            options={[{value:"es", label:"ES"}, {value:"en", label:"EN"}]}
          />
        </TweakSection>
        <TweakSection label="Paleta">
          <TweakSelect
            label="Tono"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "brand", label: "Brand · Logo blue" },
              { value: "navy",  label: "Navy · Deep" },
              { value: "sky",   label: "Sky · Lighter" },
              { value: "azure", label: "Azure · Saturated" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Secciones">
          <TweakToggle
            label="Marquee de sectores"
            value={t.showMarquee}
            onChange={(v) => setTweak("showMarquee", v)}
          />
          <TweakToggle
            label="Testimonio"
            value={t.showQuote}
            onChange={(v) => setTweak("showQuote", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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