// 3 Feature Spotlights: CRM, Sitio web, IA

const FeatureSpotlight = ({ eyebrow, title, body, bullets, mockup, cta, ctaHref, reverse, accent, differentiator, stamp }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center',
    direction: reverse ? 'rtl' : 'ltr',
  }}>
    <div style={{ direction: 'ltr' }} className="reveal">
      <div className="eyebrow" style={{ marginBottom: 20 }}>
        <span className="eyebrow-dot" style={{ background: accent }} />
        {eyebrow}
      </div>
      <h2 className="h2" style={{ marginBottom: 20, textWrap: 'balance' }}>{title}</h2>
      <p style={{ fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, marginBottom: 24, textWrap: 'pretty' }}>
        {body}
      </p>
      <ul style={{ listStyle: 'none', marginBottom: 28 }}>
        {bullets.map((b, i) => {
          const isObj = typeof b === 'object' && b !== null;
          return (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '8px 0', borderTop: i === 0 ? 'none' : '1px solid var(--border-soft)' }}>
              <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                <Icon name="check" size={11} color={accent} />
              </div>
              <span style={{ fontSize: 15, color: 'var(--fg-soft)' }}>
                {isObj ? <><strong style={{ color: 'var(--fg)', fontWeight: 600 }}>{b.b}</strong>{b.r}</> : b}
              </span>
            </li>
          );
        })}
      </ul>
      {differentiator && (
        <div style={{
          position: 'relative',
          padding: '18px 0 22px',
          marginBottom: 24,
          borderTop: '1px solid var(--border-soft)',
        }}>
          <div style={{
            position: 'absolute', top: -1, left: 0, width: 40, height: 2, background: accent,
          }} />
          <p className="serif" style={{
            fontStyle: 'italic',
            fontSize: 17,
            lineHeight: 1.55,
            color: 'var(--fg)',
            textWrap: 'pretty',
            letterSpacing: '-0.01em',
          }}>
            {differentiator}
          </p>
        </div>
      )}
      {stamp && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
          padding: '14px 16px', marginBottom: 24,
          background: 'var(--bg-muted)',
          border: '1px solid var(--border-soft)',
          borderRadius: 10,
        }}>
          <div style={{ display: 'flex', gap: 6, fontSize: 20, lineHeight: 1 }}>
            {stamp.flags.map((f, i) => (
              <span key={i} style={{ filter: 'saturate(1.05)' }}>{f}</span>
            ))}
          </div>
          <div style={{ width: 1, height: 18, background: 'var(--border)' }} />
          <span style={{ fontSize: 13, fontStyle: 'italic', color: 'var(--fg-muted)', letterSpacing: '-0.005em' }}>
            {stamp.text}
          </span>
        </div>
      )}
      <a href={ctaHref || '#'} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 500, color: 'var(--fg)' }}>
        {cta} <Icon name="arrow" size={14} />
      </a>
    </div>
    <div style={{ direction: 'ltr', position: 'relative' }} className="reveal reveal-delay-2">
      <div style={{ position: 'absolute', inset: -30, background: `radial-gradient(ellipse, ${accent}20, transparent 70%)`, filter: 'blur(30px)' }} />
      <div style={{ position: 'relative' }}>{mockup}</div>
    </div>
  </div>
);

const TemplateCarousel = () => {
  const [idx, setIdx] = React.useState(0);
  const names = ['Puro', 'Cielo', 'Horizon', 'Elegancia', 'Transparencia'];
  React.useEffect(() => {
    const i = setInterval(() => setIdx(x => (x + 1) % 5), 3500);
    return () => clearInterval(i);
  }, []);
  return (
    <div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {names.map((n, i) => (
          <button key={i} onClick={() => setIdx(i)} style={{
            padding: '6px 12px', fontSize: 12, borderRadius: 999,
            background: i === idx ? 'var(--fg)' : 'transparent',
            color: i === idx ? '#fff' : 'var(--fg-muted)',
            border: i === idx ? 'none' : '1px solid var(--border)',
            transition: 'all 0.2s',
          }}>{n}</button>
        ))}
      </div>
      <SitioMockup template={idx} />
    </div>
  );
};

const FeaturesSection = () => {
  const cbCtx = (typeof useCountry === 'function') ? useCountry() : null;
  const cbVocab = (cbCtx && cbCtx.vocab) || (window.CO_LOCALE && window.CO_LOCALE.vocab) || { agent: 'agente' };
  return (
  <section id="funcionalidades" style={{ background: 'var(--bg-soft)' }}>
    <div className="container">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 140 }}>
        <FeatureSpotlight
          eyebrow="CRM Inmobiliario"
          accent="#54B5E3"
          title={<>Un CRM hecho para vender propiedades, <span className="serif" style={{fontStyle:'italic'}}>no para llenar formularios</span>.</>}
          body={`Olvídate de los CRMs genéricos. CloserBroker fue diseñado para el trabajo real de un ${cbVocab.agent} inmobiliario — y se nota en cada función.`}
          bullets={[
            { b: 'Lead scoring automático', r: ' que te dice a quién priorizar' },
            { b: 'Atribución automática', r: ' de leads con reglas que tú defines' },
            { b: 'Pipelines separados', r: ' para que cada tipo de cliente tenga su proceso' },
            { b: 'Matching inteligente', r: ' cuando una nueva propiedad encaja con un lead' },
            { b: 'Selecciones personalizadas', r: ' que mandas a tu cliente en un click' },
          ]}
          cta="Ver cómo funciona el CRM"
          ctaHref={`/${(cbCtx && cbCtx.country) || 'co'}/funcionalidades/crm/`}
          mockup={<CRMMockup />}
        />

        <FeatureSpotlight
          eyebrow="Sitio web incluido"
          accent="#C69CFF"
          reverse
          title={<>Un sitio web que sí trae prospectos. <span className="serif" style={{fontStyle:'italic'}}>No un folleto digital bonito.</span></>}
          body={<>Donde otros CRMs inmobiliarios te dan un sitio web “que funciona”, nosotros te damos uno que <strong style={{ color: 'var(--fg)', fontWeight: 600 }}>vende</strong>. Cada plantilla está diseñada para convertir visitantes en leads — sin plugins, sin desarrolladores, sin facturas extra.</>}
          bullets={[
            { b: '5+ plantillas premium', r: ' diseñadas para agencias inmobiliarias' },
            { b: 'Editor visual', r: ' con preview en vivo — sin tocar código' },
            { b: 'SEO, blog y lead magnets', r: ' incluidos para captar tráfico orgánico' },
            { b: 'Dominio y hosting incluidos', r: ' — sin facturas extras' },
          ]}
          cta="Ver los templates en vivo"
          ctaHref={`/${(cbCtx && cbCtx.country) || 'co'}/funcionalidades/marketing/`}
          mockup={<TemplateCarousel />}
        />

        <FeatureSpotlight
          eyebrow="Inteligencia artificial integrada"
          accent="#54B5E3"
          title={<>La IA que te ahorra <span className="grad-text">horas cada semana.</span></>}
          body="¿Cuántas horas pasas cada semana redactando descripciones, escribiendo en el blog o respondiendo prospectos? Con CloserBroker, esas horas ahora son segundos."
          bullets={[
            { b: 'Descripciones de propiedades', r: ' optimizadas en segundos' },
            { b: 'Artículos de blog completos', r: ' para tu SEO, en un click' },
            { b: 'Asistencia en conversaciones', r: ' para responder más rápido y mejor' },
            { b: 'Detección de intención de compra', r: ' en mensajes y formularios' },
            { b: 'Sugerencias de propiedades', r: ' personalizadas para cada prospecto' },
          ]}
          stamp={{
            flags: ['🇲🇽', '🇨🇴', '🇦🇷', '🇨🇱', '🇵🇪'],
            text: 'Adaptado al vocabulario de cada región LATAM',
          }}
          cta="Ver la IA en acción"
          ctaHref={`/${(cbCtx && cbCtx.country) || 'co'}/funcionalidades/automatizaciones/`}
          mockup={<AIMockup />}
        />
      </div>
    </div>
  </section>
  );
};

window.FeaturesSection = FeaturesSection;