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

// ============================================================
// SOLUTIONS GRID
// ============================================================

const SOLUTIONS = [
  {
    id: 'lead-engine',
    name: 'Lead Engine AI',
    icon: 'target',
    hue: 'leadgen',
    para: 'Empresas B2B con equipo de ventas que necesitan más y mejores prospectos.',
    qhace: 'Capta, enriquece, califica y contacta leads de forma automatizada con IA. Tu equipo de ventas solo habla con quien ya está listo para comprar.',
    resultado: 'Leads calificados al costo de medio SDR, sin sumar headcount.',
    metric: { v: '½', u: 'costo SDR' },
    tag: 'B2B · Sales',
  },
  {
    id: 'neurocopy',
    name: 'NeuroCopy Lab',
    icon: 'brain',
    hue: 'neuro',
    para: 'Empresas con inversión en tráfico digital que quieren más conversión del mismo presupuesto.',
    qhace: 'Audita tus páginas y creatividades con metodología de neuromarketing, genera variantes de copy con IA y las valida con pruebas A/B.',
    resultado: 'Más conversiones sin aumentar el gasto en ads.',
    metric: { v: '+CVR', u: 'mismo ad spend' },
    tag: 'Conversión · Copy',
  },
  {
    id: 'content-studio',
    name: 'Content Studio AI',
    icon: 'film',
    hue: 'interactive',
    para: 'Marcas que necesitan volumen de contenido consistente — redes sociales, blog, video, podcast.',
    qhace: 'Produce entre 20 y 60 piezas de contenido al mes con stack IA: guión, voz, video, diseño y calendario editorial. Todo on-brand.',
    resultado: '10× más contenido al mismo costo de producción.',
    metric: { v: '10×', u: 'volumen contenido' },
    tag: 'Producción · Brand',
  },
  {
    id: 'smart-ads',
    name: 'Smart Ads AI',
    icon: 'zap',
    hue: 'cyan',
    para: 'Empresas con inversión mensual en Meta, Google o TikTok Ads que quieren mejor rendimiento.',
    qhace: 'Un copiloto de IA analiza tus campañas diariamente y sugiere acciones concretas: creatividades, audiencias, pujas, presupuestos.',
    resultado: 'Mejores resultados de paid media sin necesitar un equipo de media-buyers más grande.',
    metric: { v: 'Daily', u: 'optimización' },
    tag: 'Paid · Performance',
  },
  {
    id: 'seo-pulse',
    name: 'SEO Pulse',
    sub: 'Auditoría IA',
    icon: 'search',
    hue: 'academy',
    para: 'Empresas que quieren aparecer en Google Y en los resultados de ChatGPT, Perplexity y Gemini.',
    qhace: 'Auditoría SEO técnica y de contenido más un capítulo único de AI Search Optimization — el análisis que te dice cómo aparecer cuando alguien le pregunta a una IA sobre tu industria.',
    resultado: 'Más visibilidad orgánica en buscadores tradicionales y en motores de IA.',
    metric: { v: 'SEO + AEO', u: 'doble visibilidad' },
    tag: 'SEO · AEO',
    recommended: true,
  },
  {
    id: 'bootcamps',
    name: 'Bootcamps & Workshops',
    sub: 'IA aplicada',
    icon: 'graduation',
    hue: 'start',
    para: 'Equipos de marketing, directivos y emprendedores que quieren aprender a usar IA en su trabajo diario.',
    qhace: 'Programas de capacitación in-company, cohortes abiertas y licencias para universidades. Contenido práctico, no teórico.',
    resultado: 'Un equipo que sabe usar IA — no uno que le teme.',
    metric: { v: '3', u: 'formatos' },
    tag: 'Capacitación',
  },
];

const HUE_MAP = {
  leadgen:     { bg: 'var(--sub-leadgen-bg)',     ink: 'var(--sub-leadgen-1)',     accent: '#007A85' },
  neuro:       { bg: 'var(--sub-neuro-bg)',       ink: 'var(--sub-neuro-1)',       accent: '#B511C9' },
  interactive: { bg: 'var(--sub-interactive-bg)', ink: 'var(--sub-interactive-1)', accent: '#F1A92F' },
  cyan:        { bg: 'var(--cyan-50)',            ink: 'var(--cyan-800)',          accent: 'var(--cyan-500)' },
  academy:     { bg: 'var(--sub-academy-bg)',     ink: 'var(--sub-academy-1)',     accent: '#234FE8' },
  start:       { bg: 'var(--sub-start-bg)',       ink: 'var(--sub-start-1)',       accent: '#38C28C' },
};

function SolutionCard({ s }) {
  const h = HUE_MAP[s.hue];
  const [hover, setHover] = React.useState(false);
  return (
    <article id={s.id} style={{
      background: '#fff',
      borderRadius: 28,
      border: '1px solid var(--border)',
      padding: 0,
      overflow: 'hidden',
      position: 'relative',
      transition: 'all var(--dur-base) var(--ease-out)',
      boxShadow: hover ? 'var(--shadow-lg)' : 'var(--shadow-xs)',
      transform: hover ? 'translateY(-3px)' : '',
      display: 'flex', flexDirection: 'column',
    }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      {/* Top accent bar */}
      <div style={{
        height: 4,
        background: h.accent,
      }} />

      <div style={{ padding: '28px 28px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        {/* Header row */}
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 20 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 16,
            background: h.bg, color: h.ink,
            display: 'grid', placeItems: 'center',
            transition: 'transform var(--dur-base) var(--ease-spring)',
            transform: hover ? 'scale(1.06) rotate(-3deg)' : '',
          }}>
            <Icon name={s.icon} size={28} stroke={1.6} />
          </div>
          {s.recommended && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em',
              textTransform: 'uppercase',
              padding: '5px 10px', borderRadius: 999,
              background: 'var(--yellow-50)', color: 'var(--yellow-800)',
            }}>
              <Icon name="sparkles" size={11} />
              Empieza aquí
            </span>
          )}
        </div>

        {/* Name + sub */}
        <div style={{ marginBottom: 4 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 10.5,
            color: 'var(--fg3)', letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}>{s.tag}</span>
        </div>
        <h3 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 26, letterSpacing: '-0.025em',
          margin: '4px 0 4px', color: 'var(--fg1)',
          lineHeight: 1.1,
        }}>{s.name}{s.sub && <span style={{
          color: 'var(--fg3)', fontWeight: 500, fontStyle: 'italic',
        }}> — {s.sub}</span>}</h3>

        {/* Para quién */}
        <div style={{
          marginTop: 14, paddingBottom: 14,
          borderBottom: '1px dashed var(--border-strong)',
        }}>
          <div style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
            textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 6,
          }}>Para quién</div>
          <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg2)', margin: 0 }}>
            {s.para}
          </p>
        </div>

        {/* Qué hace */}
        <div style={{ marginTop: 14, marginBottom: 18 }}>
          <div style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
            textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 6,
          }}>Qué hace</div>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg1)', margin: 0 }}>
            {s.qhace}
          </p>
        </div>

        {/* Resultado — metric block */}
        <div style={{
          marginTop: 'auto',
          background: h.bg,
          borderRadius: 16,
          padding: '16px 18px',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 30, letterSpacing: '-0.03em',
            color: h.accent, lineHeight: 1,
            minWidth: 60,
          }}>{s.metric.v}</div>
          <div style={{
            width: 1, alignSelf: 'stretch',
            background: 'rgba(0,0,0,0.08)',
          }} />
          <div>
            <div style={{
              fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: h.ink, opacity: 0.8, marginBottom: 4,
            }}>{s.metric.u}</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.4, color: 'var(--fg1)' }}>
              {s.resultado}
            </div>
          </div>
        </div>

        {/* CTA */}
        <a href={'#' + s.id} className="solution-cta" style={{
          marginTop: 20,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
          padding: '12px 4px',
          fontSize: 14, fontWeight: 600,
          color: h.accent,
          borderTop: '0',
        }}>
          Ver {s.name}
          <span className="ia-cta-arrow">
            <Icon name="arrow-right" size={16} />
          </span>
        </a>
      </div>
    </article>
  );
}

function IaSolutions() {
  return (
    <section id="soluciones" style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -120, top: 120 }} color="var(--teal-100)" opacity={0.5} size={300} />

      <Container style={{ padding: '96px 32px 112px', position: 'relative' }}>
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <Eyebrow>Soluciones disponibles hoy</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 16px', color: 'var(--fg1)',
          }}>
            Elige por tu objetivo de negocio.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            Cada producto se opera como un servicio gestionado. Tu equipo no necesita aprender herramientas nuevas — recibe los resultados.
          </p>
        </div>

        <div className="grid-3" style={{ gap: 24 }}>
          {SOLUTIONS.map(s => <SolutionCard key={s.id} s={s} />)}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// ENTERPRISE — Coming soon (dark band)
// ============================================================

function IaEnterprise({ onCta }) {
  const services = [
    { name: 'Onboarding Claude Enterprise', desc: 'Implementación + capacitación con MCPs personalizados', icon: 'sparkles' },
    { name: 'AI Strategy Sprint',            desc: 'Plan ejecutivo de adopción IA para C-suite',           icon: 'compass' },
    { name: 'Sales Co-Pilot',                desc: 'Asistente de ventas integrado con CRM',                icon: 'users' },
    { name: 'Customer Support AI Layer',     desc: 'Deflexión de tickets sobre Zendesk / Intercom',        icon: 'message' },
    { name: 'Internal Knowledge Q&A',        desc: 'El Claude interno de tu empresa',                      icon: 'search' },
    { name: 'AI Content Engine Corporativa', desc: 'Plataforma de generación de contenido para equipos',   icon: 'film' },
    { name: 'Market Intelligence IA',        desc: 'Briefings ejecutivos automatizados',                   icon: 'chart' },
    { name: 'Document Automation',           desc: 'Contratos, RFPs y NDAs con IA',                        icon: 'clipboard' },
    { name: 'AI Training Program',           desc: 'Certificación interna en 3 niveles',                   icon: 'graduation' },
  ];

  return (
    <section style={{
      background: 'var(--grad-deep)',
      color: '#fff',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <Droplets style={{ right: -100, top: -80 }} color="rgba(0,218,227,0.18)" opacity={1} size={360} />
      <Droplets style={{ left: -120, bottom: -100 }} color="rgba(56,145,153,0.4)" opacity={1} size={420} />

      <Container style={{ padding: '96px 32px 96px', position: 'relative' }}>
        <div className="ia-enterprise-header">
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 999,
              background: 'rgba(255,255,255,0.08)',
              border: '1px solid rgba(255,255,255,0.12)',
              fontSize: 11, fontWeight: 600, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--cyan-300)',
              marginBottom: 18,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999,
                background: 'var(--cyan-400)',
                boxShadow: '0 0 0 4px rgba(0,218,227,0.18)',
                animation: 'pulse 2s infinite',
              }} />
              Próximamente · Q3 2026
            </div>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(30px, 3.6vw, 48px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: 0, color: '#fff',
            }}>
              Soluciones de mayor escala en desarrollo.
            </h2>
          </div>
          <p style={{
            fontSize: 17, lineHeight: 1.65,
            color: 'rgba(255,255,255,0.72)',
            margin: 0,
          }}>
            Estamos construyendo un portafolio de servicios enterprise que incluye implementación de Claude en flujos corporativos, automatización de soporte, inteligencia de mercado y formación interna certificada. Si tu empresa necesita una solución a esta escala, agenda una plática hoy.
          </p>
        </div>

        <div className="ia-enterprise-grid" style={{
          background: 'rgba(255,255,255,0.08)',
          borderRadius: 20,
          overflow: 'hidden',
          border: '1px solid rgba(255,255,255,0.08)',
        }}>
          {services.map((s, i) => (
            <div key={s.name} className="ia-enterprise-card" style={{
              padding: '24px 22px',
              position: 'relative',
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: 'rgba(0,218,227,0.12)',
                  color: 'var(--cyan-300)',
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <Icon name={s.icon} size={18} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 600,
                    fontSize: 15.5, color: '#fff', marginBottom: 4,
                    letterSpacing: '-0.01em',
                  }}>{s.name}</div>
                  <div style={{
                    fontSize: 13, lineHeight: 1.45,
                    color: 'rgba(255,255,255,0.6)',
                  }}>{s.desc}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
            Agenda una plática enterprise
          </Button>
        </div>
      </Container>

    </section>
  );
}

// ============================================================
// WHERE TO START — Final
// ============================================================

function IaWhereToStart({ onCta }) {
  const paths = [
    {
      label: 'Presupuesto limitado, quiero el mapa',
      product: 'SEO Pulse',
      slug: 'seo-pulse',
      icon: 'search',
      hue: 'academy',
      body: 'La auditoría que te da el mapa completo de oportunidades — en Google y en motores de IA. Una sola vez, muchas conclusiones accionables.',
      cta: 'Ver SEO Pulse',
    },
    {
      label: 'Tengo equipo de ventas, el pipeline es el problema',
      product: 'Lead Engine AI',
      slug: 'lead-engine',
      icon: 'target',
      hue: 'leadgen',
      body: 'El SDR que nunca duerme. Capta, califica y entrega leads que tu equipo de ventas sí quiere atender. Empezamos en 2 semanas.',
      cta: 'Ver Lead Engine AI',
    },
  ];

  return (
    <section id="diagnostico" style={{ background: '#fff', position: 'relative', overflow: 'hidden' }}>
      <Container style={{ padding: '96px 32px 112px' }}>
        <div className="ia-where-grid">
          {/* Left — copy + diagnostic CTA */}
          <div className="ia-where-sticky" style={{ position: 'sticky', top: 100 }}>
            <Eyebrow>Todavía no sabes cuál es la tuya</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(32px, 4vw, 56px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '14px 0 22px', color: 'var(--fg1)',
            }}>
              ¿Por dónde<br/>empezar?
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 32px', maxWidth: 460 }}>
              Si tienes presupuesto limitado y quieres ver resultados rápido, empieza por <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>SEO Pulse</strong>. Si tienes un equipo de ventas y el pipeline es el problema, <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>Lead Engine AI</strong> es tu primera conversación.
            </p>

            {/* Diagnostic card */}
            <div style={{
              background: 'var(--grad-brand-soft)',
              border: '1px solid var(--teal-100)',
              borderRadius: 24, padding: 28,
              position: 'relative', overflow: 'hidden',
            }}>
              <Droplets style={{ right: -30, bottom: -30 }} color="var(--cyan-200)" opacity={0.4} size={140} />
              <div style={{ position: 'relative' }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px', borderRadius: 999,
                  background: '#fff', color: 'var(--brand)',
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  marginBottom: 14,
                }}>
                  <Icon name="sparkles" size={11} /> 5 min · Gratis
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 24, letterSpacing: '-0.02em',
                  margin: '0 0 8px', color: 'var(--teal-900)',
                  lineHeight: 1.15,
                }}>¿No estás seguro?</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 18px' }}>
                  Responde el diagnóstico gratuito de 5 preguntas y te decimos cuál solución FRSKO tiene más sentido para tu empresa hoy.
                </p>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <Button variant="cta" size="md" icon="arrow-right">Hacer el diagnóstico</Button>
                  <Button variant="ghost" size="md" onClick={onCta}>Hablar con un estratega</Button>
                </div>
              </div>
            </div>
          </div>

          {/* Right — two paths */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              color: 'var(--fg3)', letterSpacing: '0.05em',
            }}>
              # los dos puntos de partida más comunes
            </div>
            {paths.map((p, i) => {
              const h = HUE_MAP[p.hue];
              return (
                <div key={p.product} className="card-hover-right" style={{
                  background: '#fff',
                  border: '1px solid var(--border)',
                  borderLeft: `4px solid ${h.accent}`,
                  borderRadius: 20,
                  padding: '28px 30px',
                  display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 20,
                  alignItems: 'start',
                }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 16,
                    background: h.bg, color: h.ink,
                    display: 'grid', placeItems: 'center',
                  }}>
                    <Icon name={p.icon} size={26} stroke={1.6} />
                  </div>
                  <div>
                    <div style={{
                      fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
                      textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 6,
                    }}>Si tu situación es</div>
                    <div style={{
                      fontFamily: 'var(--font-heading)', fontSize: 18,
                      fontWeight: 600, letterSpacing: '-0.015em',
                      color: 'var(--fg1)', marginBottom: 14, lineHeight: 1.3,
                    }}>"{p.label}"</div>
                    <div style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{
                        fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
                        textTransform: 'uppercase', color: h.accent,
                      }}>Empieza con</div>
                      <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
                    </div>
                    <h3 style={{
                      fontFamily: 'var(--font-heading)', fontSize: 26, fontWeight: 700,
                      letterSpacing: '-0.025em', margin: '0 0 10px',
                      color: 'var(--fg1)', lineHeight: 1.1,
                    }}>{p.product}</h3>
                    <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 16px' }}>
                      {p.body}
                    </p>
                    <a href={'#' + p.slug} style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      fontSize: 14, fontWeight: 600,
                      color: h.accent,
                    }}>
                      {p.cta} <Icon name="arrow-right" size={15} />
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { IaSolutions, IaEnterprise, IaWhereToStart });