// Section 12: Resultados reales + Section 13: Built with you

const ResultsSection = () => {
  const rows = [
    { i: 'trend',  metric: 'Leads captados',         before: 'Lo que captas hoy',  pillBefore: '+180%',     afterRest: ' más leads' },
    { i: 'bolt',   metric: 'Tiempo de respuesta',    before: '3 horas',            pillBefore: '5 minutos', afterRest: '' },
    { i: 'check',  metric: 'Calidad de leads',       before: '15% calificados',    pillBefore: '70%',       afterRest: ' calificados' },
    { i: 'chart',  metric: 'Tasa de conversión',     before: 'Tu tasa actual',     pillBefore: null,        afterRest: 'Multiplicada ', pillAfter: '× 2.3' },
    { i: 'clock',  metric: 'Productividad',          before: 'Trabajo manual',     pillBefore: '+12 horas', afterRest: ' ahorradas/semana' },
    { i: 'zap',    metric: 'Posición SEO',           before: 'Página 2 de Google', pillBefore: 'Top 3',     afterRest: ' de página 1' },
  ];

  const Underline = ({ children }) => (
    <span style={{
      backgroundImage: 'linear-gradient(90deg, #54B5E3, #C69CFF)',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% 1.5px',
      backgroundPosition: '0 100%',
      paddingBottom: 3,
      whiteSpace: 'nowrap',
    }}>
      {children}
    </span>
  );

  const renderAfter = (r) => {
    if (r.pillAfter) {
      return <>{r.afterRest}<Underline>{r.pillAfter}</Underline></>;
    }
    return <><Underline>{r.pillBefore}</Underline>{r.afterRest}</>;
  };

  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }} className="reveal">
          <div className="eyebrow" style={{ marginBottom: 16 }}><span className="eyebrow-dot" />Resultados reales</div>
          <h2 style={{
            fontSize: 'clamp(26px, 3.2vw, 36px)',
            fontWeight: 600,
            letterSpacing: '-0.02em',
            lineHeight: 1.15,
            marginBottom: 14,
            textWrap: 'balance',
          }}>
            Esto es lo que cambia en <span className="grad-text">30 días</span> con CloserBroker.
          </h2>
          <p style={{ fontSize: 15.5, color: 'var(--fg-soft)', textWrap: 'pretty', lineHeight: 1.6, maxWidth: 620, margin: '0 auto' }}>
            Resultados típicos que vemos en agencias que migran a CloserBroker.
          </p>
        </div>

        <div className="reveal results-card" style={{
          maxWidth: 1040,
          margin: '0 auto',
          background: '#fff',
          borderRadius: 20,
          border: '1px solid var(--border)',
          boxShadow: 'var(--shadow)',
          overflow: 'hidden',
        }}>
          {/* Header */}
          <div className="results-head" style={{
            display: 'grid',
            gridTemplateColumns: '36px minmax(0, 30fr) minmax(0, 28fr) 24px minmax(0, 38fr)',
            alignItems: 'center',
            gap: 20,
            padding: '18px 32px',
            borderBottom: '1px solid var(--border-soft)',
            background: '#fafbfc',
          }}>
            <div />
            <div className="mono" style={{ fontSize: 11, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>Métrica</div>
            <div className="mono" style={{ fontSize: 11, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>Antes</div>
            <div />
            <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>
              <span className="grad-text">Después</span>
            </div>
          </div>

          {/* Rows */}
          {rows.map((r, idx) => (
            <div key={idx} className="results-row" style={{
              display: 'grid',
              gridTemplateColumns: '36px minmax(0, 30fr) minmax(0, 28fr) 24px minmax(0, 38fr)',
              alignItems: 'center',
              gap: 20,
              padding: '20px 32px',
              borderTop: idx === 0 ? 'none' : '1px solid var(--border-soft)',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: 'var(--grad-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={r.i} size={15} color="#54B5E3" />
              </div>
              <div className="results-metric" style={{ fontSize: 14.5, color: 'var(--fg)', fontWeight: 600, letterSpacing: '-0.005em' }}>
                {r.metric}
              </div>
              <div className="results-before" style={{ fontSize: 13.5, color: '#9ca3af', fontWeight: 400 }}>
                {r.before}
              </div>
              <div className="results-arrow" style={{ display: 'flex', justifyContent: 'center', color: '#c69cff' }}>
                <Icon name="arrow" size={16} color="#c69cff" />
              </div>
              <div className="results-after" style={{ fontSize: 14.5, color: 'var(--fg)', fontWeight: 700 }}>
                {renderAfter(r)}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .results-head { display: none !important; }
          .results-row {
            grid-template-columns: 36px 1fr !important;
            gap: 14px !important;
            padding: 18px 20px !important;
            align-items: flex-start !important;
          }
          .results-row > .results-metric {
            grid-column: 2 / 3;
            font-size: 15px !important;
            margin-bottom: 6px;
          }
          .results-row > .results-before,
          .results-row > .results-after {
            grid-column: 2 / 3;
            font-size: 13.5px !important;
          }
          .results-row > .results-arrow {
            grid-column: 2 / 3;
            justify-content: flex-start !important;
            transform: rotate(90deg);
            transform-origin: left center;
            margin: 4px 0 4px 8px;
          }
          .results-row > .results-before::before {
            content: 'Antes · ';
            font-family: 'Geist Mono', monospace;
            font-size: 10.5px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #9ca3af;
            margin-right: 4px;
          }
          .results-row > .results-after::before {
            content: 'Después · ';
            font-family: 'Geist Mono', monospace;
            font-size: 10.5px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #54B5E3;
            margin-right: 4px;
            font-weight: 600;
          }
        }
      `}</style>
    </section>
  );
};

const BuiltWith = () => {
  const [text, setText] = React.useState('');
  const messages = [
    'Integrar Stripe para pagos de comisiones',
    'Recordatorio automático antes de visitas',
    'Reporte mensual de mi equipo por correo',
    'Etiquetas de color por tipo de prospecto',
  ];
  React.useEffect(() => {
    let mi = 0, ci = 0;
    const interval = setInterval(() => {
      const msg = messages[mi];
      if (ci <= msg.length) {
        setText(msg.slice(0, ci));
        ci++;
      } else {
        setTimeout(() => { ci = 0; mi = (mi + 1) % messages.length; }, 1500);
      }
    }, 50);
    return () => clearInterval(interval);
  }, []);

  return (
    <section style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot" />Construido contigo</div>
            <h2 className="h2" style={{ marginBottom: 20, textWrap: 'balance' }}>
              Construido contigo. <span className="serif" style={{fontStyle:'italic'}}>Literalmente.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, marginBottom: 24, textWrap: 'pretty' }}>
              Dentro de CloserBroker tenemos un botón que dice <strong>"Sugerir funcionalidad"</strong>. No es decoración. Cada idea que llega de una agencia se evalúa, se prioriza y, si tiene sentido, se construye — rápido.
            </p>
            <p className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: 'var(--fg)', marginBottom: 24, textWrap: 'pretty' }}>
              Tu agencia es la que mejor sabe lo que necesita. Nosotros solo escribimos el código.
            </p>
            <div style={{ display: 'flex', gap: 24, fontSize: 14 }}>
              <div>
                <div className="grad-text" style={{ fontSize: 28, fontWeight: 600 }}>27</div>
                <div style={{ color: 'var(--fg-muted)' }}>Sugerencias recibidas</div>
              </div>
              <div>
                <div className="grad-text" style={{ fontSize: 28, fontWeight: 600 }}>24</div>
                <div style={{ color: 'var(--fg-muted)' }}>Construidas en 1 meses</div>
              </div>
            </div>
          </div>

          <div className="reveal reveal-delay-2" style={{
            background: '#fff', borderRadius: 20, padding: 28, border: '1px solid var(--border)', boxShadow: 'var(--shadow)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="sparkle" size={16} color="#C69CFF" />
                <div style={{ fontSize: 14, fontWeight: 600 }}>Sugerir funcionalidad</div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)' }}>Configuración</div>
            </div>
            <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-soft)', minHeight: 80, fontSize: 14, color: 'var(--fg-soft)', marginBottom: 16, border: '1px solid var(--border-soft)' }}>
              {text}<span style={{ display: 'inline-block', width: 1.5, height: 16, background: '#C69CFF', verticalAlign: 'middle', marginLeft: 1, animation: 'pulse 1s infinite' }} />
            </div>
            <button className="btn btn-grad" style={{ width: '100%' }}><span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>Enviar sugerencia<Icon name="arrow" size={14} /></span></button>

            <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border-soft)' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10 }}>Construidas recientemente</div>
              {[
                { t: 'Atribución por round-robin ponderado', a: 'sugerido por Inmobiliaria Aura' },
                { t: 'Plantillas de mensajes WhatsApp', a: 'sugerido por Casa & Vida' },
                { t: 'Lead scoring por interacción', a: 'sugerido por Hogar Premium' },
              ].map((it, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '8px 0', borderTop: i === 0 ? 'none' : '1px solid var(--border-soft)' }}>
                  <Icon name="check" size={14} color="#16a34a" />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{it.t}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{it.a}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Testimonials = ResultsSection;
window.BuiltWith = BuiltWith;