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

// Lead Engine AI sub-brand
const LE = {
  deep:    '#007A85',
  mint:    '#82E5C5',
  bg:      'var(--sub-leadgen-bg)',
  bgDark:  '#003F44',
};

// ============================================================
// HERO
// ============================================================
function LeHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 50% 0%, ${LE.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 80 }} color={LE.mint} opacity={0.45} size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color="var(--cyan-200)" opacity={0.28} size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(20,47,50,0.05) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
      }} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        {/* Breadcrumb */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em',
          marginBottom: 26,
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/ia" style={{ color: 'var(--fg3)' }}>ia</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: LE.deep, fontWeight: 600 }}>lead-engine</span>
        </div>

        <div className="le-hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56,
          alignItems: 'start',
        }}>
          {/* Left — text */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${LE.mint}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: LE.deep,
              }}>
                <Icon name="target" size={12} />
                FRSKO LeadGen · Producto IA
              </div>
              <span style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                color: 'var(--fg3)',
              }}>B2B · Pipeline</span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(40px, 5.4vw, 72px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Tu equipo de ventas<br/>
              merece hablar con gente que<br/>
              <span style={{ color: LE.deep, fontStyle: 'italic' }}>ya quiere comprar.</span>
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--fg2)', maxWidth: 560, margin: '0 0 32px',
            }}>
              Lead Engine AI capta, enriquece, califica y hace el primer contacto con tus prospectos de forma automática. Tu equipo comercial entra en escena cuando el lead ya está tibio.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar demo de 20 min
              </Button>
              <Button variant="ghost" size="lg" icon="chart" onClick={() => {
                document.getElementById('roi')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Calcular mi ROI potencial
              </Button>
            </div>

            {/* Trust line */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: LE.deep }} /> 1–2 semanas onboarding
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: LE.deep }} /> ES / EN
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: LE.deep }} /> MX / LATAM / USA / ES
              </div>
            </div>
          </div>

          {/* Right — Dashboard preview */}
          <DashboardPreview />
        </div>
      </Container>
    </section>
  );
}

function DashboardPreview() {
  const leads = [
    { name: 'Alejandra Robles', co: 'Fintech mexicana · CTO', score: 'A', tone: 'A', signal: 'Abrió email · visitó /precios' },
    { name: 'Diego Hernández',  co: 'SaaS B2B · VP Sales',    score: 'A', tone: 'A', signal: 'Respondió en LinkedIn' },
    { name: 'María Sánchez',    co: 'Retail · Head of Growth',score: 'B', tone: 'B', signal: '2 visitas al sitio' },
    { name: 'Tomás Iglesias',   co: 'Logística · COO',         score: 'B', tone: 'B', signal: 'Abrió email 3 veces' },
    { name: 'Patricia Núñez',   co: 'Healthtech · Founder',    score: 'C', tone: 'C', signal: 'Sin actividad' },
  ];
  const toneMap = {
    A: { bg: LE.deep,           fg: '#fff',          ring: 'rgba(0,122,133,0.3)' },
    B: { bg: 'var(--cyan-100)', fg: 'var(--cyan-800)', ring: 'rgba(0,179,186,0.2)' },
    C: { bg: 'var(--ink-100)',  fg: 'var(--ink-600)',  ring: 'transparent' },
  };

  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      boxShadow: 'var(--shadow-lg)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Window chrome */}
      <div style={{
        padding: '12px 16px',
        background: 'var(--ink-25)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: '#FF5F57' }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: '#FEBC2E' }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: '#27C840' }} />
        </div>
        <div style={{
          flex: 1,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', textAlign: 'center',
        }}>app.frsko.com/lead-engine</div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: LE.deep,
          padding: '3px 8px', borderRadius: 999, background: LE.bg,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#22A06B',
            animation: 'lePulse 2s infinite',
          }} />
          Live
        </div>
      </div>

      {/* KPI strip */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        borderBottom: '1px solid var(--border)',
      }}>
        {[
          { v: '247', l: 'Prospectos' },
          { v: '78', l: 'Calificados A/B' },
          { v: '12', l: 'Reuniones' },
        ].map((k, i) => (
          <div key={k.l} style={{
            padding: '16px 20px',
            borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 26, letterSpacing: '-0.025em', color: LE.deep,
              lineHeight: 1,
            }}>{k.v}</div>
            <div style={{ fontSize: 11.5, color: 'var(--fg3)', marginTop: 4 }}>{k.l}</div>
          </div>
        ))}
      </div>

      {/* List header */}
      <div style={{
        padding: '12px 18px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderBottom: '1px solid var(--border)',
        fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--fg3)',
      }}>
        <span>Hoy · 5 nuevos</span>
        <span style={{ color: LE.deep }}>Score IA</span>
      </div>

      {/* Lead rows */}
      <div>
        {leads.map((l, i) => {
          const t = toneMap[l.tone];
          return (
            <div key={l.name} style={{
              padding: '14px 18px',
              borderBottom: i < leads.length - 1 ? '1px solid var(--border)' : 'none',
              display: 'flex', alignItems: 'center', gap: 14,
              transition: 'background var(--dur-fast) var(--ease-out)',
              animation: `leSlide 480ms var(--ease-out) ${i * 90}ms both`,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 999,
                background: 'var(--ink-100)',
                display: 'grid', placeItems: 'center',
                color: 'var(--ink-600)',
                fontWeight: 600, fontSize: 12, flexShrink: 0,
              }}>{l.name.split(' ').map(s => s[0]).slice(0, 2).join('')}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg1)' }}>{l.name}</div>
                <div style={{ fontSize: 12, color: 'var(--fg3)', marginTop: 1 }}>{l.co}</div>
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--fg3)', textAlign: 'right', maxWidth: 160 }}>{l.signal}</div>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: t.bg, color: t.fg,
                display: 'grid', placeItems: 'center',
                fontWeight: 700, fontSize: 13,
                boxShadow: `0 0 0 4px ${t.ring}`,
                flexShrink: 0,
              }}>{l.score}</div>
            </div>
          );
        })}
      </div>

      {/* Footer hint */}
      <div style={{
        padding: '12px 18px',
        background: LE.bg,
        fontSize: 12,
        color: LE.deep,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkles" size={13} /> IA escribió primer contacto para 5 leads
        </span>
        <span style={{ fontWeight: 600 }}>Ver flujo →</span>
      </div>

      <style>{`
        @keyframes lePulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(34,160,107,0.4); }
          50% { box-shadow: 0 0 0 6px rgba(34,160,107,0); }
        }
        @keyframes leSlide {
          from { opacity: 0; transform: translateX(8px); }
          to { opacity: 1; transform: translateX(0); }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function LeProblem() {
  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'left' }}>
          <Eyebrow>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(32px, 4.4vw, 60px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 32px', color: 'var(--fg1)',
            textWrap: 'pretty',
          }}>
            El <span style={{
              background: `linear-gradient(180deg, transparent 60%, ${LE.mint} 60%)`,
              padding: '0 6px',
              color: 'var(--fg1)',
              fontStyle: 'italic',
            }}>80%</span> del tiempo de tu equipo de ventas se va en leads que nunca van a comprar.
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
            marginTop: 32,
          }}>
            <div>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Tus mejores vendedores no deberían estar buscando prospectos en LinkedIn, escribiendo el mismo correo veinte veces o calificando leads a mano en el CRM.
              </p>
              <p style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.025em',
                color: LE.deep, margin: 0,
              }}>
                Deberían estar cerrando.
              </p>
            </div>

            <div style={{
              background: 'var(--ink-25)',
              border: '1px solid var(--border)',
              borderRadius: 20, padding: '24px 28px',
              display: 'flex', flexDirection: 'column', justifyContent: 'center',
            }}>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 12,
              }}>El diagnóstico real</div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg1)', margin: 0 }}>
                El problema no es tu equipo — es que nadie les está entregando los leads correctos en el momento correcto.
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// HOW IT WORKS — 4 STEPS
// ============================================================
function LeHowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Identificación',
      icon: 'target',
      body: 'Definimos tu perfil de cliente ideal (ICP) con criterios precisos: industria, tamaño de empresa, cargo, señales de compra recientes.',
      tag: 'Apollo · Clay',
      detail: 'Listas de prospectos verificados, no bases de datos genéricas.',
    },
    {
      n: '02',
      title: 'Enriquecimiento',
      icon: 'sparkles',
      body: 'Cada prospecto se enriquece automáticamente con datos de empresa, actividad reciente, tecnología que usan y noticias relevantes.',
      tag: 'Claude · APIs',
      detail: 'Un perfil que tu vendedor tardaría 30 minutos en armar — en segundos.',
    },
    {
      n: '03',
      title: 'Calificación',
      icon: 'check',
      body: 'Claude evalúa cada prospecto con tu criterio (BANT, MEDDIC o el tuyo propio) y le asigna prioridad A, B, C o D.',
      tag: 'Claude · BANT/MEDDIC',
      detail: 'Solo los A y B llegan a tu equipo. El resto sigue en nurturing.',
    },
    {
      n: '04',
      title: 'Primer contacto',
      icon: 'mail',
      body: 'La IA redacta y envía mensajes personalizados por el canal correcto — email, LinkedIn o WhatsApp — con contexto real del prospecto.',
      tag: 'Email · LinkedIn · WhatsApp',
      detail: 'No son plantillas. Son mensajes que suenan humanos.',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -120, top: 120 }} color={LE.mint} opacity={0.25} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Cómo funciona</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Cuatro pasos del prospecto frío<br/>
            al lead <span style={{ color: LE.deep }}>calificado</span>.
          </h2>
        </div>

        {/* Step rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 22,
              padding: '28px 32px',
              display: 'grid',
              gridTemplateColumns: '80px 1fr 1.2fr auto',
              gap: 32,
              alignItems: 'center',
              transition: 'all var(--dur-base) var(--ease-out)',
              position: 'relative',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = LE.deep; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = ''; }}>
              {/* Step number */}
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 13,
                color: LE.deep, fontWeight: 600,
                letterSpacing: '0.04em',
              }}>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontSize: 56,
                  fontWeight: 700, letterSpacing: '-0.04em',
                  color: 'var(--fg1)', lineHeight: 1,
                  marginBottom: 4,
                }}>{s.n}</div>
                <div>paso</div>
              </div>

              {/* Title + icon */}
              <div>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: LE.bg, color: LE.deep,
                  display: 'grid', placeItems: 'center', marginBottom: 14,
                }}>
                  <Icon name={s.icon} size={22} />
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 24, letterSpacing: '-0.025em',
                  margin: '0 0 8px', color: 'var(--fg1)',
                }}>{s.title}</h3>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11.5,
                  padding: '3px 8px',
                  background: 'var(--ink-50)',
                  borderRadius: 6,
                  color: 'var(--fg3)',
                  display: 'inline-block',
                }}>{s.tag}</div>
              </div>

              {/* Body */}
              <div>
                <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 10px' }}>
                  {s.body}
                </p>
                <p style={{
                  fontSize: 14, lineHeight: 1.5,
                  color: LE.deep, fontStyle: 'italic',
                  margin: 0,
                }}>
                  → {s.detail}
                </p>
              </div>

              {/* Arrow */}
              <div style={{
                width: 40, height: 40, borderRadius: 999,
                background: i === steps.length - 1 ? LE.deep : 'var(--ink-50)',
                color: i === steps.length - 1 ? '#fff' : 'var(--ink-400)',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name="arrow-right" size={18} />
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { LeHero, LeProblem, LeHowItWorks });