/* ASTRA — pantalla Selección de butacas + confirmación */
const ROWS = ["A", "B", "C", "D", "E", "F", "G", "H", "J"];
const COLS = 16;
const VIP_ROWS = ["H", "J"];

function buildOccupied(seedStr) {
  let seed = 0;
  for (let i = 0; i < seedStr.length; i++) seed = (seed * 31 + seedStr.charCodeAt(i)) % 100000;
  const rnd = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
  const occ = new Set();
  ROWS.forEach((r, ri) => {
    for (let c = 1; c <= COLS; c++) if (rnd() < 0.22 + (ri % 3) * 0.05) occ.add(r + c);
  });
  return occ;
}

function Stepper4({ step }) {
  const items = [
    ["Función", true],
    ["Butacas", step === "seats" || step === "payment" || step === "confirm"],
    ["Pago", step === "payment" || step === "confirm"],
    ["Boleto", step === "confirm"]
  ];
  return (
    <div className="flow-steps">
      {items.map(([label, on], i) => {
        const done = i === 0 || 
                     (i === 1 && (step === "payment" || step === "confirm")) ||
                     (i === 2 && step === "confirm");
        return (
          <React.Fragment key={label}>
            {i > 0 && <span className="flow-line" />}
            <span className={"flow-step" + (on ? " on" : "") + (done ? " done" : "")}>
              <span className="flow-num">{done ? <Ico d={PATHS.check} size={13} /> : i + 1}</span>
              {label}
            </span>
          </React.Fragment>
        );
      })}
    </div>
  );
}

function QtyStepper({ label, sub, price, value, onChange }) {
  return (
    <div className="qty-row">
      <div>
        <div className="qty-label">{label}</div>
        <div className="qty-sub muted">{sub} · <span className="mono" style={{ color: "var(--gold)" }}>${price}</span></div>
      </div>
      <div className="stp">
        <button onClick={() => onChange(Math.max(0, value - 1))} disabled={value === 0} aria-label="Quitar">–</button>
        <span className="mono">{value}</span>
        <button onClick={() => onChange(value + 1)} aria-label="Agregar">+</button>
      </div>
    </div>
  );
}

function SeatScreen({ data, sel, candyCart = {}, setCandyCart, onBack, onDone }) {
  const occupied = useMemo(() => buildOccupied(sel.movie.id + sel.date + sel.fmt + sel.time + sel.cinema), [sel]);
  const isPremiumFmt = sel.fmt === SITE.naming.premiumFormat;
  const [seats, setSeats] = useState([]);
  const [seatTypes, setSeatTypes] = useState({}); // tipo por butaca: 'adulto' | 'nino' | 'descuento'
  const [combos, setCombos] = useState(candyCart);
  
  // Paso de compra: "seats" o "payment"
  const [checkoutStep, setCheckoutStep] = useState("seats");
  
  // Asiento hovered para previsualización 3D
  const [hoveredSeat, setHoveredSeat] = useState(null);

  // Sincroniza combos con el mini cart global
  useEffect(() => {
    setCandyCart(combos);
  }, [combos]);
  // Al cambiar de paso (butacas → pago), regresar al inicio de la pantalla
  useEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [checkoutStep]);

  const isVip = (id) => VIP_ROWS.includes(id[0]);
  const TICKET_TYPES = [
    { key: "adulto", label: "Adulto", price: data.prices.adulto },
    { key: "nino", label: "Niño", price: data.prices.nino },
    { key: "descuento", label: "Mayor / Estudiante", price: data.prices.descuento },
  ];
  const priceOf = (id) => data.prices[seatTypes[id] || "adulto"] || 0;
  const totalTickets = seats.length;

  // Formulario de Pago
  const [cardNum, setCardNum] = useState("");
  const [cardName, setCardName] = useState("");
  const [cardExpiry, setCardExpiry] = useState("");
  const [cardCvv, setCardCvv] = useState("");
  const [isFlipped, setIsFlipped] = useState(false);

  // Código promocional y Socio Club ASTRA
  const [promoCode, setPromoCode] = useState("");
  const [promoType, setPromoType] = useState("");
  const [promoError, setPromoError] = useState("");
  const [promoSuccess, setPromoSuccess] = useState("");
  const [isMember, setIsMember] = useState(false);

  function getCardBrandInfo(num) {
    if (!num) return { name: SITE.naming.pay.toUpperCase(), color: "var(--gold)" };
    const first = num[0];
    if (first === "4") return { name: "VISA", color: "#0057b7" };
    if (first === "5") return { name: "MASTERCARD", color: "#ff5f00" };
    if (first === "3") return { name: "AMEX", color: "#007cc3" };
    return { name: SITE.naming.pay.toUpperCase(), color: "var(--gold)" };
  }
  const brandInfo = getCardBrandInfo(cardNum);

  function toggleSeat(id) {
    if (occupied.has(id)) return;
    setSeats((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]);
    setSeatTypes((prev) => {
      const copy = { ...prev };
      if (copy[id]) delete copy[id]; else copy[id] = "adulto";
      return copy;
    });
  }
  function setSeatType(id, type) { setSeatTypes((prev) => ({ ...prev, [id]: type })); }
  function setCombo(id, n) { setCombos((p) => ({ ...p, [id]: Math.max(0, n) })); }

  const vipCount = seats.filter(isVip).length;
  const ticketSubtotal = seats.reduce((s, id) => s + priceOf(id), 0);
  const fmtSurcharge = isPremiumFmt ? totalTickets * data.prices.premiumSurcharge : 0;
  const vipSurcharge = vipCount * 4;
  const comboTotal = Object.entries(combos).reduce((s, [id, n]) => {
    const c = data.candy.find((x) => x.id === id); return s + (c ? c.price * n : 0);
  }, 0);
  const serviceFee = totalTickets ? 1 * totalTickets : 0;
  const memberDiscount = isMember ? Math.round(ticketSubtotal * 0.1) : 0;
  const promoDiscount = promoType === SITE.naming.promoCode ? 20
                      : promoType === "CLUBVIP" ? Math.round(ticketSubtotal * 0.2)
                      : promoType === "GRATIS" ? 50 
                      : 0;
  const total = Math.max(0, ticketSubtotal + fmtSurcharge + vipSurcharge + comboTotal + serviceFee - memberDiscount - promoDiscount);
  const ready = totalTickets > 0;

  function handleApplyPromo() {
    setPromoError("");
    setPromoSuccess("");
    const code = promoCode.trim().toUpperCase();
    if (!code) return;
    if (code === SITE.naming.promoCode) {
      setPromoType(SITE.naming.promoCode);
      setPromoSuccess("¡Código " + SITE.naming.promoCode + " aplicado! -$20 " + SITE.brand.currency);
    } else if (code === "CLUBVIP") {
      setPromoType("CLUBVIP");
      setPromoSuccess("¡Código CLUBVIP aplicado! 20% desc. en boletos");
    } else if (code === "GRATIS") {
      setPromoType("GRATIS");
      setPromoSuccess("¡Código GRATIS aplicado! -$50 " + SITE.brand.currency);
    } else {
      setPromoError("Código promocional no válido.");
      setPromoType("");
    }
  }
  const paymentReady = cardNum.length >= 16 && cardName.trim().length > 3 && cardExpiry.length >= 5 && cardCvv.length >= 3;

  const dlabel = sel.date.slice(8) + "/" + sel.date.slice(5, 7);

  // Calcula la transformación 3D para la pantalla simulada
  function getScreenTransform(seatId) {
    if (!seatId) return "rotateX(-8deg) rotateY(0deg) scale(1)";
    const r = seatId[0];
    const c = parseInt(seatId.slice(1));
    const ri = ROWS.indexOf(r);
    const ci = c - 1;
    
    // Profundidad: Fila A (delante, index 0) a Fila J (atrás, index 8)
    const depthFactor = ri / (ROWS.length - 1); // 0 a 1
    const rotateX = -24 + (depthFactor * 18); // de -24deg adelante a -6deg atrás
    const scale = 1.3 - (depthFactor * 0.4); // de 1.3 adelante a 0.9 atrás
    
    // Inclinación lateral
    const centerCol = 7.5;
    const colOffset = (ci - centerCol) / centerCol; // -1 a +1
    const rotateY = colOffset * 22; // hasta 22deg de inclinación

    return `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
  }

  // Formateador de tarjeta de crédito
  const handleCardNumChange = (e) => {
    const value = e.target.value.replace(/\D/g, "");
    if (value.length <= 16) setCardNum(value);
  };

  const handleExpiryChange = (e) => {
    let value = e.target.value.replace(/\D/g, "");
    if (value.length > 2) {
      value = value.slice(0, 2) + "/" + value.slice(2, 4);
    }
    if (value.length <= 5) setCardExpiry(value);
  };

  const handleCvvChange = (e) => {
    const value = e.target.value.replace(/\D/g, "");
    if (value.length <= 3) setCardCvv(value);
  };

  return (
    <div className="seats-screen fade-up">
      <div className="wrap" style={{ paddingTop: 28, paddingBottom: 80 }}>
        {checkoutStep === "seats" ? (
          <button className="btn btn-ghost btn-sm" onClick={onBack}><Ico d={PATHS.chevL} size={16} /> Cambiar función</button>
        ) : (
          <button className="btn btn-ghost btn-sm" onClick={() => setCheckoutStep("seats")}><Ico d={PATHS.chevL} size={16} /> Volver a butacas</button>
        )}
        <Stepper4 step={checkoutStep} />

        {/* resumen de función */}
        <div className="show-summary">
          <div className="ss-poster" style={{ background: `linear-gradient(160deg, ${sel.movie.tint[0]}, ${sel.movie.tint[1]})` }}>
            <span className={"ss-rating rating " + sel.movie.rating}>{sel.movie.rating}</span>
          </div>
          <div className="ss-info">
            <h1 className="ss-title">{sel.movie.title}</h1>
            <div className="ss-chips">
              <span className="badge"><Ico d={PATHS.pin} size={13} /> {sel.cinema.replace(SITE.brand.name + " ", "")}</span>
              <span className={SITE.fmtClass(sel.fmt)}>{sel.fmt}</span>
              <span className="badge">{sel.movie.langs[0] === "DOB" ? "ESP DOB" : "SUB"}</span>
              <span className="badge"><Ico d={PATHS.clock} size={13} /> {sel.time}</span>
              <span className="badge"><Ico d={PATHS.cal} size={13} /> {dlabel}</span>
            </div>
          </div>
        </div>

        {checkoutStep === "seats" ? (
          <div className="seats-layout">
            {/* mapa de butacas */}
            <div className="seatmap-wrap">
              <div className="screen-arc">
                <svg viewBox="0 0 600 60" preserveAspectRatio="none" className="screen-svg">
                  <path d="M20 52 Q300 4 580 52" fill="none" stroke="var(--gold)" strokeWidth="3" opacity=".8"/>
                  <path d="M20 52 Q300 4 580 52 L580 60 Q300 14 20 60 Z" fill="url(#sg)" opacity=".18"/>
                  <defs><linearGradient id="sg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--gold)"/><stop offset="1" stopColor="transparent"/></linearGradient></defs>
                </svg>
                <span className="screen-label mono">P A N T A L L A</span>
              </div>

              <div className="seatmap">
                {ROWS.map((r) => (
                  <div className="seat-row" key={r}>
                    <span className="row-label mono">{r}</span>
                    <div className="seat-cells">
                      {Array.from({ length: COLS }, (_, i) => {
                        const c = i + 1, id = r + c;
                        const occ = occupied.has(id), isel = seats.includes(id), vip = isVip(id);
                        return (
                          <React.Fragment key={id}>
                            {(c === 5 || c === 13) && <span className="aisle" />}
                            <button className={["seat", occ && "occ", isel && "sel", vip && "vip"].filter(Boolean).join(" ")}
                                    onClick={() => toggleSeat(id)}
                                    onMouseEnter={() => !occ && setHoveredSeat(id)}
                                    onMouseLeave={() => setHoveredSeat(null)}
                                    disabled={occ} title={id + (vip ? " · VIP" : "")}>
                              {isel ? <Ico d={PATHS.check} size={11} sw={3} /> : <span className="seat-n">{c}</span>}
                            </button>
                          </React.Fragment>
                        );
                      })}
                    </div>
                    <span className="row-label mono">{r}</span>
                  </div>
                ))}
              </div>

              <div className="legend">
                <span className="lg"><i className="seat" /> Disponible</span>
                <span className="lg"><i className="seat sel" /> Tuya</span>
                <span className="lg"><i className="seat occ" /> Ocupada</span>
                <span className="lg"><i className="seat vip" /> Premium <em className="mono">+$4</em></span>
              </div>

              {/* Visor 3D de perspectiva de pantalla */}
              <div className="seat-view-preview">
                <div className="seat-view-title">Vista desde tu butaca</div>
                <div className="seat-view-theater">
                  <div className="seat-view-glow" />
                  <div className="seat-view-screen-mock" style={{ transform: getScreenTransform(hoveredSeat || (seats.length > 0 ? seats[seats.length - 1] : null)) }}>
                    {sel.movie.backdrop ? (
                      <img src={sel.movie.backdrop} alt="Mock screen" />
                    ) : (
                      <img src={sel.movie.poster} alt="Mock screen" />
                    )}
                  </div>
                  <div className="seat-view-seats-row-indicator">
                    {hoveredSeat ? `Butaca ${hoveredSeat}` : seats.length > 0 ? `Butaca ${seats[seats.length - 1]}` : "Pasa el mouse por un asiento"}
                  </div>
                </div>
              </div>
            </div>

            {/* panel de compra */}
            <aside className="buy-panel">
              <div className="panel-card">
                <div className="panel-h">Tus boletos {seats.length > 0 && <span className="muted" style={{ fontWeight: 400, fontSize: 13 }}>· {seats.length}</span>}</div>
                {!isMember ? (
                  <div className="member-banner" style={{
                    background: "linear-gradient(135deg, rgba(231,184,92,0.1) 0%, rgba(184,138,46,0.05) 100%)",
                    border: "1px dashed var(--gold)",
                    borderRadius: "8px",
                    padding: "10px",
                    marginBottom: "16px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: "8px"
                  }}>
                    <div style={{ fontSize: "12px", lineHeight: "1.4" }}>
                      <strong style={{ color: "var(--gold)" }}>¿Eres socio {SITE.naming.club}?</strong>
                      <div className="muted" style={{ fontSize: "11px" }}>Obtén 10% de descuento en boletos.</div>
                    </div>
                    <button className="btn btn-gold btn-sm" style={{ padding: "4px 10px", fontSize: "10px" }} onClick={() => setIsMember(true)}>
                      Aplicar
                    </button>
                  </div>
                ) : (
                  <div className="member-banner success" style={{
                    background: "linear-gradient(135deg, rgba(46,184,113,0.1) 0%, rgba(30,120,70,0.05) 100%)",
                    border: "1px solid #2eb871",
                    borderRadius: "8px",
                    padding: "10px",
                    marginBottom: "16px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: "8px"
                  }}>
                    <div style={{ fontSize: "12px", lineHeight: "1.4" }}>
                      <strong style={{ color: "#2eb871" }}>✓ Socio {SITE.naming.club} Activo</strong>
                      <div className="muted" style={{ fontSize: "11px" }}>Descuento del 10% aplicado.</div>
                    </div>
                    <button className="btn btn-ghost btn-sm" style={{ padding: "4px 10px", fontSize: "10px", borderColor: "rgba(255,255,255,0.1)" }} onClick={() => setIsMember(false)}>
                      Quitar
                    </button>
                  </div>
                )}
                {seats.length === 0 ? (
                  <p className="muted" style={{ fontSize: 14, margin: "4px 0 0" }}>Toca las butacas en el mapa para agregarlas; luego elige el tipo de cada una.</p>
                ) : (
                  <div className="ticket-list">
                    {[...seats].sort().map((id) => (
                      <div className="ticket-row" key={id}>
                        <span className={"ticket-seat mono" + (isVip(id) ? " vip" : "")}>{id}{isVip(id) && <em>Premium</em>}</span>
                        <select className="ticket-type" value={seatTypes[id] || "adulto"} onChange={(e) => setSeatType(id, e.target.value)}>
                          {TICKET_TYPES.map((t) => <option key={t.key} value={t.key}>{t.label} · ${t.price}</option>)}
                        </select>
                        <button className="ticket-x" onClick={() => toggleSeat(id)} aria-label={"Quitar butaca " + id}>×</button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="panel-card">
                <div className="panel-h">Dulcería <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>· opcional</span></div>
                {data.candy.slice(0, 3).map((c) => (
                  <div className="combo-row" key={c.id}>
                    <div className="combo-art" style={{ background: `linear-gradient(160deg, ${c.tint[0]}, ${c.tint[1]})` }}>
                      <Ico d={PATHS.pop} size={17} style={{ color: "rgba(0,0,0,.5)" }} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="combo-name">{c.name}</div>
                      <div className="mono" style={{ color: "var(--gold)", fontSize: 13 }}>${c.price}</div>
                    </div>
                    <div className="stp sm">
                      <button onClick={() => setCombo(c.id, (combos[c.id] || 0) - 1)} disabled={!combos[c.id]}>–</button>
                      <span className="mono">{combos[c.id] || 0}</span>
                      <button onClick={() => setCombo(c.id, (combos[c.id] || 0) + 1)}>+</button>
                    </div>
                  </div>
                ))}
              </div>

              <div className="panel-card total-card">
                <div className="tl-row"><span className="muted">Boletos ({totalTickets})</span><span className="mono">${ticketSubtotal}</span></div>
                {fmtSurcharge > 0 && <div className="tl-row"><span className="muted">Cargo {sel.fmt}</span><span className="mono">${fmtSurcharge}</span></div>}
                {vipSurcharge > 0 && <div className="tl-row"><span className="muted">Butaca premium ({vipCount})</span><span className="mono">${vipSurcharge}</span></div>}
                {comboTotal > 0 && <div className="tl-row"><span className="muted">Dulcería</span><span className="mono">${comboTotal}</span></div>}
                {serviceFee > 0 && <div className="tl-row"><span className="muted">Cargo por servicio</span><span className="mono">${serviceFee}</span></div>}
                {memberDiscount > 0 && <div className="tl-row" style={{ color: "#2eb871" }}><span className="muted" style={{ color: "#2eb871" }}>Descuento Socio</span><span className="mono">-${memberDiscount}</span></div>}
                {promoDiscount > 0 && <div className="tl-row" style={{ color: "#2eb871" }}><span className="muted" style={{ color: "#2eb871" }}>Descuento Código</span><span className="mono">-${promoDiscount}</span></div>}
                <hr className="divider" style={{ margin: "12px 0" }} />
                <div className="tl-row total"><span>Total</span><span className="mono">${total}</span></div>
                
                {/* Campo de Código Promocional */}
                <div className="promo-code-box" style={{ margin: "14px 0 6px" }}>
                  <div style={{ display: "flex", gap: "6px" }}>
                    <input
                      type="text"
                      placeholder={"CÓDIGO PROMO (ej. " + SITE.naming.promoCode + ")"}
                      value={promoCode}
                      onChange={(e) => setPromoCode(e.target.value)}
                      className="pay-input mono"
                      style={{ padding: "6px 10px", fontSize: "11.5px", margin: 0, flex: 1, textTransform: "uppercase" }}
                    />
                    <button className="btn btn-solid btn-sm" style={{ padding: "6px 12px", fontSize: "10.5px", height: "auto" }} onClick={handleApplyPromo}>
                      Aplicar
                    </button>
                  </div>
                  {promoError && <div style={{ color: "var(--red)", fontSize: "10.5px", marginTop: "4px", fontWeight: 600 }}>{promoError}</div>}
                  {promoSuccess && <div style={{ color: "#2eb871", fontSize: "10.5px", marginTop: "4px", fontWeight: 600 }}>{promoSuccess}</div>}
                </div>

                <button className="btn btn-gold btn-lg pay-btn" disabled={!ready}
                        onClick={() => setCheckoutStep("payment")}>
                  {ready ? <><Ico d={PATHS.arrow} size={18} /> Proceder al pago</> : "Elige tus butacas"}
                </button>
                <p className="muted center" style={{ fontSize: 12, marginTop: 12 }}>Pago seguro · Cancela hasta 1 h antes</p>
              </div>
            </aside>
          </div>
        ) : (
          /* PASARELA DE PAGO INTERACTIVA CON TARJETA 3D */
          <div className="seats-layout">
            <div className="seatmap-wrap" style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <h2 style={{ fontSize: 24, margin: "0 0 10px" }}>Detalles de Pago</h2>
              
              {/* Tarjeta de crédito interactiva 3D */}
              <div className="pay-card-wrapper">
                <div className={"pay-card" + (isFlipped ? " flipped" : "")}>
                  {/* Frente */}
                  <div className="pay-card-front">
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <span className="pay-card-logo">{SITE.wordHead}<b>{SITE.wordTail}</b> Pay</span>
                      <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                        <span className="pay-card-brand" style={{
                          fontSize: 9,
                          fontWeight: 800,
                          letterSpacing: "0.08em",
                          padding: "3px 8px",
                          borderRadius: "4px",
                          background: "rgba(255,255,255,0.06)",
                          border: `1px solid ${brandInfo.color}`,
                          color: "#fff",
                          textShadow: `0 0 4px ${brandInfo.color}`,
                          boxShadow: `0 0 6px ${brandInfo.color}33`,
                          transition: "all 0.3s ease"
                        }}>
                          {brandInfo.name}
                        </span>
                        <div className="pay-card-chip" />
                      </div>
                    </div>
                    <div className="pay-card-number-display">
                      {cardNum ? cardNum.padEnd(16, "•").replace(/(.{4})/g, "$1 ") : "•••• •••• •••• ••••"}
                    </div>
                    <div className="pay-card-meta">
                      <div className="pay-card-holder">
                        <span className="card-label">Tarjetahabiente</span>
                        <span className="pay-card-holder-name">{cardName || "TU NOMBRE"}</span>
                      </div>
                      <div className="pay-card-expiry">
                        <span className="card-label">Vence</span>
                        <span className="pay-card-expiry-display">{cardExpiry || "MM/AA"}</span>
                      </div>
                    </div>
                  </div>
                  {/* Reverso */}
                  <div className="pay-card-back">
                    <div className="pay-card-magnetic-strip" />
                    <span className="card-label" style={{ paddingLeft: 20, display: "block" }}>CVV / Código de Seguridad</span>
                    <div className="pay-card-signature-area">
                      <span className="pay-card-cvv-strip">{cardCvv || "•••"}</span>
                    </div>
                    <div style={{ fontSize: 9, padding: "0 20px", color: "var(--muted)", marginTop: "auto", marginBottom: 12 }}>
                      Esta tarjeta virtual se procesa mediante encriptación SSL de 256 bits segura.
                    </div>
                  </div>
                </div>
              </div>

              {/* Formulario */}
              <div className="pay-form-group">
                <label>Número de Tarjeta</label>
                <input
                  type="text"
                  placeholder="4000 1234 5678 9010"
                  className="pay-input mono"
                  value={cardNum ? cardNum.replace(/(.{4})/g, "$1 ").trim() : ""}
                  onChange={handleCardNumChange}
                />
              </div>

              <div className="pay-form-group">
                <label>Nombre en la Tarjeta</label>
                <input
                  type="text"
                  placeholder="JUAN PEREZ"
                  className="pay-input"
                  value={cardName}
                  onChange={(e) => setCardName(e.target.value)}
                />
              </div>

              <div className="pay-form-row">
                <div className="pay-form-group">
                  <label>Fecha de Expiración</label>
                  <input
                    type="text"
                    placeholder="MM/AA"
                    className="pay-input mono"
                    value={cardExpiry}
                    onChange={handleExpiryChange}
                  />
                </div>
                <div className="pay-form-group">
                  <label>CVV (Seguridad)</label>
                  <input
                    type="text"
                    placeholder="123"
                    className="pay-input mono"
                    value={cardCvv}
                    onChange={handleCvvChange}
                    onFocus={() => setIsFlipped(true)}
                    onBlur={() => setIsFlipped(false)}
                  />
                </div>
              </div>
            </div>

            {/* resumen de facturación */}
            <aside className="buy-panel">
              <div className="panel-card total-card">
                <div className="panel-h" style={{ borderBottom: "1px solid var(--line)", paddingBottom: 10 }}>Resumen de Compra</div>
                <div className="tl-row" style={{ marginTop: 12 }}><span className="muted">Boletos ({totalTickets})</span><span className="mono">${ticketSubtotal}</span></div>
                {fmtSurcharge > 0 && <div className="tl-row"><span className="muted">Cargo {sel.fmt}</span><span className="mono">${fmtSurcharge}</span></div>}
                {vipSurcharge > 0 && <div className="tl-row"><span className="muted">Butaca premium ({vipCount})</span><span className="mono">${vipSurcharge}</span></div>}
                {comboTotal > 0 && <div className="tl-row"><span className="muted">Dulcería</span><span className="mono">${comboTotal}</span></div>}
                {serviceFee > 0 && <div className="tl-row"><span className="muted">Cargo por servicio</span><span className="mono">${serviceFee}</span></div>}
                {memberDiscount > 0 && <div className="tl-row" style={{ color: "#2eb871" }}><span className="muted" style={{ color: "#2eb871" }}>Descuento Socio</span><span className="mono">-${memberDiscount}</span></div>}
                {promoDiscount > 0 && <div className="tl-row" style={{ color: "#2eb871" }}><span className="muted" style={{ color: "#2eb871" }}>Descuento Código</span><span className="mono">-${promoDiscount}</span></div>}
                <hr className="divider" style={{ margin: "12px 0" }} />
                <div className="tl-row total"><span>Total</span><span className="mono">${total}</span></div>
                
                <button className="btn btn-gold btn-lg pay-btn" disabled={!paymentReady}
                        onClick={() => {
                          const bookingCode = SITE.naming.bookingPrefix + "-" + (sel.movie.id.slice(0, 3).toUpperCase()) + "-" + Math.floor(1000 + Math.random() * 8999);
                          onDone({ sel, seats: [...seats].sort(), total, dlabel, code: bookingCode });
                        }}>
                  {paymentReady ? <><Ico d={PATHS.check} size={18} /> Confirmar Pago ${total}</> : "Rellena los datos de pago"}
                </button>
                <p className="muted center" style={{ fontSize: 12, marginTop: 12 }}>Transacción protegida por {SITE.naming.shield}</p>
              </div>
            </aside>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- Confirmación / boleto ---------- */
function Confirm({ order, onHome }) {
  const { sel, seats, total, dlabel, code } = order;
  return (
    <div className="confirm-screen fade-up">
      <div className="wrap" style={{ maxWidth: 640, paddingTop: 60, paddingBottom: 90 }}>
        <Stepper4 step="confirm" />
        <div className="confirm-head center">
          <div className="confirm-check"><Ico d={PATHS.check} size={30} sw={2.4} /></div>
          <h1 style={{ fontSize: 38, marginTop: 18 }}>¡Compra confirmada!</h1>
          <p className="muted">Enviamos tus boletos a tu correo. Muéstralos en taquilla o en el acceso.</p>
        </div>

        {/* Impresora digital overflow hidden */}
        <div className="confirm-ticket-container">
          <div className="ticket">
            <div className="ticket-top" style={{ background: `linear-gradient(160deg, ${sel.movie.tint[0]}, ${sel.movie.tint[1]})` }}>
              <div className="ticket-top-inner">
                <span className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Boleto electrónico</span>
                <h2 style={{ color: "#fff", fontSize: 30, marginTop: 6 }}>{sel.movie.title}</h2>
                <div className="row gap8" style={{ marginTop: 10 }}>
                  <span className={"badge fmt-" + sel.fmt}>{sel.fmt}</span>
                  <span className="badge" style={{ color: "#fff", borderColor: "rgba(255,255,255,.3)" }}>{sel.movie.rating}</span>
                </div>
              </div>
            </div>
            <div className="ticket-perf">
              <div className="tp"><span className="cr-label">CINE</span><span>{sel.cinema}</span></div>
              <div className="tp"><span className="cr-label">FECHA</span><span>{dlabel} · {sel.time}</span></div>
              <div className="tp"><span className="cr-label">SALA</span><span>Sala única</span></div>
              <div className="tp"><span className="cr-label">BUTACAS</span><span>{seats.join(", ")}</span></div>
            </div>
            <div className="ticket-perforation"><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /></div>
            <div className="ticket-bottom">
              <div>
                <div className="cr-label">TOTAL PAGADO</div>
                <div style={{ fontSize: 26, fontWeight: 700, color: "var(--gold)" }} className="mono">${total}</div>
                <div className="mono muted" style={{ fontSize: 12, marginTop: 4 }}>{code}</div>
              </div>
              <div className="qr-container">
                <div className="qr" style={{ width: 84, height: 84, background: "#fff", padding: "6px", display: "block" }}>
                  <img
                    src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${code}&color=0a0a0b&bgcolor=ffffff&margin=0`}
                    alt="Código QR"
                    style={{ width: "100%", height: "100%", objectFit: "contain" }}
                  />
                </div>
                {/* Láser de escaneo */}
                <div className="scanner-laser" />
              </div>
            </div>
          </div>
        </div>

        <div className="row gap12 center" style={{ justifyContent: "center", marginTop: 30 }}>
          <button className="btn btn-gold btn-lg" onClick={onHome}>Volver al inicio</button>
          <button className="btn btn-ghost btn-lg">Descargar boletos</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SeatScreen, Confirm });