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

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

const PIPELINE_STAGES = [
  { label: 'Alcance calificado', count: '5,420', pct: 100, conv: null   },
  { label: 'Leads captados',     count: '342',   pct: 63,  conv: '6.3%' },
  { label: 'Calificados',        count: '89',    pct: 26,  conv: '26%'  },
  { label: 'Primera reunión',    count: '23',    pct: 8,   conv: '26%'  },
  { label: 'Propuesta enviada',  count: '14',    pct: 4,   conv: '61%'  },
];

// ============================================================
// PIPELINE FUNNEL — hero visual
// ============================================================
function PipelineFunnel() {
  const barColors = [
    LG.mint + '90', LG.mint, LG.teal + 'CC', LG.teal, LG.dark,
  ];

  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border)',
      borderRadius: 24, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
    }}>
      {/* 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 }}>
          {['#FF5F57','#FEBC2E','#27C840'].map(c => (
            <div key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c }} />
          ))}
        </div>
        <div style={{
          flex: 1, fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', textAlign: 'center',
        }}>Motor de adquisición · Semana 12</div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: LG.dark, padding: '3px 8px', borderRadius: 999, background: LG.bg,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#27C840',
            animation: 'lgDotPulse 2s ease-in-out infinite',
          }} />
          En vivo
        </div>
      </div>

      {/* Header row */}
      <div style={{
        padding: '14px 20px 6px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{
          fontSize: 9.5, fontWeight: 700, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'var(--fg3)',
        }}>FLUJO DE ADQUISICIÓN</span>
        <span style={{
          fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700, color: LG.teal,
        }}>SEM 12 / 52</span>
      </div>

      {/* Funnel rows */}
      <div style={{ padding: '4px 20px 14px' }}>
        {PIPELINE_STAGES.map((stage, i) => (
          <div key={stage.label} style={{ animation: `lgFadeUp 420ms var(--ease-out) ${i * 90}ms both` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0' }}>
              <div style={{
                width: 126, fontSize: 11, fontWeight: 500,
                color: 'var(--fg1)', flexShrink: 0,
              }}>{stage.label}</div>
              <div style={{
                flex: 1, height: 16, background: 'var(--ink-50)', borderRadius: 3, overflow: 'hidden',
              }}>
                <div style={{
                  height: '100%', borderRadius: 3,
                  background: barColors[i],
                  animation: `lgBarGrow 700ms var(--ease-out) ${i * 90 + 200}ms both`,
                  '--lg-bar-w': stage.pct + '%',
                }} />
              </div>
              <div style={{
                width: 44, textAlign: 'right', flexShrink: 0,
                fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: 'var(--fg1)',
              }}>{stage.count}</div>
            </div>
            {stage.conv && i < PIPELINE_STAGES.length - 1 && (
              <div style={{
                display: 'flex', alignItems: 'center', gap: 6,
                paddingLeft: 136, marginBottom: 2,
                animation: `lgFadeUp 300ms var(--ease-out) ${i * 90 + 300}ms both`,
              }}>
                <div style={{ width: 1, height: 10, background: 'var(--border-strong)', marginLeft: 12 }} />
                <span style={{
                  fontSize: 9.5, fontWeight: 600, color: LG.teal,
                  fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
                }}>↓ {stage.conv} conversión</span>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Stats footer */}
      <div style={{
        padding: '12px 20px',
        borderTop: '1px solid var(--border)',
        background: LG.bg,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
      }}>
        {[
          { label: 'CAC promedio',       value: '$4,200' },
          { label: 'Lead → reunión',     value: '18 días' },
          { label: 'Tasa de cierre',     value: '34.8%' },
        ].map((s, i) => (
          <div key={s.label} style={{
            textAlign: 'center', padding: '4px 8px',
            borderRight: i < 2 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 17, color: LG.teal, letterSpacing: '-0.02em',
            }}>{s.value}</div>
            <div style={{ fontSize: 9.5, color: 'var(--fg3)', marginTop: 1 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// HERO
// ============================================================
function LgHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 50% 0%, ${LG.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <style>{`
        @keyframes lgBarGrow  { from { width: 0% } to { width: var(--lg-bar-w) } }
        @keyframes lgFadeUp   { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes lgDotPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
        .lg-hero-grid    { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
        .lg-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
        .lg-step-row     { display: grid; grid-template-columns: 64px 1fr 2.5fr 96px; gap: 24px; align-items: start; }
        @media (max-width: 900px) {
          .lg-hero-grid    { grid-template-columns: 1fr; }
          .lg-hero-visual  { display: none; }
          .lg-problem-grid { grid-template-columns: 1fr; }
          .lg-step-row     { grid-template-columns: 48px 1fr; }
          .lg-step-body    { display: none; }
          .lg-step-tag     { display: none; }
        }
      `}</style>

      <Droplets style={{ right: -60, top: 60 }}  color={LG.mint} opacity={0.4}  size={240} />
      <Droplets style={{ left: -80, bottom: -40 }} color={LG.teal} opacity={0.2}  size={280} />

      <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="/servicios" style={{ color: 'var(--fg3)' }}>servicios</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: LG.teal, fontWeight: 600 }}>lead-generation</span>
        </div>

        <div className="lg-hero-grid">
          {/* Left — text */}
          <div>
            {/* Badge */}
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 22 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 14px', borderRadius: 999,
                background: '#fff', border: `1px solid ${LG.mint}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: LG.teal,
              }}>
                <Icon name="target" size={12} />
                FRSKO LeadGen · Generación de leads
              </div>
            </div>

            {/* H2 as page title */}
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(30px, 4.5vw, 50px)',
              fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.08,
              margin: '0 0 20px', color: 'var(--fg1)',
            }}>
              Un pipeline predecible no es suerte.{' '}
              <em style={{ fontStyle: 'italic', color: LG.teal }}>
                Es un sistema que alguien tiene que construir.
              </em>
            </h2>

            <p style={{
              fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)',
              margin: '0 0 32px', maxWidth: 520,
            }}>
              FRSKO LeadGen diseña y opera tu motor de adquisición de clientes: atracción,
              calificación, primer contacto y entrega a ventas. Para empresas B2B y B2C que
              quieren resultados comerciales predecibles, no campañas sueltas.
            </p>

            {/* CTAs */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 36 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar diagnóstico de pipeline
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-right"
                onClick={() => document.getElementById('sistema')?.scrollIntoView({ behavior: 'smooth' })}>
                Ver cómo funciona
              </Button>
            </div>

            {/* Trust pills */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['B2B y B2C', 'CRM incluido', 'Capacitación del equipo de ventas', 'Sin contratos anuales'].map(t => (
                <div key={t} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '5px 12px', borderRadius: 999,
                  background: LG.bg, fontSize: 12, color: 'var(--fg2)',
                }}>
                  <Icon name="check" size={11} color={LG.teal} />
                  {t}
                </div>
              ))}
            </div>
          </div>

          {/* Right — visual */}
          <div className="lg-hero-visual">
            <PipelineFunnel />
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function LgProblem() {
  return (
    <section style={{
      background: 'var(--ink-0)',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
    }}>
      <Container style={{ padding: '80px 32px' }}>
        <div className="lg-problem-grid">
          {/* Left — text */}
          <div>
            <Eyebrow style={{ marginBottom: 20 }}>EL PROBLEMA</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 3.5vw, 40px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Las ventas no deberían depender de{' '}
              <span style={{
                background: `linear-gradient(135deg, ${LG.teal}, ${LG.mint})`,
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>quién tiene un buen mes.</span>
            </h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 16px' }}>
              La mayoría de las empresas medianas en México tiene el mismo patrón de
              adquisición: el dueño o los mejores vendedores traen clientes por su red de
              contactos. Cuando esa red se agota o se distrae, el pipeline se vacía.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 28px', fontStyle: 'italic' }}>
              Eso no es un motor de ventas — es una ruleta.
            </p>

            {/* Alarm card */}
            <div style={{
              padding: '20px 24px',
              background: '#FEF0EE', border: '1px solid var(--danger)',
              borderRadius: 16,
            }}>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'var(--danger)', marginBottom: 14,
              }}>Señales de que tu pipeline es una ruleta</div>
              {[
                'El mes depende de 1–2 vendedores estrella',
                'No sabes cuántos leads entrarán el mes que viene',
                'El 80% de las ventas vienen de referencias y red personal',
                'No tienes un proceso de calificación documentado',
              ].map(s => (
                <div key={s} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 10,
                  fontSize: 13.5, color: 'var(--fg1)', lineHeight: 1.5, marginBottom: 10,
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: 999,
                    background: 'var(--danger)', flexShrink: 0, marginTop: 5,
                  }} />
                  {s}
                </div>
              ))}
            </div>
          </div>

          {/* Right — comparison */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Erratic card */}
            <div style={{
              padding: '20px 24px',
              background: 'var(--ink-25)', border: '1px solid var(--border)',
              borderRadius: 20, opacity: 0.72,
            }}>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'var(--fg3)', marginBottom: 14,
              }}>Sin sistema · ventas por referido</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height: 60 }}>
                {[55,90,30,75,20,80,25,60,10,85,35,70].map((h, i) => (
                  <div key={i} style={{
                    flex: 1, height: h + '%', borderRadius: '3px 3px 0 0',
                    background: i % 4 === 0 ? 'var(--danger)' : 'var(--border-strong)',
                    opacity: 0.7,
                  }} />
                ))}
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--fg3)', marginTop: 10 }}>
                Ingresos erráticos, sin predictibilidad
              </div>
            </div>

            {/* Predictable card */}
            <div style={{
              padding: '20px 24px',
              background: LG.bg, border: `1px solid ${LG.mint}`,
              borderRadius: 20,
            }}>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: LG.teal, marginBottom: 14,
              }}>Con FRSKO LeadGen · sistema operando</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height: 60 }}>
                {[40,45,50,52,55,58,62,65,68,72,76,80].map((h, i) => (
                  <div key={i} style={{
                    flex: 1, height: h + '%', borderRadius: '3px 3px 0 0',
                    background: `linear-gradient(to top, ${LG.teal}, ${LG.mint})`,
                  }} />
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 }}>
                <Icon name="check" size={12} color={LG.teal} />
                <span style={{ fontSize: 11.5, color: LG.dark, fontWeight: 600 }}>
                  Crecimiento constante y predecible mes a mes
                </span>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// SYSTEM — Lo que construimos juntos
// ============================================================
function LgSystem() {
  const steps = [
    {
      num: '01', icon: 'search', label: 'Diagnóstico comercial', tag: 'Semana 1–2',
      body: 'Auditamos tu proceso actual: de dónde vienen los leads hoy, cómo se califican, cómo se da seguimiento y dónde se pierde la mayoría. Revelamos los cuellos de botella reales antes de ejecutar cualquier táctica.',
    },
    {
      num: '02', icon: 'compass', label: 'Estrategia de adquisición', tag: 'Semana 2–3',
      body: 'Definimos los canales correctos para tu tipo de cliente — paid media, SEO, outbound, alianzas o referidos — el mensaje que conecta con el dolor de tu buyer persona y el funnel completo desde primer contacto hasta conversación de ventas.',
    },
    {
      num: '03', icon: 'server', label: 'Construcción del funnel', tag: 'Semana 3–6',
      body: 'Configuramos y conectamos las piezas: landing pages de captación, calificación inicial, secuencias de nurturing, integración con tu CRM y protocolo de entrega al equipo de ventas.',
    },
    {
      num: '04', icon: 'chart', label: 'Operación y optimización continua', tag: 'Semana 6 en adelante',
      body: 'Una vez que el sistema corre, lo operamos y optimizamos semana a semana. Ajustamos mensajes, canales y criterios de calificación con base en datos reales — no en intuición.',
    },
    {
      num: '05', icon: 'graduation', label: 'Capacitación del equipo de ventas', tag: 'Paralelo',
      body: 'De nada sirve entregar buenos leads si ventas no sabe trabajarlos. Incluimos sesiones de ventas consultivas y neuroventas adaptadas a tus productos y mercado.',
    },
  ];

  return (
    <section id="sistema" style={{ background: '#fff' }}>
      <Container style={{ padding: '88px 32px' }}>
        <Eyebrow style={{ marginBottom: 16 }}>LO QUE CONSTRUIMOS JUNTOS</Eyebrow>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56,
          alignItems: 'start', marginBottom: 56,
        }}>
          <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)',
          }}>El sistema completo, no una parte de él.</h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
            La mayoría de los servicios de lead generation son en realidad servicios de captación:
            te traen nombres y correos. FRSKO LeadGen construye y opera todo el motor, desde el
            primer punto de contacto hasta la entrega al equipo de ventas.
          </p>
        </div>

        <div>
          {steps.map((step, i) => (
            <div key={step.num} className="lg-step-row" style={{
              padding: '28px 0',
              borderTop: '1px solid var(--border)',
              borderBottom: i === steps.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              {/* Number */}
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800,
                color: 'var(--border-strong)', letterSpacing: '-0.04em', lineHeight: 1,
              }}>{step.num}</div>

              {/* Icon + label */}
              <div>
                <div style={{
                  width: 40, height: 40, borderRadius: 12,
                  background: LG.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 10,
                }}>
                  <Icon name={step.icon} size={18} color={LG.teal} />
                </div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 15.5, color: 'var(--fg1)', lineHeight: 1.25,
                }}>{step.label}</div>
              </div>

              {/* Body */}
              <p className="lg-step-body" style={{
                fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg2)',
                margin: 0, paddingTop: 2,
              }}>{step.body}</p>

              {/* Tag + end icon */}
              <div className="lg-step-tag" style={{
                display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end', gap: 10,
              }}>
                <div style={{
                  fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: LG.teal,
                  padding: '4px 10px', borderRadius: 999,
                  background: LG.bg, border: `1px solid ${LG.mint}`,
                  whiteSpace: 'nowrap',
                }}>{step.tag}</div>
                <div style={{
                  width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                  background: i === steps.length - 1 ? LG.teal : 'var(--ink-50)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon
                    name={i === steps.length - 1 ? 'check' : 'arrow-right'}
                    size={12}
                    color={i === steps.length - 1 ? '#fff' : 'var(--fg3)'}
                    style={i < steps.length - 1 ? { transform: 'rotate(90deg)' } : {}}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { PipelineFunnel, LgHero, LgProblem, LgSystem });