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

const NC = {
  magenta: '#B511C9',
  violet:  '#5C147F',
  bg:      'var(--sub-neuro-bg)',
  bgDark:  '#2A0A3D',
};

// ============================================================
// HERO
// ============================================================
function NcHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(85% 65% at 50% 0%, ${NC.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <NcGazeRings style={{ left: '7%',  top: '8%'  }} size={180} colorA={NC.magenta} colorB={NC.violet} />
      <NcGazeRings style={{ right: '4%', bottom: '14%' }} size={220} colorA={NC.violet} colorB={NC.magenta} opacity={0.25} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(92,20,127,0.06) 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="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/ia" style={{ color: 'var(--fg3)' }}>ia</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: NC.magenta, fontWeight: 600 }}>neurocopy-lab</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64,
          alignItems: 'start',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22, flexWrap: 'wrap' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${NC.magenta}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: NC.violet,
              }}>
                <Icon name="brain" size={12} />
                FRSKO Neuro Insights · Producto IA
              </div>
              <span style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                color: 'var(--fg3)',
              }}>Conversión · CRO</span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(40px, 5.4vw, 72px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Tu página ya tiene tráfico.<br/>
              <span style={{ color: NC.violet, fontStyle: 'italic' }}>¿Por qué no convierte más?</span>
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--fg2)', maxWidth: 580, margin: '0 0 32px',
            }}>
              NeuroCopy Lab analiza tus páginas y creatividades con metodología de neuromarketing, genera decenas de variantes de copy con IA y las prueba hasta encontrar cuál convierte mejor. Más conversiones del mismo presupuesto.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar auditoría
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-down-right" onClick={() => {
                document.getElementById('proceso')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver cómo funciona
              </Button>
            </div>

            {/* Trust line */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: NC.magenta }} /> 4 semanas
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: NC.magenta }} /> 10+ años de método
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: NC.magenta }} /> Único en LATAM
              </div>
            </div>
          </div>

          <VariantsPreview />
        </div>
      </Container>
    </section>
  );
}

function NcGazeRings({ style, size = 200, colorA, colorB, opacity = 0.4 }) {
  return (
    <div aria-hidden style={{ position: 'absolute', pointerEvents: 'none', opacity, ...style }}>
      <svg width={size} height={size} viewBox="0 0 200 200">
        <defs>
          <radialGradient id={`gr-${size}-a`} cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={colorA} stopOpacity="0.6" />
            <stop offset="60%" stopColor={colorA} stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="100" cy="100" r="98" fill="none" stroke={colorB} strokeOpacity="0.18" strokeWidth="1" strokeDasharray="3 5" />
        <circle cx="100" cy="100" r="74" fill="none" stroke={colorA} strokeOpacity="0.25" strokeWidth="1" strokeDasharray="2 4" />
        <circle cx="100" cy="100" r="48" fill="none" stroke={colorA} strokeOpacity="0.35" strokeWidth="1" strokeDasharray="2 3" />
        <circle cx="100" cy="100" r="100" fill={`url(#gr-${size}-a)`} />
        <circle cx="100" cy="100" r="6" fill={colorA} fillOpacity="0.7" />
      </svg>
    </div>
  );
}

function VariantsPreview() {
  const variants = [
    {
      label: 'Original',
      copy: 'Software de gestión para tu negocio',
      principle: '—',
      cvr: '2.1%',
      delta: null,
      tone: 'base',
    },
    {
      label: 'V1',
      copy: 'Recupera 14 horas a la semana sin contratar a nadie más',
      principle: 'Loss aversion · Especificidad',
      cvr: '2.8%',
      delta: '+33%',
      tone: 'high',
    },
    {
      label: 'V2',
      copy: 'El sistema que usan 200 PYMES mexicanas para no perder un cliente más',
      principle: 'Prueba social · Pertenencia',
      cvr: '2.5%',
      delta: '+19%',
      tone: 'mid',
    },
    {
      label: 'V3',
      copy: 'Activa el plan gratis hoy. Mañana ya nada se te olvida.',
      principle: 'Urgencia · Alivio cognitivo',
      cvr: '2.3%',
      delta: '+9%',
      tone: 'low',
    },
  ];
  const toneColor = {
    base: { ring: 'var(--ink-200)', txt: 'var(--fg3)', bg: 'var(--ink-25)' },
    high: { ring: NC.violet,        txt: NC.violet,    bg: NC.bg },
    mid:  { ring: '#E5BFE5',        txt: NC.magenta,   bg: NC.bg },
    low:  { ring: 'var(--ink-200)', txt: 'var(--fg3)', bg: '#fff' },
  };

  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      boxShadow: 'var(--shadow-lg)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 20px',
        background: `linear-gradient(135deg, ${NC.violet} 0%, ${NC.magenta} 100%)`,
        color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="brain" size={18} />
          <span style={{
            fontFamily: 'var(--font-heading)', fontWeight: 600,
            fontSize: 14, letterSpacing: '-0.005em',
          }}>Neuro-scan · landing /home</span>
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          padding: '3px 8px', borderRadius: 999,
          background: 'rgba(255,255,255,0.18)',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#82FF94',
            animation: 'ncPulse 2s infinite',
          }} />
          Generando 50 variantes
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: '20px 20px 16px' }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 14,
          display: 'flex', justifyContent: 'space-between',
        }}>
          <span>Hipótesis · 4 de 50</span>
          <span>CVR proyectada</span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {variants.map((v, i) => {
            const c = toneColor[v.tone];
            return (
              <div key={v.label} style={{
                border: `1px solid ${v.tone === 'high' ? NC.violet : 'var(--border)'}`,
                background: c.bg,
                borderRadius: 14,
                padding: '14px 16px',
                display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 14,
                alignItems: 'center',
                position: 'relative',
                animation: `ncSlide 500ms var(--ease-out) ${i * 100}ms both`,
                boxShadow: v.tone === 'high' ? `0 0 0 3px rgba(181,17,201,0.10)` : 'none',
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  fontWeight: 600, color: c.txt,
                  padding: '4px 8px', borderRadius: 6,
                  background: '#fff',
                  border: `1px solid ${c.ring}`,
                  textAlign: 'center',
                }}>{v.label}</div>
                <div>
                  <div style={{
                    fontSize: 13.5, fontWeight: v.tone === 'high' ? 600 : 500,
                    color: 'var(--fg1)', lineHeight: 1.35, marginBottom: 3,
                  }}>"{v.copy}"</div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10.5,
                    color: c.txt, letterSpacing: '0.02em',
                  }}>{v.principle}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: 'var(--font-heading)', fontSize: 18,
                    fontWeight: 700, color: 'var(--fg1)', letterSpacing: '-0.02em',
                    lineHeight: 1,
                  }}>{v.cvr}</div>
                  {v.delta && (
                    <div style={{
                      fontSize: 10.5, fontWeight: 700,
                      color: '#22A06B', marginTop: 3,
                    }}>{v.delta}</div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 16, paddingTop: 14,
          borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'var(--fg3)',
        }}>
          <span><span style={{ color: NC.violet, fontWeight: 600 }}>V1</span> gana · loss aversion + especificidad</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            color: NC.magenta, fontWeight: 600,
          }}>Ver A/B en vivo <Icon name="arrow-right" size={11} /></span>
        </div>
      </div>

      <style>{`
        @keyframes ncPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(130,255,148,0.4); }
          50% { box-shadow: 0 0 0 6px rgba(130,255,148,0); }
        }
        @keyframes ncSlide {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function NcProblem() {
  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Eyebrow>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 40px', color: 'var(--fg1)',
            maxWidth: 1000,
            textWrap: 'pretty',
          }}>
            Invertiste en optimizar tu sitio hace seis meses. ¿Cómo sabes que hay un <span style={{
              background: `linear-gradient(180deg, transparent 60%, ${NC.bg} 60%)`,
              padding: '0 6px',
              fontStyle: 'italic',
              color: NC.violet,
            }}>15% más</span> escondido ahí?
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48,
            alignItems: 'start',
          }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                La mayoría de los equipos de marketing miden clics, impresiones y tráfico. Muy pocos miden lo que sucede en el cerebro del visitante antes de que decida si se queda o se va.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
                Tu copy y tus creatividades pueden estar activando las señales incorrectas sin que nadie lo note — porque los datos de analítica no te lo dicen.
              </p>
              <p style={{
                fontSize: 22, lineHeight: 1.3, color: NC.violet,
                fontWeight: 700, fontStyle: 'italic',
                margin: '20px 0 0',
                fontFamily: 'var(--font-heading)',
                letterSpacing: '-0.02em',
              }}>
                NeuroCopy Lab sí lo detecta.
              </p>
            </div>

            {/* Big stat card */}
            <div style={{
              background: `linear-gradient(135deg, ${NC.violet} 0%, ${NC.magenta} 100%)`,
              color: '#fff',
              borderRadius: 28,
              padding: '36px 36px 32px',
              position: 'relative',
              overflow: 'hidden',
            }}>
              <NcGazeRings style={{ right: -40, bottom: -40 }} size={220} colorA="#fff" colorB="#fff" opacity={0.25} />
              <div style={{ position: 'relative' }}>
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)',
                  marginBottom: 14,
                }}>El dato que cambia todo</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 'clamp(64px, 8vw, 96px)',
                  lineHeight: 0.95, letterSpacing: '-0.04em',
                  color: '#fff', marginBottom: 12,
                }}>85%</div>
                <p style={{
                  fontSize: 17, lineHeight: 1.4,
                  color: 'rgba(255,255,255,0.92)',
                  margin: 0, maxWidth: 360,
                }}>
                  de las decisiones de compra son <strong style={{ color: '#fff', fontWeight: 700 }}>inconscientes</strong>. Tu analítica no las ve. Tu cerebro sí.
                </p>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// THREE DIMENSIONS — Atención / Emoción / Memoria
// ============================================================
function NcDimensions() {
  const dims = [
    {
      n: '01',
      icon: 'target',
      title: 'Atención',
      lead: '¿Qué elementos captan la mirada y cuáles se ignoran?',
      detail: 'Mapeamos el orden y la intensidad con que el visitante recorre tu página. Lo que no se ve, no convierte.',
      tag: 'Mapa de atención',
    },
    {
      n: '02',
      icon: 'heart',
      title: 'Emoción',
      lead: '¿Confianza, urgencia, deseo o nada?',
      detail: 'Identificamos la respuesta afectiva que dispara cada bloque. El copy correcto no informa — activa.',
      tag: 'Respuesta afectiva',
    },
    {
      n: '03',
      icon: 'brain',
      title: 'Memoria',
      lead: '¿Qué recuerda el visitante cuando cierra el navegador?',
      detail: 'Lo que no se memoriza, no se decide días después. Medimos qué partes de tu propuesta sobreviven al refresco mental.',
      tag: 'Recordación',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <NcGazeRings style={{ right: -100, top: 80 }} size={300} colorA={NC.magenta} colorB={NC.violet} opacity={0.18} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>No es intuición. Es ciencia.</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 18px', color: 'var(--fg1)',
          }}>
            Tres dimensiones que medimos en cada página.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            El neuromarketing estudia cómo el cerebro humano procesa información, registra emociones y toma decisiones — especialmente decisiones de compra. <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>Llevamos más de una década aplicando estas metodologías en empresas reales.</strong>
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {dims.map((d, i) => (
            <div key={d.n} style={{
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 24,
              padding: '32px 28px',
              position: 'relative',
              overflow: 'hidden',
              transition: 'all var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = NC.magenta; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              <NcGazeRings style={{ right: -50, top: -50 }} size={150} colorA={NC.magenta} colorB={NC.violet} opacity={0.18} />

              <div style={{ position: 'relative' }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginBottom: 24,
                }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 16,
                    background: `linear-gradient(135deg, ${NC.violet} 0%, ${NC.magenta} 100%)`,
                    color: '#fff',
                    display: 'grid', placeItems: 'center',
                  }}>
                    <Icon name={d.icon} size={26} stroke={1.6} />
                  </div>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    color: NC.magenta, letterSpacing: '0.06em',
                  }}>{d.n} / 03</span>
                </div>

                <h3 style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 28, letterSpacing: '-0.025em',
                  margin: '0 0 8px', color: 'var(--fg1)',
                  lineHeight: 1.1,
                }}>{d.title}</h3>
                <p style={{
                  fontSize: 15, lineHeight: 1.5,
                  color: NC.violet, fontStyle: 'italic',
                  margin: '0 0 14px',
                }}>
                  {d.lead}
                </p>
                <p style={{
                  fontSize: 14.5, lineHeight: 1.55,
                  color: 'var(--fg2)', margin: '0 0 18px',
                }}>
                  {d.detail}
                </p>

                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontFamily: 'var(--font-mono)', fontSize: 11.5,
                  color: NC.violet,
                  padding: '5px 10px',
                  background: NC.bg, borderRadius: 999,
                }}>
                  → {d.tag}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40,
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 20,
          padding: '24px 28px',
          display: 'flex', alignItems: 'center', gap: 18,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: NC.bg, color: NC.violet,
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <Icon name="sparkles" size={20} />
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>
            <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>Lo que hacía este análisis complejo y costoso era la instrumentación.</strong> Hoy la combinamos con IA para escalarla a un costo que ninguna empresa mediana podía pagar antes.
          </p>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { NcHero, NcProblem, NcDimensions, NcGazeRings });