// Tasty's Burgers — Cardápio Digital
// Mobile-first ordering flow at 390x844 (iPhone 14)

const { useState, useMemo, useEffect, useRef } = React;

const CDN = 'https://d2xsxph8kpxj0f.cloudfront.net/310419663029667368/DCqfTYUDhe4fYbZ4qgyMgD';

// ─────────────────────────────────────────────────────────────
// DATA
// ─────────────────────────────────────────────────────────────
const CATEGORIES = [
  { id: 'hamburgueres', label: 'Hambúrgueres', icon: '🍔' },
  { id: 'combos',       label: 'Combos',        icon: '🤝' },
  { id: 'porcoes',      label: 'Porções',       icon: '🍟' },
  { id: 'bebidas',      label: 'Bebidas',        icon: '🥤' },
  { id: 'adicionais',   label: 'Extras',         icon: '➕' },
];

const PRODUCTS = [
  { id: 'p1', cat: 'hamburgueres', name: 'Crispy Cheddar',     desc: 'Smash 160g, cheddar derretido, bacon crocante, cebola caramelizada, maionese da casa.', price: 34.90, img: 'assets/burger-crispy-cheddar.jpg', badge: 'Mais Vendido' },
  { id: 'p2', cat: 'hamburgueres', name: 'Double Tasty\u2019s', desc: 'Dois smashes 120g, queijo prato dobrado, cebola caramelizada, alface, tomate.',          price: 42.90, img: 'assets/burger-double-tastys.jpg',  badge: 'Especial' },
  { id: 'p3', cat: 'hamburgueres', name: 'Oklahoma',           desc: 'Smash 150g, cheddar, cebola tostada na chapa, picles e maionese cremosa.',                price: 31.90, img: 'assets/burger-oklahoma.jpg' },
  { id: 'p4', cat: 'hamburgueres', name: 'Double Cheddar Bacon',desc: 'Dois smashes, cheddar duplo, bacon, cebola caramelizada, BBQ defumado, brioche.',         price: 46.90, img: 'assets/burger-double-cheddar-bacon.jpg', badge: 'Novo' },
  { id: 'p5', cat: 'hamburgueres', name: "Tasty's Burger",desc: 'O clássico americano: 150g, queijo prato, alface, tomate, cebola roxa e maionese.',       price: 32.90, img: 'assets/burger-tastys-classic.jpg' },
  { id: 'p6', cat: 'hamburgueres', name: 'Oklahoma Salad',     desc: 'Smash 150g, cheddar, cebola tostada, picles, alface, tomate. Pra quem quer o verde junto.', price: 33.90, img: 'assets/burger-oklahoma-salad.jpg' },

  { id: 'p8',  cat: 'porcoes', name: 'Batata com Cheddar e Bacon', desc: 'Batata crocante coberta com cheddar cremoso e bacon em cubos.',    price: 19.90, img: CDN + '/fries-cheddar-bacon-nuq2CVsPnX8UbSYZvzznRR.webp', badge: 'Mais Vendido' },
  { id: 'p7',  cat: 'porcoes', name: 'Batata Tradicional',          desc: 'Batata crocante, sequinha e dourada.',                               price: 12.90, img: CDN + '/fries-portion-gpaqD7o7j3NY2qck5qni4J.webp' },
  { id: 'p20', cat: 'porcoes', name: 'Anéis de Cebola',            desc: 'Cebolas empanadas, crocantes por fora e macias por dentro.',         price: 17.90, img: CDN + '/onion-rings-premium-CBWvPsgzi285vTKFWHe3Jz.webp' },
  { id: 'p9',  cat: 'porcoes', name: 'Nuggets',                    desc: 'Nuggets de frango crocantes por fora e macios por dentro.',          price: 17.90 },

  { id: 'p11', cat: 'bebidas', name: 'Guaraná Antártica', desc: 'Refrigerante gelado, sabor guaraná clássico.',      price:  7.90, img: CDN + '/guarana-antartica-nfsKEwTBuuELe3fpzDALBn.webp' },
  { id: 'p13', cat: 'bebidas', name: 'Fanta Uva',         desc: 'Refrigerante gelado, sabor uva refrescante.',       price:  7.90, img: CDN + '/fanta-uva-7BsN7oMHRjukftbv9BQKVZ.webp' },
  { id: 'p17', cat: 'bebidas', name: 'Fanta Laranja',     desc: 'Refrigerante gelado, sabor laranja cítrico.',       price:  7.90, img: CDN + '/fanta-laranja-gRWjDGA2zUiqs5g7nzUCB2.webp' },
  { id: 'p21', cat: 'bebidas', name: 'Brahma 600ml',      desc: 'Cerveja Brahma gelada, sabor suave e refrescante.', price: 12.90, img: CDN + '/cerveja-brahma-WsXBExQTobCoxtqKdEPbi4.webp' },
  { id: 'p22', cat: 'bebidas', name: 'Skol 600ml',        desc: 'Cerveja Skol gelada, leve e refrescante.',          price: 12.90, img: CDN + '/cerveja-skol-fjpjGRh657ErjZVNgUxaPp.webp' },
  { id: 'p19', cat: 'bebidas', name: 'Heineken 600ml',    desc: 'Cerveja Heineken gelada, sabor premium.',           price: 15.90, img: CDN + '/cerveja-heineken-676Z9mVbCPwYSo7zFNEY5q.webp', badge: 'Premium' },

  { id: 'p14', cat: 'adicionais', name: 'Bacon extra',   desc: 'Porção generosa de bacon crocante.',                     price: 7.00, img: CDN + '/bacon-adicional-premium-AA5bVfCkzsQUnZfWPSpQTp.webp' },
  { id: 'p15', cat: 'adicionais', name: 'Cheddar extra', desc: 'Mais uma fatia de cheddar derretido.',                   price: 5.00, img: CDN + '/extra-cheddar-exKxhnhJgFfL2eYiwTjKzv.webp' },
  { id: 'p16', cat: 'adicionais', name: 'Carne extra',   desc: 'Burger extra para deixar seu lanche ainda mais pesado.', price: 9.00, img: CDN + '/extra-meat-kAHYweztGsKujX5z4uXXmv.webp' },

  { id: 'c1', cat: 'combos', name: 'Combo Oklahoma Route',       desc: 'Oklahoma (120g) + Batata Tradicional + Refrigerante ou Suco Natural.',              price: 49.90, img: 'assets/combo-oklahoma-route.jpg',  badge: 'Especial' },
  { id: 'c2', cat: 'combos', name: 'Combo Oklahoma Green Route', desc: 'Oklahoma Salad (120g) + Batata Tradicional + Refrigerante ou Suco Natural.',         price: 50.90, img: 'assets/combo-oklahoma-green.jpg' },
  { id: 'c3', cat: 'combos', name: 'Combo Crispy House',         desc: 'Crispy Cheddar (150g) + Batata com Cheddar e Bacon + Refrigerante ou Suco.',         price: 55.90, img: 'assets/combo-crispy-house.jpg' },
  { id: 'c4', cat: 'combos', name: 'Combo Tasty Classic',        desc: "Tasty's Burger (150g) + Batata Tradicional + Refrigerante ou Suco Natural.",       price: 48.90, img: 'assets/combo-tasty-classic.jpg' },
  { id: 'c5', cat: 'combos', name: 'Combo Double Monster',       desc: 'Double Tasty (2x150g) + Batata com Cheddar e Bacon + Refrigerante ou Suco.',        price: 62.90, img: 'assets/combo-double-monster.jpg', badge: 'Especial' },
  { id: 'c6', cat: 'combos', name: 'Combo Bacon Empire',         desc: 'Double Cheddar Bacon (2x150g) + Batata com Cheddar e Bacon + Refrigerante ou Suco.', price: 64.90, img: 'assets/combo-bacon-empire.jpg',  badge: 'Especial' },

  { id: 'm1', cat: 'adicionais', name: 'Molho da Casa',       desc: "Cremoso, suave e irresistível. O molho especial da Tasty's.", price: 5.00, img: 'assets/molho-da-casa.jpg' },
  { id: 'm2', cat: 'adicionais', name: 'Maionese da Casa',    desc: 'Maionese cremosa, suave e irresistível feita na casa.',          price: 5.00, img: 'assets/molho-maionese.jpg' },
  { id: 'm3', cat: 'adicionais', name: 'Barbecue da Casa',    desc: 'Barbecue encorpado, defumado e irresistível.',                   price: 5.00, img: 'assets/molho-barbecue.jpg' },
  { id: 'm4', cat: 'adicionais', name: 'Ketchup de Goiabada', desc: 'Ketchup de goiabada da casa — cremoso, suave e irresistível.',   price: 5.00, img: 'assets/molho-ketchup-goiabada.jpg' },
];

const HERO = {
  name: 'Crispy Cheddar',
  tagline: 'American Classic Burger',
  img: 'assets/burger-tastys-hero.jpg',
};

// ─────────────────────────────────────────────────────────────
// HELPERS
// ─────────────────────────────────────────────────────────────
const BRL = (n) => 'R$ ' + n.toFixed(2).replace('.', ',');
// Standalone asset resolver: maps original path -> inlined blob URL (window.__resources)
const A = (p) => (window.__resources && window.__resources[p]) || p;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary":   "#E63946",
  "accent":    "#F4A261",
  "bg":        "#FFF8F1",
  "headerStyle": "image",
  "showBadges": true,
  "showHeroBanner": true,
  "fontStack": "Inter"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────
// ROOT
// ─────────────────────────────────────────────────────────────
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState('home');           // 'home' | 'product' | 'cart'
  const [activeCat, setActiveCat] = useState('hamburgueres');
  const [cart, setCart] = useState([]);                   // [{id, qty, notes}]
  const [productId, setProductId] = useState(null);
  const [checkoutOpen, setCheckoutOpen] = useState(false);
  const [confirmedOrder, setConfirmedOrder] = useState(null);
  const [toast, setToast] = useState(null);

  // bridge tweaks → CSS vars
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--brand',  tweaks.primary);
    r.setProperty('--accent', tweaks.accent);
    r.setProperty('--bg',     tweaks.bg);
  }, [tweaks.primary, tweaks.accent, tweaks.bg]);

  const cartCount = cart.reduce((s, it) => s + it.qty, 0);
  const cartTotal = cart.reduce((s, it) => {
    const p = PRODUCTS.find(p => p.id === it.id);
    return s + (p ? p.price * it.qty : 0);
  }, 0);

  function addToCart(id, qty = 1, notes = '') {
    setCart(cur => {
      const i = cur.findIndex(x => x.id === id && x.notes === notes);
      if (i >= 0) {
        const next = [...cur];
        next[i] = { ...next[i], qty: next[i].qty + qty };
        return next;
      }
      return [...cur, { id, qty, notes }];
    });
    const p = PRODUCTS.find(p => p.id === id);
    setToast({ msg: `${p.name} adicionado ✓`, key: Date.now() });
  }
  function updateQty(idx, delta) {
    setCart(cur => {
      const next = [...cur];
      const newQty = next[idx].qty + delta;
      if (newQty <= 0) { next.splice(idx, 1); return next; }
      next[idx] = { ...next[idx], qty: newQty };
      return next;
    });
  }
  function removeItem(idx) { setCart(cur => cur.filter((_, i) => i !== idx)); }
  function placeOrder(form) {
    setConfirmedOrder({ form, items: cart, total: cartTotal, at: new Date() });
    setCart([]);
    setCheckoutOpen(false);
  }

  // toast auto-clear
  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 1700);
    return () => clearTimeout(t);
  }, [toast]);

  return (
    <div style={appStyles.wrap}>
      <IOSDevice width={390} height={844}>
        <div style={appStyles.canvas}>
          {screen === 'home' && (
            <HomeScreen
              tweaks={tweaks}
              activeCat={activeCat}
              setActiveCat={setActiveCat}
              onProduct={(id) => { setProductId(id); setScreen('product'); }}
              addToCart={addToCart}
              cartCount={cartCount}
              onCart={() => setScreen('cart')}
            />
          )}
          {screen === 'product' && (
            <ProductScreen
              product={PRODUCTS.find(p => p.id === productId)}
              onBack={() => setScreen('home')}
              addToCart={addToCart}
              cartCount={cartCount}
              onCart={() => setScreen('cart')}
            />
          )}
          {screen === 'cart' && (
            <CartScreen
              cart={cart}
              total={cartTotal}
              onBack={() => setScreen('home')}
              updateQty={updateQty}
              removeItem={removeItem}
              onCheckout={() => setCheckoutOpen(true)}
            />
          )}

          {checkoutOpen && (
            <CheckoutModal
              total={cartTotal}
              onClose={() => setCheckoutOpen(false)}
              onConfirm={placeOrder}
            />
          )}

          {confirmedOrder && (
            <OrderSentModal
              order={confirmedOrder}
              onClose={() => { setConfirmedOrder(null); setScreen('home'); }}
            />
          )}

          {toast && <Toast key={toast.key}>{toast.msg}</Toast>}
        </div>
      </IOSDevice>

      {/* External label */}
      <div style={appStyles.externalLabel}>
        <div style={{ fontWeight: 800, fontSize: 18, color: '#111' }}>Tasty&rsquo;s Burgers — Cardápio Digital</div>
        <div style={{ fontSize: 13, color: '#666', marginTop: 4 }}>iPhone 14 · 390×844 · pedidos via WhatsApp</div>
      </div>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Cores">
          <TweakColor label="Primária" value={tweaks.primary} onChange={(v) => setTweak('primary', v)} />
          <TweakColor label="Acento"   value={tweaks.accent}  onChange={(v) => setTweak('accent', v)}  />
          <TweakColor label="Fundo"    value={tweaks.bg}      onChange={(v) => setTweak('bg', v)}      />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Header"
            value={tweaks.headerStyle}
            options={[
              { value: 'image', label: 'Imagem' },
              { value: 'logo',  label: 'Logo' },
            ]}
            onChange={(v) => setTweak('headerStyle', v)}
          />
          <TweakToggle label="Mostrar hero banner" value={tweaks.showHeroBanner} onChange={(v) => setTweak('showHeroBanner', v)} />
          <TweakToggle label="Mostrar badges"      value={tweaks.showBadges}     onChange={(v) => setTweak('showBadges', v)} />
        </TweakSection>
        <TweakSection title="Atalhos de tela">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <TweakButton onClick={() => setScreen('home')}>Home</TweakButton>
            <TweakButton onClick={() => { setProductId('p1'); setScreen('product'); }}>Produto</TweakButton>
            <TweakButton onClick={() => setScreen('cart')}>Carrinho</TweakButton>
            <TweakButton onClick={() => setCheckoutOpen(true)}>Checkout</TweakButton>
          </div>
          <TweakButton onClick={() => {
            setCart([
              { id: 'p1', qty: 2, notes: '' },
              { id: 'p7', qty: 1, notes: '' },
              { id: 'p10', qty: 2, notes: '' },
            ]);
            setToast({ msg: 'Carrinho de exemplo carregado', key: Date.now() });
          }}>Preencher carrinho</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────
function HomeScreen({ tweaks, activeCat, setActiveCat, onProduct, addToCart, cartCount, onCart }) {
  const filtered = useMemo(() => PRODUCTS.filter(p => p.cat === activeCat), [activeCat]);
  const headerRef = useRef(null);
  const [scrolled, setScrolled] = useState(false);
  function onScroll(e) {
    setScrolled(e.target.scrollTop > 80);
  }

  return (
    <div style={screenStyles.scrollArea} onScroll={onScroll}>
      {/* sticky compact header that appears on scroll */}
      <div style={{
        ...screenStyles.compactHeader,
        opacity: scrolled ? 1 : 0,
        pointerEvents: scrolled ? 'auto' : 'none',
        transform: scrolled ? 'translateY(0)' : 'translateY(-8px)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LogoMark size={28} />
          <div style={{ fontWeight: 800, fontSize: 16 }}>Tasty&rsquo;s Burgers</div>
        </div>
        <CartButton count={cartCount} onClick={onCart} compact />
      </div>

      {/* Top: brand header */}
      <Header tweaks={tweaks} cartCount={cartCount} onCart={onCart} />

      {/* Hero banner */}
      {tweaks.showHeroBanner && <HeroBanner onPedir={() => onProduct('p6')} />}

      {/* Category tabs */}
      <CategoryTabs active={activeCat} onChange={setActiveCat} />

      {/* Section heading */}
      <div style={{ padding: '4px 20px 12px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.4, color: '#1A1110' }}>
            {CATEGORIES.find(c => c.id === activeCat).label}
          </div>
          <div style={{ fontSize: 12, color: '#8B7E78', marginTop: 2 }}>{filtered.length} itens disponíveis</div>
        </div>
        <button style={screenStyles.linkBtn}>Ver todos</button>
      </div>

      {/* Products */}
      <div style={{ padding: '0 16px 100px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {filtered.map(p => (
          <ProductCard key={p.id} product={p} showBadge={tweaks.showBadges} onClick={() => onProduct(p.id)} onAdd={() => addToCart(p.id, 1)} />
        ))}
      </div>

      {/* Bottom floating cart bar */}
      {cartCount > 0 && (
        <FloatingCartBar count={cartCount} onClick={onCart} />
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HEADER
// ─────────────────────────────────────────────────────────────
function Header({ tweaks, cartCount, onCart }) {
  if (tweaks.headerStyle === 'logo') {
    return (
      <div style={{ background: '#1A1110', color: '#fff', padding: '52px 20px 22px', position: 'relative' }}>
        <TopBarActions cartCount={cartCount} onCart={onCart} dark />
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src={A('assets/logo-dark.jpg')} alt="Tasty's Burgers" style={{ width: 86, height: 86, borderRadius: 18, objectFit: 'cover' }} />
          <div>
            <div style={{ fontFamily: 'Bebas Neue, Impact, sans-serif', fontSize: 36, lineHeight: 0.9, letterSpacing: 0.5 }}>TASTY&rsquo;S BURGERS</div>
            <div style={{ fontSize: 12, color: 'var(--accent)', marginTop: 6, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 700 }}>American Classic Burger</div>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, fontSize: 12, color: 'rgba(255,255,255,0.75)' }}>
              <span>⭐ 4,9</span>
              <span>•</span>
              <span>30–45 min</span>
              <span>•</span>
              <span>R$ 6 entrega</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // image header
  return (
    <div style={{ position: 'relative', height: 220, overflow: 'hidden' }}>
      <img src={A('assets/banner-destaque.jpg')} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'left center' }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(26,17,16,0.55) 0%, rgba(26,17,16,0.05) 35%, rgba(26,17,16,0.0) 60%, rgba(26,17,16,0.85) 100%)',
      }} />
      <div style={{ position: 'absolute', top: 52, left: 0, right: 0 }}>
        <TopBarActions cartCount={cartCount} onCart={onCart} dark />
      </div>
      <div style={{ position: 'absolute', bottom: 16, left: 20, right: 20, color: '#fff' }}>
        <div style={{ display: 'flex', gap: 10, fontSize: 11.5, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={pillStyle}>⭐ 4,9 (842)</span>
          <span style={pillStyle}>🕒 30–45 min</span>
          <span style={{ ...pillStyle, background: 'rgba(76,175,80,0.92)', color: '#fff' }}>● Aberto agora</span>
        </div>
      </div>
    </div>
  );
}

const pillStyle = {
  background: 'rgba(255,255,255,0.92)',
  color: '#1A1110',
  padding: '4px 9px',
  borderRadius: 999,
  fontWeight: 600,
  whiteSpace: 'nowrap',
};

function TopBarActions({ cartCount, onCart, dark }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 16px' }}>
      <button style={{ ...iconBtn, background: dark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.08)', color: dark ? '#fff' : '#1A1110' }}>
        <Icon name="menu" />
      </button>
      <CartButton count={cartCount} onClick={onCart} dark={dark} />
    </div>
  );
}

const iconBtn = {
  width: 38, height: 38, borderRadius: 999, border: 'none',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  cursor: 'pointer', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
};

function CartButton({ count, onClick, dark, compact }) {
  return (
    <button onClick={onClick} style={{
      ...iconBtn,
      background: dark ? 'rgba(255,255,255,0.18)' : '#1A1110',
      color: dark ? '#fff' : '#fff',
      position: 'relative',
    }}>
      <Icon name="bag" />
      {count > 0 && (
        <span style={{
          position: 'absolute', top: -2, right: -2,
          background: 'var(--brand)', color: '#fff',
          minWidth: 18, height: 18, borderRadius: 999,
          fontSize: 10, fontWeight: 800,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '0 5px', border: '2px solid #fff',
        }}>{count}</span>
      )}
    </button>
  );
}

function LogoMark({ size = 36 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.28,
      background: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 4px 12px rgba(0,0,0,0.18)',
      overflow: 'hidden',
    }}>
      <img src={A('assets/logo-light.jpg')} alt="" style={{ width: '120%', height: '120%', objectFit: 'cover', objectPosition: 'center' }} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO BANNER
// ─────────────────────────────────────────────────────────────
function HeroBanner({ onPedir }) {
  return (
    <div style={{ padding: '14px 16px 4px' }}>
      <div style={{
        position: 'relative', borderRadius: 22, overflow: 'hidden',
        height: 160,
        background: 'linear-gradient(135deg, #1A1110 0%, #3A1F1B 100%)',
        boxShadow: '0 12px 30px -10px rgba(230,57,70,0.45), 0 4px 12px rgba(0,0,0,0.12)',
      }}>
        <img src={A('assets/oklahoma-banner.jpg')} alt="Oklahoma Salad" style={{
          position: 'absolute', right: -20, top: -10, width: 210, height: 210, objectFit: 'cover', objectPosition: 'center center', borderRadius: 12,
          filter: 'drop-shadow(0 6px 14px rgba(0,0,0,0.5))',
        }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, #1A1110 42%, rgba(26,17,16,0.4) 68%, rgba(26,17,16,0) 80%)' }} />
        <div style={{ position: 'relative', padding: '20px 18px', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', maxWidth: 220 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 2, color: 'var(--accent)', textTransform: 'uppercase' }}>Destaque</div>
            <div style={{ fontFamily: 'Bebas Neue, Impact, sans-serif', fontSize: 32, color: '#fff', lineHeight: 0.95, marginTop: 6, letterSpacing: 0.3 }}>
              OKLAHOMA<br/>SALAD
            </div>
          </div>
          <button onClick={onPedir} style={{
            alignSelf: 'flex-start',
            background: 'var(--brand)', color: '#fff', border: 'none',
            padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 700,
            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6,
            boxShadow: '0 4px 12px rgba(230,57,70,0.4)',
          }}>
            Pedir agora <Icon name="arrow-right" size={12} />
          </button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CATEGORY TABS
// ─────────────────────────────────────────────────────────────
function CategoryTabs({ active, onChange }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 5, background: 'var(--bg)', paddingTop: 10, paddingBottom: 8 }}>
      <div style={{ display: 'flex', gap: 6, padding: '0 14px', overflowX: 'auto', scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch' }}>
        {CATEGORIES.map(c => {
          const on = c.id === active;
          return (
            <button key={c.id} onClick={() => onChange(c.id)} style={{
              flexShrink: 0,
              border: 'none', cursor: 'pointer',
              padding: '8px 6px',
              borderRadius: 12,
              fontSize: 12, fontWeight: 700, minWidth: 68,
              background: on ? 'var(--brand)' : '#fff',
              color: on ? '#fff' : '#1A1110',
              boxShadow: on
                ? '0 6px 14px -4px rgba(230,57,70,0.5)'
                : '0 1px 2px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.06)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
              transition: 'all 0.18s',
            }}>
              <span style={{ fontSize: 14 }}>{c.icon}</span>
              {c.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PRODUCT CARD
// ─────────────────────────────────────────────────────────────
function ProductCard({ product, showBadge, onClick, onAdd }) {
  const hasImg = !!product.img;
  return (
    <div style={{
      background: '#fff', borderRadius: 18, overflow: 'hidden',
      boxShadow: '0 2px 6px rgba(0,0,0,0.04), 0 8px 22px -10px rgba(26,17,16,0.18)',
      display: 'flex', alignItems: 'stretch', minHeight: 124,
      cursor: 'pointer',
      position: 'relative',
    }} onClick={onClick}>
      {/* Image */}
      <div style={{
        width: 120, flexShrink: 0, position: 'relative',
        background: hasImg ? '#F2EAE3' : 'linear-gradient(135deg, #FCE7DA 0%, #FBD9C4 100%)',
        overflow: 'hidden',
      }}>
        {hasImg ? (
          <img src={A(product.img)} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%' }} />
        ) : (
          <PlaceholderArt cat={product.cat} />
        )}
      </div>

      {/* Body */}
      <div style={{ flex: 1, padding: '12px 12px 12px 14px', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6 }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: '#1A1110', letterSpacing: -0.2, lineHeight: 1.15 }}>{product.name}</div>
          {showBadge && product.badge && <Badge kind={product.badge} />}
        </div>
        <div style={{ fontSize: 11.5, color: '#8B7E78', lineHeight: 1.35, textWrap: 'pretty', flex: 1, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
          {product.desc}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
          <div style={{ fontSize: 16, fontWeight: 800, color: '#1A1110' }}>{BRL(product.price)}</div>
          <button onClick={(e) => { e.stopPropagation(); onAdd(); }} style={{
            background: 'var(--brand)', color: '#fff', border: 'none',
            height: 34, padding: '0 14px', borderRadius: 999,
            fontSize: 13, fontWeight: 700, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
            boxShadow: '0 4px 10px rgba(230,57,70,0.35)',
          }}>
            <Icon name="plus" size={12} /> Adicionar
          </button>
        </div>
      </div>
    </div>
  );
}

function Badge({ kind }) {
  const map = {
    'Mais Vendido': { bg: 'var(--brand)', fg: '#fff', icon: '🔥' },
    'Novo':         { bg: '#2A9D8F',     fg: '#fff', icon: '✨' },
    'Especial':     { bg: 'var(--accent)', fg: '#1A1110', icon: '⭐' },
  }[kind] || { bg: '#1A1110', fg: '#fff' };
  return (
    <span style={{
      background: map.bg, color: map.fg,
      fontSize: 9.5, fontWeight: 800, padding: '3px 7px',
      borderRadius: 999, letterSpacing: 0.4, textTransform: 'uppercase',
      whiteSpace: 'nowrap', flexShrink: 0,
    }}>{map.icon} {kind}</span>
  );
}

function PlaceholderArt({ cat }) {
  const emoji = { porcoes: '🍟', bebidas: '🥤', adicionais: '🥓' }[cat] || '🍔';
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 40 }}>{emoji}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// PRODUCT DETAIL SCREEN
// ─────────────────────────────────────────────────────────────
function ProductScreen({ product, onBack, addToCart, cartCount, onCart }) {
  const [qty, setQty] = useState(1);
  const [notes, setNotes] = useState('');

  if (!product) return null;
  const hasImg = !!product.img;
  return (
    <div style={screenStyles.scrollArea}>
      {/* Top image */}
      <div style={{ position: 'relative', height: 320, background: hasImg ? '#1A1110' : 'linear-gradient(135deg, #FCE7DA 0%, #FBD9C4 100%)' }}>
        {hasImg && (
          <img src={A(product.img)} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        )}
        {!hasImg && <PlaceholderArt cat={product.cat} />}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.55) 100%)',
        }} />
        <div style={{ position: 'absolute', top: 52, left: 0, right: 0, display: 'flex', justifyContent: 'space-between', padding: '0 16px' }}>
          <button onClick={onBack} style={{ ...iconBtn, background: 'rgba(255,255,255,0.92)', color: '#1A1110' }}>
            <Icon name="arrow-left" />
          </button>
          <CartButton count={cartCount} onClick={onCart} />
        </div>
        {product.badge && (
          <div style={{ position: 'absolute', bottom: 18, left: 20 }}>
            <Badge kind={product.badge} />
          </div>
        )}
      </div>

      {/* Body */}
      <div style={{ background: 'var(--bg)', borderRadius: '24px 24px 0 0', marginTop: -24, padding: '22px 20px 140px', position: 'relative' }}>
        <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.4, color: '#1A1110', lineHeight: 1.1 }}>{product.name}</div>
        <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--brand)', marginTop: 6 }}>{BRL(product.price)}</div>
        <div style={{ fontSize: 14, color: '#5A4F4A', marginTop: 14, lineHeight: 1.55, textWrap: 'pretty' }}>{product.desc}</div>

        <div style={{ marginTop: 22 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#1A1110', marginBottom: 8 }}>Observações</div>
          <textarea
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="Sem cebola, ponto da carne, etc."
            style={{
              width: '100%', minHeight: 70,
              border: '1px solid rgba(0,0,0,0.08)', borderRadius: 14,
              padding: '12px 14px', fontSize: 13.5, fontFamily: 'inherit',
              background: '#fff', resize: 'none', outline: 'none',
            }}
          />
        </div>
      </div>

      {/* Bottom action bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 20px 28px', background: 'rgba(255,248,241,0.95)',
        backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
        boxShadow: '0 -8px 24px rgba(0,0,0,0.06)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <QtyControl qty={qty} onMinus={() => setQty(q => Math.max(1, q - 1))} onPlus={() => setQty(q => q + 1)} />
        <button
          onClick={() => { addToCart(product.id, qty, notes); onBack(); }}
          style={{
            flex: 1, height: 52, border: 'none', borderRadius: 999,
            background: 'var(--brand)', color: '#fff',
            fontSize: 15, fontWeight: 800, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: '0 8px 20px rgba(230,57,70,0.4)',
          }}
        >
          Adicionar · {BRL(product.price * qty)}
        </button>
      </div>
    </div>
  );
}

function QtyControl({ qty, onMinus, onPlus, size = 'lg' }) {
  const h = size === 'lg' ? 52 : 32;
  const fs = size === 'lg' ? 18 : 14;
  return (
    <div style={{
      height: h, display: 'flex', alignItems: 'center',
      background: '#fff', borderRadius: 999,
      boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)',
      padding: 4, gap: 2,
    }}>
      <button onClick={onMinus} style={qtyBtn(h - 8)}><Icon name="minus" size={fs - 4} /></button>
      <div style={{ minWidth: 24, textAlign: 'center', fontWeight: 800, fontSize: fs - 2, color: '#1A1110' }}>{qty}</div>
      <button onClick={onPlus} style={qtyBtn(h - 8)}><Icon name="plus" size={fs - 4} /></button>
    </div>
  );
}
function qtyBtn(s) {
  return {
    width: s, height: s, borderRadius: 999, border: 'none',
    background: '#F4ECE4', color: '#1A1110',
    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}

// ─────────────────────────────────────────────────────────────
// CART
// ─────────────────────────────────────────────────────────────
function CartScreen({ cart, total, onBack, updateQty, removeItem, onCheckout }) {
  const empty = cart.length === 0;
  const delivery = empty ? 0 : 6;
  const grand = total + delivery;

  return (
    <div style={screenStyles.scrollArea}>
      {/* Header */}
      <div style={{ padding: '52px 20px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button onClick={onBack} style={{ ...iconBtn, background: '#fff', color: '#1A1110', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
          <Icon name="arrow-left" />
        </button>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11.5, color: '#8B7E78', fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Seu pedido</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.3 }}>Carrinho</div>
        </div>
        {!empty && (
          <div style={{ fontSize: 12, color: '#8B7E78' }}>{cart.reduce((s, i) => s + i.qty, 0)} itens</div>
        )}
      </div>

      {empty ? (
        <EmptyCart onBack={onBack} />
      ) : (
        <>
          {/* Items */}
          <div style={{ padding: '6px 16px 12px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {cart.map((item, idx) => {
              const p = PRODUCTS.find(x => x.id === item.id);
              if (!p) return null;
              return (
                <div key={idx} style={{
                  background: '#fff', borderRadius: 16, padding: 12,
                  display: 'flex', gap: 12, alignItems: 'center',
                  boxShadow: '0 2px 6px rgba(0,0,0,0.04), 0 6px 16px -10px rgba(26,17,16,0.15)',
                }}>
                  <div style={{ width: 56, height: 56, borderRadius: 12, overflow: 'hidden', flexShrink: 0, background: '#F2EAE3' }}>
                    {p.img ? <img src={A(p.img)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <PlaceholderArt cat={p.cat} />}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: '#1A1110', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                    {item.notes && <div style={{ fontSize: 11, color: '#8B7E78', marginTop: 2, fontStyle: 'italic' }}>{item.notes}</div>}
                    <div style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--brand)', marginTop: 4 }}>{BRL(p.price * item.qty)}</div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                    <QtyControl qty={item.qty} onMinus={() => updateQty(idx, -1)} onPlus={() => updateQty(idx, 1)} size="sm" />
                    <button onClick={() => removeItem(idx)} style={{ background: 'none', border: 'none', fontSize: 11, color: '#8B7E78', cursor: 'pointer', padding: '2px 6px' }}>Remover</button>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Add more */}
          <button onClick={onBack} style={{
            margin: '6px 16px 16px', height: 44,
            background: 'transparent', border: '1.5px dashed rgba(230,57,70,0.4)',
            borderRadius: 14, color: 'var(--brand)', fontSize: 13.5, fontWeight: 700,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            width: 'calc(100% - 32px)',
          }}>
            <Icon name="plus" size={13} /> Adicionar mais itens
          </button>

          {/* Coupon */}
          <div style={{ margin: '0 16px 16px', background: '#fff', borderRadius: 14, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 1px 3px rgba(0,0,0,0.04)' }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(244,162,97,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>🎟️</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#1A1110' }}>Cupom de desconto</div>
              <div style={{ fontSize: 11, color: '#8B7E78' }}>Tem um código? Aplique aqui</div>
            </div>
            <Icon name="chevron-right" size={14} />
          </div>

          {/* Summary */}
          <div style={{ margin: '0 16px 16px', background: '#fff', borderRadius: 16, padding: 16, boxShadow: '0 1px 3px rgba(0,0,0,0.04)' }}>
            <div style={summaryRow}><span>Subtotal</span><span>{BRL(total)}</span></div>
            <div style={summaryRow}><span>Taxa de entrega</span><span>{BRL(delivery)}</span></div>
            <div style={{ height: 1, background: 'rgba(0,0,0,0.06)', margin: '10px 0' }} />
            <div style={{ ...summaryRow, fontSize: 17, fontWeight: 800, color: '#1A1110' }}>
              <span>Total</span><span>{BRL(grand)}</span>
            </div>
          </div>

          {/* CTA */}
          <div style={{ padding: '0 16px 110px' }}>
            <button onClick={onCheckout} style={{
              width: '100%', height: 56, border: 'none', borderRadius: 16,
              background: '#25D366', color: '#fff',
              fontSize: 15.5, fontWeight: 800, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: '0 10px 22px rgba(37,211,102,0.45)',
              letterSpacing: 0.1,
            }}>
              <Icon name="whatsapp" size={20} /> Fazer Pedido via WhatsApp
            </button>
            <div style={{ textAlign: 'center', fontSize: 11, color: '#8B7E78', marginTop: 10 }}>
              Tempo estimado de entrega: 30–45 min
            </div>
          </div>
        </>
      )}
    </div>
  );
}

const summaryRow = {
  display: 'flex', justifyContent: 'space-between',
  fontSize: 13.5, color: '#5A4F4A', padding: '4px 0',
};

function EmptyCart({ onBack }) {
  return (
    <div style={{ padding: '60px 24px', textAlign: 'center' }}>
      <div style={{ fontSize: 64, marginBottom: 12 }}>🛍️</div>
      <div style={{ fontSize: 18, fontWeight: 800, color: '#1A1110' }}>Seu carrinho está vazio</div>
      <div style={{ fontSize: 13, color: '#8B7E78', marginTop: 6, lineHeight: 1.5 }}>
        Que tal começar com nosso<br/>Crispy Cheddar? 🔥
      </div>
      <button onClick={onBack} style={{
        marginTop: 22, height: 46, padding: '0 22px',
        background: 'var(--brand)', color: '#fff', border: 'none', borderRadius: 999,
        fontSize: 13.5, fontWeight: 700, cursor: 'pointer',
        boxShadow: '0 6px 16px rgba(230,57,70,0.35)',
      }}>Ver cardápio</button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CHECKOUT MODAL
// ─────────────────────────────────────────────────────────────
function CheckoutModal({ total, onClose, onConfirm }) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [delivery, setDelivery] = useState('entrega');
  const [address, setAddress] = useState('');
  const [payment, setPayment] = useState('pix');
  const [change, setChange] = useState('');

  const valid = name.trim() && phone.trim() && (delivery === 'retirada' || address.trim());

  function submit() {
    if (!valid) return;
    onConfirm({ name, phone, delivery, address, payment, change });
  }

  return (
    <ModalShell onClose={onClose}>
      <div style={{ padding: '8px 20px 20px', maxHeight: '78vh', overflowY: 'auto' }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: 'rgba(0,0,0,0.12)', margin: '6px auto 14px' }} />
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.3, color: '#1A1110' }}>Finalizar pedido</div>
        <div style={{ fontSize: 13, color: '#8B7E78', marginTop: 4 }}>Confirme seus dados antes de enviar pelo WhatsApp.</div>

        <FormSection title="Seus dados">
          <Field label="Nome completo">
            <Input value={name} onChange={setName} placeholder="Como podemos te chamar?" />
          </Field>
          <Field label="WhatsApp">
            <Input value={phone} onChange={setPhone} placeholder="(11) 91234-5678" />
          </Field>
        </FormSection>

        <FormSection title="Entrega">
          <SegmentedControl
            value={delivery}
            onChange={setDelivery}
            options={[
              { value: 'entrega',  label: 'Entrega',  icon: '🛵' },
              { value: 'retirada', label: 'Retirada', icon: '🏪' },
            ]}
          />
          {delivery === 'entrega' && (
            <Field label="Endereço">
              <Input value={address} onChange={setAddress} placeholder="Rua, número, bairro, complemento" />
            </Field>
          )}
          {delivery === 'retirada' && (
            <div style={{ marginTop: 10, padding: 12, borderRadius: 12, background: 'rgba(244,162,97,0.14)', fontSize: 12.5, color: '#5A4F4A', lineHeight: 1.5 }}>
              📍 <b>Tasty&rsquo;s Burgers</b> — Rua Augusta, 1404, Consolação. Pronto em ~25 min.
            </div>
          )}
        </FormSection>

        <FormSection title="Pagamento">
          <PaymentGrid value={payment} onChange={setPayment} />
          {payment === 'dinheiro' && (
            <Field label="Troco para">
              <Input value={change} onChange={setChange} placeholder="Ex: R$ 100,00" />
            </Field>
          )}
        </FormSection>

        <div style={{ marginTop: 14, padding: 14, borderRadius: 14, background: '#1A1110', color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 700 }}>Total do pedido</div>
            <div style={{ fontSize: 22, fontWeight: 800, marginTop: 2 }}>{BRL(total + 6)}</div>
          </div>
          <div style={{ fontSize: 11, opacity: 0.7, textAlign: 'right' }}>{BRL(total)} + R$ 6,00<br/>entrega</div>
        </div>

        <button
          onClick={submit}
          disabled={!valid}
          style={{
            marginTop: 16, width: '100%', height: 54, border: 'none', borderRadius: 16,
            background: valid ? '#25D366' : 'rgba(37,211,102,0.4)',
            color: '#fff', fontSize: 15, fontWeight: 800,
            cursor: valid ? 'pointer' : 'not-allowed',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: valid ? '0 8px 20px rgba(37,211,102,0.4)' : 'none',
          }}
        >
          <Icon name="whatsapp" size={18} /> Confirmar e enviar
        </button>
      </div>
    </ModalShell>
  );
}

function FormSection({ title, children }) {
  return (
    <div style={{ marginTop: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 800, color: '#8B7E78', letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>{children}</div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 700, color: '#1A1110', marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

function Input({ value, onChange, placeholder }) {
  const [focus, setFocus] = useState(false);
  return (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
      style={{
        width: '100%', height: 46, padding: '0 14px',
        borderRadius: 12, fontSize: 14, fontFamily: 'inherit',
        background: '#fff', color: '#1A1110',
        border: 'none', outline: 'none',
        boxShadow: focus
          ? 'inset 0 0 0 2px var(--brand)'
          : 'inset 0 0 0 1px rgba(0,0,0,0.1)',
        transition: 'box-shadow 0.15s',
      }}
    />
  );
}

function SegmentedControl({ value, onChange, options }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 0,
      background: '#F4ECE4', borderRadius: 14, padding: 4,
    }}>
      {options.map(o => {
        const on = o.value === value;
        return (
          <button key={o.value} onClick={() => onChange(o.value)} style={{
            height: 42, border: 'none', borderRadius: 11, cursor: 'pointer',
            background: on ? '#fff' : 'transparent',
            color: '#1A1110', fontSize: 13, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            boxShadow: on ? '0 2px 6px rgba(0,0,0,0.08)' : 'none',
            transition: 'all 0.15s',
          }}>
            <span style={{ fontSize: 15 }}>{o.icon}</span>
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

function PaymentGrid({ value, onChange }) {
  const opts = [
    { value: 'pix',      label: 'Pix',     sub: 'Aprovação imediata', icon: '⚡' },
    { value: 'cartao',   label: 'Cartão',  sub: 'Crédito ou débito',  icon: '💳' },
    { value: 'dinheiro', label: 'Dinheiro',sub: 'Pague na entrega',   icon: '💵' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {opts.map(o => {
        const on = o.value === value;
        return (
          <button key={o.value} onClick={() => onChange(o.value)} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
            borderRadius: 12, cursor: 'pointer', textAlign: 'left',
            background: '#fff',
            border: 'none',
            boxShadow: on
              ? 'inset 0 0 0 2px var(--brand)'
              : 'inset 0 0 0 1px rgba(0,0,0,0.08)',
            transition: 'all 0.15s',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: on ? 'rgba(230,57,70,0.12)' : '#F4ECE4',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18,
            }}>{o.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#1A1110' }}>{o.label}</div>
              <div style={{ fontSize: 11.5, color: '#8B7E78', marginTop: 1 }}>{o.sub}</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: 999,
              border: on ? '6px solid var(--brand)' : '2px solid rgba(0,0,0,0.18)',
              background: '#fff',
              transition: 'all 0.15s',
            }} />
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ORDER SENT MODAL
// ─────────────────────────────────────────────────────────────
function OrderSentModal({ order, onClose }) {
  return (
    <ModalShell onClose={onClose}>
      <div style={{ padding: '36px 28px 28px', textAlign: 'center' }}>
        <div style={{
          width: 78, height: 78, margin: '0 auto 16px',
          borderRadius: '50%', background: '#25D366',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 12px 30px rgba(37,211,102,0.45)',
        }}>
          <Icon name="check" size={38} color="#fff" />
        </div>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#1A1110', letterSpacing: -0.3 }}>Pedido enviado!</div>
        <div style={{ fontSize: 13.5, color: '#5A4F4A', marginTop: 8, lineHeight: 1.5 }}>
          Mandamos seu pedido pelo WhatsApp.<br/>Em instantes, nossa equipe vai confirmar.
        </div>

        <div style={{ marginTop: 22, padding: 14, background: '#F4ECE4', borderRadius: 14, textAlign: 'left' }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: '#8B7E78', letterSpacing: 1, textTransform: 'uppercase' }}>Pedido #{('' + Math.floor(Math.random() * 9000 + 1000))}</div>
          <div style={{ fontSize: 13, color: '#1A1110', marginTop: 6, fontWeight: 600 }}>{order.form.name}</div>
          <div style={{ fontSize: 12, color: '#5A4F4A', marginTop: 2 }}>
            {order.form.delivery === 'entrega' ? '🛵 Entrega' : '🏪 Retirada'} · {order.form.payment.toUpperCase()}
          </div>
          <div style={{ fontSize: 12, color: '#5A4F4A', marginTop: 2 }}>Total: <b>{BRL(order.total + (order.form.delivery === 'entrega' ? 6 : 0))}</b></div>
        </div>

        <button onClick={onClose} style={{
          marginTop: 20, width: '100%', height: 50, border: 'none', borderRadius: 14,
          background: 'var(--brand)', color: '#fff',
          fontSize: 14, fontWeight: 800, cursor: 'pointer',
          boxShadow: '0 8px 18px rgba(230,57,70,0.4)',
        }}>Voltar ao cardápio</button>
      </div>
    </ModalShell>
  );
}

// ─────────────────────────────────────────────────────────────
// MODAL SHELL
// ─────────────────────────────────────────────────────────────
function ModalShell({ children, onClose }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(26,17,16,0.5)', animation: 'fadeIn 0.2s' }} />
      <div style={{
        position: 'relative', width: '100%',
        background: 'var(--bg)',
        borderRadius: '24px 24px 0 0',
        maxHeight: '90%',
        overflow: 'hidden',
        boxShadow: '0 -10px 40px rgba(0,0,0,0.2)',
        animation: 'slideUp 0.28s cubic-bezier(0.2,0.9,0.3,1)',
      }}>{children}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FLOATING CART BAR
// ─────────────────────────────────────────────────────────────
function FloatingCartBar({ count, onClick }) {
  return (
    <div style={{ position: 'absolute', bottom: 28, left: 16, right: 16, zIndex: 30 }}>
      <button onClick={onClick} style={{
        width: '100%', height: 54, border: 'none', borderRadius: 16,
        background: 'var(--brand)', color: '#fff',
        fontSize: 14.5, fontWeight: 800, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 18px',
        boxShadow: '0 12px 26px rgba(230,57,70,0.45)',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 26, height: 26, borderRadius: 8, background: 'rgba(255,255,255,0.22)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, fontWeight: 800,
          }}>{count}</span>
          Ver carrinho
        </span>
        <Icon name="arrow-right" size={16} />
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TOAST
// ─────────────────────────────────────────────────────────────
function Toast({ children }) {
  return (
    <div style={{
      position: 'absolute', top: 100, left: '50%', transform: 'translateX(-50%)',
      background: '#1A1110', color: '#fff',
      padding: '10px 16px', borderRadius: 999,
      fontSize: 12.5, fontWeight: 700,
      boxShadow: '0 10px 24px rgba(0,0,0,0.25)',
      zIndex: 90,
      animation: 'toastIn 0.3s cubic-bezier(0.2,1.4,0.4,1)',
      whiteSpace: 'nowrap',
    }}>{children}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// ICON
// ─────────────────────────────────────────────────────────────
function Icon({ name, size = 18, color = 'currentColor' }) {
  const s = size;
  const common = { width: s, height: s, fill: 'none', stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'menu':       return <svg {...common}><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="14" y2="17"/></svg>;
    case 'bag':        return <svg {...common}><path d="M5 8h14l-1 12H6L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>;
    case 'plus':       return <svg {...common}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case 'minus':      return <svg {...common}><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case 'arrow-right':return <svg {...common}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13,6 19,12 13,18"/></svg>;
    case 'arrow-left': return <svg {...common}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="11,6 5,12 11,18"/></svg>;
    case 'chevron-right':return <svg {...common}><polyline points="9,6 15,12 9,18"/></svg>;
    case 'check':      return <svg {...common} strokeWidth={3}><polyline points="5,12 10,17 19,7"/></svg>;
    case 'whatsapp':   return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill={color}>
        <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.4.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.5.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
    );
    default: return null;
  }
}

// ─────────────────────────────────────────────────────────────
// STYLES
// ─────────────────────────────────────────────────────────────
const appStyles = {
  wrap: {
    minHeight: '100vh', width: '100%',
    background: 'radial-gradient(ellipse at top, #FFE4D2 0%, #FCEBD9 25%, #F5DCC4 100%)',
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    padding: '40px 20px',
    fontFamily: 'Inter, -apple-system, system-ui, sans-serif',
  },
  canvas: {
    width: '100%', height: '100%', position: 'relative',
    background: 'var(--bg)',
    color: '#1A1110',
    fontFamily: 'Inter, -apple-system, system-ui, sans-serif',
  },
  externalLabel: {
    marginTop: 22, textAlign: 'center',
  },
};

const screenStyles = {
  scrollArea: {
    width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden',
    background: 'var(--bg)', position: 'relative',
    scrollbarWidth: 'none',
  },
  compactHeader: {
    position: 'sticky', top: 0, zIndex: 8,
    height: 78, paddingTop: 44,
    background: 'rgba(255,248,241,0.92)',
    backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
    boxShadow: '0 1px 0 rgba(0,0,0,0.06)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '44px 16px 0',
    transition: 'all 0.2s',
    marginBottom: -78,
  },
  linkBtn: {
    background: 'transparent', border: 'none', cursor: 'pointer',
    color: 'var(--brand)', fontSize: 12.5, fontWeight: 700,
  },
};

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