// Satindica — main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2ECC71",
  "showGoldHighlights": true,
  "heroVariant": "stacked",
  "ctaStyle": "filled",
  "cardHover": "lift",
  "tickerSpeed": 38,
  "showWhyKicker": true,
  "headlineMode": "outlined"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const toastTimer = React.useRef(null);

  const addToCart = (p) => {
    setCart((prev) => {
      const found = prev.find((it) => it.id === p.id);
      if (found) return prev.map((it) => it.id === p.id ? { ...it, qty: it.qty + 1 } : it);
      return [...prev, { ...p, qty: 1 }];
    });
    setToast(`${p.name} agregado al carro`);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2400);
  };
  const removeFromCart = (id) => setCart((prev) => prev.filter((it) => it.id !== id));
  const setQty = (id, qty) => {
    if (qty <= 0) return removeFromCart(id);
    setCart((prev) => prev.map((it) => it.id === id ? { ...it, qty } : it));
  };
  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  // Apply accent override
  React.useEffect(() => {
    document.documentElement.style.setProperty('--sat-accent', tweaks.accent);
  }, [tweaks.accent]);

  return (
    <>
      <window.Topbar />
      <window.Navbar
        cartCount={cartCount}
        onOpenCart={() => setCartOpen(true)}
        onSearch={() => {}}
      />
      <window.Hero accent={tweaks.accent} />
      <window.CategoryGrid />
      <window.BenefitsTicker />
      <window.ProductSection
        id="productos"
        kicker="— 02 / Productos destacados"
        title="Lo que cultivadores serios eligen."
        sub="Selección curada por nuestro equipo. Stock real, despacho 24h en Santiago."
        products={window.PRODUCTS_FEATURED}
        onAdd={addToCart}
        link="Ver todos los destacados"
      />
      <window.WhySection />
      <window.ProductSection
        id="novedades"
        kicker="— 04 / Novedades & tendencias"
        title="Recién llegado al galpón."
        sub="Lo último en genética, equipos y herramientas. Antes de que se agote."
        products={window.PRODUCTS_TRENDING}
        onAdd={addToCart}
        link="Explorar novedades"
      />
      <window.NewsletterStrip />
      <window.Footer />

      <window.CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        onRemove={removeFromCart}
        onQty={setQty}
      />
      <window.Toast show={!!toast} msg={toast || ''} />

      <SatTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function SatTweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSlider, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor
          label="Acento principal"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakToggle
          label="Highlights dorados"
          checked={tweaks.showGoldHighlights}
          onChange={(v) => setTweak('showGoldHighlights', v)}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio
          label="Headline"
          value={tweaks.headlineMode}
          options={[
            { value: 'outlined', label: 'Outline' },
            { value: 'solid', label: 'Sólido' },
          ]}
          onChange={(v) => setTweak('headlineMode', v)}
        />
        <TweakRadio
          label="Card hover"
          value={tweaks.cardHover}
          options={[
            { value: 'lift', label: 'Lift' },
            { value: 'static', label: 'Static' },
          ]}
          onChange={(v) => setTweak('cardHover', v)}
        />
      </TweakSection>
      <TweakSection title="Motion">
        <TweakSlider
          label="Velocidad ticker"
          value={tweaks.tickerSpeed}
          min={10} max={80} step={2}
          onChange={(v) => setTweak('tickerSpeed', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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