/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const LG = {
  teal:  '#007A85',
  mint:  '#82E5C5',
  bg:    '#EAF7F4',
  bgMid: '#C4EBE2',
  dark:  '#003F44',
};

// ============================================================
// B2B vs B2C
// ============================================================
function LgB2BvB2C() {
  return (
    <section style={{
      background: 'var(--ink-0)',
      borderTop: '1px solid var(--border)',
    }}>
      <style>{`
        .lg-b2b-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .lg-diff-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .lg-met-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        @media (max-width: 760px) {
          .lg-b2b-grid  { grid-template-columns: 1fr; }
          .lg-diff-grid { grid-template-columns: 1fr; }
          .lg-met-grid  { grid-template-columns: 1fr 1fr; }
        }
      `}</style>

      <Container style={{ padding: '88px 32px' }}>
        <Eyebrow style={{ marginBottom: 20 }}>PARA B2B Y PARA B2C</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 3.5vw, 40px)',
          fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
          margin: '0 0 48px', color: 'var(--fg1)', maxWidth: 640,
        }}>Con enfoques distintos, porque los mercados son distintos.</h2>

        <div className="lg-b2b-grid">
          {/* B2B — dark card */}
          <div style={{
            padding: '36px 32px',
            background: 'var(--fg1)', borderRadius: 24,
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '4px 12px', borderRadius: 999,
              background: LG.bg, color: LG.dark,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 22,
            }}>
              <Icon name="briefcase" size={11} color={LG.teal} />
              B2B
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700,
              letterSpacing: '-0.025em', margin: '0 0 10px', lineHeight: 1.2, color: '#fff',
            }}>Ciclo largo, ticket alto.</h3>
            <p style={{
              fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)',
              margin: '0 0 26px',
            }}>
              Foco en calidad de prospecto sobre volumen. Calificación rigurosa
              antes de que el lead llegue a ventas.
            </p>
            {[
              'Outbound estructurado: LinkedIn, email y WhatsApp Business',
              'Calificación por criterios ICP antes de contactar a ventas',
              'Integración con CRM para seguimiento de pipeline completo',
              'Reportería semanal con CAC, tasa de cierre y pipeline proyectado',
            ].map(item => (
              <div key={item} style={{
                display: 'flex', alignItems: 'flex-start', gap: 10,
                fontSize: 13.5, lineHeight: 1.55,
                color: 'rgba(255,255,255,0.78)', marginBottom: 12,
              }}>
                <Icon name="check" size={13} color={LG.mint}
                  style={{ marginTop: 2, flexShrink: 0 }} />
                {item}
              </div>
            ))}
          </div>

          {/* B2C — light card */}
          <div style={{
            padding: '36px 32px',
            background: LG.bg, border: `1px solid ${LG.mint}`,
            borderRadius: 24,
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '4px 12px', borderRadius: 999,
              background: '#fff', border: `1px solid ${LG.mint}`,
              color: LG.dark,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 22,
            }}>
              <Icon name="users" size={11} color={LG.teal} />
              B2C
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700,
              letterSpacing: '-0.025em', margin: '0 0 10px', lineHeight: 1.2, color: 'var(--fg1)',
            }}>Volumen, velocidad y conversión.</h3>
            <p style={{
              fontSize: 14, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 26px',
            }}>
              Foco en captación masiva con filtros de calificación temprana. Especialmente
              efectivo en bienes raíces, educación, salud y servicios de ticket medio.
            </p>
            {[
              'Paid media + landing pages optimizadas con neuromarketing',
              'Nurturing automatizado y activación inmediata del lead',
              'Calificación con lead scoring automático',
              'Ciclos cortos: lead → contacto en menos de 15 minutos',
            ].map(item => (
              <div key={item} style={{
                display: 'flex', alignItems: 'flex-start', gap: 10,
                fontSize: 13.5, lineHeight: 1.55,
                color: 'var(--fg2)', marginBottom: 12,
              }}>
                <Icon name="check" size={13} color={LG.teal}
                  style={{ marginTop: 2, flexShrink: 0 }} />
                {item}
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// DIFFERENTIATORS
// ============================================================
function LgDiff() {
  const diffs = [
    {
      icon: 'brain', dark: false,
      label: 'Neuroventas',
      body: 'Entrenamos a tu equipo en los principios de neuromarketing aplicados a la venta: construir confianza rápidamente, manejar objeciones desde el comportamiento del comprador, estructurar el argumento para que conecte emocionalmente antes que racionalmente.',
    },
    {
      icon: 'clipboard', dark: true,
      label: 'Proceso consultivo',
      body: 'Tu equipo de ventas no solo recibe leads — recibe un proceso documentado y probado para convertirlos. Desde el primer saludo hasta el cierre y el manejo de objeciones específicas de tu industria.',
    },
    {
      icon: 'sparkles', dark: false,
      label: 'IA como acelerador',
      body: 'Usamos inteligencia artificial para análisis de prospectos, personalización de mensajes y detección de señales de compra en tu base de datos existente. La estrategia es humana; la velocidad es de la IA.',
    },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '88px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 56,
          alignItems: 'start', marginBottom: 52,
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>EL DIFERENCIAL</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.2vw, 38px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
              margin: 0, color: 'var(--fg1)',
            }}>Ventas consultivas + neuromarketing + inteligencia artificial.</h2>
          </div>
          <p style={{
            fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0, paddingTop: 30,
          }}>
            La mayoría de los servicios de lead generation son en realidad servicios de captación:
            te traen nombres y correos. FRSKO LeadGen incluye tres capas que la mayoría no tiene.
          </p>
        </div>

        <div className="lg-diff-grid">
          {diffs.map(d => (
            <div key={d.label} style={{
              padding: '32px 28px',
              background: d.dark ? 'var(--fg1)' : LG.bg,
              border: d.dark ? 'none' : `1px solid ${LG.mint}`,
              borderRadius: 24,
              transition: 'transform 200ms var(--ease-out)',
            }}
            onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
            >
              <div style={{
                width: 44, height: 44, borderRadius: 14, marginBottom: 18,
                background: d.dark ? 'rgba(255,255,255,0.1)' : '#fff',
                border: d.dark ? '1px solid rgba(255,255,255,0.15)' : `1px solid ${LG.mint}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={d.icon} size={20} color={d.dark ? LG.mint : LG.teal} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.2,
                margin: '0 0 12px', color: d.dark ? '#fff' : 'var(--fg1)',
              }}>{d.label}</h3>
              <p style={{
                fontSize: 14, lineHeight: 1.65, margin: 0,
                color: d.dark ? 'rgba(255,255,255,0.65)' : 'var(--fg2)',
              }}>{d.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// METRICS
// ============================================================
function LgMetrics() {
  const metrics = [
    { icon: 'chart',        label: 'Volumen de leads generados',            desc: 'Salud del canal de entrada' },
    { icon: 'target',       label: 'Tasa de calificación',                  desc: 'Calidad del targeting y el mensaje' },
    { icon: 'zap',          label: 'Tiempo lead → primera reunión',         desc: 'Velocidad del sistema' },
    { icon: 'check',        label: 'Tasa de cierre sobre leads calificados', desc: 'Calidad del lead y del proceso de ventas' },
    { icon: 'credit-card',  label: 'Costo de adquisición de cliente (CAC)', desc: 'Rentabilidad del sistema' },
    { icon: 'scale',        label: 'Lifetime Value / CAC',                  desc: 'Salud financiera del modelo de negocio' },
  ];

  return (
    <section style={{
      background: 'var(--ink-0)',
      borderTop: '1px solid var(--border)',
    }}>
      <Container style={{ padding: '88px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56,
          alignItems: 'start', marginBottom: 48,
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>MÉTRICAS</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.2vw, 38px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
              margin: 0, color: 'var(--fg1)',
            }}>Lo que medimos semana a semana.</h2>
          </div>
          <p style={{
            fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0, paddingTop: 28,
          }}>
            No reportamos likes ni impresiones. Cada métrica tiene un dueño, un objetivo y
            un plan de acción si no se cumple. Todo en el mismo reporte semanal.
          </p>
        </div>

        <div className="lg-met-grid">
          {metrics.map(m => (
            <div key={m.label} style={{
              padding: '24px', background: '#fff', border: '1px solid var(--border)',
              borderRadius: 18, display: 'flex', gap: 16, alignItems: 'flex-start',
              transition: 'border-color 200ms, box-shadow 200ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = LG.mint;
              e.currentTarget.style.boxShadow = `0 0 0 4px ${LG.bg}`;
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'var(--border)';
              e.currentTarget.style.boxShadow = 'none';
            }}
            >
              <div style={{
                width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: LG.bg, border: `1px solid ${LG.mint}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={m.icon} size={16} color={LG.teal} />
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 14, lineHeight: 1.3, color: 'var(--fg1)', marginBottom: 5,
                }}>{m.label}</div>
                <div style={{ fontSize: 12, color: 'var(--fg3)', lineHeight: 1.45 }}>{m.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function LgFaq() {
  const [open, setOpen] = React.useState(null);

  const faqs = [
    {
      q: '¿En qué se diferencia este servicio de Lead Engine AI?',
      a: 'Lead Engine AI es un producto automatizado para prospección B2B: identifica, enriquece y contacta prospectos fríos con IA de forma escalable. FRSKO LeadGen es el servicio más amplio: incluye estrategia de adquisición, construcción del funnel completo, operación continua y capacitación del equipo de ventas. Muchos clientes usan ambos juntos.',
    },
    {
      q: '¿Cuánto tarda en construirse el sistema?',
      a: 'La fase de construcción toma entre 4 y 8 semanas dependiendo de la complejidad de tu proceso de ventas y los canales que activemos. La operación continua comienza desde la semana 1 con los canales que ya tienes activos.',
    },
    {
      q: '¿Necesito tener CRM?',
      a: 'Recomendamos HubSpot o Pipedrive, pero podemos trabajar con el CRM que ya uses. Si no tienes CRM, parte del servicio incluye la configuración básica de uno.',
    },
    {
      q: '¿Trabajan con empresas que venden directamente al consumidor final?',
      a: 'Sí. Tenemos metodología diferenciada para B2C, especialmente en bienes raíces, educación, salud y servicios de ticket medio. El enfoque es diferente al B2B pero igual de sistemático.',
    },
    {
      q: '¿Mi equipo de ventas tiene que cambiar su forma de trabajar?',
      a: 'El sistema se diseña para integrarse en el flujo de trabajo de tu equipo, no para reemplazarlo. La curva de adopción suele ser de 2 a 3 semanas.',
    },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '88px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 64, alignItems: 'start' }}>
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>FAQ</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.2vw, 38px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
              margin: 0, color: 'var(--fg1)',
            }}>Preguntas frecuentes</h2>
          </div>

          <div>
            {faqs.map((f, i) => (
              <div key={i} style={{
                borderRadius: 16, marginBottom: 10, overflow: 'hidden',
                border: `1px solid ${open === i ? LG.mint : 'var(--border)'}`,
                background: open === i ? LG.bg : '#fff',
                transition: 'border-color 200ms, background 200ms',
              }}>
                <button style={{
                  width: '100%', padding: '18px 22px',
                  background: 'none', border: 'none', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  gap: 16, textAlign: 'left',
                }} onClick={() => setOpen(open === i ? null : i)}>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontWeight: 700,
                    fontSize: 15, lineHeight: 1.35, color: 'var(--fg1)',
                  }}>{f.q}</span>
                  <Icon name="arrow-right" size={14}
                    color={open === i ? LG.teal : 'var(--fg3)'}
                    style={{
                      transform: open === i ? 'rotate(90deg)' : 'rotate(0deg)',
                      transition: 'transform 200ms', flexShrink: 0,
                    }} />
                </button>
                {open === i && (
                  <div style={{ padding: '0 22px 20px' }}>
                    <p style={{
                      fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0,
                    }}>{f.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// CTA
// ============================================================
function LgCta({ onCta }) {
  return (
    <section style={{
      background: `linear-gradient(160deg, ${LG.dark} 0%, #1A2F35 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -80, top: -40 }} color={LG.mint} opacity={0.18} size={320} />
      <Droplets style={{ left: -60, bottom: -60 }} color={LG.teal} opacity={0.12} size={280} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto' }}>
          <Eyebrow style={{ color: LG.mint, marginBottom: 24 }}>DIAGNÓSTICO DE 45 MINUTOS</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(30px, 4.5vw, 52px)',
            fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.08,
            margin: '0 0 20px',
            background: `linear-gradient(135deg, #fff 30%, ${LG.mint})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>
            ¿Cuántos clientes nuevos necesitas al mes para que tu negocio crezca bien?
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.6,
            color: 'rgba(255,255,255,0.65)', margin: '0 0 40px',
          }}>
            Esa respuesta define el sistema que necesitas. Empieza con un diagnóstico donde
            revisamos tu proceso actual, tu mercado y calculamos qué tan lejos está ese
            objetivo de donde estás hoy.
          </p>

          <div style={{
            display: 'flex', justifyContent: 'center',
            gap: 12, flexWrap: 'wrap', marginBottom: 52,
          }}>
            <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
              Solicitar diagnóstico de pipeline
            </Button>
            <Button variant="inverse" size="lg" icon="arrow-right">
              Hablar con un estratega
            </Button>
          </div>

          {/* Stats strip */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 36,
          }}>
            {[
              { num: '+30',    label: 'empresas con sistema operando' },
              { num: '18 días', label: 'lead → primera reunión promedio' },
              { num: '34.8%',  label: 'tasa de cierre promedio' },
            ].map((s, i) => (
              <div key={s.num} style={{
                textAlign: 'center', padding: '0 24px',
                borderRight: i < 2 ? '1px solid rgba(255,255,255,0.12)' : 'none',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1,
                  color: LG.mint, marginBottom: 6,
                }}>{s.num}</div>
                <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { LgB2BvB2C, LgDiff, LgMetrics, LgFaq, LgCta });