/* ============ HERMANITO · App ============ */
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "classic",
  "accent": "#4f8fc7",
  "showPromo": false,
  "simHorario": "auto",
  "deliveryFee": 0
}/*EDITMODE-END*/;

const CART_KEY = 'hermanito_cart_v1';
function loadCart(){
  try { return JSON.parse(localStorage.getItem(CART_KEY)) || {}; } catch(e){ return {}; }
}

function FabCart({ count, total, onClick }){
  return (
    <button className="fab-cart" onClick={onClick}>
      <Icon name="cart" style={{ width:20, height:20 }} />
      {count > 0 ? <>Pedir · {brl(total)} <span className="c">{count}</span></> : 'Fazer pedido'}
    </button>
  );
}

// Floating mascot button → opens a WhatsApp conversation
function FabWhats(){
  const href = waLink('Olá, Hermanito! 🇦🇷 Gostaria de tirar uma dúvida / fazer um pedido.');
  return (
    <a className="fab-whats" href={href} target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp">
      <span className="fab-whats-lbl">Fale com o Hermanito</span>
      <span className="fab-whats-ring"></span>
      <span className="fab-whats-av"><img src="assets/mascote-busto.png" alt="Mascote Hermanito" /></span>
      <span className="fab-whats-badge"><Icon name="whatsapp" /></span>
    </a>
  );
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [cart, setCart] = useS(loadCart);
  const [panel, setPanel] = useS(false);

  // persist cart
  useE(() => { try { localStorage.setItem(CART_KEY, JSON.stringify(cart)); } catch(e){} }, [cart]);

  // accent color
  useE(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  // toggle intro mode
  useE(() => {
    document.documentElement.classList.toggle('intro-on', false);
  }, []);

  // drive the opening-logo animation + header crossfade on scroll
  useE(() => {
    const onScroll = () => {
      const p = Math.min(window.scrollY / (window.innerHeight * 0.62), 1);
      document.documentElement.style.setProperty('--p', p.toFixed(3));
      document.documentElement.classList.toggle('scrolled', window.scrollY > 24);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const open = resolveOpen(t.simHorario);

  const add = id => setCart(c => ({ ...c, [id]: (c[id] || 0) + 1 }));
  const inc = id => setCart(c => ({ ...c, [id]: (c[id] || 0) + 1 }));
  const dec = id => setCart(c => {
    const n = (c[id] || 0) - 1;
    const nx = { ...c };
    if (n <= 0) delete nx[id]; else nx[id] = n;
    return nx;
  });

  const count = MENU.reduce((s, m) => s + (cart[m.id] || 0), 0);
  const subtotal = MENU.reduce((s, m) => s + (cart[m.id] || 0) * m.price, 0);

  const openPanel = () => setPanel(true);

  return (
    <>
      <div className="flag-stripe"></div>
      <Header open={open} count={count} onCart={openPanel} />
      <Hero variant={t.heroStyle} onOrder={openPanel} />
      <Selos />
      <Historia />
      <Cardapio cart={cart} add={add} inc={inc} dec={dec} showPromo={t.showPromo} />
      <Entregas />
      <Teaser />
      <Footer onOrder={openPanel} />

      <FabCart count={count} total={subtotal} onClick={openPanel} />
      <FabWhats />

      <CheckoutDrawer
        openPanel={panel} onClose={() => setPanel(false)}
        cart={cart} inc={inc} dec={dec}
        open={open} deliveryFee={Number(t.deliveryFee) || 0}
      />

      <TweaksPanel>
        <TweakSection label="Página inicial" />
        <TweakRadio label="Estilo do topo" value={t.heroStyle}
          options={['classic', 'poster', 'vitrine']}
          onChange={v => setTweak('heroStyle', v)} />
        <TweakColor label="Cor de destaque" value={t.accent}
          options={['#4f8fc7', '#d99a3e', '#9c2b24', '#4f6a2e']}
          onChange={v => setTweak('accent', v)} />

        <TweakSection label="Cardápio" />
        <TweakToggle label="Mostrar banner de promoção" value={t.showPromo}
          onChange={v => setTweak('showPromo', v)} />

        <TweakSection label="Pedidos" />
        <TweakRadio label="Status da loja (preview)" value={t.simHorario}
          options={['auto', 'open', 'closed']}
          onChange={v => setTweak('simHorario', v)} />
        <TweakSlider label="Taxa de entrega" value={Number(t.deliveryFee) || 0}
          min={0} max={15} step={1} unit=" R$"
          onChange={v => setTweak('deliveryFee', v)} />
      </TweaksPanel>
    </>
  );
}

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