/* SMILE ROOM — Web UI kit · booking modal (interactive) */
const { KBtn, Eyebrow, Rule } = window;

const Field = ({ label, icon, textarea, ...rest }) => {
  const input = {
    width: '100%', boxSizing: 'border-box', height: textarea ? 'auto' : 'var(--control-h-md)',
    minHeight: textarea ? 92 : 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: 8 }}>
      <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>
    </label>
  );
};

const Booking = ({ open, onClose }) => {
  const [done, setDone] = React.useState(false);
  const [service, setService] = React.useState('Limpieza de Alta Tecnología');
  const { isMobile } = window.useViewport();
  React.useEffect(() => { if (open) setDone(false); }, [open]);
  if (!open) return null;
  const services = ['Limpieza de Alta Tecnología', 'Blanqueamiento', 'Estética', 'Endodoncia', 'Diagnóstico Digital'];
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(13,13,15,.55)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: isMobile ? 'flex-end' : 'center', justifyContent: 'center', padding: isMobile ? 0 : 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(560px, 100%)', maxHeight: isMobile ? '94vh' : '90vh', overflow: 'auto', background: 'var(--surface-page)', borderRadius: isMobile ? 'var(--radius-xl) var(--radius-xl) 0 0' : 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }}>
        {!done ? (
          <div style={{ padding: isMobile ? '28px 22px' : '40px 44px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Eyebrow>Reserva tu cita</Eyebrow>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: isMobile ? 24 : 28, letterSpacing: '.08em', textTransform: 'uppercase', margin: 0, color: 'var(--text-strong)' }}>Agendar</h3>
              </div>
              <i className="ph-thin ph-x" onClick={onClose} style={{ fontSize: 26, cursor: 'pointer', color: 'var(--text-muted)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 18, marginTop: 26 }}>
              <Field label="Nombre" icon="ph-thin ph-user" placeholder="Tu nombre completo" />
              <Field label="Teléfono" icon="ph-thin ph-phone" placeholder="55 0000 0000" />
              <div style={{ gridColumn: '1 / -1' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--text-muted)', display: 'block', marginBottom: 10 }}>Servicio de interés</span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {services.map(s => (
                    <button key={s} onClick={() => setService(s)} style={{
                      fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 600, letterSpacing: '.08em',
                      textTransform: 'uppercase', padding: '9px 14px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                      border: 'none', transition: 'all var(--dur-base)',
                      background: service === s ? 'var(--carbon)' : 'transparent',
                      color: service === s ? 'var(--linen-50)' : 'var(--text-muted)',
                      boxShadow: service === s ? 'none' : 'inset 0 0 0 1px var(--line-soft)',
                    }}>{s}</button>
                  ))}
                </div>
              </div>
              <div style={{ gridColumn: '1 / -1' }}>
                <Field label="Mensaje" textarea placeholder="¿Cómo podemos ayudarte a transformar tu sonrisa?" />
              </div>
            </div>
            <div style={{ marginTop: 28 }}>
              <KBtn variant="gold" size="lg" icon="ph-thin ph-calendar-check" onClick={() => setDone(true)} style={{ width: '100%' }}>Confirmar cita</KBtn>
            </div>
          </div>
        ) : (
          <div style={{ padding: '64px 44px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
            <div style={{ width: 76, height: 76, borderRadius: '50%', background: 'var(--champagne-50)', color: 'var(--champagne-600)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="ph-thin ph-check" style={{ fontSize: 40 }} />
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 26, letterSpacing: '.08em', textTransform: 'uppercase', margin: 0, color: 'var(--text-strong)' }}>Cita solicitada</h3>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--text-muted)', maxWidth: '38ch', margin: 0 }}>
              Gracias. Te contactaremos en breve para confirmar tu cita de <strong style={{ color: 'var(--text-gold)' }}>{service}</strong>.
            </p>
            <KBtn variant="outline" onClick={onClose}>Cerrar</KBtn>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Booking });