const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#39FF14",
  "headlineMode": "stroke-mix",
  "showGrain": true,
  "tickerSpeed": 38,
  "heroAside": "drop",
  "productCols": 4
}/*EDITMODE-END*/;

const HEADLINE_MODES = [
  { value: "stroke-mix", label: "Stroke + neon" },
  { value: "all-solid",  label: "All solid" },
  { value: "all-stroke", label: "All outline" },
];

const HERO_ASIDE = [
  { value: "drop",  label: "Drop card" },
  { value: "specs", label: "Specs sheet" },
  { value: "stack", label: "Stacked tags" },
];

function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor  label="Accent neon"  value={tweaks.accentColor}  onChange={(v) => setTweak("accentColor", v)} />
        <TweakToggle label="Grain overlay" value={tweaks.showGrain}   onChange={(v) => setTweak("showGrain", v)} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio label="Headline"   value={tweaks.headlineMode} options={HEADLINE_MODES} onChange={(v) => setTweak("headlineMode", v)} />
        <TweakRadio label="Aside card" value={tweaks.heroAside}    options={HERO_ASIDE}     onChange={(v) => setTweak("heroAside", v)} />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio   label="Product cols"     value={tweaks.productCols} options={[{ value: 3, label: "3" }, { value: 4, label: "4" }]} onChange={(v) => setTweak("productCols", v)} />
        <TweakSlider  label="Ticker speed (s)" min={10} max={120} step={2} value={tweaks.tickerSpeed} onChange={(v) => setTweak("tickerSpeed", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [cartOpen, setCartOpen] = useState(false);
  const [cart, setCart] = useState([
    { ...PRODUCTS[0], qty: 1 },
    { ...PRODUCTS[3], qty: 2 },
  ]);
  const [toast, setToast] = useState("");

  useEffect(() => {
    document.documentElement.style.setProperty("--neon", tweaks.accentColor);
    document.documentElement.style.setProperty("--neon-soft", tweaks.accentColor + "1f");
  }, [tweaks.accentColor]);

  useEffect(() => {
    const styleId = "__grain-toggle";
    let s = document.getElementById(styleId);
    if (!s) { s = document.createElement("style"); s.id = styleId; document.head.appendChild(s); }
    s.textContent = `body::before { opacity: ${tweaks.showGrain ? 0.08 : 0} !important; }`;
  }, [tweaks.showGrain]);

  const addToCart = (p) => {
    setCart(prev => {
      const ex = prev.find(i => i.id === p.id);
      if (ex) return prev.map(i => i.id === p.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { ...p, qty: 1 }];
    });
    setToast("✚ " + p.name + " — agregado");
    setTimeout(() => setToast(""), 1800);
  };

  const changeQty = (id, delta) => {
    setCart(prev => prev.flatMap(i => {
      if (i.id !== id) return [i];
      const q = i.qty + delta;
      return q <= 0 ? [] : [{ ...i, qty: q }];
    }));
  };

  const total     = cart.reduce((a, i) => a + i.price * i.qty, 0);
  const cartCount = cart.reduce((a, i) => a + i.qty, 0);

  return (
    <>
      <Ticker speed={tweaks.tickerSpeed} />
      <Navbar cartCount={cartCount} onOpenCart={() => setCartOpen(true)} />
      <Hero headlineMode={tweaks.headlineMode} asideKind={tweaks.heroAside} />
      <USP />
      <Categories />
      <Manifesto />
      <Products cols={tweaks.productCols} onAdd={addToCart} />
      <div className="diagonal" />
      <Drop />
      <Footer />
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} items={cart} onQty={changeQty} total={total} />
      <div className={"toast" + (toast ? " show" : "")}>{toast}</div>
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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