// PepLab Co - Main app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "aesthetic": "editorial",
  "showAgeGate": true,
  "motion": "high"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);
  const [ageOk, setAgeOk] = useState(!tweaks.showAgeGate || ageVerified());
  const [activeProduct, setActiveProduct] = useState(null);
  const [cartOpen, setCartOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.classList.toggle("reduce-motion", tweaks.motion === "low");
  }, [tweaks.motion]);

  // Restore saved aesthetic from localStorage on mount
  const aestheticInitRef = React.useRef(false);
  useEffect(() => {
    if (aestheticInitRef.current) return;
    aestheticInitRef.current = true;
    try {
      const saved = localStorage.getItem("peplab-aesthetic");
      if (saved && saved !== tweaks.aesthetic) setTweak("aesthetic", saved);
    } catch (e) { /* localStorage unavailable */ }
  }, []);

  useEffect(() => {
    if (window.applyAesthetic) window.applyAesthetic(tweaks.aesthetic);
    try { localStorage.setItem("peplab-aesthetic", tweaks.aesthetic); } catch (e) {}
  }, [tweaks.aesthetic]);

  return (
    <div>
      <PlHeader scrolled={scrolled} onCartOpen={() => setCartOpen(true)} />
      <main>
        <Hero motion={tweaks.motion} />
        <TrustStrip />
        <ProductsSection onSelect={setActiveProduct} />
        <UsesSection />
        <HowToBuy />
        <Editorial />
        <Testimonials />
        <ArticlesFull />
        <FaqSection />
        <CtaFinal />
      </main>
      <PlFooter />
      <StickyWA />
      <AestheticToggle aesthetic={tweaks.aesthetic} onChange={(v) => setTweak("aesthetic", v)} />

      {!ageOk && <AgeGate onPass={() => { markAgeVerified(); setAgeOk(true); }} />}
      <ProductDrawer product={activeProduct} onClose={() => setActiveProduct(null)} />
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} />
      <CartToast onCartOpen={() => setCartOpen(true)} />

      <TweaksPanel title="PepLab Co · Tweaks">
        <TweakSection title="Estética">
          <TweakRadio
            label="Dirección visual"
            value={tweaks.aesthetic}
            options={[
              {value:"editorial",label:"Editorial"},
              {value:"lab",label:"Lab-grade"},
            ]}
            onChange={(v) => setTweak("aesthetic", v)}
          />
          <p style={{fontSize:12, color:"#888", margin:"8px 0 0", lineHeight:1.5}}>
            <b>Editorial:</b> beauty premium, navy + champagne, serif Cormorant.<br/>
            <b>Lab-grade:</b> científico/futurista, dark metallic, cyan + violet glow, sans + mono.
          </p>
        </TweakSection>
        <TweakSection title="Edad">
          <TweakToggle
            label="Mostrar age gate al cargar"
            value={tweaks.showAgeGate}
            onChange={(v) => { setTweak("showAgeGate", v); if (!v) setAgeOk(true); }}
          />
        </TweakSection>
        <TweakSection title="Movimiento">
          <TweakRadio
            label="Animaciones"
            value={tweaks.motion}
            options={[{value:"high",label:"Alta"},{value:"low",label:"Reducida"}]}
            onChange={(v) => setTweak("motion", v)}
          />
        </TweakSection>
        <TweakSection title="Producto destacado">
          <p style={{fontSize:13, color:"#666", margin:"0 0 10px"}}>Click en cualquier producto para abrir la ficha completa.</p>
          {PEPLAB_PRODUCTS.map((p) => (
            <TweakButton key={p.slug} onClick={() => setActiveProduct(p)}>
              Ver {p.name}
            </TweakButton>
          ))}
        </TweakSection>
        <TweakSection title="Age gate">
          <TweakButton onClick={() => setAgeOk(false)}>Mostrar de nuevo</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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