/* global React, Icon, CompassRose, Logo */
const { useState: useStateC, useEffect: useEffectC } = React;

/* ============================================================
   CONSULTATION SECTION [8] + MODAL
   ============================================================ */
const Consultation = ({ onOpenModal }) => {
  const benefits = [
    'Evaluación honesta de viabilidad de tu caso',
    'Identificación de riesgos y fortalezas de tu perfil',
    'Recomendación del país y tipo de visa más estratégico',
    'Hoja de ruta inicial por escrito',
    'Sin presión comercial — si no podemos ayudarte, te lo decimos',
  ];
  return (
    <section id="consulta" style={{ padding: 'var(--section-py) 0', position: 'relative', overflow: 'hidden' }}>
      <div className="ornament" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
        <div className="spin-slower" style={{ display: 'inline-block' }}>
          <CompassRose size={760} opacity={0.06}/>
        </div>
      </div>

      <div className="container-narrow text-center" style={{ position: 'relative' }}>
        <span className="eyebrow-plain">Empieza sin compromiso</span>
        <h2 className="h2-display gold-gradient-text" style={{ marginTop: '1rem' }}>
          Tu primera consulta diagnóstica<br/>
          <span className="italic-fraunces">es gratis.</span>
        </h2>
        <p className="lede mx-auto" style={{ marginTop: '1.5rem', maxWidth: '36rem' }}>
          Antes de hablar de planes, presupuestos o documentos, necesitamos conocerte.
          Por eso tu primera consulta diagnóstica de 45 minutos no tiene costo — solo para clientes nuevos.
        </p>

        <div className="liquid-glass liquid-glass-strong" style={{
          maxWidth: '640px',
          margin: '4rem auto 0',
          padding: '3rem',
          borderRadius: '1.75rem',
          textAlign: 'left',
        }}>
          <div className="line-accent" style={{ marginBottom: '1.5rem' }}/>
          <span className="eyebrow-plain">Consulta diagnóstica · Primera vez</span>
          <h3 className="font-fraunces font-light" style={{ fontSize: '2.5rem', marginTop: '0.75rem', letterSpacing: '-0.02em' }}>
            Gratuita · 45 minutos
          </h3>

          <div className="divider-gold" style={{ margin: '2rem 0' }}/>

          <div style={{ fontSize: '0.78rem', textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--foreground-muted)', marginBottom: '1.25rem', fontWeight: 500 }}>
            Lo que recibes en esta sesión
          </div>

          <ul className="benefits-list">
            {benefits.map((b, i) => (
              <li key={i}>
                <span className="checkmark-icon"><Icon name="check" size={18} strokeWidth={2}/></span>
                <span>{b}</span>
              </li>
            ))}
          </ul>

          <button className="btn btn-primary btn-hero" onClick={onOpenModal}
            style={{ marginTop: '2.5rem', display: 'flex', margin: '2.5rem auto 0', padding: '1.15rem 2.5rem', fontSize: '1.05rem' }}>
            Registrarme y agendar
            <Icon name="arrowRight" size={18}/>
          </button>

          <p style={{ color: 'var(--foreground-muted)', fontSize: '0.78rem', lineHeight: 1.6, textAlign: 'center', marginTop: '1.5rem' }}>
            Solo válido para nuevos registros. Una consulta gratuita por persona. Si decides contratar el plan completo,
            recibirás cotización detallada por escrito al final de esta sesión, sin compromiso.
          </p>
        </div>

        <div className="trust-micro" style={{ marginTop: '3rem' }}>
          <span><Icon name="lock" size={16}/> Tus datos están protegidos</span>
          <span><Icon name="calendar" size={16}/> Disponibilidad en 48–72 horas</span>
          <span><Icon name="globe" size={16}/> Atención en español</span>
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   REGISTRATION MODAL
   ============================================================ */
const RegistrationModal = ({ open, onClose }) => {
  const [submitted, setSubmitted] = useStateC(false);
  const [form, setForm] = useStateC({
    name: '', email: '', countryCode: '+57', phone: '',
    origin: '', destination: '', message: '',
  });

  useEffectC(() => {
    if (!open) { setSubmitted(false); return; }
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Cerrar">
          <Icon name="x" size={16}/>
        </button>

        {submitted ? (
          <div style={{ textAlign: 'center', padding: '1.5rem 0' }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999,
              border: '1px solid var(--primary)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 1.5rem', color: 'var(--primary)'
            }}>
              <Icon name="check" size={26} strokeWidth={1.5}/>
            </div>
            <span className="eyebrow-plain">Solicitud recibida</span>
            <h3 className="font-fraunces font-light" style={{ fontSize: '1.85rem', marginTop: '0.75rem' }}>
              Te contactaremos en 48–72 horas.
            </h3>
            <p style={{ color: 'var(--foreground-muted)', marginTop: '1rem', fontSize: '0.95rem', lineHeight: 1.6 }}>
              Hemos enviado un correo a <strong style={{ color: 'var(--foreground)' }}>{form.email || 'tu correo'}</strong> con
              los pasos para confirmar tu sesión diagnóstica.
            </p>
            <button className="btn btn-ghost" style={{ marginTop: '2rem' }} onClick={onClose}>Cerrar</button>
          </div>
        ) : (
          <>
            <span className="eyebrow-plain">Diagnóstico gratuito</span>
            <h3 className="font-fraunces font-light" style={{ fontSize: '1.85rem', marginTop: '0.5rem', lineHeight: 1.15 }}>
              Crea tu cuenta y agenda tu consulta gratuita.
            </h3>
            <p style={{ color: 'var(--foreground-muted)', fontSize: '0.92rem', marginTop: '0.75rem' }}>
              45 minutos · sin costo · sin compromiso de contratación
            </p>

            <form onSubmit={submit} style={{ marginTop: '2rem', display: 'flex', flexDirection: 'column', gap: '1.1rem' }}>
              <div className="form-field">
                <label className="form-label">Nombre completo</label>
                <input className="form-input" required value={form.name} onChange={upd('name')} placeholder="María González"/>
              </div>
              <div className="form-field">
                <label className="form-label">Email</label>
                <input className="form-input" required type="email" value={form.email} onChange={upd('email')} placeholder="maria@correo.com"/>
              </div>
              <div className="form-field">
                <label className="form-label">WhatsApp</label>
                <div className="phone-row">
                  <select className="form-select" value={form.countryCode} onChange={upd('countryCode')}>
                    <option value="+57">🇨🇴 +57</option>
                    <option value="+1">🇺🇸 +1</option>
                    <option value="+52">🇲🇽 +52</option>
                    <option value="+54">🇦🇷 +54</option>
                    <option value="+56">🇨🇱 +56</option>
                    <option value="+51">🇵🇪 +51</option>
                    <option value="+34">🇪🇸 +34</option>
                  </select>
                  <input className="form-input" required type="tel" value={form.phone} onChange={upd('phone')} placeholder="300 000 0000"/>
                </div>
              </div>
              <div className="form-field">
                <label className="form-label">País de origen</label>
                <input className="form-input" required value={form.origin} onChange={upd('origin')} placeholder="Colombia"/>
              </div>
              <div className="form-field">
                <label className="form-label">País destino de interés</label>
                <select className="form-select" required value={form.destination} onChange={upd('destination')}>
                  <option value="">Selecciona uno…</option>
                  <option value="us">Estados Unidos</option>
                  <option value="ca">Canadá</option>
                  <option value="au">Australia</option>
                  <option value="gb">Reino Unido</option>
                  <option value="cn">China</option>
                  <option value="jp">Japón</option>
                  <option value="otro">Aún no estoy seguro</option>
                </select>
              </div>
              <div className="form-field">
                <label className="form-label">Mensaje (opcional)</label>
                <textarea className="form-textarea" value={form.message} onChange={upd('message')}
                  placeholder="Cuéntanos brevemente tu situación o qué te gustaría resolver."/>
              </div>

              <button type="submit" className="btn btn-primary btn-hero" style={{ marginTop: '0.5rem', justifyContent: 'center' }}>
                Crear cuenta y agendar
                <Icon name="arrowRight" size={18}/>
              </button>

              <p style={{ color: 'var(--foreground-muted)', fontSize: '0.75rem', lineHeight: 1.5, textAlign: 'center', marginTop: '0.25rem' }}>
                Al registrarte aceptas nuestros <a href="#" style={{ color: 'var(--primary)' }}>Términos</a> y <a href="#" style={{ color: 'var(--primary)' }}>Política de Privacidad</a>.
              </p>
            </form>
          </>
        )}
      </div>
    </div>
  );
};

/* ============================================================
   FOOTER
   ============================================================ */
const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-col">
          <Logo/>
          <p style={{ color: 'var(--foreground-muted)', fontSize: '0.9rem', marginTop: '1.25rem', maxWidth: 320, lineHeight: 1.6 }}>
            Firma boutique de derecho migratorio. Estrategia legal de movilidad internacional para perfiles
            que no pueden permitirse un error.
          </p>
          <div style={{ display: 'flex', gap: '0.75rem', marginTop: '1.5rem' }}>
            <a href="#" style={{ color: 'var(--foreground-muted)' }}><Icon name="mail" size={18}/></a>
            <a href="#" style={{ color: 'var(--foreground-muted)' }}><Icon name="phone" size={18}/></a>
            <a href="#" style={{ color: 'var(--foreground-muted)' }}><Icon name="mapPin" size={18}/></a>
          </div>
        </div>
        <div className="footer-col">
          <h4>Servicios</h4>
          <ul>
            <li><a href="#servicios">Estrategia migratoria</a></li>
            <li><a href="#servicios">Preparación de expediente</a></li>
            <li><a href="#servicios">Reapertura de casos</a></li>
            <li><a href="#servicios">Movilidad de talento</a></li>
            <li><a href="#servicios">Asentamiento</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Países</h4>
          <ul>
            <li><a href="#paises">Estados Unidos</a></li>
            <li><a href="#paises">Canadá</a></li>
            <li><a href="#paises">Australia</a></li>
            <li><a href="#paises">Reino Unido</a></li>
            <li><a href="#paises">China</a></li>
            <li><a href="#paises">Japón</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Firma</h4>
          <ul>
            <li><a href="#metodo">Método</a></li>
            <li><a href="#testimonios">Casos</a></li>
            <li><a href="#faq">Preguntas frecuentes</a></li>
            <li><a href="#consulta">Consulta gratuita</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Visas Lex · Bogotá · Madrid</div>
        <div style={{ display: 'flex', gap: '1.5rem' }}>
          <a href="#" style={{ color: 'var(--foreground-dim)' }}>Términos</a>
          <a href="#" style={{ color: 'var(--foreground-dim)' }}>Privacidad</a>
          <a href="#" style={{ color: 'var(--foreground-dim)' }}>Aviso legal</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Consultation, RegistrationModal, Footer });