/* global React, window, fmt */
// =======================================================================
//  DinnerDrawer — configurador do jantar Dia dos Namorados
//
//  Fluxo:
//    1. Pessoa abre o drawer (vindo do botão "Reservar o jantar")
//    2. Escolhe número de pessoas (1–8)
//    3. Para cada pessoa: harmonização (sim/não) + entrada + principal + sobremesa
//    4. "Adicionar ao carrinho" → wcAddToCartDinner() → redireciona para /cart
//
//  Produtos Woo necessários (IDs em ZUZU_JD_CONFIG.dinnerIds):
//    jantar_sem_harm  — variation_id da variação "Sem harmonização" (R$ 210)
//    jantar_com_harm  — variation_id da variação "Com harmonização de vinhos e espumantes" (R$ 295)
// =======================================================================

const { useState: useSt, useEffect: useEf, useCallback: useCb } = React;

/* ─── dados do cardápio ─────────────────────────────────────── */
const ENTRADAS = [
  {
    id: "burrata",
    title: "Mini burrata",
    desc: "Uvas assadas com tomilho e azeite verde — acompanha focaccia da casa tostada no azeite.",
  },
  {
    id: "rosbife",
    title: "Rosbife de filé mignon",
    desc: "Molho de dijon, chuva de alagoa, rúcula selvagem e azeite trufado — acompanha pão da casa tostado.",
  },
];

const PRINCIPAIS = [
  {
    id: "couve-flor",
    title: '"Filé" de couve-flor grelhada',
    desc: "Purê de cenoura aromático, creme de cogumelos e vinagrete de mexerica com coentro, tomate e cebola roxa.",
    veg: true,
  },
  {
    id: "risonni",
    title: "Camarões salteados na manteiga de ervas",
    desc: "Com risonni de limão siciliano e toban djan.",
  },
  {
    id: "ossobuco",
    title: "Ossobuco cozido ao vinho",
    desc: "Choux de mandioquinha recheada com purê de mandioquinha e queijo parmesão.",
  },
];

const SOBREMESAS = [
  { id: "torta",   title: "Torta chocolatuda" },
  { id: "pavlova", title: "Pavlova de inverno" },
];

/* ─── preços (fácil de ajustar) ─────────────────────────────── */
const PRICE_SEM_HARM = 210;  // por pessoa, sem harmonização
const PRICE_COM_HARM = 295;  // por pessoa, com harmonização (fácil de ajustar)

/* ─── pessoa vazia ────────────────────────────────────────────── */
function emptyGuest() {
  return { harmonizado: false, entrada: null, principal: null, sobremesa: null };
}

/* ─── helper WC AJAX ──────────────────────────────────────────── */
async function wcAddItem(productId, qty = 1, meta = {}, isVariation = false) {
  const cfg      = window.ZUZU_JD_CONFIG || {};
  const parentId = cfg.dinnerIds?.jantar_produto_pai || productId;

  const ajaxUrl = (window.wc_add_to_cart_params?.wc_ajax_url || "/?wc-ajax=%%endpoint%%")
    .replace("%%endpoint%%", "add_to_cart");

  const body = new URLSearchParams({
    product_id:   isVariation ? parentId : productId,
    quantity:     qty,
  });

  if (isVariation) {
    body.append("variation_id", productId);
    const v = meta.attribute_harmonizacao || "";
    if (v) {
      body.append("attribute_harmonizacao", v);
    }
  }

  Object.entries(meta).forEach(([k, v]) => {
    if (!k.startsWith("attribute_")) body.append(k, v);
  });

  try {
    const res  = await fetch(ajaxUrl, {
      method : "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
      body   : body.toString(),
    });
    const json = await res.json();
    console.log("WC add_to_cart response:", json);
    console.log("WC add_to_cart body sent:", body.toString());
    return !json.error;
  } catch (err) {
    console.error("WC add_to_cart error:", err);
    return false;
  }
}

/* ─── sub-componente: seletor de prato ───────────────────────── */
function DishPicker({ label, options, value, onChange }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{
        fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
        color: "var(--ink-soft)", marginBottom: 8,
      }}>{label}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {options.map((opt) => {
          const sel = value === opt.id;
          return (
            <button
              key={opt.id}
              onClick={() => onChange(opt.id)}
              style={{
                textAlign      : "left",
                background     : sel ? "var(--accent)" : "var(--paper)",
                color          : sel ? "var(--paper)" : "var(--ink)",
                border         : `1px solid ${sel ? "var(--accent)" : "var(--line, #ddd)"}`,
                borderRadius   : 8,
                padding        : "10px 14px",
                cursor         : "pointer",
                transition     : "all .15s",
              }}
            >
              <div style={{ fontWeight: 500, fontSize: 14, marginBottom: 3 }}>
                {opt.title}
                {opt.veg && (
                  <span style={{ marginLeft: 8, fontSize: 10, opacity: 0.7, fontStyle: "italic" }}>
                    vegetariano
                  </span>
                )}
              </div>
              <div style={{ fontSize: 12, opacity: sel ? 0.85 : 0.6, lineHeight: 1.4 }}>
                {opt.desc}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ─── lê reservation_id da URL (vindo do sistema de reservas) ── */
function getReservationIdFromUrl() {
  const params = new URLSearchParams(window.location.search);
  const rid = params.get("rid");
  return rid ? parseInt(rid, 10) : null;
}
function DinnerDrawer({ open, onClose }) {
  const hasRid = !!getReservationIdFromUrl();
  const [step,   setStep]   = useSt(1);
  const [count,  setCount]  = useSt(hasRid ? 0 : 2);
  const [guests, setGuests] = useSt(hasRid ? [] : [emptyGuest(), emptyGuest()]);
  const [active, setActive] = useSt(0);
  const [loading, setLoading] = useSt(false);
  const [error,   setError]   = useSt(null);

  // Reserva vinculada — número de pessoas travado pelo rid da URL
  const [reservation, setReservation] = useSt(null);
  const [resLoading,  setResLoading]  = useSt(false);
  const [resError,    setResError]    = useSt(null);

  // Ao abrir: busca dados da reserva e trava o número de pessoas
  useEf(() => {
    if (!open) {
      setTimeout(() => {
        setStep(1); setCount(2); setGuests([emptyGuest(), emptyGuest()]);
        setActive(0); setError(null); setReservation(null); setResError(null);
      }, 300);
      return;
    }

    const rid = getReservationIdFromUrl();
    if (!rid) return;

    setResLoading(true);
    setResError(null);

    const ajaxUrl = window.ZUZU_JD_CONFIG?.ajaxUrl || '/wp-admin/admin-ajax.php';
    console.log('[DinnerDrawer] fetching guests for rid:', rid, 'ajaxUrl:', ajaxUrl);
    fetch(`${ajaxUrl}?action=zuzu_jd_get_reservation_guests&rid=${rid}`)
      .then((r) => r.json())
      .then((json) => {
        console.log('[DinnerDrawer] guests response:', json);
        if (json.success && json.data) {
          const n = json.data.guests_count;
          setReservation(json.data);
          setCount(n);
          setGuests(Array.from({ length: n }, emptyGuest));
        } else {
          setResError('Não foi possível carregar os dados da reserva.');
        }
      })
      .catch((e) => { console.error('[DinnerDrawer] fetch error:', e); setResError('Erro ao buscar a reserva.'); })
      .finally(() => setResLoading(false));
  }, [open]);

  function updateCount(n) {
    setCount(n);
    setGuests((prev) => {
      if (n > prev.length) return [...prev, ...Array.from({ length: n - prev.length }, emptyGuest)];
      return prev.slice(0, n);
    });
  }

  function updateGuest(idx, field, val) {
    setGuests((prev) => prev.map((g, i) => i === idx ? { ...g, [field]: val } : g));
  }

  function guestComplete(g) {
    return g.entrada && g.principal && g.sobremesa;
  }

  const allComplete = guests.every(guestComplete);

  const subtotal = guests.reduce((sum, g) => {
    return sum + (g.harmonizado ? PRICE_COM_HARM : PRICE_SEM_HARM);
  }, 0);

  function addToCart() {
    setLoading(true);
    setError(null);

    const cfg        = window.ZUZU_JD_CONFIG || {};
    const dinnerIds  = cfg.dinnerIds || {};
    const varSemHarm = dinnerIds.jantar_sem_harm;
    const varComHarm = dinnerIds.jantar_com_harm;
    const parentId   = dinnerIds.jantar_produto_pai;

    if (!varSemHarm || !varComHarm || !parentId) {
      setError("Produto não configurado. Fale com a gente pelo WhatsApp.");
      setLoading(false);
      return;
    }

    const reservationId = getReservationIdFromUrl();
    const semHarmCount  = guests.filter((g) => !g.harmonizado).length;
    const comHarmCount  = guests.filter((g) =>  g.harmonizado).length;

    // Salva dados do jantar no sessionStorage para o checkout usar
    const allGuestData = guests.map((g, i) => ({
      pessoa      : i + 1,
      harmonizado : g.harmonizado,
      entrada     : ENTRADAS.find((e) => e.id === g.entrada)?.title    || "—",
      principal   : PRINCIPAIS.find((p) => p.id === g.principal)?.title || "—",
      sobremesa   : SOBREMESAS.find((s) => s.id === g.sobremesa)?.title || "—",
    }));
    sessionStorage.setItem("zuzu_jd_dinner_guests", JSON.stringify(allGuestData));
    if (reservationId) sessionStorage.setItem("zuzu_jd_reservation_id", String(reservationId));

    // Usa URL direta — mais confiável que AJAX para produtos variáveis
    const base     = window.location.origin;
    const checkout = cfg.wcCheckoutUrl || (base + "/checkout/");
    const semVal   = encodeURIComponent("Sem harmonização");
    const comVal   = encodeURIComponent("Com harmonização de vinhos e espumantes");
    const ridParam = reservationId ? "&rid=" + reservationId : "";

    let addUrl;

    if (comHarmCount > 0 && semHarmCount === 0) {
      // Todos com harmonização
      addUrl = base + "/?add-to-cart=" + parentId
             + "&variation_id=" + varComHarm
             + "&quantity=" + comHarmCount
             + "&attribute_harmonizacao=" + comVal
             + ridParam + "&checkout=1";
    } else if (semHarmCount > 0 && comHarmCount === 0) {
      // Todos sem harmonização
      addUrl = base + "/?add-to-cart=" + parentId
             + "&variation_id=" + varSemHarm
             + "&quantity=" + semHarmCount
             + "&attribute_harmonizacao=" + semVal
             + ridParam + "&checkout=1";
    } else {
      // Mistos — passa os dois grupos via parâmetro extra que o PHP vai processar
      // O hook zuzu_jd_handle_mixed_cart lê zuzu_jd_add2 e adiciona o segundo grupo
      addUrl = base + "/?add-to-cart=" + parentId
             + "&variation_id=" + varSemHarm
             + "&quantity=" + semHarmCount
             + "&attribute_harmonizacao=" + semVal
             + "&zuzu_jd_add2=" + varComHarm
             + "&zuzu_jd_add2_qty=" + comHarmCount
             + "&zuzu_jd_add2_attr=" + comVal
             + ridParam + "&checkout=1";
    }

    window.location.href = addUrl;
  }

  /* ── render ── */
  const drawerStyle = {
    position       : "fixed",
    top            : 0,
    right          : open ? 0 : "-100%",
    width          : "min(460px, 100vw)",
    height         : "100dvh",
    background     : "var(--paper)",
    boxShadow      : "-4px 0 40px rgba(0,0,0,0.12)",
    display        : "flex",
    flexDirection  : "column",
    zIndex         : 1100,
    transition     : "right .3s cubic-bezier(.4,0,.2,1)",
    overflowY      : "auto",
  };

  const scrimStyle = {
    position       : "fixed",
    inset          : 0,
    background     : "rgba(0,0,0,0.35)",
    zIndex         : 1099,
    opacity        : open ? 1 : 0,
    pointerEvents  : open ? "auto" : "none",
    transition     : "opacity .3s",
  };

  return (
    <>
      <div style={scrimStyle} onClick={onClose} />
      <aside style={drawerStyle} aria-hidden={!open} aria-label="Configurar jantar">

        {/* cabeçalho */}
        <header style={{
          padding        : "20px 24px 16px",
          borderBottom   : "1px solid var(--line, #e8e0d4)",
          display        : "flex",
          justifyContent : "space-between",
          alignItems     : "center",
          flexShrink     : 0,
        }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 2 }}>
              Jantar · 12 de junho · 20h
            </div>
            <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400 }}>
              {step === 1 ? "Quantas pessoas?" : step === 2 ? `Pessoa ${active + 1} de ${count}` : "Resumo do pedido"}
            </h3>
          </div>
          <button
            onClick={onClose}
            style={{ background: "none", border: "none", cursor: "pointer", fontSize: 20, color: "var(--ink-soft)", padding: 4 }}
            aria-label="Fechar"
          >✕</button>
        </header>

        {/* aviso destacado quando vem do sistema de reservas */}
        {getReservationIdFromUrl() && (
          <div style={{
            margin        : "12px 24px 0",
            padding       : "14px 16px",
            background    : "var(--accent)",
            borderRadius  : 8,
            color         : "var(--paper)",
            fontSize      : 13,
            lineHeight    : 1.6,
            flexShrink    : 0,
          }}>
            <strong style={{ display: "block", marginBottom: 4, fontSize: 14 }}>
              ⚠ Sua reserva está pendente
            </strong>
            A mesa foi reservada, mas <strong>a confirmação só é enviada após o pagamento</strong>. Escolha os pratos abaixo e finalize o pedido no carrinho para garantir seu lugar.
          </div>
        )}

        {/* disclaimer */}
        <div style={{
          margin         : "16px 24px 0",
          padding        : "14px 16px",
          background     : "color-mix(in oklab, var(--accent) 8%, var(--paper))",
          borderLeft     : "2px solid var(--accent)",
          borderRadius   : "0 6px 6px 0",
          fontSize       : 12,
          lineHeight     : 1.6,
          color          : "var(--ink-soft)",
          flexShrink     : 0,
        }}>
          Para que cada prato chegue à mesa com a atenção que merece — e para não faltar e evitar desperdícios — nos programamos com antecedência. Por isso pedimos que a escolha dos pratos seja feita aqui, no momento da reserva. Pedidos adicionais, bebidas e ajustes podem ser combinados diretamente no dia.
        </div>

        {/* conteúdo principal */}
        <div style={{ flex: 1, padding: "20px 24px", overflowY: "auto" }}>

          {/* passo 1 — número de pessoas (travado se vier da reserva) */}
          {step === 1 && (
            <div>
              {resLoading ? (
                <p style={{ color: "var(--ink-soft)", fontSize: 14 }}>Carregando dados da reserva…</p>
              ) : reservation ? (
                /* Reserva vinculada — número de pessoas fixo */
                <div style={{ marginBottom: 24 }}>
                  <div style={{ background: "var(--bg-2, #ead8c1)", borderRadius: 10, padding: "16px 18px", marginBottom: 16 }}>
                    <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 6 }}>
                      Reserva confirmada
                    </div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 4 }}>
                      {reservation.customer_name}
                    </div>
                    <div style={{ fontSize: 14, color: "var(--ink-soft)" }}>
                      12 de junho · 20h · <strong>{count} pessoa{count !== 1 ? "s" : ""}</strong>
                    </div>
                  </div>
                  {resError && (
                    <p style={{ fontSize: 12, color: "#c0392b", marginBottom: 12 }}>{resError}</p>
                  )}
                </div>
              ) : (
                /* Sem reserva vinculada — seletor livre */
                <>
                  <p style={{ color: "var(--ink-soft)", fontSize: 14, marginBottom: 24, lineHeight: 1.6 }}>
                    Selecione o número de pessoas. Cada pessoa escolherá seus pratos individualmente.
                    Grupos de até 8 pessoas por reserva.
                  </p>
                  <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 32 }}>
                    <button
                      onClick={() => updateCount(Math.max(1, count - 1))}
                      style={{ width: 44, height: 44, borderRadius: "50%", border: "1px solid var(--line, #ddd)", background: "var(--paper)", fontSize: 22, cursor: "pointer", color: "var(--ink)" }}
                    >−</button>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 48, lineHeight: 1 }}>{count}</span>
                    <button
                      onClick={() => updateCount(Math.min(8, count + 1))}
                      style={{ width: 44, height: 44, borderRadius: "50%", border: "1px solid var(--line, #ddd)", background: "var(--paper)", fontSize: 22, cursor: "pointer", color: "var(--ink)" }}
                    >+</button>
                    <span style={{ color: "var(--ink-soft)", fontSize: 14 }}>pessoa{count !== 1 ? "s" : ""}</span>
                  </div>
                </>
              )}

              {/* preview de preço */}
              <div style={{ background: "var(--bg-2, #ead8c1)", borderRadius: 10, padding: "16px 18px", marginBottom: 24 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 6, color: "var(--ink-soft)" }}>
                  <span>Sem harmonização — por pessoa</span>
                  <span>R$ {fmt(PRICE_SEM_HARM)}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 10, color: "var(--ink-soft)" }}>
                  <span>Com harmonização — por pessoa</span>
                  <span>R$ {fmt(PRICE_COM_HARM)}</span>
                </div>
                <div style={{ borderTop: "1px solid var(--line, #ddd)", paddingTop: 10, display: "flex", justifyContent: "space-between", fontWeight: 500, fontSize: 15 }}>
                  <span>Mínimo para {count} pessoa{count !== 1 ? "s" : ""}</span>
                  <span>R$ {fmt(PRICE_SEM_HARM * count)}</span>
                </div>
              </div>

              <button
                onClick={() => setStep(2)}
                style={{
                  width: "100%", padding: "14px 0", background: "var(--accent)", color: "var(--paper)",
                  border: "none", borderRadius: 8, cursor: "pointer", fontSize: 14,
                  fontFamily: "var(--font-display)", letterSpacing: "0.04em", fontStyle: "italic", fontSize: 18,
                }}
              >
                Escolher os pratos →
              </button>
            </div>
          )}

          {/* passo 2 — pratos por pessoa */}
          {step === 2 && (
            <div>
              {/* tabs de pessoa */}
              <div style={{ display: "flex", gap: 6, marginBottom: 24, flexWrap: "wrap" }}>
                {guests.map((g, i) => (
                  <button
                    key={i}
                    onClick={() => setActive(i)}
                    style={{
                      padding        : "6px 14px",
                      borderRadius   : 999,
                      border         : "1px solid var(--line, #ddd)",
                      background     : active === i ? "var(--ink)" : guestComplete(g) ? "color-mix(in oklab, var(--accent) 15%, var(--paper))" : "var(--paper)",
                      color          : active === i ? "var(--paper)" : "var(--ink)",
                      cursor         : "pointer",
                      fontSize       : 13,
                      fontWeight     : active === i ? 500 : 400,
                      position       : "relative",
                    }}
                  >
                    {`Pessoa ${i + 1}`}
                    {guestComplete(g) && active !== i && (
                      <span style={{ marginLeft: 5, color: "var(--accent)" }}>✓</span>
                    )}
                  </button>
                ))}
              </div>

              {/* harmonização */}
              <div style={{ marginBottom: 22 }}>
                <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 8 }}>
                  Harmonização de vinhos
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                  {[
                    { val: false, label: "Sem harmonização", sub: `R$ ${fmt(PRICE_SEM_HARM)}/pessoa` },
                    { val: true,  label: "Com harmonização de vinhos e espumantes", sub: `R$ ${fmt(PRICE_COM_HARM)}/pessoa` },
                  ].map(({ val, label, sub }) => {
                    const sel = guests[active].harmonizado === val;
                    return (
                      <button
                        key={String(val)}
                        onClick={() => updateGuest(active, "harmonizado", val)}
                        style={{
                          textAlign   : "left",
                          background  : sel ? "var(--accent)" : "var(--paper)",
                          color       : sel ? "var(--paper)" : "var(--ink)",
                          border      : `1px solid ${sel ? "var(--accent)" : "var(--line, #ddd)"}`,
                          borderRadius: 8,
                          padding     : "12px 14px",
                          cursor      : "pointer",
                        }}
                      >
                        <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 2 }}>{label}</div>
                        <div style={{ fontSize: 11, opacity: 0.75 }}>{sub}</div>
                      </button>
                    );
                  })}
                </div>
              </div>

              <DishPicker
                label="Entrada"
                options={ENTRADAS}
                value={guests[active].entrada}
                onChange={(v) => updateGuest(active, "entrada", v)}
              />
              <DishPicker
                label="Principal"
                options={PRINCIPAIS}
                value={guests[active].principal}
                onChange={(v) => updateGuest(active, "principal", v)}
              />
              <DishPicker
                label="Sobremesa"
                options={SOBREMESAS}
                value={guests[active].sobremesa}
                onChange={(v) => updateGuest(active, "sobremesa", v)}
              />

              {/* nav entre pessoas */}
              <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
                {active > 0 && (
                  <button
                    onClick={() => setActive(active - 1)}
                    style={{ flex: 1, padding: "12px 0", border: "1px solid var(--line, #ddd)", borderRadius: 8, background: "var(--paper)", cursor: "pointer", fontSize: 13 }}
                  >
                    ← Pessoa {active}
                  </button>
                )}
                {active < count - 1 ? (
                  <button
                    onClick={() => setActive(active + 1)}
                    style={{ flex: 1, padding: "12px 0", border: "1px solid var(--line, #ddd)", borderRadius: 8, background: "var(--paper)", cursor: "pointer", fontSize: 13 }}
                  >
                    Pessoa {active + 2} →
                  </button>
                ) : allComplete ? (
                  <button
                    onClick={() => setStep(3)}
                    style={{ flex: 1, padding: "12px 0", background: "var(--accent)", color: "var(--paper)", border: "none", borderRadius: 8, cursor: "pointer", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16 }}
                  >
                    Ver resumo →
                  </button>
                ) : (
                  <button
                    disabled
                    style={{ flex: 1, padding: "12px 0", background: "var(--bg-2, #ddd)", color: "var(--ink-soft)", border: "none", borderRadius: 8, cursor: "not-allowed", fontSize: 12 }}
                  >
                    Complete todos os pratos
                  </button>
                )}
              </div>
            </div>
          )}

          {/* passo 3 — resumo */}
          {step === 3 && (
            <div>
              <p style={{ color: "var(--ink-soft)", fontSize: 13, marginBottom: 20, lineHeight: 1.6 }}>
                Confira os pratos escolhidos antes de adicionar ao carrinho. Você poderá revisar no checkout.
              </p>

              {guests.map((g, i) => {
                const entrada   = ENTRADAS.find((e)   => e.id === g.entrada)?.title   || "—";
                const principal = PRINCIPAIS.find((p) => p.id === g.principal)?.title || "—";
                const sobremesa = SOBREMESAS.find((s) => s.id === g.sobremesa)?.title || "—";
                const total     = g.harmonizado ? PRICE_COM_HARM : PRICE_SEM_HARM;
                return (
                  <div key={i} style={{
                    background     : "var(--bg-2, #ead8c1)",
                    borderRadius   : 10,
                    padding        : "14px 16px",
                    marginBottom   : 12,
                  }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                      <strong style={{ fontFamily: "var(--font-display)", fontSize: 16 }}>Pessoa {i + 1}</strong>
                      <span style={{ fontSize: 13, color: "var(--ink-soft)" }}>R$ {fmt(total)}</span>
                    </div>
                    <div style={{ fontSize: 12, lineHeight: 1.7, color: "var(--ink-soft)" }}>
                      <div>{g.harmonizado ? "✦ Com harmonização de vinhos e espumantes" : "Sem harmonização"}</div>
                      <div>Entrada: {entrada}</div>
                      <div>Principal: {principal}</div>
                      <div>Sobremesa: {sobremesa}</div>
                    </div>
                  </div>
                );
              })}

              <div style={{
                display: "flex", justifyContent: "space-between",
                fontWeight: 500, fontSize: 16, padding: "12px 0",
                borderTop: "1px solid var(--line, #ddd)", marginBottom: 20,
              }}>
                <span>Total</span>
                <span>R$ {fmt(subtotal)}</span>
              </div>

              {error && (
                <div style={{ color: "#c0392b", fontSize: 13, marginBottom: 12, padding: "10px 14px", background: "#fdf0f0", borderRadius: 6 }}>
                  {error}
                </div>
              )}

              <button
                onClick={addToCart}
                disabled={loading}
                style={{
                  width: "100%", padding: "15px 0",
                  background: loading ? "var(--ink-soft)" : "var(--accent)",
                  color: "var(--paper)", border: "none", borderRadius: 8,
                  cursor: loading ? "not-allowed" : "pointer",
                  fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18,
                  marginBottom: 10,
                }}
              >
                {loading ? "Adicionando…" : "Adicionar ao carrinho →"}
              </button>

              <button
                onClick={() => setStep(2)}
                disabled={loading}
                style={{
                  width: "100%", padding: "11px 0",
                  background: "transparent", color: "var(--ink-soft)",
                  border: "1px solid var(--line, #ddd)", borderRadius: 8,
                  cursor: "pointer", fontSize: 13,
                }}
              >
                ← Editar pratos
              </button>
            </div>
          )}
        </div>
      </aside>
    </>
  );
}

Object.assign(window, { DinnerDrawer, DINNER_MENU: { ENTRADAS, PRINCIPAIS, SOBREMESAS, PRICE_SEM_HARM, PRICE_COM_HARM } });
