/* ============================================================
   ATUKASA SUSHI — Componentes
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- helpers ---------- */
const fmt = (n) => n.toLocaleString("es-DO");

/* ---------- placeholder de imagen (sin fotos reales) ---------- */
function DishImage({ product, kind }) {
  const tile = window.ATUKASA.TILE[product.cat] || ["#1F3B34", "#15302B"];
  const letter = product.name.replace(/^[^A-Za-zÁÉÍÓÚÑ]+/, "").charAt(0).toUpperCase();
  const style = { "--c1": tile[0], "--c2": tile[1] };
  // Buscar imagen real del producto
  const allProducts = window.ATUKASA.PRODUCTS || [];
  const found = allProducts.find(p => p.name === product.name || p.id === product.id);
  const imgSrc = found && found.images && found.images[0] ? found.images[0] : null;
  if (imgSrc) {
    return (
      <div className={"dish dish--" + kind} style={style}>
        <img src={imgSrc} alt={product.name} style={{width:"100%",height:"100%",objectFit:"cover",borderRadius:"inherit"}} />
      </div>
    );
  }
  return (
    <div className={"dish dish--" + kind} style={style}>
      <span className="dish__glyph">{letter}</span>
      <span className="dish__tag">foto</span>
    </div>
  );
}

/* ---------- stepper cantidad ---------- */
function Stepper({ value, onChange, min = 1 }) {
  return (
    <div className="stepper">
      <button className="stepper__btn" onClick={() => onChange(Math.max(min, value - 1))} aria-label="Quitar">−</button>
      <span className="stepper__val">{value}</span>
      <button className="stepper__btn" onClick={() => onChange(value + 1)} aria-label="Agregar">+</button>
    </div>
  );
}

/* ---------- rail de categorías ---------- */
function CategoryRail({ cats, active, onPick, countByCat }) {
  return (
    <nav className="rail" aria-label="Categorías">
      {cats.map((c) => (
        <button
          key={c.id}
          className={"railitem" + (active === c.id ? " is-active" : "")}
          onClick={() => onPick(c.id)}
        >
          <DishImage product={{ cat: c.id, name: c.name }} kind="tile" />
          {c.img && <img src={c.img} alt={c.name} className="railitem__img" />}
          <span className="railitem__name">{c.short || c.name}</span>
          {active === c.id && <span className="railitem__bar" />}
        </button>
      ))}
    </nav>
  );
}

/* ---------- tarjeta de producto ---------- */
function ProductCard({ product, onOpen }) {
  const startPrice = product.variants ? product.variants[0].price : product.price;
  return (
    <article className="card" onClick={() => onOpen(product)}>
      <div className="card__media">
        {product.images
          ? <img src={product.images[0]} alt={product.name} className="card__img" />
          : <DishImage product={product} kind="card" />}
        {product.badge && (
          Array.isArray(product.badge)
            ? <div className="badges">{product.badge.map((b,i) => <span key={i} className="badge badge--multi">{b}</span>)}</div>
            : <span className="badge">{product.badge}</span>
        )}
      </div>
      <div className="card__body">
        <h3 className="card__name">{product.name}</h3>
        <p className="card__desc">{product.desc}</p>
        <div className="card__foot">
          <span className="card__price">
            
            {product.regular && <s className="card__was">RD$ {fmt(product.regular)}</s>}
            RD$ {fmt(startPrice)}
            {product.unitNote && <em className="card__unit"> /{product.unitNote.replace("por ", "")}</em>}
          </span>
          <button className="btn btn--add" onClick={(e) => { e.stopPropagation(); onOpen(product); }}>
            Ordenar
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </article>
  );
}

/* ---------- modal de producto (variantes + modificadores) ---------- */
function ProductModal({ product, onClose, onAdd }) {
  const variants = product.variants || null;
  const customizable = !!variants;
  const hasSides = !!(product.sides && product.sides.length);
  const [vIdx, setVIdx] = useState(0);
  const [side, setSide] = useState(hasSides ? null : undefined);
  const [mods, setMods] = useState([]);
  const [qty, setQty] = useState(1);
  const [imgIdx, setImgIdx] = useState(0);
  const [sideError, setSideError] = useState(false);
  const images = product.images || null;

  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  if (!product) return null;
  const allMods = window.ATUKASA.MODIFIERS;

  const toggleMod = (m) => {
    setMods((cur) =>
      cur.find((x) => x.id === m.id) ? cur.filter((x) => x.id !== m.id) : [...cur, m]
    );
  };

  const base = variants ? variants[vIdx].price : product.price;
  const scaleFactor = variants ? (variants[vIdx].porc === 8 ? 1 : variants[vIdx].porc === 12 ? 1.2 : 1.5) : 1;
  const isWednesday = new Date().getDay() === 3;
  const scaledMod = (m) => (isWednesday && m.id === "empanizado") ? 0 : Math.round(m.price * scaleFactor);
  const modsTotal = mods.reduce((s, m) => s + scaledMod(m), 0);
  const unit = base + modsTotal;
  const total = unit * qty;

  const handleAdd = () => {
    if (hasSides && !side) { setSideError(true); return; }
    onAdd({
      key: product.id + "-" + (variants ? variants[vIdx].porc : "u") + "-" + (side || "") + "-" + mods.map((m) => m.id).sort().join(""),
      id: product.id,
      name: product.name,
      cat: product.cat,
      variant: variants ? variants[vIdx].porc : null,
      side: side || null,
      mods: mods.map((m) => ({ ...m, price: scaledMod(m) })),
      unit,
      qty,
    });
    onClose();
  };

  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__panel" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
        </button>

        <div className="modal__hero">
          {images ? (
            <div className="carousel">
              <img src={images[imgIdx]} alt={product.name} className="carousel__main" />
              {images.length > 1 && (
                <>
                  <button className="carousel__arr carousel__arr--prev" onClick={() => setImgIdx((imgIdx - 1 + images.length) % images.length)} aria-label="Anterior">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                  <button className="carousel__arr carousel__arr--next" onClick={() => setImgIdx((imgIdx + 1) % images.length)} aria-label="Siguiente">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                  <div className="carousel__thumbs">
                    {images.map((src, i) => (
                      <button key={i} className={"carousel__thumb" + (i === imgIdx ? " is-active" : "")} onClick={() => setImgIdx(i)}>
                        <img src={src} alt={"Vista " + (i + 1)} />
                      </button>
                    ))}
                  </div>
                </>
              )}
            </div>
          ) : (
            <DishImage product={product} kind="hero" />
          )}
          {product.badge && (
            Array.isArray(product.badge)
              ? <div className="badges badges--hero">{product.badge.map((b,i) => <span key={i} className="badge badge--hero badge--multi">{b}</span>)}</div>
              : <span className="badge badge--hero">{product.badge}</span>
          )}
        </div>

        <div className="modal__scroll">
          <h2 className="modal__name">{product.name}</h2>
          <p className="modal__desc">{product.desc}</p>

          {hasSides && (
            <section className="optblock">
              <div className={"optblock__head" + (sideError ? " optblock__head--err" : "")}>
                <h4>{product.sidesLabel || "Guarnición"}</h4>
                <span className={"optblock__hint" + (sideError ? " optblock__hint--err" : "")}>{sideError ? "¡Elige una!" : "Obligatorio"}</span>
              </div>
              <div className="segmented">
                {product.sides.map((s) => (
                  <button
                    key={s}
                    className={"seg" + (side === s ? " is-active" : "")}
                    onClick={() => { setSide(s); setSideError(false); }}
                  >
                    <span className="seg__label" style={{fontSize:"15px"}}>{s}</span>
                  </button>
                ))}
              </div>
            </section>
          )}

          {customizable && (
            <section className="optblock">
              <div className="optblock__head">
                <h4>Tamaño</h4>
                <span className="optblock__hint">Obligatorio</span>
              </div>
              <div className="segmented">
                {variants.map((v, i) => (
                  <button
                    key={v.porc}
                    className={"seg" + (vIdx === i ? " is-active" : "")}
                    onClick={() => setVIdx(i)}
                  >
                    <span className="seg__label">{v.porc}</span>
                    <span className="seg__unit">porciones</span>
                    <span className="seg__price">RD$ {fmt(v.price)}</span>
                  </button>
                ))}
              </div>
            </section>
          )}

          {customizable && (
            <section className="optblock">
              <div className="optblock__head">
                <h4>Agrega toppings</h4>
                <span className="optblock__hint">{mods.length} seleccionados</span>
              </div>
              <div className="mods">
                {allMods.map((m) => {
                  const on = !!mods.find((x) => x.id === m.id);
                  return (
                    <button
                      key={m.id}
                      className={"modrow" + (on ? " is-on" : "")}
                      onClick={() => toggleMod(m)}
                    >
                      <span className={"check" + (on ? " is-on" : "")}>
                        {on && <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                      </span>
                      <span className="modrow__name">{m.name}{isWednesday && m.id === "empanizado" && <span style={{marginLeft:"8px",fontSize:"10px",background:"#e63946",color:"#fff",borderRadius:"4px",padding:"1px 6px",fontWeight:700}}>¡GRATIS HOY!</span>}</span>
                      <span className="modrow__price">{isWednesday && m.id === "empanizado" ? <><span style={{textDecoration:"line-through",opacity:0.5,marginRight:"6px"}}>+RD$ 120</span><span style={{color:"#4caf50",fontWeight:700}}>RD$ 0</span></> : <>+RD$ {fmt(scaledMod(m))}</>}</span>
                    </button>
                  );
                })}
              </div>
            </section>
          )}
        </div>

        <div className="modal__foot">
          <Stepper value={qty} onChange={setQty} />
          <button className="btn btn--primary btn--block" onClick={handleAdd}>
            <span>Agregar</span>
            <span className="btn__price">RD$ {fmt(total)}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- línea del carrito ---------- */
function CartLine({ item, onQty, onRemove }) {
  const modNames = item.mods.map((m) => m.name).join(", ");
  return (
    <div className="cline">
      <DishImage product={{ cat: item.cat, name: item.name }} kind="thumb" />
      <div className="cline__info">
        <h4 className="cline__name">{item.name}</h4>
        <p className="cline__meta">
          {item.variant ? item.variant + " porciones" : ""}
          {item.variant && (item.side || modNames) ? " · " : ""}
          {item.side ? item.side : ""}
          {item.side && modNames ? " · " : ""}
          {modNames}
          {!item.variant && !item.side && !modNames ? "Sin extras" : ""}
        </p>
        <div className="cline__row">
          <Stepper value={item.qty} onChange={(q) => onQty(item.key, q)} />
          <span className="cline__price">RD$ {fmt(item.unit * item.qty)}</span>
        </div>
      </div>
      <button className="cline__del" onClick={() => onRemove(item.key)} aria-label="Eliminar">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 7h12M9 7V5h6v2M8 7l1 12h6l1-12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </button>
    </div>
  );
}

/* ===================== CHECKOUT ===================== */
const DELIVERY_FEE = 100;          // RD$ — exento de ITBIS
const CARDNET_ENABLED = true;    // ← cambiar a true cuando Hansel confirme el Acquiring Code

/* estilos del checkout (autocontenidos, no requieren tocar p2.css) */
(function () {
  if (document.getElementById("atukasa-checkout-css")) return;
  var s = document.createElement("style");
  s.id = "atukasa-checkout-css";
  s.textContent = [
    ".ck__field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}",
    ".ck__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}",
    ".ck__input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:inherit;font:inherit;padding:12px 14px;outline:none;width:100%}",
    ".ck__input:focus{border-color:#e02424}",
    ".ck__input--err{border-color:#e02424;background:rgba(224,36,36,.08)}",
    ".ck__err{color:#ff8a8a;font-size:12px}",
    ".ck__pay{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}",
    ".ck__payopt{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px;cursor:pointer;background:rgba(255,255,255,.04);font:inherit;color:inherit;text-align:left;width:100%}",
    ".ck__payopt.is-on{border-color:#37d67a;background:rgba(55,214,122,.10)}",
    ".ck__payopt:disabled{opacity:.45;cursor:not-allowed}",
    ".ck__radio{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);flex-shrink:0;position:relative}",
    ".is-on .ck__radio{border-color:#37d67a}",
    ".is-on .ck__radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#37d67a}",
    ".ck__paysoon{margin-left:auto;font-size:11px;opacity:.7;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:2px 8px}",
    ".ck__cards{display:flex;gap:8px;align-items:center;padding:6px 14px 0 40px;opacity:.55}",
    ".ck__cardbadge{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:4px;height:20px;min-width:32px;padding:0 4px}",
    ".ck__rows{border-top:1px solid rgba(255,255,255,.1);padding-top:12px;margin-bottom:12px}",
    ".ck__row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0;opacity:.9}",
    ".ck__row--total{font-size:17px;font-weight:700;opacity:1;padding-top:8px}",
    ".ck__free{color:#37d67a;font-weight:600}",
    ".ck__back{background:none;border:none;color:inherit;font:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.8;padding:0;margin-bottom:4px}",
    ".ck__back:hover{opacity:1}",
    ".ck__success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 22px}",
    ".ck__success-icon{font-size:46px}",
    ".ck__success h3{margin:0;font-size:22px}",
    ".ck__success p{margin:0;opacity:.85;font-size:14px;line-height:1.5}",
    ".ck__ordernum{font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}",
    ".ck__senderr{background:rgba(224,36,36,.12);border:1px solid rgba(224,36,36,.45);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px}",
    ".acct{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;position:relative;flex-shrink:0;font:inherit;padding:0}",
    ".acct--on{background:#e02424;border-color:#e02424;font-weight:700;font-size:16px}",
    ".acct__pop{position:absolute;top:calc(100% + 10px);right:0;background:#161213;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px;min-width:240px;z-index:90;box-shadow:0 12px 30px rgba(0,0,0,.55);text-align:left;cursor:default}",
    ".acct__pop-name{font-weight:700;font-size:15px;margin-bottom:2px}",
    ".acct__pop-line{font-size:12.5px;opacity:.8;line-height:1.45;word-break:break-word}",
    ".acct__pop-member{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#37d67a;margin-top:8px;font-weight:600}",
    ".acct__pop-del{margin-top:12px;background:none;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:inherit;font:inherit;font-size:12px;padding:7px 10px;cursor:pointer;opacity:.8;width:100%}",
    ".acct__pop-del:hover{opacity:1;border-color:#e02424;color:#ff8a8a}",
    ".ck__club{display:flex;align-items:flex-start;gap:10px;border:1px solid rgba(55,214,122,.4);background:rgba(55,214,122,.07);border-radius:10px;padding:12px;cursor:pointer;margin-bottom:14px;font:inherit;color:inherit;text-align:left;width:100%}",
    ".ck__club.is-on{border-color:#37d67a;background:rgba(55,214,122,.13)}",
    ".ck__clubcheck{width:18px;height:18px;border-radius:5px;border:2px solid rgba(255,255,255,.4);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}",
    ".is-on .ck__clubcheck{background:#37d67a;border-color:#37d67a;color:#0b0b0b}",
    ".ck__clubtxt{font-size:13.5px;line-height:1.45}",
    ".ck__clubtxt b{color:#37d67a}",
    ".ck__clubmember{display:flex;align-items:center;gap:8px;color:#37d67a;font-size:13px;font-weight:600;border:1px solid rgba(55,214,122,.4);background:rgba(55,214,122,.08);border-radius:10px;padding:11px 12px;margin-bottom:14px}",
    ".club__divider{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:18px 0 8px}",
    ".club__divider::before,.club__divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.15)}",
    ".club__phone{display:flex;gap:8px;margin-top:8px}",
    ".club__phone .ck__input{flex:1}",
    ".club__activate{background:#e02424;border:none;border-radius:10px;color:#fff;font:inherit;font-weight:700;padding:0 18px;cursor:pointer;flex-shrink:0}",
    ".club__activate:disabled{opacity:.6;cursor:wait}",
    ".ck__club{display:flex;gap:11px;align-items:flex-start;border:1px dashed rgba(55,214,122,.55);background:rgba(55,214,122,.07);border-radius:10px;padding:12px;cursor:pointer;margin-bottom:14px;font:inherit;color:inherit;text-align:left;width:100%}",
    ".ck__club .check{margin-top:1px}",
    ".ck__club-title{font-weight:700;font-size:13.5px}",
    ".ck__club-sub{font-size:12px;opacity:.8;line-height:1.45}",
    ".ck__clubon{display:flex;align-items:center;gap:8px;border:1px solid rgba(55,214,122,.45);background:rgba(55,214,122,.08);border-radius:10px;padding:11px 12px;font-size:13px;color:#37d67a;font-weight:600;margin-bottom:14px}",
    ".club__phone{display:flex;gap:8px;margin-top:10px}",
    ".club__phone .ck__input{flex:1}",
    ".club__activate{background:#e02424;border:none;border-radius:10px;color:#fff;font:inherit;font-weight:700;padding:0 16px;cursor:pointer}",
    ".club__divider{display:flex;align-items:center;gap:10px;opacity:.55;font-size:12px;margin:18px 0 4px;text-transform:uppercase;letter-spacing:.08em}",
    ".club__divider::before,.club__divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.18)}",
    ".ck__mode{display:flex;gap:8px;margin-bottom:14px}",
    ".ck__modeopt{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 8px;cursor:pointer;background:rgba(255,255,255,.04);font:inherit;color:inherit;font-size:13px;font-weight:600;transition:border-color .15s,background .15s}",
    ".ck__modeopt:hover{border-color:rgba(255,255,255,.3)}",
    ".ck__modeopt.is-on{border-color:#e02424;background:rgba(224,36,36,.12)}",
    ".ck__modeopt-icon{font-size:22px;line-height:1}"
  ].join("");
  document.head.appendChild(s);
})();

function CheckoutPanel({ items, subtotal, member, notes, onBack, onDone, onSuccess }) {
  const saved = (() => {
    try { return JSON.parse(localStorage.getItem("atukasa_customer") || "{}"); }
    catch (e) { return {}; }
  })();
  const [phone, setPhone]     = useState(saved.phone || "");
  const [name, setName]       = useState(saved.name || "");
  const [address, setAddress] = useState(saved.address || "");
  const [email, setEmail]     = useState(saved.email || "");
  const [joinClub, setJoin]   = useState(false);
  const [pay, setPay]         = useState("cod");
  const [pickup, setPickup]   = useState(false);
  const [errs, setErrs]       = useState({});
  const [sending, setSending] = useState(false);
  const [sendErr, setSendErr] = useState(null);

  const isMember = !!member;            // ya pertenece al Club (este dispositivo)
  const clubActive = isMember || joinClub;
  const delivery = pickup ? 0 : (clubActive ? 0 : DELIVERY_FEE);
  const total    = subtotal + delivery;

  const validate = () => {
    const e = {};
    const digits = phone.replace(/\D/g, "");
    if (digits.length < 10) e.phone = "Escribe un teléfono válido (10 dígitos)";
    if (name.trim().length < 2) e.name = "Escribe tu nombre";
    if (!pickup && address.trim().length < 8) e.address = "Escribe la dirección completa de entrega";    if (pay === "card" && !email.trim()) e.email = "El correo es necesario para pagos con tarjeta";
    if ((joinClub || pay === "card") && email.trim() && !/^\S+@\S+\.\S+$/.test(email.trim())) e.email = "Ese correo no parece válido";
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const confirm = async () => {
    if (sending) return;
    if (!validate()) return;
    setSending(true);
    if (typeof fbq === 'function') fbq('track', 'Contact');
    setSendErr(null);
    const customer = { phone: phone.replace(/\D/g, ""), name: name.trim(), address: address.trim(), email: email.trim() };
    localStorage.setItem("atukasa_customer", JSON.stringify(customer));
    window.dispatchEvent(new Event("atukasa:customer"));
    try {
      const res = await fetch("/atukasa-checkout.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          customer,
          payment: pay,
          pickup: pickup,
          club: joinClub,
          notes: (notes || "").trim(),
          items: items.map((it) => ({
            name: it.name,
            qty: it.qty,
            unit: it.unit,
            detail: [
              it.variant ? it.variant + " porciones" : null,
              it.side || null,
              it.mods && it.mods.length ? "+ " + it.mods.map((m) => m.name).join(", ") : null,
            ].filter(Boolean).join(" · "),
          })),
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) throw new Error(data.message || "No se pudo registrar el pedido");

      // el servidor manda la última palabra sobre membresía y total
      const srvMember = !!data.member;
      const srvTotal  = (typeof data.total === "number") ? data.total : total;
      const srvDeliv  = srvMember ? 0 : DELIVERY_FEE;

      if (srvMember) {
        localStorage.setItem("atukasa_club", JSON.stringify({ name: customer.name, phone: customer.phone, joined: Date.now() }));
        window.dispatchEvent(new Event("atukasa:club"));
      }

        // — Cardnet: solo redirigir si el cliente eligió tarjeta y Cardnet está activo
        if (pay === "card" && CARDNET_ENABLED && data.payment_url) {
          window.location.href = data.payment_url;
          return;
        }
      const num = data.number || data.id;
      let msg = "¡Hola Atukasa! 🍣 Acabo de confirmar mi pedido *#" + num + "* en la web:\n\n";
      items.forEach((it) => {
        msg += "• " + it.qty + "x " + it.name;
        if (it.variant) msg += " (" + it.variant + " porciones)";
        if (it.side) msg += " · " + it.side;
        if (it.mods && it.mods.length) msg += " + " + it.mods.map((m) => m.name).join(", ");
        msg += " — RD$ " + fmt(it.unit * it.qty) + "\n";
      });
      if (notes && notes.trim()) msg += "\n📝 Notas: " + notes.trim();
      msg += "\n👤 " + customer.name;
      msg += "\n📍 " + customer.address;
      msg += "\n" + (pickup ? "🏪 Recoger en local (General Cabral #90, San Cristóbal)" : "🛵 Delivery: " + (srvMember ? "Gratis (Club Atukasa)" : "RD$ " + fmt(srvDeliv)));
      msg += "\n💵 Pago: " + (pay === "cod" ? "efectivo al recibir" : "tarjeta");
      msg += "\n\n*Total: RD$ " + fmt(srvTotal) + "* (ITBIS incluido)";

      onSuccess && onSuccess({ number: num, msg: msg, firstName: customer.name.split(" ")[0], phone: customer.phone, club: srvMember, justJoined: srvMember && !isMember, pickup: pickup, pay: pay });
      // payment_url redirect already handled above
    } catch (err) {
      setSendErr(err.message + ". Inténtalo de nuevo o pide por WhatsApp.");
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="drawer__list">
      <button className="ck__back" onClick={onBack}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        Volver al pedido
      </button>

      {/* ── Modalidad ── */}
      <div className="ck__field">
        <span className="ck__label">① ¿Cómo quieres recibir tu pedido?</span>
        <div className="ck__mode">
          <button type="button" className={"ck__modeopt" + (!pickup ? " is-on" : "")} onClick={() => setPickup(false)}>
            <span className="ck__modeopt-icon">🛵</span>
            Delivery
          </button>
          <button type="button" className={"ck__modeopt" + (pickup ? " is-on" : "")} onClick={() => setPickup(true)}>
            <span className="ck__modeopt-icon">🏪</span>
            Recoger en local
          </button>
        </div>
        {pickup && <p style={{fontSize:"12px",opacity:.7,margin:"-6px 0 0",lineHeight:1.4}}>📍 General Cabral #90, San Cristóbal · Mié–Dom 5–10 PM</p>}
      </div>

      <div className="ck__field">
        <label className="ck__label" htmlFor="ck-phone">② Teléfono</label>
        <input id="ck-phone" className={"ck__input" + (errs.phone ? " ck__input--err" : "")}
          type="tel" inputMode="tel" autoComplete="tel" placeholder="809-000-0000"
          value={phone} onChange={(e) => setPhone(e.target.value)} />
        {errs.phone && <span className="ck__err">{errs.phone}</span>}
      </div>

      <div className="ck__field">
        <label className="ck__label" htmlFor="ck-name">③ Nombre</label>
        <input id="ck-name" className={"ck__input" + (errs.name ? " ck__input--err" : "")}
          type="text" autoComplete="name" placeholder="Tu nombre"
          value={name} onChange={(e) => setName(e.target.value)} />
        {errs.name && <span className="ck__err">{errs.name}</span>}
      </div>

      {!pickup && (
        <div className="ck__field">
          <label className="ck__label" htmlFor="ck-address">④ Dirección de entrega</label>
          <textarea id="ck-address" className={"ck__input" + (errs.address ? " ck__input--err" : "")}
            autoComplete="street-address" rows={2}
            placeholder="Calle, número, sector — San Cristóbal"
            value={address} onChange={(e) => setAddress(e.target.value)} />
          {errs.address && <span className="ck__err">{errs.address}</span>}
        </div>
      )}

      {/* ── Club Atukasa ── */}
      {pay === "card" && (<div className="ck__field"><label className="ck__label" htmlFor="ck-cardemail">Correo (necesario para tarjeta)</label><input id="ck-cardemail" className={"ck__input" + (errs.email ? " ck__input--err" : "")} type="email" inputMode="email" autoComplete="email" placeholder="tucorreo@ejemplo.com" value={email} onChange={(e) => setEmail(e.target.value)} />{errs.email && <span className="ck__err">{errs.email}</span>}</div>)}{isMember ? (
        <div className="ck__clubmember">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          Club Atukasa · Tu delivery es gratis
        </div>
      ) : (
        <React.Fragment>
          <button type="button" className={"ck__club" + (joinClub ? " is-on" : "")} onClick={() => setJoin(!joinClub)}>
            <span className="ck__clubcheck">
              {joinClub && <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
            </span>
            <span className="ck__clubtxt">
              <b>Únete al Club Atukasa</b> — recibe ofertas exclusivas por WhatsApp y tu delivery es <b>gratis, siempre</b> 🛵
            </span>
          </button>
          {joinClub && pay !== "card" && (
            <div className="ck__field">
              <label className="ck__label" htmlFor="ck-email">Correo (opcional)</label>
              <input id="ck-email" className={"ck__input" + (errs.email ? " ck__input--err" : "")}
                type="email" inputMode="email" autoComplete="email" placeholder="tucorreo@ejemplo.com"
                value={email} onChange={(e) => setEmail(e.target.value)} />
              {errs.email && <span className="ck__err">{errs.email}</span>}
            </div>
          )}
        </React.Fragment>
      )}

      <div className="ck__field">
        <span className="ck__label">④ Método de pago</span>
        <div className="ck__pay">
          <button type="button" className={"ck__payopt" + (pay === "cod" ? " is-on" : "")} onClick={() => setPay("cod")}>
            <span className="ck__radio" /> Efectivo al recibir</button><button type="button" className={"ck__payopt" + (pay === "transfer" ? " is-on" : "")} onClick={() => setPay("transfer")}><span className="ck__radio" /> Transferencia bancaria
          </button>
          <button type="button" disabled={!CARDNET_ENABLED}
            className={"ck__payopt" + (pay === "card" ? " is-on" : "")}
            onClick={() => CARDNET_ENABLED && setPay("card")}>
            <span className="ck__radio" /> Pagar con tarjeta
            {!CARDNET_ENABLED && <span className="ck__paysoon">Próximamente</span>}
          </button>
          {/* Marcas de tarjeta — reemplazar por el badge oficial cuando Cardnet envíe su código */}
          <div className="ck__cards" aria-hidden="true">
            <span className="ck__cardbadge">
              <svg width="28" height="10" viewBox="0 0 28 10"><text x="14" y="8.5" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="bold" fontStyle="italic" fontSize="9" fill="#1A1F71">VISA</text></svg>
            </span>
            <span className="ck__cardbadge">
              <svg width="26" height="16" viewBox="0 0 26 16">
                <circle cx="10" cy="8" r="6.5" fill="#EB001B"/>
                <circle cx="16" cy="8" r="6.5" fill="#F79E1B" fillOpacity="0.9"/>
              </svg>
            </span>
            <span style={{fontSize:"11px"}}>Pago seguro vía Cardnet</span>
          </div>
        </div>
      </div>

      <div className="ck__rows">
        <div className="ck__row"><span>Subtotal</span><span>RD$ {fmt(subtotal)}</span></div>
        <div className="ck__row">
          <span>Delivery San Cristóbal</span>
          {pickup ? <span className="ck__free">Gratis · Recoger en local</span> : clubActive ? <span className="ck__free">Gratis · Club Atukasa</span> : <span>RD$ {fmt(delivery)}</span>}
        </div>
        <div className="ck__row ck__row--total"><span>Total</span><span>RD$ {fmt(total)}</span></div>
      </div>

      {sendErr && <div className="ck__senderr">⚠️ {sendErr}</div>}

      <button className="btn btn--primary btn--block" onClick={confirm} disabled={sending}>
        {sending ? "Enviando pedido…" : "CONFIRMAR PEDIDO · RD$ " + fmt(total)}
      </button>
      <p className="drawer__tax" style={{marginTop:"10px"}}>Precios con ITBIS incluido · Delivery exento de ITBIS · Solo San Cristóbal</p>
    </div>
  );
}

/* ---------- drawer del carrito ---------- */
function CartDrawer({ open, items, onClose, onQty, onRemove, onClear, user, onOpenLoyalty }) {
  const subtotal = items.reduce((s, it) => s + it.unit * it.qty, 0);
  const count = items.reduce((s, it) => s + it.qty, 0);
  const member = !!user;
  const deliveryFee = (member || items.length === 0) ? 0 : DELIVERY_FEE;
  const total = subtotal + deliveryFee;
  const [notes, setNotes] = useState(() => localStorage.getItem("atukasa_notes") || "");
  const [checkout, setCheckout] = useState(false);
  const [successData, setSuccessData] = useState(null); // {number, msg, firstName, phone, justJoined}

  useEffect(() => { localStorage.setItem("atukasa_notes", notes); }, [notes]);
  useEffect(() => { if (!open) { setCheckout(false); } }, [open]);

  const handleOrderSuccess = (data) => {
    setSuccessData(data);
    setCheckout(false);
  };

  const finishOrder = () => {
    setSuccessData(null);
    onClear();
    localStorage.setItem("atukasa_cart", "[]"); // guardado inmediato: evita que el carrito viejo regrese si el navegador se va a segundo plano (WhatsApp) antes de que React termine de guardar
    localStorage.removeItem("atukasa_notes");
    setNotes("");
    onClose();
  };

  return (
    <React.Fragment>
      <div className={"scrim" + (open ? " is-open" : "")} onClick={onClose} />
      <aside className={"drawer" + (open ? " is-open" : "")} aria-label="Tu pedido">
        <header className="drawer__head">
          <h2>{checkout ? "Confirmar pedido" : "Tu pedido"}</h2>
          <button className="drawer__close" onClick={onClose} aria-label="Cerrar">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
          </button>
        </header>

        {successData ? (
          <div className="ck__success">
            <div className="ck__success-icon">🎉</div>
            <span className="ck__ordernum">Pedido #{successData.number}</span>
            <h3>¡Pedido recibido!</h3>
            <p>Ya está en cocina, <strong>{successData.firstName}</strong>. Te contactaremos al <strong>{successData.phone}</strong> para coordinar{successData.pickup ? " el retiro en General Cabral #90" : " la entrega"}{successData.pay === "cod" ? " · pagas en efectivo al recibir" : ""}.</p>
            {successData.justJoined && (
              <p style={{color:"#37d67a",fontWeight:600}}>🎁 ¡Bienvenido al Club Atukasa! Tu delivery será gratis en todos tus pedidos.</p>
            )}
            <a className="btn btn--wa btn--block" target="_blank"
              onClick={finishOrder}
              href={"https://api.whatsapp.com/send?phone=" + window.ATUKASA.BUSINESS.whatsapp}>
              Abrir WhatsApp
            </a>
            <button className="btn btn--primary btn--block" onClick={finishOrder}>Volver al menú</button>
          </div>
        ) : checkout ? (
          <CheckoutPanel
            items={items}
            subtotal={subtotal}
            member={member}
            notes={notes}
            onBack={() => setCheckout(false)}
            onDone={finishOrder}
            onSuccess={handleOrderSuccess}
          />
        ) : items.length === 0 ? (
          <div className="drawer__empty">
            <div className="drawer__emptyglyph">🍱</div>
            <p>Tu pedido está vacío</p>
            <span>Agrega rolls, combos o entradas para empezar.</span>
          </div>
        ) : (
          <React.Fragment>
            <div className="drawer__list">
              {items.map((it) => (
                <CartLine key={it.key} item={it} onQty={onQty} onRemove={onRemove} />
              ))}
              <button className="drawer__clear" onClick={onClear}>Vaciar pedido</button>
            </div>
            <footer className="drawer__foot">
              {!user && onOpenLoyalty && (
                <button className="drawer__loyalty-invite" onClick={() => { onClose(); setTimeout(onOpenLoyalty, 200); }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M20 12v10H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>Hazte miembro gratis · Recibe delivery gratis</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{marginLeft:"auto",flexShrink:0}}><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
              )}
              {user && (
                <div className="drawer__loyalty">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  Delivery gratis · Beneficio Miembro Atukasa
                </div>
              )}
              <div className="drawer__total">
                <span>Subtotal ({count})</span>
                <strong>RD$ {fmt(subtotal)}</strong>
              </div>
              <div className="drawer__discount-row">
                <span>Delivery San Cristóbal</span>
                {member
                  ? <span className="drawer__discount-val">Gratis · Club Atukasa</span>
                  : <span>RD$ {fmt(deliveryFee)}</span>}
              </div>
              <div className="drawer__notes">
                <label className="drawer__notes-label">📝 Notas del pedido</label>
                <textarea
                  className="drawer__notes-input"
                  placeholder="Instrucciones especiales, alergias, dirección de entrega..."
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  rows={2}
                />
              </div>
              <p className="drawer__tax">Precios con ITBIS incluido · Delivery solo en San Cristóbal</p>
              <button className="btn btn--primary btn--block" onClick={() => setCheckout(true)}>
                Ir a pagar · RD$ {fmt(total)}
              </button>
            </footer>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}

/* ---------- placeholder de foto (páginas editoriales) ---------- */
function Ph({ label, cat, className }) {
  const tile = (window.ATUKASA.TILE[cat] || ["#241012", "#140a0b"]);
  return (
    <div className={"ph " + (className || "")} style={{ "--c1": tile[0], "--c2": tile[1] }}>
      <span className="ph__tag">foto</span>
      {label && <span className="ph__label">{label}</span>}
    </div>
  );
}

/* ---------- menú de sitio (hamburguesa) ---------- */
function SiteMenu({ active }) {
  const [open, setOpen] = useState(false);
  const { BUSINESS } = window.ATUKASA;
  const links = [
    { id: "menu",     label: "Menú / Pedido", href: "Atukasa Sushi.html",             desc: "Ordena sushi ahora" },
    { id: "nosotros", label: "Atukasa",       href: "Atukasa - Nosotros.html",          desc: "Nuestra historia" },
    { id: "blog",     label: "Blog",          href: "Atukasa - Blog.html",              desc: "Historias y novedades" },
    { id: "vacantes", label: "Vacantes",      href: "Atukasa - Vacantes.html",          desc: "Únete al equipo" },
  ];
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <React.Fragment>
      <button className="hamb" onClick={() => setOpen(true)} aria-label="Abrir menú">
        <span /><span /><span />
      </button>

      <div className={"sitemenu" + (open ? " is-open" : "")}>
        <div className="sitemenu__top">
          <a className="brand" href="Atukasa Sushi - Propuesta 2.html">
            <img className="brand__badge" src="/wp-content/uploads/atukasa/Isotipo atukasa sushi 2026.png" alt="Atukasa Sushi" />
            <span className="brand__txt">
              <span className="brand__word">ATUKASA</span>
              <span className="brand__sub">SUSHI</span>
            </span>
          </a>
          <button className="sitemenu__close" onClick={() => setOpen(false)} aria-label="Cerrar">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
          </button>
        </div>

        <nav className="sitemenu__links">
          {links.map((l, i) => (
            <a key={l.id} href={l.href} className={"smlink" + (active === l.id ? " is-active" : "")}>
              <span className="smlink__num">0{i + 1}</span>
              <span className="smlink__label">{l.label}</span>
              <span className="smlink__desc">{l.desc}</span>
              <svg className="smlink__arr" width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          ))}
        </nav>

        <div className="sitemenu__foot">
          <div className="sitemenu__footcol">
            <span className="sitemenu__lbl">Visítanos</span>
            <p>{BUSINESS.address}<br />{BUSINESS.hoursLabel}</p>
          </div>
          <div className="sitemenu__footcol">
            <span className="sitemenu__lbl">Síguenos</span>
            <p>{BUSINESS.ig} · {BUSINESS.web}</p>
          </div>
          <a className="btn btn--wa" href={"https://wa.me/" + BUSINESS.whatsapp} target="_blank">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2zm0 18a8 8 0 01-4.1-1.1l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 1112 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1a6.5 6.5 0 01-3.2-2.8c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.1-.3 0-.5l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.7.7-.9 1.6-.6 2.6.5 1.7 1.6 3.1 3.4 4.2 1.7 1 2.8 1 3.7.8.6-.1 1.4-.6 1.6-1.2.2-.5.2-1 .1-1.1l-.4-.1z"/></svg>
            Pedir por WhatsApp
          </a>
        </div>
      </div>
      <div className={"sitemenu__scrim" + (open ? " is-open" : "")} onClick={() => setOpen(false)} />
    </React.Fragment>
  );
}

/* ===================== CLUB ATUKASA (membresía por teléfono) ===================== */
const DELIVERY_DISCOUNT = 100;

function readClub() {
  try { return JSON.parse(localStorage.getItem("atukasa_club") || "null"); }
  catch (e) { return null; }
}
function saveClub(data) {
  localStorage.setItem("atukasa_club", JSON.stringify(data));
  window.dispatchEvent(new Event("atukasa:club"));
}
function clearClub() {
  localStorage.removeItem("atukasa_club");
  window.dispatchEvent(new Event("atukasa:club"));
}

function useClub() {
  const [user, setUser] = useState(readClub);
  useEffect(() => {
    const upd = () => setUser(readClub());
    window.addEventListener("atukasa:club", upd);
    return () => window.removeEventListener("atukasa:club", upd);
  }, []);
  return { user };
}
/* alias de compatibilidad */
const useLoyalty = () => { const { user } = useClub(); return { user, login: () => {}, logout: clearClub }; };

function LoyaltyChip({ user, onOpen }) {
  if (user) {
    return (
      <div className="lchip lchip--active">
        <span className="lchip__dot" />
        <span className="lchip__txt">Delivery gratis</span>
      </div>
    );
  }
  return (
    <button className="lchip" onClick={onOpen} title="Hazte miembro y recibe delivery gratis">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
        <path d="M20 12v10H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <span className="lchip__txt">Delivery gratis</span>
    </button>
  );
}

function LoyaltyModal({ onClose }) {
  const [phone, setPhone]     = useState("");
  const [checking, setChecking] = useState(false);
  const [error, setError]     = useState(null);
  const [success, setSuccess] = useState(null);

  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  const activate = async () => {
    if (checking) return;
    const digits = phone.replace(/\D/g, "");
    if (digits.length < 10) { setError("Escribe el teléfono con el que hiciste tu pedido (10 dígitos)"); return; }
    setChecking(true);
    setError(null);
    try {
      const res = await fetch("/atukasa-club.php?phone=" + encodeURIComponent(digits));
      const data = await res.json().catch(() => ({}));
      if (data.member) {
        saveClub({ name: data.name || "Miembro", phone: digits, since: Date.now() });
        setSuccess(data.name || "Miembro");
        setTimeout(onClose, 2600);
      } else {
        setError("Ese número aún no está en el Club. Únete marcando la casilla al confirmar tu próximo pedido. 🍣");
      }
    } catch (err) {
      setError("No se pudo verificar ahora. Inténtalo de nuevo.");
    } finally {
      setChecking(false);
    }
  };

  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__panel modal__panel--sm" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
        </button>
        {success ? (
          <div className="loyalty-success">
            <div className="loyalty-success__icon">🎉</div>
            <h3>¡Hola de nuevo, {success}!</h3>
            <p>Tu beneficio del Club está activo en este dispositivo. El delivery de <strong>RD$ {fmt(DELIVERY_DISCOUNT)}</strong> es gratis en tus pedidos.</p>
            <div className="loyalty-success__note">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              Beneficio activo en tu carrito
            </div>
          </div>
        ) : (
          <div className="modal__scroll">
            <div className="loyalty-modal__top">
              <img src="/wp-content/uploads/atukasa/Isotipo atukasa sushi 2026.png" alt="" className="loyalty-modal__logo" />
              <div className="loyalty-modal__badge">Club Atukasa</div>
            </div>
            <h2 className="loyalty-modal__title">Delivery gratis,<br/>siempre.</h2>
            <p className="loyalty-modal__sub">Únete al Club Atukasa y recibe ofertas exclusivas por WhatsApp + delivery gratis en la zona de cobertura de San Cristóbal.</p>
            <div className="loyalty-modal__amount">
              <span className="loyalty-modal__amount-val">−RD$ {fmt(DELIVERY_DISCOUNT)}</span>
              <span className="loyalty-modal__amount-txt">en cada pedido,<br/>aplicado automáticamente</span>
            </div>
            <p className="loyalty-modal__micro">¿Cómo me uno? Marca la casilla <strong>"Únete al Club Atukasa"</strong> al confirmar tu pedido. Sin formularios, sin contraseñas.</p>

            <div className="club__divider">¿Ya eres miembro?</div>
            <p className="loyalty-modal__micro" style={{marginBottom:0}}>Activa tu beneficio en este dispositivo con tu teléfono:</p>
            <div className="club__phone">
              <input className="ck__input" type="tel" inputMode="tel" autoComplete="tel"
                placeholder="809-000-0000" value={phone} onChange={(e) => setPhone(e.target.value)} />
              <button className="club__activate" onClick={activate} disabled={checking}>
                {checking ? "..." : "Activar"}
              </button>
            </div>
            {error && <p className="ck__err" style={{marginTop:"8px"}}>{error}</p>}

            <p className="loyalty-modal__legal">Al unirte aceptas recibir ofertas y novedades de Atukasa Sushi por WhatsApp. Puedes salir del Club cuando quieras respondiendo "BAJA". Beneficio válido en zona de cobertura de San Cristóbal, no acumulable con otros cupones.</p>
          </div>
        )}
      </div>
    </div>
  );
}


/* ===================== INDICADOR DE SESIÓN (header) ===================== */
function AccountChip({ memberUser, onOpenLoyalty }) {
  const read = () => {
    try { return JSON.parse(localStorage.getItem("atukasa_customer") || "null"); }
    catch (e) { return null; }
  };
  const [cust, setCust] = useState(read);
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const upd = () => setCust(read());
    window.addEventListener("atukasa:customer", upd);
    return () => window.removeEventListener("atukasa:customer", upd);
  }, []);

  useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
  }, [open]);

  const isClubMember = !!(memberUser && memberUser.name);

  /* Sin membresía del Club → ícono genérico (aunque haya datos de autollenado) */
  if (!isClubMember) {
    return (
      <button className="acct" onClick={onOpenLoyalty} aria-label="Club Atukasa" title="Club Atukasa">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="8" r="3.6" stroke="currentColor" strokeWidth="1.8"/>
          <path d="M4.5 19.5c1.6-3.2 4.3-4.8 7.5-4.8s5.9 1.6 7.5 4.8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
      </button>
    );
  }

  /* Miembro del Club → inicial en círculo rojo + popover con sus datos */
  const initial = memberUser.name.trim().charAt(0).toUpperCase();
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button className="acct acct--on" onClick={() => setOpen(!open)} aria-label={"Cuenta de " + memberUser.name} title={memberUser.name}>
        {initial}
      </button>
      {open && (
        <div className="acct__pop">
          <div className="acct__pop-name">{memberUser.name}</div>
          {cust && cust.phone && <div className="acct__pop-line">📞 {cust.phone}</div>}
          {cust && cust.address && <div className="acct__pop-line">📍 {cust.address}</div>}
          <div className="acct__pop-member">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Club Atukasa · Delivery gratis
          </div>
          <button className="acct__pop-del" onClick={() => {
            localStorage.removeItem("atukasa_customer");
            clearClub();
            setCust(null); setOpen(false);
          }}>
            Salir del Club en este dispositivo
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  fmt, DishImage, Ph, Stepper, CategoryRail, ProductCard, ProductModal, CartDrawer, CartLine, SiteMenu,
  useLoyalty, useClub, saveClub, clearClub, LoyaltyChip, LoyaltyModal,
  DELIVERY_DISCOUNT, DELIVERY_FEE, CheckoutPanel, AccountChip,
});