/* pricing.jsx — Seguridad, Pricing, FAQ, CTA Aurora, Footer, LoginModal (light theme) */

/* ============================== SEGURIDAD ============================== */
function Seguridad() {
  const badges = [
    { t: 'RGPD UE',                  d: 'Cumplimiento estricto del Reglamento (UE) 2016/679.', i: 'shield' },
    { t: 'Servidores en la UE',      d: 'Datos almacenados exclusivamente en Frankfurt y París.', i: 'globe' },
    { t: 'No entrenamos modelos',    d: 'Tus expedientes nunca alimentan ningún modelo, propio ni de terceros.', i: 'lock' },
    { t: 'Cifrado AES-256',          d: 'En tránsito (TLS 1.3) y en reposo. Claves rotadas mensualmente.', i: 'cpu' },
  ];

  return (
    <section id="seguridad" data-screen-label="07 Seguridad" className="relative py-16 md:py-24 overflow-hidden sec-emerald-tinted sec-divider-top sec-divider-bottom">
      <div className="absolute inset-0 grid-bg opacity-[0.35] [mask-image:radial-gradient(ellipse_at_center,black_25%,transparent_75%)] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-6 md:px-10 relative">
        <div className="max-w-3xl">
          <Eyebrow tone="emerald" className="mb-4">Seguridad jurídica</Eyebrow>
          <h2 className="display text-[40px] md:text-[56px] leading-[1.05] text-ink-900">
            Tratamos la seguridad como<br />
            <Flourish><span className="font-serif italic font-normal text-grad-violet">obligación jurídica, no como claim.</span></Flourish>
          </h2>
          <p className="mt-5 text-[16px] text-ink-500 max-w-2xl leading-relaxed">
            Cada documento que entra en Mentaly está cifrado, aislado y procesado en infraestructura europea — sin excepciones.
          </p>
        </div>

        <StaggerGroup className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {badges.map(b => (
            <div key={b.t} className="card-elev tilt p-6">
              <div className="w-11 h-11 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-4">
                <Icon name={b.i} className="w-5 h-5 text-emerald-600" stroke={1.5} />
              </div>
              <div className="text-ink-900 font-semibold text-[16px]">{b.t}</div>
              <div className="text-[13px] text-ink-500 mt-1.5 leading-relaxed">{b.d}</div>
            </div>
          ))}
        </StaggerGroup>

        {/* Trust strip */}
        <div className="mt-8 card px-6 py-5 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
              <Icon name="check" className="w-5 h-5 text-emerald-600" />
            </div>
            <div>
              <div className="text-ink-900 text-[14.5px] font-semibold">Auditoría externa anual</div>
              <div className="text-[12.5px] text-ink-500">Conforme a ISO/IEC 27001 y ENS nivel medio.</div>
            </div>
          </div>
          <div className="flex flex-wrap gap-2 text-[11.5px] text-ink-600">
            {['ISO 27001','ENS medio','SOC 2 Type II','CCN-CERT'].map(t => (
              <span key={t} className="px-2.5 py-1 rounded-full bg-paper-100 border border-ink-100">{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================== PRICING ============================== */
function Pricing({ onLoginRequired }) {
  const [yearly, setYearly] = useState(false);

  const plans = [
    {
      id: 'free', name: 'Free', tagline: 'Para probar Mentaly',
      monthly: 0, yearly: 0, cta: 'Empezar gratis',
      features: ['Modo General · 25 consultas/mes','Acceso a los 4 modos','5 análisis PDF/mes (≤50 págs)','Historial de 30 días'],
      excluded: ['PDFs de hasta 10.000 páginas','Modo conversación con seguimiento','Soporte prioritario'],
    },
    {
      id: 'pro', name: 'Pro', tagline: 'Para abogados autónomos', highlight: true,
      monthly: 29, yearly: 23, cta: 'Probar Pro · 14 días',
      features: ['Los 4 modos de razonamiento','PDFs hasta 10.000 páginas','Historial ilimitado por caso','Citas verificadas BOE/CENDOJ','Modo conversación de seguimiento','Soporte por email en 24 h'],
    },
    {
      id: 'despacho', name: 'Despacho', tagline: 'Hasta 10 abogados',
      monthly: 79, yearly: 63, cta: 'Hablar con ventas',
      features: ['Todo lo de Pro','Multi-usuario con permisos por rol','Plantillas y biblioteca compartida','SSO con Google Workspace','Soporte prioritario en 4 h'],
    },
    {
      id: 'enterprise', name: 'Enterprise', tagline: 'A medida',
      monthly: null, yearly: null, cta: 'Solicitar demo',
      features: ['Despliegue privado en la UE','Integraciones (Sharepoint, LexNET)','Customer Success dedicado','Auditoría conjunta anual','SLA del 99,95 %'],
    },
  ];

  return (
    <Section
      id="precios"
      screen="08 Precios"
      className="sec-paper sec-divider-top"
      eyebrow="Precios"
      title={<>Mejor IA jurídica, <Flourish><span className="font-serif italic font-normal text-grad-violet">la mitad de precio.</span></Flourish></>}
      kicker="Sin tarjeta para empezar. Sin permanencia. Cancela cuando quieras."
    >
      {/* Toggle */}
      <div className="flex justify-center mb-10">
        <div className="inline-flex items-center gap-1 p-1 rounded-full border border-ink-100 bg-white shadow-sm">
          <button onClick={() => setYearly(false)}
            className={`px-4 py-1.5 rounded-full text-[12.5px] font-medium transition-colors ${!yearly ? 'bg-ink-900 text-white' : 'text-ink-500 hover:text-ink-900'}`}>
            Mensual
          </button>
          <button onClick={() => setYearly(true)}
            className={`px-4 py-1.5 rounded-full text-[12.5px] font-medium transition-colors flex items-center gap-2 ${yearly ? 'bg-ink-900 text-white' : 'text-ink-500 hover:text-ink-900'}`}>
            Anual
            <span className={`text-[10px] px-1.5 py-0.5 rounded font-semibold ${yearly ? 'bg-emerald-400/30 text-white' : 'bg-emerald-100 text-emerald-700'}`}>-20%</span>
          </button>
        </div>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
        {plans.map(p => <PricingCard key={p.id} plan={p} yearly={yearly} onLoginRequired={onLoginRequired} />)}
      </div>

      <p className="mt-8 text-center text-[12.5px] text-ink-400">
        Precios sin IVA · 14 días de prueba gratuita en Pro · Sin permanencia
      </p>
    </Section>
  );
}

function PricingCard({ plan, yearly, onLoginRequired }) {
  const price = plan.monthly === null ? 'a medida' : (yearly ? plan.yearly : plan.monthly);
  const showEuro = price !== 'a medida';

  return (
    <div className={`relative card-elev tilt p-7 flex flex-col transition-all
      ${plan.highlight ? 'ring-violet-soft' : ''}`}>
      {plan.highlight && (
        <div className="absolute -top-3 left-7 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-gradient-to-r from-indigo2-500 to-violet2-600 text-white text-[10.5px] font-semibold uppercase tracking-wider shadow-md">
          <Icon name="star" className="w-3 h-3" /> Más elegido
        </div>
      )}

      <div>
        <div className={`text-[18px] font-semibold ${plan.highlight ? 'text-violet2-700' : 'text-ink-900'}`}>{plan.name}</div>
        <div className="text-[12.5px] text-ink-500 mt-0.5">{plan.tagline}</div>
      </div>

      <div className="mt-5 mb-6">
        <div className="flex items-baseline gap-1.5">
          {showEuro && <span className="text-[14px] text-ink-400">€</span>}
          <span className={`text-[44px] font-semibold tracking-tight leading-none ${plan.highlight ? 'text-grad-violet' : 'text-ink-900'}`}>
            {price}
          </span>
          {showEuro && <span className="text-[13px] text-ink-400">/ mes</span>}
        </div>
        {showEuro && yearly && plan.monthly > 0 && (
          <div className="text-[11.5px] text-ink-400 mt-1">
            facturado anualmente · ahorras {(plan.monthly - plan.yearly) * 12} €
          </div>
        )}
      </div>

      <button onClick={() => onLoginRequired('', plan.id)}
        className={`w-full text-[13.5px] font-semibold rounded-full py-3 transition-all focus-ring mb-6
          ${plan.highlight
            ? 'btn-ink'
            : 'btn-light'}`}>
        {plan.cta}
      </button>

      <ul className="space-y-2.5">
        {plan.features.map((f,i) => (
          <li key={i} className="flex items-start gap-2.5 text-[13px] text-ink-700">
            <Icon name="check" className={`w-4 h-4 mt-0.5 shrink-0 ${plan.highlight ? 'text-violet2-600' : 'text-emerald-600'}`} />
            <span>{f}</span>
          </li>
        ))}
        {plan.excluded?.map((f,i) => (
          <li key={i} className="flex items-start gap-2.5 text-[13px] text-ink-400">
            <Icon name="x" className="w-4 h-4 mt-0.5 shrink-0 text-ink-300" />
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ============================== CTA FINAL con AURORA ============================== */
function CtaAurora({ onLoginRequired, ctaCopy = 'antes de redactar.' }) {
  return (
    <section className="relative overflow-hidden" data-screen-label="09 CTA final">
      <div className="relative min-h-[80vh] flex items-center justify-center py-32 px-6 bg-paper-100/40">
        {/* the new blob-aurora */}
        <Aurora strength="strong" />
        {/* warm overlay to soften */}
        <div className="absolute inset-0 bg-gradient-to-b from-white/30 via-transparent to-white/40 pointer-events-none" />

        <div className="relative z-10 max-w-3xl mx-auto text-center">
          <div className="mb-8 inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/85 backdrop-blur-md border border-ink-100 text-[12px] font-medium text-ink-700 shadow-sm">
            <span className="w-1.5 h-1.5 rounded-full bg-violet2-500 animate-pulse" />
            3 consultas gratis sin registro · 25/mes con cuenta
          </div>

          <h2 className="display text-[48px] sm:text-[64px] md:text-[88px] leading-[1.02] text-ink-900">
            La IA que piensa
            <br />
            <Flourish>
              <span className="font-serif italic font-normal text-grad-violet">{ctaCopy}</span>
            </Flourish>
          </h2>
          <p className="mt-7 text-[16.5px] md:text-[18px] text-ink-600 max-w-xl mx-auto leading-relaxed">
            Empieza con 3 consultas sin registro. Contínua con 25 al mes — sin tarjeta.
          </p>

          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
            <button onClick={() => onLoginRequired('', 'general')}
              className="btn-ink magnetic inline-flex items-center justify-center gap-3 px-7 py-4 rounded-full text-[15px] font-semibold focus-ring">
              <GoogleGlyph />
              Empezar con Google
            </button>
            <a href="#hero" className="btn-light magnetic inline-flex items-center gap-2 px-6 py-4 rounded-full text-[14.5px] font-medium focus-ring">
              Volver al buscador
              <Icon name="arrowUp" className="w-4 h-4 rotate-180" />
            </a>
          </div>

          <div className="mt-8 inline-flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[12.5px] text-ink-600">
            <span className="inline-flex items-center gap-1.5"><Icon name="shield" className="w-3.5 h-3.5" /> RGPD UE</span>
            <span className="inline-flex items-center gap-1.5"><Icon name="lock" className="w-3.5 h-3.5" /> Cifrado AES-256</span>
            <span className="inline-flex items-center gap-1.5"><Icon name="check" className="w-3.5 h-3.5" /> Sin permanencia</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================== FOOTER ============================== */
function Footer() {
  const cols = [
    { h: 'Producto', items: ['La app', 'Modos de IA', 'Seguridad', 'Integraciones', 'Roadmap'] },
    { h: 'Empresa',  items: ['Sobre Mentaly', 'Manifiesto', 'Trabaja con nosotros', 'Prensa', 'Contacto'] },
    { h: 'Legal',    items: ['Aviso legal', 'Privacidad · RGPD', 'Cookies', 'Términos', 'Compliance'] },
    { h: 'Recursos', items: ['Blog jurídico', 'Plantillas', 'Guías de uso', 'API docs', 'Estado del servicio'] },
  ];
  return (
    <footer className="relative pt-20 pb-10 border-t border-ink-100 bg-paper-100/40">
      <div className="max-w-7xl mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-[1.4fr_2.6fr] gap-12 mb-14">
          <div>
            <Logo size={28} />
            <p className="mt-4 text-[13.5px] text-ink-500 max-w-sm leading-relaxed">
              La mente jurídica que lee 10.000 páginas por ti. Hecho en España, alojado en Europa.
            </p>
            <div className="mt-6 flex items-center gap-2 flex-wrap">
              <span className="inline-flex items-center gap-1.5 text-[11.5px] text-ink-500 px-2.5 py-1 rounded-full bg-white border border-ink-100">
                🇪🇸 Empresa española
              </span>
              <span className="inline-flex items-center gap-1.5 text-[11.5px] text-ink-500 px-2.5 py-1 rounded-full bg-white border border-ink-100">
                🇪🇺 Infraestructura europea
              </span>
            </div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {cols.map(col => (
              <div key={col.h}>
                <div className="text-[11.5px] uppercase tracking-[0.22em] text-ink-400 font-semibold mb-4">{col.h}</div>
                <ul className="space-y-2.5">
                  {col.items.map(it => (
                    <li key={it}>
                      <a href="#" className="text-[13.5px] text-ink-700 hover:text-ink-900 transition-colors">{it}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="pt-8 border-t border-ink-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div className="text-[12px] text-ink-400">
            © 2026 Mentaly SL · CIF B12345678 · Madrid
          </div>
          <div className="flex items-center gap-4 text-[12px] text-ink-500">
            <a href="#" className="hover:text-ink-900">LinkedIn</a>
            <a href="#" className="hover:text-ink-900">X</a>
            <a href="#" className="hover:text-ink-900">YouTube</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============================== LOGIN MODAL ============================== */
function LoginModal({ open, onClose, query, mode, googleClientId }) {
  const [tab, setTab] = useState('google');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const activeClientId = googleClientId || "525582855260-8a44ivfa6h93atld3f61ohsc8qjnroqm.apps.googleusercontent.com";

  useEffect(() => {
    if (!open) 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]);

  useEffect(() => {
    const handleMessage = (e) => {
      if (e.data && e.data.type === 'GOOGLE_LOGIN_SUCCESS') {
        const email = e.data.email || '';
        const name = e.data.name || '';
        const dest = (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
          ? `dashboard/index.html#/chat?email=${encodeURIComponent(email)}&name=${encodeURIComponent(name)}&provider=google`
          : `/app/#/chat?email=${encodeURIComponent(email)}&name=${encodeURIComponent(name)}&provider=google`;
        window.location.href = dest;
      }
    };
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  useEffect(() => {
    if (!open || !activeClientId) return;
    let timer;
    const initGoogleBtn = () => {
      if (window.google && window.google.accounts && window.google.accounts.id) {
        window.google.accounts.id.initialize({
          client_id: activeClientId,
          callback: (response) => {
            if (response.credential) {
              try {
                const base64Url = response.credential.split('.')[1];
                const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
                  return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
                const payload = JSON.parse(jsonPayload);
                if (payload.name) {
                  const settings = JSON.parse(localStorage.getItem('mentaly_settings_v1') || '{}');
                  settings.fullName = payload.name;
                  settings.email = payload.email;
                  settings.provider = 'google';
                  localStorage.setItem('mentaly_settings_v1', JSON.stringify(settings));
                }
              } catch (e) {
                console.error("Error decoding JWT:", e);
              }
              const dest = (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') 
                ? `dashboard/index.html#/chat?email=${encodeURIComponent(payload.email)}&name=${encodeURIComponent(payload.name || '')}&provider=google` 
                : `/app/#/chat?email=${encodeURIComponent(payload.email)}&name=${encodeURIComponent(payload.name || '')}&provider=google`;
              window.location.href = dest;
            }
          }
        });
        const btnContainer = document.getElementById("google-signin-btn");
        if (btnContainer) {
          window.google.accounts.id.renderButton(
            btnContainer,
            { theme: "outline", size: "large", width: 380, text: "continue_with", shape: "rectangular" }
          );
        }
      } else {
        timer = setTimeout(initGoogleBtn, 100);
      }
    };
    initGoogleBtn();
    return () => { if (timer) clearTimeout(timer); };
  }, [open, activeClientId]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center px-4">
      <div className="absolute inset-0 bg-ink-900/40 backdrop-blur-md animate-tilt-in" onClick={onClose} />
      <div className="relative w-full max-w-md card-elev overflow-hidden animate-tilt-in">
        <Aurora strength="soft" className="!inset-0 opacity-50" />
        <button onClick={onClose} className="absolute top-4 right-4 w-8 h-8 rounded-full bg-white/80 hover:bg-white border border-ink-100 flex items-center justify-center text-ink-500 z-10">
          <Icon name="x" className="w-4 h-4" />
        </button>

        <div className="relative p-8">
          <div className="w-12 h-12 rounded-2xl bg-violet2-500/10 border border-violet2-500/25 flex items-center justify-center mb-5">
            <Icon name="scale" className="w-6 h-6 text-violet2-600" />
          </div>
          <h2 className="display text-[26px] tracking-tight text-ink-900 mb-2 leading-tight">
            Continúa con Mentaly
          </h2>
          <p className="text-[13.5px] text-ink-500 mb-5 leading-relaxed">
            Crea tu cuenta gratis para seguir consultando.
          </p>

          {query && (
            <div className="mb-5 p-3 rounded-lg bg-violet2-500/5 border border-violet2-500/20 text-[12.5px] text-violet2-700">
              <div className="text-[10.5px] uppercase tracking-wider text-violet2-600 font-semibold mb-1">Tu consulta queda guardada</div>
              <div className="italic text-ink-700">“{query}”</div>
            </div>
          )}

          {/* Tabs */}
          <div className="flex items-center gap-1 p-1 rounded-lg bg-paper-100 border border-ink-100 mb-5">
            <button onClick={() => setTab('google')}
              className={`flex-1 text-[12.5px] font-medium py-2 rounded-md transition-all ${tab === 'google' ? 'bg-white text-ink-900 shadow-sm' : 'text-ink-500 hover:text-ink-700'}`}>
              <span className="inline-flex items-center gap-1.5">
                <GoogleGlyph className="w-3.5 h-3.5" />
                Google
              </span>
            </button>
            <button onClick={() => setTab('email')}
              className={`flex-1 text-[12.5px] font-medium py-2 rounded-md transition-all ${tab === 'email' ? 'bg-white text-ink-900 shadow-sm' : 'text-ink-500 hover:text-ink-700'}`}>
              Email · Contraseña
            </button>
          </div>

          {tab === 'google' ? (
            <>
              {activeClientId ? (
                <div className="w-full flex flex-col items-center gap-4 py-2">
                  <div id="google-signin-btn" className="w-full max-w-[380px] h-[44px] flex justify-center"></div>
                  <ul className="mt-5 space-y-2.5 w-full">
                    <ModalFeature icon="bolt"    text="Acceso en 1 clic · sin formularios" />
                    <ModalFeature icon="doc"     text="Sube PDFs hasta 10.000 páginas" />
                    <ModalFeature icon="history" text="Historial guardado por caso" />
                  </ul>
                </div>
              ) : (
                <>
                  <button
                    onClick={() => {
                      const width = 500;
                      const height = 600;
                      const left = (window.screen.width / 2) - (width / 2);
                      const top = (window.screen.height / 2) - (height / 2);
                      window.open('google-login.html', 'GoogleLogin', `width=${width},height=${height},left=${left},top=${top}`);
                    }}
                    className="w-full flex items-center justify-center gap-3 px-5 py-3.5 btn-ink rounded-xl font-semibold focus-ring">
                    <GoogleGlyph />
                    Continuar con Google
                  </button>
                  <ul className="mt-5 space-y-2.5">
                    <ModalFeature icon="bolt"    text="Acceso en 1 clic · sin formularios" />
                    <ModalFeature icon="doc"     text="Sube PDFs hasta 10.000 páginas" />
                    <ModalFeature icon="history" text="Historial guardado por caso" />
                  </ul>
                </>
              )}
            </>
          ) : (
            <form onSubmit={(e) => {
              e.preventDefault();
              const namePart = email.split('@')[0];
              const fullName = namePart.charAt(0).toUpperCase() + namePart.slice(1);
              try {
                const settings = JSON.parse(localStorage.getItem('mentaly_settings_v1') || '{}');
                settings.email = email;
                settings.provider = 'email';
                settings.fullName = fullName;
                localStorage.setItem('mentaly_settings_v1', JSON.stringify(settings));
              } catch (err) {}
              const dest = (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
                ? `dashboard/index.html#/chat?email=${encodeURIComponent(email)}&name=${encodeURIComponent(fullName)}&provider=email`
                : `/app/#/chat?email=${encodeURIComponent(email)}&name=${encodeURIComponent(fullName)}&provider=email`;
              window.location.href = dest;
            }} className="space-y-3">
              <label className="block">
                <span className="text-[11.5px] uppercase tracking-wider text-ink-500 font-semibold">Email</span>
                <input
                  type="email" required value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="tu@despacho.es"
                  className="mt-1 w-full px-3.5 py-2.5 rounded-lg border border-ink-100 bg-white text-[14px] text-ink-900 placeholder:text-ink-400 focus:border-violet2-500 outline-none transition-colors" />
              </label>
              <label className="block">
                <span className="text-[11.5px] uppercase tracking-wider text-ink-500 font-semibold">Contraseña</span>
                <input
                  type="password" required value={password}
                  onChange={e => setPassword(e.target.value)}
                  placeholder="Mínimo 8 caracteres"
                  className="mt-1 w-full px-3.5 py-2.5 rounded-lg border border-ink-100 bg-white text-[14px] text-ink-900 placeholder:text-ink-400 focus:border-violet2-500 outline-none transition-colors" />
              </label>
              <button type="submit"
                className="w-full mt-2 flex items-center justify-center gap-2 px-5 py-3.5 btn-ink rounded-xl font-semibold focus-ring">
                Crear cuenta gratis
                <Icon name="arrow" className="w-4 h-4" />
              </button>
              <p className="text-[11.5px] text-center text-ink-400">
                ¿Ya tienes cuenta? <a href="#" className="text-violet2-600 hover:underline">Inicia sesión</a>
              </p>
            </form>
          )}

          <div className="mt-5 text-center text-[11.5px] text-ink-400">
            Sin tarjeta · 25 consultas/mes · cancelas cuando quieras
          </div>
        </div>
      </div>
    </div>
  );
}

function ModalFeature({ icon, text }) {
  return (
    <li className="flex items-center gap-3 text-[13.5px] text-ink-700">
      <span className="w-7 h-7 rounded-lg bg-violet2-500/10 border border-violet2-500/20 text-violet2-600 flex items-center justify-center shrink-0">
        <Icon name={icon} className="w-3.5 h-3.5" />
      </span>
      {text}
    </li>
  );
}

Object.assign(window, { Seguridad, Pricing, CtaAurora, Footer, LoginModal });