// Sofía — sección de presentación en la home (justo después del hero).
// Compacta: el personaje + 2 promesas (copiloto del CRM por voz/texto + atención 24/7).

const SofiaHome = () => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const country = (ctx && ctx.country) || 'co';
  const sofiaHref = `/${country}/funcionalidades/sofia/`;

  const features = [
    {
      i: 'sparkle',
      title: 'Tu copiloto, por voz o texto',
      desc: 'Dile lo que quieras por WhatsApp — hasta con una nota de voz — y ejecuta todo en tu CRM: agenda visitas, mueve leads, registra ventas, hasta publica propiedades.',
    },
    {
      i: 'whatsapp',
      title: 'Atiende a tus clientes 24/7',
      desc: 'Responde sola a tus prospectos en WhatsApp, Messenger e Instagram, los califica y te los pasa listos para cerrar — de día, de noche y en fin de semana.',
    },
  ];

  return (
    <section className="cb-sofia-home" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Soft brand glows — masked to fade in/out at the edges so there is no
          hard seam with the sections above and below. */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          pointerEvents: 'none',
          WebkitMaskImage: 'linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 130px), transparent 100%)',
          maskImage: 'linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 130px), transparent 100%)',
        }}
      >
        <div style={{ position: 'absolute', top: -60, left: '6%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(84,181,227,0.16) 0%, transparent 70%)', filter: 'blur(40px)' }} />
        <div style={{ position: 'absolute', bottom: -120, right: '6%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(198,156,255,0.14) 0%, transparent 70%)', filter: 'blur(40px)' }} />
      </div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="cb-sofia-grid">
          {/* Character */}
          <div className="cb-sofia-visual reveal">
            <div className="cb-sofia-glow" aria-hidden="true" />
            <img
              src="/assets/sofia-character.webp"
              alt="Sofía, la agente de IA de CloserBroker"
              className="cb-sofia-char"
              width="900"
              height="1200"
              loading="lazy"
            />
            {/* Floating chat accents: voice note → done */}
            <div className="cb-sofia-bubble cb-sofia-bubble-in" aria-hidden="true">
              <span className="cb-sofia-wave"><i /><i /><i /><i /><i /></span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)' }}>0:07</span>
            </div>
            <div className="cb-sofia-bubble cb-sofia-bubble-out" aria-hidden="true">
              <Icon name="check" size={13} color="#16a34a" />
              <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--fg)' }}>Visita agendada</span>
            </div>
          </div>

          {/* Content */}
          <div className="cb-sofia-content reveal reveal-delay-1">
            <div className="eyebrow" style={{ marginBottom: 18 }}>
              <span className="eyebrow-dot" />Inteligencia artificial
            </div>
            <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12, marginBottom: 16, textWrap: 'balance' }}>
              <span style={{ color: 'var(--fg)' }}>Conoce a </span>
              <span className="grad-text" style={{ fontWeight: 700, letterSpacing: '-0.025em' }}>Sofía</span>
              <span style={{ color: 'var(--fg)' }}>, </span>
              <span className="serif" style={{ fontStyle: 'italic' }}>tu agente de IA.</span>
            </h2>
            <p style={{ fontSize: 16.5, color: 'var(--fg-soft)', lineHeight: 1.6, textWrap: 'pretty', maxWidth: 520, marginBottom: 28 }}>
              Una IA que trabaja como un miembro más de tu equipo: controla tu CRM cuando se lo pides, y atiende a tus clientes cuando tú no puedes.
            </p>

            <div className="cb-sofia-features">
              {features.map((f, i) => (
                <div key={i} className="cb-sofia-feature">
                  <div className="cb-sofia-feature-icon"><Icon name={f.i} size={18} color="#54B5E3" /></div>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.005em', marginBottom: 5 }}>{f.title}</div>
                    <div style={{ fontSize: 14, color: 'var(--fg-soft)', lineHeight: 1.55, textWrap: 'pretty' }}>{f.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            <a href={sofiaHref} className="btn btn-secondary" style={{ marginTop: 28 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                Descubre todo lo que hace Sofía
                <Icon name="arrow" size={14} />
              </span>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        .cb-sofia-home { padding-top: 72px; padding-bottom: 72px; }
        .cb-sofia-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center; max-width: 1100px; margin: 0 auto; }
        .cb-sofia-visual { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 380px; }
        .cb-sofia-glow { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(198,156,255,0.30), rgba(84,181,227,0.18) 45%, transparent 70%); filter: blur(10px); }
        .cb-sofia-char { position: relative; width: 100%; max-width: 420px; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(15,23,42,0.16)); animation: cbSofiaFloat 6s ease-in-out infinite; }
        .cb-sofia-bubble { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 28px -12px rgba(15,23,42,0.22); white-space: nowrap; }
        .cb-sofia-bubble-in { top: 12%; left: -4%; border-bottom-left-radius: 4px; animation: cbSofiaFloat 5s ease-in-out infinite; }
        .cb-sofia-bubble-out { bottom: 14%; right: -2%; border-bottom-right-radius: 4px; animation: cbSofiaFloat 5.6s ease-in-out infinite 0.4s; }
        .cb-sofia-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
        .cb-sofia-wave i { width: 2.5px; border-radius: 2px; background: linear-gradient(#54B5E3, #C69CFF); transform-origin: center; animation: cbSofiaWave 1s ease-in-out infinite; }
        .cb-sofia-wave i:nth-child(1) { height: 6px; animation-delay: 0s; }
        .cb-sofia-wave i:nth-child(2) { height: 12px; animation-delay: .12s; }
        .cb-sofia-wave i:nth-child(3) { height: 16px; animation-delay: .24s; }
        .cb-sofia-wave i:nth-child(4) { height: 10px; animation-delay: .36s; }
        .cb-sofia-wave i:nth-child(5) { height: 7px; animation-delay: .48s; }
        .cb-sofia-features { display: flex; flex-direction: column; gap: 20px; }
        .cb-sofia-feature { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start; }
        .cb-sofia-feature-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        @keyframes cbSofiaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        @keyframes cbSofiaWave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
        @media (max-width: 860px) {
          .cb-sofia-home { padding-top: 56px; padding-bottom: 56px; }
          .cb-sofia-grid { grid-template-columns: 1fr; gap: 12px; max-width: 540px; text-align: center; }
          .cb-sofia-visual { min-height: 300px; order: -1; }
          .cb-sofia-char { max-width: 280px; }
          .cb-sofia-content > p { margin-left: auto; margin-right: auto; }
          .cb-sofia-features { text-align: left; margin-top: 8px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .cb-sofia-char, .cb-sofia-bubble, .cb-sofia-wave i { animation: none !important; }
        }
      `}</style>
    </section>
  );
};

window.SofiaHome = SofiaHome;