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

const LGb = window.LG || {
  deep:   '#1C1840',
  mid:    '#38318E',
  glow:   '#8D87D6',
  bg:     '#EEEDFB',
  bgDark: '#0B0920',
};

// ============================================================
// EL EMBUDO LEGAL
// ============================================================
function LgEmbudo() {
  const steps = [
    {
      n: '01', icon: 'search',
      title: 'El prospecto busca un abogado — y te encuentra antes que a nadie',
      body: 'SEO Pulse posiciona tu despacho en búsquedas de alta intención por área de práctica y zona geográfica. También en ChatGPT y Perplexity cuando alguien pide "recomiéndame un abogado fiscal en CDMX".',
      tag: 'SEO Pulse · AEO',
    },
    {
      n: '02', icon: 'sparkles',
      title: 'Content Studio lo recibe con contenido que demuestra autoridad',
      body: 'Artículos, guías y FAQs explican su situación legal en términos claros, responden sus dudas más frecuentes y demuestran que tu equipo conoce exactamente el problema que él enfrenta.',
      tag: 'Content Studio AI',
    },
    {
      n: '03', icon: 'brain',
      title: 'NeuroCopy convierte la visita en primera consulta',
      body: 'Landing pages y mensajes de seguimiento escritos para reducir la barrera psicológica de contactar a un abogado. Copy que habla de resultados, no de procedimientos — y que genera acción.',
      tag: 'NeuroCopy Lab',
    },
    {
      n: '04', icon: 'target',
      title: 'Lead Engine captura y califica el prospecto',
      body: 'Formulario o conversación por WhatsApp: área legal, urgencia, tipo de empresa o persona, y presupuesto aproximado. Tu equipo solo habla con prospectos que ya tienen el perfil y la intención.',
      tag: 'Lead Engine · WhatsApp API',
    },
    {
      n: '05', icon: 'briefcase',
      title: 'El abogado recibe al cliente listo para firmar',
      body: 'Contexto completo antes de la primera reunión: situación legal descrita, documentos relevantes pre-solicitados, expectativas alineadas. El despacho entra a asesorar, no a prospectar.',
      tag: 'CRM · Contexto 360°',
    },
  ];

  return (
    <section id="embudo" style={{ background: '#fff' }}>
      <Container style={{ padding: '100px 32px' }}>
        <div style={{ maxWidth: 720, marginBottom: 52 }}>
          <Eyebrow color={LGb.mid}>EL EMBUDO LEGAL IA</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            De la búsqueda en Google{' '}
            <span style={{ color: LGb.deep }}>a la firma del contrato.</span>
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 980 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              background: 'var(--ink-25)', border: '1px solid var(--border)',
              borderRadius: 22, padding: '22px 28px',
              display: 'grid', gridTemplateColumns: '68px 1fr auto',
              gap: 28, alignItems: 'center',
              transition: 'all var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = LGb.mid;
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                e.currentTarget.style.background = '#fff';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = 'var(--border)';
                e.currentTarget.style.boxShadow = '';
                e.currentTarget.style.background = 'var(--ink-25)';
              }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 600,
                  color: 'var(--fg3)', letterSpacing: '0.06em', marginBottom: 8,
                }}>{s.n}</div>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: i === steps.length - 1 ? LGb.deep : LGb.bg,
                  color: i === steps.length - 1 ? '#fff' : LGb.deep,
                  display: 'grid', placeItems: 'center', margin: '0 auto',
                }}>
                  <Icon name={s.icon} size={20} />
                </div>
              </div>
              <div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 700,
                  letterSpacing: '-0.02em', margin: '0 0 7px', color: 'var(--fg1)',
                }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>{s.body}</p>
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, padding: '5px 12px',
                background: '#fff', border: '1px solid var(--border)', borderRadius: 8,
                color: 'var(--fg3)', whiteSpace: 'nowrap', flexShrink: 0,
              }}>{s.tag}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// RESULTADOS
// ============================================================
function LgResultados() {
  const stats = [
    { n: '+4×',  l: 'tráfico orgánico desde búsquedas legales de alta intención', src: 'SEO Pulse · Legal MX'       },
    { n: '+68%', l: 'tasa de conversión de visita a primera consulta agendada',    src: 'NeuroCopy · Landing Legal'   },
    { n: '−50%', l: 'tiempo dedicado a prospectos sin perfil o sin presupuesto',   src: 'Lead Engine · Pre-calificación' },
    { n: '3.2×', l: 'más consultas por mes sin aumentar presupuesto publicitario', src: 'SEO Orgánico + AEO'          },
  ];

  return (
    <section style={{ background: 'var(--grad-deep)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', right: -120, top: -100, width: 420, height: 420, borderRadius: 999,
        background: 'radial-gradient(circle, rgba(0,218,227,0.18), transparent 65%)',
      }} />
      <div style={{
        position: 'absolute', left: -140, bottom: -120, width: 460, height: 460, borderRadius: 999,
        background: `radial-gradient(circle, rgba(56,49,142,0.5), transparent 65%)`,
      }} />
      <Container style={{ padding: '100px 32px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, marginBottom: 60 }}>
          <div style={{ maxWidth: 680 }}>
            <Eyebrow dark>RESULTADOS · INDUSTRIA LEGAL</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.8vw, 50px)', fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 16px', color: '#fff',
            }}>
              Más consultas calificadas. Menos tiempo en prospectos que nunca van a contratar.
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, margin: 0, maxWidth: 500 }}>
              Datos de pilotos con despachos, abogados independientes y firmas legales en México.
            </p>
          </div>
          <Button variant="inverse" size="md" icon="arrow-right">Ver casos de éxito</Button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 24, padding: '28px 24px', backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 'clamp(40px, 4vw, 56px)', letterSpacing: '-0.035em',
                lineHeight: 1, color: 'var(--cyan-300)', marginBottom: 14,
              }}>{s.n}</div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: '#fff', marginBottom: 12 }}>{s.l}</div>
              <div style={{
                fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)',
              }}>{s.src}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// CASO DESTACADO
// ============================================================
function LgCaso() {
  return (
    <section style={{ background: 'var(--ink-50)' }}>
      <Container style={{ padding: '100px 32px' }}>
        <Eyebrow color={LGb.mid}>CASO DESTACADO</Eyebrow>
        <div style={{
          marginTop: 28, background: '#fff', borderRadius: 32,
          border: '1px solid var(--border)', overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1fr 1fr',
        }}>
          {/* Quote side */}
          <div style={{ padding: '52px 52px', position: 'relative', overflow: 'hidden' }}>
            <Droplets style={{ left: -40, bottom: -30 }} color={LGb.glow} opacity={0.45} size={200} />
            <div style={{ position: 'relative' }}>
              <div style={{ marginBottom: 24 }}>
                <Icon name="quote" size={40} style={{ color: LGb.glow }} />
              </div>
              <blockquote style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(19px, 2vw, 26px)',
                fontWeight: 700, lineHeight: 1.3, letterSpacing: '-0.02em',
                margin: '0 0 32px', color: 'var(--fg1)',
              }}>
                "Teníamos buen trabajo pero nadie nos encontraba. A los 60 días de empezar con FRSKO, el 40% de nuestras nuevas consultas venían de búsquedas en Google — clientes que nunca hubiéramos alcanzado con referidos."
              </blockquote>
              <div>
                <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--fg1)' }}>Socio Director</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg3)', marginTop: 4 }}>
                  Despacho fiscal y corporativo · Ciudad de México
                </div>
              </div>
              <div style={{ marginTop: 28 }}>
                <a style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontSize: 14, fontWeight: 600, color: LGb.mid, cursor: 'pointer',
                }}>
                  Ver caso completo <Icon name="arrow-right" size={14} />
                </a>
              </div>
            </div>
          </div>

          {/* Metrics side */}
          <div style={{
            background: `linear-gradient(160deg, ${LGb.bgDark} 0%, #060416 100%)`,
            padding: '52px 48px', color: '#fff',
            position: 'relative', overflow: 'hidden',
          }}>
            <Droplets style={{ right: -40, top: -20 }} color={LGb.glow} opacity={0.2} size={180} />
            <div style={{ position: 'relative' }}>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: LGb.glow, marginBottom: 32,
              }}>RESULTADOS · 60 DÍAS</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                {[
                  { label: 'Consultas mensuales',           before: '18',     after: '47'      },
                  { label: 'Origen de nuevos clientes',      before: 'Referidos', after: '40% Google' },
                  { label: 'Costo por cliente adquirido',   before: '$6,400', after: '$2,100'  },
                ].map(m => (
                  <div key={m.label}>
                    <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.04em', marginBottom: 10 }}>{m.label}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                      <div style={{
                        fontFamily: 'var(--font-display)', fontWeight: 700,
                        fontSize: 28, color: 'rgba(255,255,255,0.35)',
                        letterSpacing: '-0.025em', lineHeight: 1,
                      }}>{m.before}</div>
                      <Icon name="arrow-right" size={18} style={{ color: 'rgba(255,255,255,0.25)' }} />
                      <div style={{
                        fontFamily: 'var(--font-display)', fontWeight: 700,
                        fontSize: 40, color: LGb.glow,
                        letterSpacing: '-0.03em', lineHeight: 1,
                      }}>{m.after}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================
function LgCta({ onCta }) {
  return (
    <section style={{ background: LGb.bg, position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -60, top: -40 }} color={LGb.glow} opacity={0.55} size={260} />
      <Droplets style={{ left: -80, bottom: -60 }} color={LGb.mid} opacity={0.15} size={300} />
      <Container style={{ padding: '100px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: '#fff', border: `1px solid ${LGb.glow}`,
            borderRadius: 999, padding: '5px 16px',
            fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: LGb.deep, marginBottom: 28,
          }}>
            <Icon name="sparkles" size={12} />
            DIAGNÓSTICO LEGAL DIGITAL · GRATIS
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(32px, 5vw, 62px)',
            lineHeight: 1.04, letterSpacing: '-0.035em',
            margin: '0 0 20px', color: 'var(--fg1)',
          }}>
            30 minutos para saber<br />
            <span style={{ color: LGb.deep, fontStyle: 'italic' }}>por qué tu despacho no aparece en Google.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', maxWidth: 540, margin: '0 auto 36px' }}>
            Un estratega FRSKO con experiencia en el sector legal revisa tu presencia digital y tu copy — y te dice exactamente qué cambiaría primero para atraer más consultas calificadas.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 28 }}>
            <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
              Agendar diagnóstico gratuito
            </Button>
            <Button variant="ghost" size="lg" icon="arrow-up-right">
              Ver casos de éxito
            </Button>
          </div>
          <div style={{ display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap' }}>
            {['Sin costo · Sin compromiso', 'Respuesta en menos de 24h', 'Experiencia en legal MX'].map(t => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--fg3)' }}>
                <Icon name="check" size={13} stroke={2} style={{ color: LGb.deep }} />
                {t}
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// OTRAS INDUSTRIAS
// ============================================================
function LgOtrasIndustrias() {
  const other = [
    { icon: 'home',        label: 'Bienes Raíces',       sub: 'Calificación automática de leads. WhatsApp + portales.',      href: 'FRSKO Industrias Bienes Raíces.html'     },
    { icon: 'shopping',    label: 'Retail & E-commerce',  sub: '10× creatividades. Menor CPM. ROAS que no para de subir.',    href: 'FRSKO Industrias Retail E-commerce.html' },
    { icon: 'credit-card', label: 'Fintech & Financieros',sub: 'Leads que pasan compliance. Pipeline sin fricciones.',        href: 'FRSKO Industrias Fintech.html'           },
    { icon: 'heart',       label: 'Salud',                sub: 'Contenido educativo + SEO que atrae pacientes calificados.',  href: 'FRSKO Industrias Salud.html'             },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '80px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 }}>
          <div>
            <Eyebrow>OTRAS INDUSTRIAS</Eyebrow>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.8vw, 34px)', fontWeight: 700,
              letterSpacing: '-0.025em', margin: '10px 0 0', color: 'var(--fg1)',
            }}>Llegamos con playbooks ya probados en cada vertical.</h3>
          </div>
          <Button variant="ghost" size="md" icon="arrow-right">Ver todas las industrias</Button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {other.map(v => (
            <a key={v.label} href={v.href} style={{
              background: 'var(--ink-25)', border: '1px solid var(--border)', borderRadius: 20,
              padding: '22px 22px 24px', display: 'flex', flexDirection: 'column', gap: 12,
              transition: 'all var(--dur-base) var(--ease-out)', cursor: 'pointer', textDecoration: 'none',
            }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.borderColor = 'var(--teal-200)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = ''; }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: 'var(--teal-50)', color: 'var(--brand)',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name={v.icon} size={18} />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--fg1)', marginBottom: 5 }}>{v.label}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--fg3)' }}>{v.sub}</div>
              </div>
            </a>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { LgEmbudo, LgResultados, LgCaso, LgCta, LgOtrasIndustrias });