/* SMILE ROOM — Web UI kit · checkout estilo Shopify + área de clientes
 * Flujo: pago (Stripe MOCKEADO, sin cargos reales) → confirmación → seguimiento.
 * Branding Smile Room presente en cada paso. Consume tokens + componentes del kit.
 */
const { KBtn, Eyebrow, Rule, Wordmark, SectionHeading, useViewport, MXN } = window;

/* ---- estilos del checkout (fade-in sin depender del scroll + spinner) ---- */
const ensureCheckoutStyle = () => {
  if (typeof document === 'undefined' || document.getElementById('sr-checkout-style')) return;
  const el = document.createElement('style');
  el.id = 'sr-checkout-style';
  el.textContent = `
  @keyframes sr-fadein{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
  .sr-fadein{animation:sr-fadein .6s var(--ease-out) both}
  @keyframes sr-spin{to{transform:rotate(360deg)}}
  .sr-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(13,13,15,.25);border-top-color:var(--carbon);animation:sr-spin .8s linear infinite;display:inline-block}
  @keyframes sr-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
  .sr-pop{animation:sr-pop .55s var(--ease-out) both}
  @media (prefers-reduced-motion: reduce){.sr-fadein,.sr-pop{animation:none!important}}`;
  document.head.appendChild(el);
};

/* ------------------------------- helpers de formato ------------------------------- */
const fmtCard = v => v.replace(/\D/g, '').slice(0, 16).replace(/(.{4})/g, '$1 ').trim();
const fmtExp = v => { const d = v.replace(/\D/g, '').slice(0, 4); return d.length > 2 ? d.slice(0, 2) + '/' + d.slice(2) : d; };
const fmtCvc = v => v.replace(/\D/g, '').slice(0, 4);

/* ------------------------------- campo de formulario ------------------------------- */
const CField = ({ label, icon, textarea, hint, ...rest }) => {
  const input = {
    width: '100%', boxSizing: 'border-box', height: textarea ? 'auto' : 'var(--control-h-md)',
    minHeight: textarea ? 80 : undefined, fontFamily: 'var(--font-body)', fontSize: 15,
    color: 'var(--text-strong)', background: 'var(--surface-card)', border: '1px solid var(--line-soft)',
    borderRadius: 'var(--radius-sm)', padding: textarea ? '12px 14px' : (icon ? '0 14px 0 42px' : '0 14px'),
    resize: 'vertical', lineHeight: textarea ? 1.6 : undefined, outline: 'none',
  };
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
      {label && <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>}
      <span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
        {icon && !textarea && <i className={icon} style={{ position: 'absolute', left: 14, fontSize: 20, color: 'var(--text-faint)' }} />}
        <Tag style={input}
          onFocus={e => { e.target.style.borderColor = 'var(--champagne-400)'; e.target.style.boxShadow = '0 0 0 3px var(--focus-ring)'; }}
          onBlur={e => { e.target.style.borderColor = 'var(--line-soft)'; e.target.style.boxShadow = 'none'; }} {...rest} />
      </span>
      {hint && <span style={{ fontSize: 11.5, color: 'var(--text-faint)' }}>{hint}</span>}
    </label>
  );
};

const GroupTitle = ({ n, children }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
    <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--carbon)', color: 'var(--linen-50)', fontFamily: 'var(--font-display)', fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{n}</span>
    <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>{children}</span>
  </div>
);

/* ------------------------------- barra de marca (header del flujo) ------------------------------- */
const BrandBar = ({ onClose, secure }) => (
  <header style={{ position: 'sticky', top: 0, zIndex: 5, background: 'rgba(251,249,245,.92)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--line-hairline)' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto', height: 66, padding: '0 22px', display: 'flex', alignItems: 'center', gap: 16 }}>
      <span onClick={onClose} style={{ cursor: 'pointer' }}><Wordmark size={18} tagline={false} /></span>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-muted)' }}>
        <i className={secure ? 'ph-thin ph-lock-simple' : 'ph-thin ph-seal-check'} style={{ fontSize: 18 }} />
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 10.5, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase' }}>{secure ? 'Pago seguro' : 'Smile Room'}</span>
      </div>
    </div>
  </header>
);

/* ------------------------------- resumen del pedido ------------------------------- */
const OrderSummary = ({ order, compact }) => (
  <div style={{ background: 'var(--linen-100)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--ring-hairline)', padding: 24, display: 'flex', flexDirection: 'column', gap: 16, alignSelf: 'start' }}>
    <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--text-gold)' }}>Resumen del pedido</span>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {order.items.map(it => (
        <div key={it.id} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ position: 'relative', width: 46, height: 46, flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'var(--champagne-50)', color: 'var(--champagne-600)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <i className={it.icon} style={{ fontSize: 24 }} />
            <span style={{ position: 'absolute', top: -7, right: -7, minWidth: 19, height: 19, padding: '0 5px', borderRadius: 'var(--radius-pill)', background: 'var(--carbon)', color: 'var(--linen-50)', fontFamily: 'var(--font-display)', fontSize: 10.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{it.qty}</span>
          </div>
          <span style={{ flex: 1, fontSize: 13.5, color: 'var(--text-body)', lineHeight: 1.4 }}>{it.name}</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--carbon)' }}>{MXN(it.price * it.qty)}</span>
        </div>
      ))}
    </div>
    <div style={{ height: 1, background: 'var(--line-hairline)' }} />
    {[['Subtotal', MXN(order.total)], ['Envío', 'Gratis']].map(([k, v]) => (
      <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--text-muted)', marginTop: -6 }}>
        <span>{k}</span><span>{v}</span>
      </div>
    ))}
    <div style={{ height: 1, background: 'var(--line-hairline)' }} />
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: -4 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>Total</span>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 26, color: 'var(--carbon)' }}>{MXN(order.total)}</span>
    </div>
  </div>
);

/* ------------------------------- PASO 1 · PAGO ------------------------------- */
const PayStep = ({ order, form, set, setRaw, canPay, paying, onPay }) => {
  const { isMobile } = useViewport();
  const formCol = (
    <div className="sr-fadein" style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
      {/* contacto */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <GroupTitle n="1">Contacto</GroupTitle>
        <CField label="Correo electrónico" icon="ph-thin ph-envelope-simple" type="email" placeholder="tu@correo.com" value={form.email} onChange={set('email')} />
      </div>
      {/* entrega */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <GroupTitle n="2">Datos de entrega</GroupTitle>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
          <CField label="Nombre completo" icon="ph-thin ph-user" placeholder="Tu nombre" value={form.name} onChange={set('name')} />
          <CField label="Teléfono" icon="ph-thin ph-phone" placeholder="55 0000 0000" value={form.phone} onChange={set('phone')} />
        </div>
        <CField label="Dirección o sucursal" icon="ph-thin ph-map-pin" placeholder="Calle, número, colonia, CP" value={form.address} onChange={set('address')} />
      </div>
      {/* pago */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <GroupTitle n="3">Pago</GroupTitle>
        {/* tarjeta estilo Stripe Elements */}
        <div style={{ border: '1px solid var(--line-soft)', borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', overflow: 'hidden' }}>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--line-hairline)' }}>
            <i className="ph-thin ph-credit-card" style={{ position: 'absolute', left: 14, fontSize: 20, color: 'var(--text-faint)' }} />
            <input inputMode="numeric" placeholder="1234 1234 1234 1234" value={form.card}
              onChange={e => setRaw('card', fmtCard(e.target.value))}
              style={{ width: '100%', height: 50, border: 'none', outline: 'none', background: 'transparent', padding: '0 90px 0 44px', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)' }} />
            <div style={{ position: 'absolute', right: 12, display: 'flex', gap: 5, color: 'var(--text-faint)', fontSize: 18 }}>
              <i className="ph-thin ph-credit-card" /><i className="ph-thin ph-credit-card" />
            </div>
          </div>
          <div style={{ display: 'flex' }}>
            <input inputMode="numeric" placeholder="MM / AA" value={form.exp}
              onChange={e => setRaw('exp', fmtExp(e.target.value))}
              style={{ flex: 1, height: 50, border: 'none', borderRight: '1px solid var(--line-hairline)', outline: 'none', background: 'transparent', padding: '0 16px', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)' }} />
            <input inputMode="numeric" placeholder="CVC" value={form.cvc}
              onChange={e => setRaw('cvc', fmtCvc(e.target.value))}
              style={{ flex: 1, height: 50, border: 'none', outline: 'none', background: 'transparent', padding: '0 16px', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)' }} />
          </div>
        </div>
        <CField label="Nombre en la tarjeta" placeholder="Como aparece en tu tarjeta" value={form.cardName} onChange={set('cardName')} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-faint)', fontSize: 11.5 }}>
          <i className="ph-thin ph-lock-simple" style={{ fontSize: 15 }} />
          Pago procesado de forma segura con <strong style={{ color: 'var(--text-muted)', fontWeight: 600, margin: '0 .25em' }}>Stripe</strong> · Modo demo — no se realiza ningún cargo real.
        </div>
      </div>
      {/* botón pagar (grande) */}
      <button onClick={onPay} disabled={!canPay || paying} style={{
        height: 60, border: 'none', cursor: canPay && !paying ? 'pointer' : 'not-allowed',
        borderRadius: 'var(--radius-sm)', background: 'var(--grad-gold)', color: 'var(--carbon)',
        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '.16em', textTransform: 'uppercase',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
        opacity: canPay || paying ? 1 : .45, transition: 'opacity var(--dur-base) var(--ease-out)',
        boxShadow: 'var(--shadow-gold)',
      }}>
        {paying ? <React.Fragment><span className="sr-spin" /> Procesando…</React.Fragment>
          : <React.Fragment><i className="ph-thin ph-lock-simple" style={{ fontSize: 20 }} /> Pagar {MXN(order.total)}</React.Fragment>}
      </button>
    </div>
  );

  return (
    <main style={{ maxWidth: 1080, margin: '0 auto', padding: isMobile ? '32px 22px 64px' : '52px 22px 90px' }}>
      <div style={{ marginBottom: isMobile ? 28 : 40 }}>
        <Eyebrow>Finalizar compra</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: isMobile ? 28 : 36, letterSpacing: '.08em', textTransform: 'uppercase', margin: '10px 0 0', color: 'var(--text-strong)' }}>Checkout</h1>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.35fr 1fr', gap: isMobile ? 28 : 56, alignItems: 'start' }}>
        {isMobile
          ? <React.Fragment><OrderSummary order={order} />{formCol}</React.Fragment>
          : <React.Fragment>{formCol}<OrderSummary order={order} /></React.Fragment>}
      </div>
    </main>
  );
};

/* ------------------------------- PASO 2 · CONFIRMACIÓN ------------------------------- */
const ConfirmStep = ({ order, form, onTrack, onClose }) => {
  const { isMobile } = useViewport();
  return (
    <main style={{ maxWidth: 640, margin: '0 auto', padding: isMobile ? '54px 22px 80px' : '90px 22px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26 }}>
      <div className="sr-pop" style={{ width: 92, height: 92, borderRadius: '50%', background: 'var(--champagne-50)', color: 'var(--champagne-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-gold)' }}>
        <i className="ph-thin ph-check" style={{ fontSize: 48 }} />
      </div>
      <div className="sr-fadein" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <Eyebrow>Pedido recibido</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: isMobile ? 30 : 40, letterSpacing: '.08em', textTransform: 'uppercase', margin: 0, color: 'var(--text-strong)', lineHeight: 1.15 }}>
          ¡Gracias{form.name ? `, ${form.name.split(' ')[0]}` : ''}!
        </h1>
        <Rule center />
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '44ch', margin: 0 }}>
          Tu pedido <strong style={{ color: 'var(--text-gold)' }}>{order.number}</strong> fue confirmado. Enviamos el comprobante a {form.email ? <strong style={{ color: 'var(--text-strong)' }}>{form.email}</strong> : 'tu correo'}.
        </p>
        <div style={{ display: 'flex', gap: 36, margin: '6px 0 4px' }}>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 24, color: 'var(--carbon)' }}>{MXN(order.total)}</div><div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 2 }}>Total pagado</div></div>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 24, color: 'var(--carbon)' }}>{order.items.reduce((s, i) => s + i.qty, 0)}</div><div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 2 }}>Artículos</div></div>
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 6, flexDirection: isMobile ? 'column' : 'row', alignItems: 'center' }}>
          <KBtn variant="gold" size="lg" icon="ph-thin ph-map-pin-line" onClick={onTrack} style={isMobile ? { width: '100%', maxWidth: 320 } : null}>Seguir mi pedido</KBtn>
          <KBtn variant="outline" size="lg" onClick={onClose} style={isMobile ? { width: '100%', maxWidth: 320 } : null}>Volver a la tienda</KBtn>
        </div>
      </div>
    </main>
  );
};

/* ------------------------------- PASO 3 · SEGUIMIENTO (área de clientes) ------------------------------- */
const TRACK_STEPS = [
  { i: 'ph-thin ph-check-circle', t: 'Pedido confirmado', d: 'Recibimos tu pago y confirmamos tu pedido.' },
  { i: 'ph-thin ph-package', t: 'En preparación', d: 'Estamos preparando tus productos y coordinando tu cita.' },
  { i: 'ph-thin ph-truck', t: 'En camino', d: 'Tu pedido va en camino a tu domicilio o sucursal.' },
  { i: 'ph-thin ph-house-line', t: 'Entregado', d: 'Disfruta tu nueva sonrisa. Gracias por confiar en Smile Room.' },
];
const CURRENT = 1; // estado actual (mock): "En preparación"

const TrackingStep = ({ order, form, onClose }) => {
  const { isMobile } = useViewport();
  return (
    <main style={{ maxWidth: 880, margin: '0 auto', padding: isMobile ? '36px 22px 72px' : '56px 22px 90px' }}>
      <div className="sr-fadein" style={{ marginBottom: isMobile ? 26 : 36 }}>
        <Eyebrow>Área de clientes</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: isMobile ? 28 : 38, letterSpacing: '.08em', textTransform: 'uppercase', margin: '10px 0 0', color: 'var(--text-strong)' }}>Seguimiento de tu pedido</h1>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.25fr 1fr', gap: isMobile ? 26 : 48, alignItems: 'start' }}>
        {/* timeline */}
        <div className="sr-fadein" style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm), var(--ring-hairline)', padding: isMobile ? 24 : 34 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 26, flexWrap: 'wrap', gap: 8 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>{order.number}</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 10.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', padding: '6px 12px', borderRadius: 'var(--radius-pill)', background: 'var(--grad-gold)', color: 'var(--carbon)' }}>{TRACK_STEPS[CURRENT].t}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {TRACK_STEPS.map((s, k) => {
              const done = k < CURRENT, active = k === CURRENT, last = k === TRACK_STEPS.length - 1;
              const on = done || active;
              return (
                <div key={s.t} style={{ display: 'flex', gap: 16 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <div style={{
                      width: 40, height: 40, borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                      background: on ? 'var(--grad-gold)' : 'var(--linen-100)',
                      color: on ? 'var(--carbon)' : 'var(--text-faint)',
                      boxShadow: active ? '0 0 0 4px var(--champagne-50)' : (on ? 'none' : 'var(--ring-hairline)'),
                    }}>
                      <i className={done ? 'ph-thin ph-check' : s.i} style={{ fontSize: 22 }} />
                    </div>
                    {!last && <div style={{ width: 2, flex: 1, minHeight: 30, background: done ? 'var(--champagne-400)' : 'var(--line-hairline)', margin: '4px 0' }} />}
                  </div>
                  <div style={{ paddingBottom: last ? 0 : 22, paddingTop: 7 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 13.5, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: on ? 'var(--text-strong)' : 'var(--text-muted)' }}>{s.t}{active && <span style={{ color: 'var(--text-gold)' }}> · en curso</span>}</div>
                    <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--text-muted)', margin: '5px 0 0', maxWidth: '40ch' }}>{s.d}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* detalle del pedido */}
        <div className="sr-fadein" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <OrderSummary order={order} />
          <div style={{ background: 'var(--linen-100)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--ring-hairline)', padding: 20, fontSize: 13, lineHeight: 1.6, color: 'var(--text-muted)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-strong)', marginBottom: 8 }}>Datos del pedido</div>
            Fecha: {order.date}<br />
            {form.email && <React.Fragment>Correo: {form.email}<br /></React.Fragment>}
            Te contactaremos para coordinar tu cita o entrega. Servicios sujetos a valoración clínica previa.
          </div>
          <KBtn variant="primary" size="lg" icon="ph-thin ph-storefront" onClick={onClose} style={{ width: '100%' }}>Volver a la tienda</KBtn>
        </div>
      </div>
    </main>
  );
};

/* ------------------------------- ORQUESTADOR ------------------------------- */
const CheckoutFlow = ({ order, onClose, onPaid, initialStep }) => {
  ensureCheckoutStyle();
  const [step, setStep] = React.useState(initialStep || 'pay');     // pay → confirm → tracking
  const [paying, setPaying] = React.useState(false);
  const [form, setForm] = React.useState({ email: '', name: '', phone: '', address: '', card: '', exp: '', cvc: '', cardName: '' });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const setRaw = (k, v) => setForm(f => ({ ...f, [k]: v }));

  React.useEffect(() => { window.scrollTo(0, 0); }, [step]);

  const canPay = !!(form.email.trim() && form.name.trim() && form.card.replace(/\s/g, '').length >= 12 && form.exp.length >= 4 && form.cvc.length >= 3);
  const onPay = () => {
    if (!canPay || paying) return;
    setPaying(true);
    setTimeout(() => { setPaying(false); onPaid(); setStep('confirm'); }, 1500);
  };

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 80, background: 'var(--surface-page)', overflow: 'auto' }}>
      <BrandBar onClose={onClose} secure={step === 'pay'} />
      {step === 'pay' && <PayStep order={order} form={form} set={set} setRaw={setRaw} canPay={canPay} paying={paying} onPay={onPay} />}
      {step === 'confirm' && <ConfirmStep order={order} form={form} onTrack={() => setStep('tracking')} onClose={onClose} />}
      {step === 'tracking' && <TrackingStep order={order} form={form} onClose={onClose} />}
      <footer style={{ borderTop: '1px solid var(--line-hairline)', padding: '20px', textAlign: 'center', fontSize: 11, letterSpacing: '.1em', color: 'var(--text-faint)' }}>
        © 2026 SMILE ROOM · ODONTOLOGÍA DIGITAL AVANZADA
      </footer>
    </div>
  );
};

Object.assign(window, { CheckoutFlow });