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

// ============================================================
// HERO — IA Hub
// ============================================================

function IaHero({ onCta }) {
  const products = [
    { label: 'Lead Engine AI',      icon: 'target',     hue: 'leadgen',     anchor: '#lead-engine' },
    { label: 'NeuroCopy Lab',       icon: 'brain',      hue: 'neuro',       anchor: '#neurocopy' },
    { label: 'Content Studio AI',   icon: 'film',       hue: 'interactive', anchor: '#content-studio' },
    { label: 'Smart Ads AI',        icon: 'zap',        hue: 'cyan',        anchor: '#smart-ads' },
    { label: 'SEO Pulse',           icon: 'search',     hue: 'academy',     anchor: '#seo-pulse' },
    { label: 'Bootcamps IA',        icon: 'graduation', hue: 'start',       anchor: '#bootcamps' },
  ];
  const HUE = {
    leadgen:     { bg: 'var(--sub-leadgen-bg)',     ink: 'var(--sub-leadgen-1)' },
    neuro:       { bg: 'var(--sub-neuro-bg)',       ink: 'var(--sub-neuro-1)' },
    interactive: { bg: 'var(--sub-interactive-bg)', ink: 'var(--sub-interactive-1)' },
    cyan:        { bg: 'var(--cyan-50)',            ink: 'var(--cyan-800)' },
    academy:     { bg: 'var(--sub-academy-bg)',     ink: 'var(--sub-academy-1)' },
    start:       { bg: 'var(--sub-start-bg)',       ink: 'var(--sub-start-1)' },
  };

  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', background: 'var(--grad-halo)' }}>
      <Droplets style={{ right: -60, top: 60 }} color="var(--teal-200)" opacity={0.35} size={240} />
      <Droplets style={{ left: -90, bottom: -60 }} color="var(--cyan-200)" opacity={0.28} size={280} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(20,47,50,0.05) 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: '88px 32px 56px', position: 'relative' }}>
        {/* Breadcrumb + Badge */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22, flexWrap: 'wrap' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-mono)', fontSize: 11.5,
            color: 'var(--fg3)', letterSpacing: '0.02em',
          }}>
            <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
            <span style={{ opacity: 0.5 }}>/</span>
            <span style={{ color: 'var(--brand)' }}>ia</span>
          </div>
          <Badge tone="accent">
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: 'var(--cyan-600)',
              boxShadow: '0 0 0 4px rgba(0,179,186,0.18)',
            }} />
            6 productos · Live hoy
          </Badge>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 'clamp(40px, 5.6vw, 76px)',
          lineHeight: 1.02, letterSpacing: '-0.035em',
          margin: '0 0 26px', maxWidth: 1080, color: 'var(--fg1)',
        }}>
          Seis soluciones de <span style={{
            background: 'var(--grad-brand)', WebkitBackgroundClip: 'text', backgroundClip: 'text',
            color: 'transparent', fontStyle: 'italic',
          }}>IA</span> listas para trabajar<br/>en tu empresa esta semana.
        </h1>

        <p style={{
          fontSize: 'clamp(17px, 1.5vw, 21px)', lineHeight: 1.55,
          color: 'var(--fg2)', maxWidth: 760, margin: '0 0 36px',
        }}>
          No son prototipos ni promesas a futuro. Son productos probados con clientes reales que ya están generando leads, publicando contenido y optimizando campañas con inteligencia artificial.
        </p>

        <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', marginBottom: 56 }}>
          <Button variant="cta" size="lg" icon="arrow-down-right" onClick={() => {
            document.getElementById('soluciones')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>Encuentra tu solución</Button>
          <a onClick={onCta} href="#" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 15, fontWeight: 600, color: 'var(--fg2)',
            textDecoration: 'none',
          }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--brand)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg2)'}>
            Habla con un estratega <Icon name="arrow-right" size={14} />
          </a>
        </div>

        {/* Product anchor strip */}
        <div>
          <div style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: 'var(--brand)', marginBottom: 14,
          }}>El catálogo</div>
          <div className="ia-anchor-strip">
            {products.map(p => {
              const h = HUE[p.hue];
              return (
                <a key={p.label} href={p.anchor}
                  className="ia-chip"
                  style={{
                    '--chip-ink': h.ink,
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '12px 14px',
                    background: 'rgba(255,255,255,0.75)',
                    border: '1px solid var(--border)',
                    borderRadius: 16,
                    textDecoration: 'none',
                    color: 'var(--fg1)',
                  }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 10, flexShrink: 0,
                    background: h.bg, color: h.ink,
                    display: 'grid', placeItems: 'center',
                  }}>
                    <Icon name={p.icon} size={16} />
                  </div>
                  <div style={{
                    fontSize: 13, fontWeight: 600, lineHeight: 1.2,
                    letterSpacing: '-0.005em',
                  }}>{p.label}</div>
                </a>
              );
            })}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// HOW IT WORKS
// ============================================================

function IaHowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Diagnóstico',
      time: '1 semana',
      body: 'Entendemos tu modelo de negocio, tu ICP y tus métricas actuales. Salimos con un plan, no con una propuesta genérica.',
    },
    {
      n: '02',
      title: 'Configuración',
      time: '1 a 2 semanas',
      body: 'Armamos el workflow de IA específico para tu empresa. Conectamos herramientas, integramos data y entrenamos los agentes.',
    },
    {
      n: '03',
      title: 'Operación continua',
      time: 'Desde el mes 1',
      body: 'Arrancamos, medimos y ajustamos cada semana. Tú recibes resultados — nosotros nos ocupamos del stack.',
    },
  ];

  const stack = ['Claude', 'n8n', 'ElevenLabs', 'HeyGen', 'Apify', 'Make', 'Vapi', '+15 más'];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div className="ia-how-intro">
          <div>
            <Eyebrow>Cómo funciona FRSKO AI</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(30px, 3.6vw, 48px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 0', color: 'var(--fg1)',
            }}>
              No vendemos software.<br/>
              <span style={{ color: 'var(--brand)' }}>Operamos la solución por ti.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 22px' }}>
              Cada solución FRSKO AI tiene tres capas: la <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>tecnología</strong> (Claude, n8n, ElevenLabs, HeyGen y más), la <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>metodología probada</strong> que desarrollamos internamente, y el <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>equipo de estrategas</strong> que la opera y la supervisa.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
              Tú recibes resultados. Nosotros nos ocupamos del stack.
            </p>

            {/* Stack chips */}
            <div style={{
              marginTop: 24, paddingTop: 22,
              borderTop: '1px solid var(--border)',
              display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg3)', letterSpacing: '0.02em',
                paddingRight: 8,
              }}>stack/</span>
              {stack.map(s => (
                <span key={s} style={{
                  fontFamily: 'var(--font-mono)', fontSize: 12,
                  padding: '5px 10px',
                  border: '1px solid var(--border)',
                  borderRadius: 999,
                  color: 'var(--fg2)',
                  background: 'var(--ink-25)',
                }}>{s}</span>
              ))}
            </div>
          </div>
        </div>

        {/* 3 steps */}
        <div style={{ position: 'relative' }}>
          {/* Connecting line — hidden on mobile via CSS */}
          <div aria-hidden className="ia-steps-connect" />
          <div className="grid-3" style={{ position: 'relative', gap: 32 }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{
                background: '#fff',
                position: 'relative',
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 999,
                  background: 'var(--grad-brand)',
                  color: '#fff',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-mono)',
                  fontSize: 16, fontWeight: 600,
                  letterSpacing: '0.02em',
                  marginBottom: 22,
                  boxShadow: 'var(--shadow-brand)',
                }}>{s.n}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10 }}>
                  <h3 style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 700,
                    fontSize: 24, letterSpacing: '-0.02em',
                    margin: 0, color: 'var(--fg1)',
                  }}>{s.title}</h3>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    color: 'var(--brand)',
                    padding: '3px 8px',
                    background: 'var(--teal-50)',
                    borderRadius: 999,
                  }}>{s.time}</span>
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
                  {s.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { IaHero, IaHowItWorks });