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

function Solutions() {
  const cards = [
    {
      tag: 'LEAD ENGINE AI',
      title: 'El SDR que nunca duerme.',
      body: 'Captación, calificación y nurturing de leads B2B con IA. Recibes prospectos listos para cerrar.',
      icon: 'target',
      hue: 'leadgen',
      colors: { ink: 'var(--sub-leadgen-1)', soft: 'var(--sub-leadgen-bg)', drop: 'var(--sub-leadgen-2)' },
      meta: 'B2B · Pipeline',
      href: '/ia/lead-engine',
    },
    {
      tag: 'NEUROCOPY LAB',
      title: 'Copy con ciencia, no con suerte.',
      body: 'Auditoría de neuromarketing + variantes de copy generadas con IA + pruebas A/B. El diferenciador único en LATAM.',
      icon: 'brain',
      hue: 'neuro',
      colors: { ink: 'var(--sub-neuro-2)', soft: 'var(--sub-neuro-bg)', drop: 'var(--sub-neuro-1)' },
      meta: 'Creativos · Copy',
      href: '/ia/neurocopy-lab',
    },
    {
      tag: 'CONTENT STUDIO AI',
      title: 'De 5 a 60 piezas al mes.',
      body: 'Con la misma inversión: video, voz, diseño y texto producidos con stack IA — sin perder voz de marca.',
      icon: 'film',
      hue: 'interactive',
      colors: { ink: 'var(--sub-interactive-1)', soft: 'var(--sub-interactive-bg)', drop: 'var(--sub-interactive-2)' },
      meta: 'Contenido · Producción',
      href: '/ia/content-studio',
    },
    {
      tag: 'SMART ADS AI',
      title: 'Un copiloto para tus campañas.',
      body: 'Gestión de Meta, Google y TikTok Ads con un copiloto de IA que sugiere acciones diarias basadas en datos reales.',
      icon: 'zap',
      hue: 'cyan',
      colors: { ink: 'var(--cyan-800)', soft: 'var(--cyan-50)', drop: 'var(--cyan-400)' },
      meta: 'Paid · Performance',
      href: '/ia/smart-ads',
    },
    {
      tag: 'SEO PULSE',
      title: 'Auditoría 360 + SEO para IAs.',
      body: 'SEO 360 más optimización para motores de búsqueda con IA: ChatGPT, Perplexity y Gemini. Aparece donde tu cliente busca hoy.',
      icon: 'search',
      hue: 'academy',
      colors: { ink: 'var(--sub-academy-1)', soft: 'var(--sub-academy-bg)', drop: 'var(--sub-academy-2)' },
      meta: 'SEO · AEO',
      href: '/ia/seo-pulse',
    },
    {
      tag: 'BOOTCAMPS & WORKSHOPS',
      title: 'Forma a tu equipo en IA.',
      body: 'Programas in-company, cohortes abiertas y licencias para universidades. Marketing con IA, enseñado por quienes lo operan.',
      icon: 'graduation',
      hue: 'start',
      colors: { ink: 'var(--sub-start-1)', soft: 'var(--sub-start-bg)', drop: 'var(--sub-start-2)' },
      meta: 'Capacitación · IA',
      href: '/ia/bootcamps',
    },
  ];

  return (
    <section id="soluciones" style={{ background: 'var(--ink-50)', position: 'relative', overflow: 'hidden' }}>
      <Container style={{ padding: '120px 32px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, marginBottom: 56, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 760 }}>
            <Eyebrow>SOLUCIONES IA · DISPONIBLES HOY</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontSize: 'clamp(32px, 4.2vw, 54px)', fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 0',
            }}>
              Seis formas de potenciar tu marketing con IA — desde mañana.
            </h2>
          </div>
          <Button variant="text" icon="arrow-right" style={{ flexShrink: 0 }}>Ver todas las soluciones</Button>
        </div>

        <div className="grid-3" style={{ gap: 20 }}>
          {cards.map((c, i) => (
            <article key={c.tag} className="card-hover card-hover-lift3" style={{
              background: '#fff', borderRadius: 28, border: '1px solid var(--border)',
              overflow: 'hidden', display: 'flex', flexDirection: 'column',
              cursor: 'pointer',
            }}>
              {/* Top swatch */}
              <div style={{
                position: 'relative', overflow: 'hidden',
                background: c.colors.soft, color: c.colors.ink,
                padding: '28px 28px 24px', borderBottom: '1px solid var(--border)',
              }}>
                <Droplets style={{ right: -30, top: -20 }} color={c.colors.drop} opacity={0.45} size={140} />
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 14, background: '#fff',
                    color: c.colors.ink, display: 'grid', placeItems: 'center',
                    boxShadow: '0 4px 14px -6px rgba(20,47,50,0.18)',
                  }}>
                    <Icon name={c.icon} size={22} />
                  </div>
                  <span style={{
                    fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em',
                    textTransform: 'uppercase', color: c.colors.ink,
                    background: '#fff', padding: '4px 10px', borderRadius: 999,
                  }}>{c.meta}</span>
                </div>
                <div style={{
                  marginTop: 28,
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: c.colors.ink,
                }}>{c.tag}</div>
              </div>

              {/* Body */}
              <div style={{ padding: '24px 28px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{
                  fontFamily: 'var(--font-heading)', fontSize: 22, fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1.18, margin: '0 0 12px', color: 'var(--fg1)',
                }}>{c.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 22px' }}>{c.body}</p>
                <div style={{ marginTop: 'auto' }}>
                  <a href={c.href} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    fontSize: 14, fontWeight: 600, color: c.colors.ink,
                  }}>
                    Ver solución
                    <Icon name="arrow-right" size={15} />
                  </a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Industries() {
  const list = [
    { icon: 'home',        title: 'Bienes Raíces',          body: 'Más citas de calidad, menos leads fríos. WhatsApp + IA + CRM integrado.',       bg: 'var(--sub-leadgen-bg)',     fg: 'var(--sub-leadgen-1)' },
    { icon: 'shopping',    title: 'Retail & E-commerce',    body: 'Creatividades que no se queman en tres días. Retail Media + neuromarketing.',    bg: 'var(--sub-interactive-bg)', fg: 'var(--sub-interactive-1)' },
    { icon: 'credit-card', title: 'Fintech & Servicios',    body: 'Leads pre-calificados que pasan compliance. Nurturing regulado.',                bg: 'var(--sub-academy-bg)',     fg: 'var(--sub-academy-1)' },
    { icon: 'heart',       title: 'Salud',                  body: 'Captación de pacientes y posicionamiento con contenido educativo y medible.',    bg: 'var(--sub-neuro-bg)',       fg: 'var(--sub-neuro-1)' },
    { icon: 'scale',       title: 'Legal',                  body: 'Autoridad digital para despachos. SEO especializado y leads de calidad.',        bg: 'var(--teal-50)',            fg: 'var(--teal-700)' },
    { icon: 'server',      title: 'B2B & SaaS',             body: 'Ciclos de venta más cortos. Automatización del primer contacto y calificación.', bg: 'var(--cyan-50)',            fg: 'var(--cyan-800)' },
    { icon: 'rocket',      title: 'Emprendedores',          body: 'La estrategia que necesitas para arrancar bien desde el principio.',             bg: 'var(--sub-start-bg)',       fg: 'var(--sub-start-1)' },
    { icon: 'globe',       title: 'Empresas extranjeras',   body: 'Tu equipo de marketing en México sin abrir oficina. Bilingüe, ágil, local.',     bg: 'var(--yellow-50)',          fg: 'var(--yellow-700)' },
  ];
  return (
    <section id="industrias" style={{ background: '#fff' }}>
      <Container style={{ padding: '120px 32px' }}>
        <div className="grid-2" style={{ gap: 56, alignItems: 'flex-end', marginBottom: 56 }}>
          <div>
            <Eyebrow>INDUSTRIAS DONDE OPERAMOS</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontSize: 'clamp(30px, 4vw, 50px)', fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 0',
            }}>
              Entendemos tu industria.<br/>No llegamos a aprenderla contigo.
            </h2>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0, maxWidth: 460 }}>
            Cada vertical tiene su propia mecánica de compra, su ciclo y su compliance.
            Llegamos con los playbooks ya probados y los ajustamos a tu caso.
          </p>
        </div>

        <div className="grid-4" style={{ gap: 16 }}>
          {list.map((v) => (
            <div key={v.title} className="card-hover card-hover-teal" style={{
              background: '#fff', border: '1px solid var(--border)', borderRadius: 24,
              padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 12,
                background: v.bg, color: v.fg,
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name={v.icon} size={20} />
              </div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 17, fontWeight: 700, margin: '0 0 6px', letterSpacing: '-0.01em', color: 'var(--fg1)' }}>{v.title}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--fg2)', margin: 0 }}>{v.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <Button variant="ghost" size="md" icon="arrow-right">Encuentra tu industria</Button>
        </div>
      </Container>
    </section>
  );
}

function Results() {
  const stats = [
    { n: '+35%', l: 'más citas de ventas con Lead Engine AI', src: 'Inmobiliarias piloto' },
    { n: '10×',  l: 'volumen de contenido mensual con Content Studio', src: 'Al mismo costo' },
    { n: '−40%', l: 'costo por lead en campañas con NeuroCopy Lab', src: 'A/B con neuromarketing' },
    { n: '+25%\u00a0/\u00a0+300%', l: 'mejora en ROI con IA aplicada al marketing', src: 'Rangos de industria' },
  ];
  return (
    <section id="casos" 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.22), transparent 65%)' }} />
      <div style={{ position: 'absolute', left: -140, bottom: -120, width: 460, height: 460, borderRadius: 999, background: 'radial-gradient(circle, rgba(56,145,153,0.35), transparent 65%)' }} />
      <Container style={{ padding: '120px 32px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, marginBottom: 64 }}>
          <div style={{ maxWidth: 720 }}>
            <Eyebrow dark>RESULTADOS QUE PUEDES ESPERAR</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontSize: 'clamp(32px, 4.2vw, 54px)', fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 16px', color: '#fff',
            }}>
              Números reales de clientes reales.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, margin: 0, maxWidth: 560 }}>
              Datos de pilotos y rangos de industria con atribución clara. Sin promesas vacías.
            </p>
          </div>
          <Button variant="inverse" size="md" icon="arrow-right">Ver casos de éxito</Button>
        </div>

        <div className="grid-4" style={{ gap: 24 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 24, padding: '28px 26px',
              backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 'clamp(40px, 4vw, 56px)', letterSpacing: '-0.035em',
                lineHeight: 1, color: 'var(--cyan-300)', marginBottom: 14,
                whiteSpace: 'nowrap',
              }}>{s.n}</div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: '#fff', marginBottom: 12 }}>{s.l}</div>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)',
              }}>{s.src}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Solutions, Industries, Results });