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

// ─────────────────────────────────────────────
// Sub-brand tokens — Industria: Fintech & Servicios Financieros
// ─────────────────────────────────────────────
const FT = {
  deep:   '#0B4A35',
  mid:    '#166D4E',
  glow:   '#5DBF95',
  bg:     '#EDFAF4',
  bgDark: '#052318',
};
window.FT = FT;

// ============================================================
// HERO
// ============================================================
function FtHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 50% 0%, ${FT.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 80 }} color={FT.glow} opacity={0.45} size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color={FT.glow} opacity={0.16} size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(20,47,50,0.04) 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="FRSKO Homepage.html" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="#" style={{ color: 'var(--fg3)' }}>industrias</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: FT.deep, fontWeight: 600 }}>fintech</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'start' }}>

          {/* LEFT: copy */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 14px', borderRadius: 999,
                background: '#fff', border: `1px solid ${FT.glow}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: FT.deep,
              }}>
                <Icon name="credit-card" size={12} />
                FRSKO · Fintech & Servicios Financieros
              </div>
              <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg3)' }}>MX · LATAM</span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(38px, 5vw, 68px)',
              lineHeight: 1.03, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Tu pipeline de clientes<br />
              no debería depender<br />
              <span style={{ color: FT.deep, fontStyle: 'italic' }}>de referidos y suerte.</span>
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.6,
              color: 'var(--fg2)', maxWidth: 540, margin: '0 0 32px',
            }}>
              Lead Engine AI + NeuroCopy + SEO Pulse, calibrados para servicios financieros. Leads que pasan pre-calificación, nurturing que cumple compliance y pipeline que no se enfría.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Diagnóstico de funnel gratis
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-right" onClick={() => {
                const el = document.getElementById('embudo');
                if (el) el.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver cómo funciona
              </Button>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
              {['Criterios CNBV / CONDUSEF', 'CRM integrado', 'WhatsApp API', 'ES · EN'].map(t => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--fg3)' }}>
                  <Icon name="check" size={13} stroke={2.5} style={{ color: FT.deep }} />
                  {t}
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT: dashboard */}
          <FtCompliancePanel />
        </div>
      </Container>
    </section>
  );
}

function FtCompliancePanel() {
  const leads = [
    { name: 'Alejandro Ruiz',   tipo: 'Crédito PyME · $500K',         status: 'ok',  score: '92', señal: 'RFC activo · 3 años ops.' },
    { name: 'Laura Castellanos',tipo: 'Inversión · $200K+',            status: 'ok',  score: '88', señal: 'Perfil conservador confirmado' },
    { name: 'Grupo Nómada SA',  tipo: 'Crédito corporativo · $2M',     status: 'rev', score: '74', señal: 'En revisión de buró' },
    { name: 'Marcos Ibarra',    tipo: 'Seguro empresarial',            status: 'rev', score: '68', señal: 'Documentación incompleta' },
    { name: 'Isabel Fuentes',   tipo: 'Cuenta de inversión · $50K',    status: 'no',  score: '41', señal: 'No cumple perfil mínimo' },
  ];
  const statusStyle = {
    ok:  { bg: FT.bg,             fg: FT.deep,          dot: '#22A06B', label: 'Calificado' },
    rev: { bg: 'var(--yellow-50)', fg: 'var(--yellow-800)', dot: '#D4A017', label: 'En revisión' },
    no:  { bg: 'var(--ink-100)',   fg: 'var(--ink-600)',    dot: '#D9503C', label: 'Descartado' },
  };

  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, color: 'var(--fg3)', textAlign: 'center' }}>
          app.frsko.com / fintech-leads
        </div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: FT.deep, padding: '3px 8px', borderRadius: 999, background: FT.bg,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#22A06B' }} />
          Live
        </div>
      </div>

      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderBottom: '1px solid var(--border)' }}>
        {[
          { v: '148',  l: 'Leads este mes' },
          { v: '61%',  l: 'Pasan compliance' },
          { v: '34',   l: 'En pipeline activo' },
        ].map((k, i) => (
          <div key={k.l} style={{
            padding: '15px 18px',
            borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 26, letterSpacing: '-0.025em', color: FT.deep, lineHeight: 1,
            }}>{k.v}</div>
            <div style={{ fontSize: 11, color: 'var(--fg3)', marginTop: 4 }}>{k.l}</div>
          </div>
        ))}
      </div>

      {/* Column header */}
      <div style={{
        padding: '10px 16px', borderBottom: '1px solid var(--border)',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 10.5, fontWeight: 600, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--fg3)',
      }}>
        <span>Hoy · 6 nuevos</span>
        <span style={{ color: FT.deep }}>Score · Compliance</span>
      </div>

      {/* Lead rows */}
      {leads.map((l, i) => {
        const s = statusStyle[l.status];
        return (
          <div key={l.name} style={{
            padding: '13px 16px',
            borderBottom: i < leads.length - 1 ? '1px solid var(--border)' : 'none',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 999,
              background: 'var(--ink-100)', color: 'var(--ink-600)',
              display: 'grid', placeItems: 'center',
              fontWeight: 700, fontSize: 11, flexShrink: 0,
            }}>{l.name.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l.name}</div>
              <div style={{ fontSize: 11, color: 'var(--fg3)', marginTop: 1 }}>{l.tipo}</div>
            </div>
            <div style={{ textAlign: 'right', flexShrink: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: FT.deep, lineHeight: 1 }}>{l.score}</div>
              <div style={{ fontSize: 10, color: 'var(--fg3)', marginTop: 2 }}>{l.señal}</div>
            </div>
            <div style={{
              fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
              padding: '3px 8px', borderRadius: 999,
              background: s.bg, color: s.fg, flexShrink: 0,
              display: 'flex', alignItems: 'center', gap: 4,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: s.dot }} />
              {s.label}
            </div>
          </div>
        );
      })}

      {/* Footer */}
      <div style={{
        padding: '11px 16px', background: FT.bg,
        fontSize: 12, color: FT.deep,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkles" size={13} />
          IA pre-calificó 24 leads con criterios de compliance hoy
        </span>
        <span style={{ fontWeight: 600, cursor: 'pointer' }}>Ver pipeline →</span>
      </div>
    </div>
  );
}

// ============================================================
// PROBLEMA
// ============================================================
function FtProblema() {
  const pains = [
    {
      icon: 'target',
      title: 'Los leads genéricos no pasan el filtro básico',
      body: 'Meta y Google generan volumen, no calidad financiera. Sin pre-calificación automática, tu equipo pierde horas con personas que no tienen el perfil, el ingreso ni la intención real.',
    },
    {
      icon: 'scale',
      title: 'El compliance frena tu nurturing',
      body: 'No puedes decir lo que quieres en un email o WhatsApp cuando hay regulaciones de por medio. Resultado: mensajes genéricos que no convierten y leads que se enfrían solos.',
    },
    {
      icon: 'chart',
      title: 'El ciclo de venta es largo y se pierde en el camino',
      body: 'Sin automatización inteligente entre el primer contacto y la apertura de cuenta, los prospectos desaparecen. El seguimiento manual no escala en un equipo comercial financiero.',
    },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <Eyebrow color={FT.mid}>EL PROBLEMA</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.06, letterSpacing: '-0.03em',
            margin: '18px 0 48px', color: 'var(--fg1)', maxWidth: 820, textWrap: 'pretty',
          }}>
            Captar clientes en servicios financieros es difícil.{' '}
            <span style={{
              background: `linear-gradient(180deg, transparent 58%, ${FT.glow} 58%)`,
              padding: '0 4px', fontStyle: 'italic',
            }}>Hacerlo sin tecnología</span>{' '}
            es imposible a escala.
          </h2>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {pains.map(p => (
              <div key={p.title} style={{
                background: 'var(--ink-25)', border: '1px solid var(--border)',
                borderRadius: 24, padding: '28px 28px 32px',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: FT.bg, color: FT.deep,
                  display: 'grid', placeItems: 'center', marginBottom: 20,
                }}>
                  <Icon name={p.icon} size={22} />
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1.25, margin: '0 0 12px', color: 'var(--fg1)',
                }}>{p.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 36, padding: '26px 34px',
            background: `linear-gradient(135deg, ${FT.bg}, #f0fdf8)`,
            border: `1px solid ${FT.glow}`, borderRadius: 20,
            display: 'flex', alignItems: 'center', gap: 24,
          }}>
            <div style={{
              width: 52, height: 52, borderRadius: 14, flexShrink: 0,
              background: FT.mid, color: '#fff', display: 'grid', placeItems: 'center',
            }}>
              <Icon name="check" size={24} />
            </div>
            <div>
              <p style={{
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,
                letterSpacing: '-0.02em', color: FT.deep, margin: '0 0 6px', lineHeight: 1.2,
              }}>
                La IA pre-califica, no solo capta.
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>
                Cuando tu equipo comercial solo habla con leads que ya cumplen el perfil regulatorio y financiero, la tasa de cierre se multiplica y el costo por cliente baja.
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// SOLUCIONES
// ============================================================
function FtSoluciones() {
  const sols = [
    {
      tag: 'LEAD ENGINE AI',
      icon: 'target',
      title: 'El filtro de compliance antes del equipo.',
      body: 'Captura prospectos de múltiples canales y los pre-califica automáticamente: perfil financiero, capacidad de pago, tipo de producto buscado y señales de intención real.',
      bullets: [
        'Pre-calificación con criterios personalizables por producto',
        'Integración con buró y validación de RFC automática',
        'Score de compliance antes de llegar al asesor',
      ],
      colors: { ink: 'var(--sub-leadgen-1)', soft: 'var(--sub-leadgen-bg)', drop: 'var(--sub-leadgen-2)' },
      href: 'FRSKO Lead Engine AI.html',
    },
    {
      tag: 'NEUROCOPY LAB',
      icon: 'brain',
      title: 'Copy que convierte sin pisar líneas rojas.',
      body: 'Mensajes de nurturing, emails y guiones de ventas auditados con neuromarketing y revisados para cumplimiento regulatorio. Convierten más sin violar normativas de la CNBV o CONDUSEF.',
      bullets: [
        'Auditoría de copy actual contra normativas financieras',
        'Variantes de mensajes aprobados por compliance',
        'Secuencias de nurturing calibradas por tipo de producto',
      ],
      colors: { ink: 'var(--sub-neuro-2)', soft: 'var(--sub-neuro-bg)', drop: 'var(--sub-neuro-1)' },
      href: 'FRSKO NeuroCopy Lab.html',
    },
    {
      tag: 'SEO PULSE',
      icon: 'search',
      title: 'Aparece cuando buscan exactamente lo que ofreces.',
      body: 'Auditoría SEO 360 + optimización para búsquedas financieras de alta intención. Posicionamiento en Google y en motores IA como ChatGPT y Perplexity — donde hoy busca tu cliente.',
      bullets: [
        'Keywords de alta intención financiera: crédito, inversión, seguro',
        'Contenido educativo que genera confianza y captación orgánica',
        'AEO para ser la respuesta en ChatGPT y Perplexity',
      ],
      colors: { ink: 'var(--sub-academy-1)', soft: 'var(--sub-academy-bg)', drop: 'var(--sub-academy-2)' },
      href: 'FRSKO SEO Pulse.html',
    },
  ];

  return (
    <section id="soluciones" style={{ background: 'var(--ink-50)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -80, top: 100 }} color={FT.glow} opacity={0.3} size={260} />
      <Container style={{ padding: '100px 32px', position: 'relative' }}>
        <div style={{ marginBottom: 52, maxWidth: 760 }}>
          <Eyebrow color={FT.mid}>SOLUCIONES PARA FINTECH & SERVICIOS FINANCIEROS</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',
          }}>
            Tres productos IA.<br />Un funnel que cumple y convierte.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', maxWidth: 580 }}>
            Diseñados para el entorno regulatorio financiero mexicano — desde la captación hasta el cierre de cuenta.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {sols.map(s => (
            <article key={s.tag} style={{
              background: '#fff', borderRadius: 28, border: '1px solid var(--border)',
              overflow: 'hidden', display: 'flex', flexDirection: 'column',
              transition: 'all var(--dur-base) var(--ease-out)', cursor: 'pointer',
            }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}>

              <div style={{
                position: 'relative', overflow: 'hidden',
                background: s.colors.soft, padding: '28px 28px 22px',
                borderBottom: '1px solid var(--border)',
              }}>
                <Droplets style={{ right: -30, top: -20 }} color={s.colors.drop} opacity={0.45} size={130} />
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 14, background: '#fff',
                    color: s.colors.ink, display: 'grid', placeItems: 'center',
                    boxShadow: '0 4px 14px -6px rgba(20,47,50,0.18)',
                  }}>
                    <Icon name={s.icon} size={22} />
                  </div>
                  <span style={{
                    fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
                    color: s.colors.ink, background: '#fff', padding: '4px 10px', borderRadius: 999,
                  }}>{s.tag}</span>
                </div>
              </div>

              <div style={{ padding: '26px 28px 30px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 12px', color: 'var(--fg1)',
                }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 20px' }}>{s.body}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {s.bullets.map(b => (
                    <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13.5, color: 'var(--fg2)' }}>
                      <Icon name="check" size={14} stroke={2.5} style={{ color: s.colors.ink, flexShrink: 0, marginTop: 2 }} />
                      {b}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 'auto' }}>
                  <a href={s.href} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    fontSize: 14, fontWeight: 600, color: s.colors.ink, cursor: 'pointer',
                  }}>
                    Ver solución completa <Icon name="arrow-right" size={14} />
                  </a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { FtHero, FtCompliancePanel, FtProblema, FtSoluciones });