// ===== Cart + Checkout =====
const Cart = ({ cart, setCart, navigate }) => {
  const [withTalacha, setWithTalacha] = useState(true);

  const subtotal = cart.reduce((sum, item) => sum + item.price * (item.qty || 1), 0);
  const totalQty = cart.reduce((sum, item) => sum + (item.qty || 1), 0);
  const talacha = withTalacha ? 480 * totalQty : 0;
  const ship = subtotal > 3000 ? 0 : 250;
  const total = subtotal + talacha + ship;

  const updateQty = (id, delta) => {
    setCart((c) => c.map((item) => item.id === id ? { ...item, qty: Math.max(1, (item.qty || 1) + delta) } : item));
  };

  const removeItem = (id) => setCart((c) => c.filter((i) => i.id !== id));

  if (cart.length === 0) {
    return (
      <div className="page-fade page page-narrow" style={{ textAlign: 'center', padding: 80 }}>
        <Icon name="cart" size={72} stroke={1.2} />
        <h1 className="display" style={{ fontSize: 56, margin: '24px 0 12px' }}>CARRITO VACÍO</h1>
        <p style={{ color: 'var(--text-mute)', marginBottom: 32 }}>Aún no has agregado llantas. Empecemos por encontrar tu match.</p>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
          <button className="btn btn-primary btn-lg" onClick={() => navigate('catalog')}>VER CATÁLOGO</button>
          <button className="btn btn-ghost btn-lg" onClick={() => navigate('quiz')}>NO SÉ QUÉ NECESITO</button>
        </div>
      </div>);

  }

  return (
    <div className="page-fade page" data-comment-anchor="a85631b98f-div-32-5">
      <div style={{ marginBottom: 24 }} className="cart-page-head">
        <div>
          <div className="eyebrow">— TU CARRITO</div>
          <h1 className="display cart-page-title">{totalQty} {totalQty === 1 ? 'LLANTA' : 'LLANTAS'} · {fmt(total)}</h1>
        </div>
        <button className="btn btn-ghost" onClick={() => navigate('catalog')}>
          <Icon name="arrowL" size={14} /> SEGUIR COMPRANDO
        </button>
      </div>

      <div className="cart-layout">
        <div>
          {cart.map((item) =>
          <div key={item.id} className="cart-line">
              <div className="thumb">
                <TirePhoto tire={item} hoverable={false} />
              </div>
              <div className="info">
                <div className="brand">{item.brand} · {USE_LABELS[item.use]}</div>
                <div className="name">{item.name}</div>
                <div className="size">Medida: {item.selectedSize || item.sizes[0]} · DOT 2026</div>
                <div style={{ marginTop: 8 }}>
                  <div className="qty" style={{ display: 'inline-flex' }}>
                    <button onClick={() => updateQty(item.id, -1)} aria-label="Disminuir"><Icon name="minus" size={12} /></button>
                    <input type="text" inputMode="numeric" value={item.qty || 1} readOnly />
                    <button onClick={() => updateQty(item.id, 1)} aria-label="Aumentar"><Icon name="plus" size={12} /></button>
                  </div>
                </div>
              </div>
              <div className="actions">
                <div className="price">{fmt(item.price * (item.qty || 1))}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)' }}>{fmt(item.price)} c/u</div>
                <button className="rem" onClick={() => removeItem(item.id)}>QUITAR</button>
              </div>
            </div>
          )}

          {/* Recommended add-on */}
          <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--accent)', borderRadius: 16, padding: 20, marginTop: 24, display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 16, alignItems: 'center' }}>
            <div style={{ width: 60, height: 60, borderRadius: 12, background: 'var(--accent)', display: 'grid', placeItems: 'center', color: '#000' }}>
              <Icon name="wrench" size={28} />
            </div>
            <div>
              <div className="display" style={{ fontSize: 22, lineHeight: 1 }}>★ AGREGA INSTALACIÓN COMPLETA</div>
              <div style={{ fontSize: 13, color: 'var(--text-mute)', marginTop: 4 }}>Monta + balanceo + N₂ + válvula. 45 min en taller RUTA. Garantía 12 meses.</div>
            </div>
            <button className={'btn ' + (withTalacha ? 'btn-primary' : 'btn-ghost')} onClick={() => setWithTalacha((t) => !t)}>
              {withTalacha ? <><Icon name="check" size={14} /> AGREGADO · {fmt(480 * totalQty)}</> : <>AGREGAR · {fmt(480 * totalQty)}</>}
            </button>
          </div>
        </div>

        {/* Summary */}
        <div className="cart-summary">
          <h3>RESUMEN</h3>
          <div className="summary-row"><span>Subtotal · {totalQty} llantas</span><span>{fmt(subtotal)}</span></div>
          <div className="summary-row">
            <span>Envío {ship === 0 && <span style={{ color: 'var(--green)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>· GRATIS</span>}</span>
            <span>{ship === 0 ? '—' : fmt(ship)}</span>
          </div>
          {withTalacha &&
          <div className="summary-row" style={{ color: 'var(--accent)' }}><span>Instalación · {totalQty} ruedas</span><span>{fmt(talacha)}</span></div>
          }
          <div className="summary-row total"><span>TOTAL</span><span>{fmt(total)}</span></div>

          <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: 16 }} onClick={() => navigate('checkout')}>
            CHECKOUT <Icon name="arrow" size={14} />
          </button>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-mute)' }}>
              <Icon name="shield" size={14} /> Garantía RUTA 5 años / 60K km
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-mute)' }}>
              <Icon name="truck" size={14} /> Envío en 24-48 hr · CDMX
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-mute)' }}>
              <Icon name="clock" size={14} /> Instalación en 45 min
            </div>
          </div>
        </div>
      </div>
    </div>);

};

// === Checkout ===
const Checkout = ({ cart, setCart, navigate }) => {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    name: '', email: '', phone: '',
    shop: 's1', day: 2, time: '11:00',
    card: '', expiry: '', cvv: ''
  });

  const subtotal = cart.reduce((sum, item) => sum + item.price * (item.qty || 1), 0);
  const totalQty = cart.reduce((sum, item) => sum + (item.qty || 1), 0);
  const talacha = 480 * totalQty;
  const total = subtotal + talacha + (subtotal > 3000 ? 0 : 250);

  // Mock dates
  const today = new Date();
  const days = Array.from({ length: 14 }).map((_, i) => {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    return {
      i,
      dow: ['DOM', 'LUN', 'MAR', 'MIE', 'JUE', 'VIE', 'SAB'][d.getDay()],
      num: d.getDate(),
      month: ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN', 'JUL', 'AGO', 'SEP', 'OCT', 'NOV', 'DIC'][d.getMonth()],
      full: i === 0 || i === 7
    };
  });

  const timeSlots = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'];
  const fullSlots = ['09:00', '14:00'];

  const placeOrder = () => {
    setStep(4);
    setTimeout(() => {
      setCart([]);
    }, 100);
  };

  if (step === 4) {
    return (
      <div className="page-fade page page-narrow" style={{ textAlign: 'center', padding: '60px 28px' }}>
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--accent)', color: '#000', display: 'grid', placeItems: 'center', margin: '0 auto 24px' }}>
          <Icon name="check" size={40} stroke={2.4} />
        </div>
        <div className="eyebrow" style={{ color: 'var(--accent)' }}>— ORDEN CONFIRMADA</div>
        <h1 className="display" style={{ fontSize: 72, margin: '12px 0', lineHeight: 0.9 }}>
          ¡VAMOS!<br />TU TALACHA<br />ESTÁ AGENDADA.
        </h1>
        <p style={{ color: 'var(--text-mute)', marginBottom: 32, fontSize: 16 }}>
          Recibirás un correo con tu confirmación. Tu mecánico asignado te avisará 30 min antes de tu cita.
        </p>

        <div className="card" style={{ padding: 24, textAlign: 'left', marginBottom: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>— DETALLES DE TU SERVICIO</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>ORDEN</div>
              <div className="display" style={{ fontSize: 22, marginTop: 4 }}>RUTA-{Math.floor(Math.random() * 99999)}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>CITA</div>
              <div className="display" style={{ fontSize: 22, marginTop: 4 }}>{days[data.day].dow} {days[data.day].num} {days[data.day].month} · {data.time}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>TALLER</div>
              <div className="display" style={{ fontSize: 18, marginTop: 4 }}>{SHOPS.find((s) => s.id === data.shop)?.name}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)' }}>{SHOPS.find((s) => s.id === data.shop)?.addr}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>TOTAL</div>
              <div className="display" style={{ fontSize: 22, marginTop: 4, color: 'var(--accent)' }}>{fmt(total)}</div>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
          <button className="btn btn-primary btn-lg" onClick={() => navigate('account')}>
            VER MIS ÓRDENES <Icon name="arrow" size={14} />
          </button>
          <button className="btn btn-ghost btn-lg" onClick={() => navigate('home')}>VOLVER AL INICIO</button>
        </div>
      </div>);

  }

  return (
    <div className="page-fade page" data-comment-anchor="1924a1c10d-div-205-5">
      <div style={{ marginBottom: 24 }}>
        <button onClick={() => navigate('cart')} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.14em', display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="arrowL" size={14} /> VOLVER AL CARRITO
        </button>
        <h1 className="display" style={{ fontSize: 56, margin: '12px 0 0' }}>CHECKOUT</h1>
      </div>

      <div className="checkout-layout">
        <div>
          {/* Step 1: Contact */}
          <div className="checkout-step">
            <div className="checkout-step-head">
              <div className="num-title">
                <div className="n">1</div>
                <h3>DATOS DE CONTACTO</h3>
              </div>
              {step > 1 && <button onClick={() => setStep(1)} className="chip chip-outline" style={{ cursor: 'pointer' }}>EDITAR</button>}
            </div>
            {step === 1 ?
            <>
                <div className="checkout-form">
                  <Field
                  label="Nombre completo" icon="user"
                  autoComplete="name"
                  placeholder="Juan Pérez"
                  value={data.name}
                  onChange={(v) => setData({ ...data, name: v })}
                  required full />
                
                  <FieldEmail value={data.email} onChange={(v) => setData({ ...data, email: v })} required />
                  <FieldPhone value={data.phone} onChange={(v) => setData({ ...data, phone: v })} required />
                </div>
                <button className="btn btn-primary btn-lg" style={{ marginTop: 16 }} onClick={() => setStep(2)}>
                  CONTINUAR <Icon name="arrow" size={14} />
                </button>
              </> :

            <div style={{ color: 'var(--text-mute)', fontSize: 14 }}>
                {data.name || 'Juan Pérez'} · {data.email || 'juan@correo.com'} · {data.phone || '55 1234 5678'}
              </div>
            }
          </div>

          {/* Step 2: Schedule talacha */}
          <div className="checkout-step" data-comment-anchor="c1cbabca41-div-250-11">
            <div className="checkout-step-head">
              <div className="num-title">
                <div className="n">2</div>
                <h3>AGENDA TU TALACHA</h3>
              </div>
              {step > 2 && <button onClick={() => setStep(2)} className="chip chip-outline" style={{ cursor: 'pointer' }}>EDITAR</button>}
            </div>
            {step >= 2 ?
            <>
                <div className="cal-shell">
                  {/* Shop selector */}
                  <div>
                    <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--text-mute)', margin: '0 0 10px' }}>TALLER</h4>
                    {SHOPS.map((s) =>
                  <div key={s.id} className={'shop-card ' + (data.shop === s.id ? 'on' : '')} onClick={() => setData({ ...data, shop: s.id })}>
                        <div className="pin"><Icon name="pin" size={16} /></div>
                        <div className="shop-info">
                          <div className="name">{s.name}</div>
                          <div className="addr">{s.addr}</div>
                        </div>
                        <div className="dist">{s.dist}</div>
                      </div>
                  )}
                  </div>

                  {/* Day + Time */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div>
                      <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--text-mute)', margin: '0 0 10px' }}>DÍA</h4>
                      <div className="day-strip">
                        {days.map((d) =>
                      <div key={d.i} className={'day-tile ' + (data.day === d.i ? 'on' : '') + (d.full ? ' full' : '')} onClick={() => !d.full && setData({ ...data, day: d.i })}>
                            <div className="dow">{d.dow}</div>
                            <div className="num">{d.num}</div>
                            <div className="month">{d.month}</div>
                          </div>
                      )}
                      </div>
                    </div>
                    <div>
                      <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--text-mute)', margin: '0 0 10px' }}>HORA · {days[data.day].dow} {days[data.day].num} {days[data.day].month}</h4>
                      <div className="time-grid">
                        {timeSlots.map((t) => {
                        const full = fullSlots.includes(t);
                        return (
                          <div key={t} className={'time-slot ' + (data.time === t ? 'on' : '') + (full ? ' full' : '')} onClick={() => !full && setData({ ...data, time: t })}>
                              {t}
                            </div>);

                      })}
                      </div>
                    </div>
                  </div>
                </div>
                {step === 2 &&
              <button className="btn btn-primary btn-lg" style={{ marginTop: 16 }} onClick={() => setStep(3)}>
                    CONTINUAR · {days[data.day].dow} {days[data.day].num} · {data.time} <Icon name="arrow" size={14} />
                  </button>
              }
              </> :

            <div style={{ color: 'var(--text-mute)', fontSize: 14 }}>Define datos primero</div>
            }
          </div>

          {/* Step 3: Payment */}
          <div className="checkout-step" data-comment-anchor="1288932865-div-317-11">
            <div className="checkout-step-head">
              <div className="num-title">
                <div className="n">3</div>
                <h3>PAGO</h3>
              </div>
            </div>
            {step === 3 ?
            <>
                <div className="pay-tabs">
                  <button className={'pay-tab on'}><Icon name="card" size={16} /> TARJETA</button>
                  <button className="pay-tab"><span className="pay-glyph">🅾️</span> OXXO PAY</button>
                  <button className="pay-tab"><span className="pay-glyph">💸</span> PAYPAL</button>
                </div>
                <div className="checkout-form">
                  <FieldCard value={data.card} onChange={(v) => setData({ ...data, card: v })} />
                  <FieldExpiry value={data.expiry} onChange={(v) => setData({ ...data, expiry: v })} />
                  <FieldCvv value={data.cvv} onChange={(v) => setData({ ...data, cvv: v })} />
                  <Field
                  label="Nombre en la tarjeta" icon="user" full
                  autoComplete="cc-name" placeholder="JUAN PEREZ"
                  value={data.cardName || ''}
                  onChange={(v) => setData({ ...data, cardName: v.toUpperCase() })} />
                
                  <FieldNumeric label="Código postal" icon="pin" maxLength={5} placeholder="03100" value={data.zip || ''} onChange={(v) => setData({ ...data, zip: v })} />
                </div>
                <div className="pay-note">
                  <Icon name="shield" size={14} /> Pago procesado con cifrado SSL 256-bit. No guardamos tu tarjeta.
                </div>
                <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: 16 }} onClick={placeOrder}>
                  <Icon name="lock" size={16} /> CONFIRMAR ORDEN · {fmt(total)}
                </button>
              </> :

            <div style={{ color: 'var(--text-mute)', fontSize: 14 }}>Pendiente</div>
            }
          </div>
        </div>

        {/* Summary */}
        <div className="cart-summary" data-comment-anchor="6442852f98-div-357-9">
          <h3>ORDEN · {totalQty} ITEMS</h3>
          <div style={{ maxHeight: 220, overflowY: 'auto', marginBottom: 16 }}>
            {cart.map((item) =>
            <div key={item.id} style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--line)' }}>
                <div style={{ width: 44, height: 44, background: 'var(--bg-elev-2)', borderRadius: 6, flexShrink: 0, display: 'grid', placeItems: 'center' }}>
                  <TireSVG size={38} brand="" spec="" accent={item.accent} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, textTransform: 'uppercase', lineHeight: 1 }}>{item.brand} {item.name}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', marginTop: 4 }}>x{item.qty || 1} · {item.selectedSize || item.sizes[0]}</div>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{fmt(item.price * (item.qty || 1))}</div>
              </div>
            )}
          </div>
          <div className="summary-row"><span>Subtotal</span><span>{fmt(subtotal)}</span></div>
          <div className="summary-row"><span>Envío</span><span>{subtotal > 3000 ? '—' : fmt(250)}</span></div>
          <div className="summary-row" style={{ color: 'var(--accent)' }}><span>Instalación</span><span>{fmt(talacha)}</span></div>
          <div className="summary-row total"><span>TOTAL</span><span>{fmt(total)}</span></div>
        </div>
      </div>
    </div>);

};

Object.assign(window, { Cart, Checkout });