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

const NR = {
  magenta: '#B511C9',
  violet:  '#5C147F',
  bg:      '#F6E7FA',
  bgMid:   '#E8C8F0',
  dark:    '#3A0050',
};

// ============================================================
// TYPES OF RESEARCH
// ============================================================
function NrTypes() {
  const rest = [
    {
      icon: 'film', label: 'Evaluación de creatividades publicitarias',
      body: 'Mide el impacto emocional y de atención de tus anuncios — TV, digital, exterior — antes de lanzarlos. Reduce el riesgo de invertir en campañas que no van a resonar.',
    },
    {
      icon: 'globe', label: 'Experiencia de usuario y punto de venta',
      body: 'Analiza cómo navega el consumidor en tu tienda física, e-commerce o app. Identifica fricciones ocultas que ningún focus group detectaría.',
    },
    {
      icon: 'users', label: 'Investigación de audiencia y buyer persona profundo',
      body: 'Más allá de los datos demográficos. Identifica motivadores emocionales reales, miedos, aspiraciones y activadores inconscientes de compra de tu audiencia objetivo.',
    },
    {
      icon: 'chart', label: 'Benchmarking competitivo',
      body: 'Compara la respuesta emocional y de atención que generan tu marca y las de tu competencia en condiciones controladas.',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-0)', borderTop: '1px solid var(--border)' }}>
      <style>{`
        .nr-types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .nr-layer-row  { display: grid; grid-template-columns: 64px 1fr 1.4fr 1fr; gap: 28px; align-items: start; }
        .nr-when-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        @media (max-width: 760px) {
          .nr-types-grid { grid-template-columns: 1fr; }
          .nr-layer-row  { grid-template-columns: 48px 1fr; }
          .nr-layer-desc { display: none; }
          .nr-layer-tag  { display: none; }
          .nr-when-grid  { grid-template-columns: 1fr; }
        }
      `}</style>

      <Container style={{ padding: '88px 32px' }}>
        <Eyebrow style={{ marginBottom: 20 }}>TIPOS DE INVESTIGACIÓN</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 3.5vw, 40px)',
          fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
          margin: '0 0 40px', color: 'var(--fg1)', maxWidth: 600,
        }}>Desde el concepto hasta el punto de venta.</h2>

        {/* Featured */}
        <div style={{
          padding: '36px 36px',
          background: NR.bg, border: `1px solid ${NR.bgMid}`,
          borderRadius: 24, marginBottom: 16,
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 40, alignItems: 'center',
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '4px 12px', borderRadius: 999,
              background: NR.magenta + '18', color: NR.magenta,
              fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
              textTransform: 'uppercase', marginBottom: 18,
            }}>
              <Icon name="rocket" size={10} color={NR.magenta} />
              Más solicitado
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 23, letterSpacing: '-0.025em', lineHeight: 1.2,
              margin: '0 0 14px', color: 'var(--fg1)',
            }}>Investigación de producto y concepto</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
              Evalúa ideas de producto, nombres de marca, empaques y conceptos de comunicación
              antes de invertir en producción. Identifica qué versión conecta mejor con el
              cerebro de tu consumidor objetivo.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['Prueba de nombres y claims', 'Evaluación de packaging A/B/C', 'Validación de concepto de producto', 'Prueba de precio percibido'].map(item => (
              <div key={item} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 14px',
                background: '#fff', border: `1px solid ${NR.bgMid}`,
                borderRadius: 12, fontSize: 13, color: 'var(--fg1)',
              }}>
                <Icon name="check" size={12} color={NR.magenta} />
                {item}
              </div>
            ))}
          </div>
        </div>

        {/* Grid */}
        <div className="nr-types-grid">
          {rest.map(t => (
            <div key={t.label} style={{
              padding: '26px 26px',
              background: '#fff', border: '1px solid var(--border)',
              borderRadius: 20,
              transition: 'border-color 200ms, box-shadow 200ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = NR.bgMid;
              e.currentTarget.style.boxShadow = `0 0 0 4px ${NR.bg}`;
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'var(--border)';
              e.currentTarget.style.boxShadow = 'none';
            }}
            >
              <div style={{
                width: 38, height: 38, borderRadius: 10, marginBottom: 14,
                background: NR.bg, border: `1px solid ${NR.bgMid}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={t.icon} size={16} color={NR.magenta} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 16, lineHeight: 1.3, margin: '0 0 10px', color: 'var(--fg1)',
              }}>{t.label}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>{t.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// THE UNIQUE COMBINATION
// ============================================================
function NrUnique() {
  const layers = [
    {
      num: '01', label: 'Neuromarketing',
      desc: 'Para lo no observable — la respuesta emocional y de atención inconsciente que ocurre antes de que la mente racional pueda verbalizarla.',
      tag: 'Eye tracking · GSR · Microexpresiones',
    },
    {
      num: '02', label: 'Data digital y observación conductual',
      desc: 'Para lo conductual — qué hace realmente el consumidor en su entorno natural: cómo navega, qué compra, qué abandona, qué repite.',
      tag: 'Analytics · Grabaciones de sesión · A/B',
    },
    {
      num: '03', label: 'Investigación explícita',
      desc: 'Para lo consciente — qué dice, qué recuerda, qué evalúa deliberadamente. La capa que da contexto y léxico para comunicar los hallazgos.',
      tag: 'Entrevistas · Encuestas · Etnografía',
    },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '88px 32px' }}>
        <Eyebrow style={{ marginBottom: 20 }}>LA COMBINACIÓN QUE NOS HACE ÚNICOS</Eyebrow>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 56,
          alignItems: 'start', marginBottom: 52,
        }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.2vw, 38px)',
            fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
            margin: 0, color: 'var(--fg1)',
          }}>Neuromarketing + Data Digital + Investigación Explícita.</h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0, paddingTop: 22 }}>
            Ninguna metodología sola da el cuadro completo. Un estudio de neuromarketing sin datos
            de comportamiento puede tener sesgos de laboratorio. Los datos digitales solos no
            explican el por qué emocional. En FRSKO Neuro Insights combinamos las tres capas.
          </p>
        </div>

        <div>
          {layers.map((l, i) => (
            <div key={l.num} className="nr-layer-row" style={{
              padding: '28px 0',
              borderTop: '1px solid var(--border)',
              borderBottom: i === layers.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800,
                color: 'var(--border-strong)', letterSpacing: '-0.04em', lineHeight: 1,
              }}>{l.num}</div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 17, lineHeight: 1.25, color: 'var(--fg1)', paddingTop: 4,
              }}>{l.label}</div>
              <p className="nr-layer-desc" style={{
                fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0, paddingTop: 4,
              }}>{l.desc}</p>
              <div className="nr-layer-tag" style={{
                fontFamily: 'var(--font-mono)', fontSize: 10.5,
                color: NR.violet, letterSpacing: '0.04em',
                padding: '8px 12px', borderRadius: 10,
                background: NR.bg, border: `1px solid ${NR.bgMid}`,
                lineHeight: 1.6, height: 'fit-content',
              }}>{l.tag}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// WHEN IT HAS MOST VALUE
// ============================================================
function NrWhen() {
  const scenarios = [
    { icon: 'rocket',    text: 'Vas a lanzar un producto nuevo o reformular uno existente' },
    { icon: 'megaphone', text: 'Inviertes más de $500k MXN en campaña y quieres validarla antes de lanzar' },
    { icon: 'chart',     text: 'Tu tasa de conversión online o en tienda está estancada y no sabes por qué' },
    { icon: 'globe',     text: 'Necesitas reposicionar tu marca y quieres saber cómo te perciben realmente' },
    { icon: 'target',    text: 'Compites en categoría saturada y necesitas encontrar tu diferenciador emocional' },
  ];

  return (
    <section style={{ background: 'var(--ink-0)', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '88px 32px' }}>
        <Eyebrow style={{ marginBottom: 20 }}>CUÁNDO TIENE MÁS VALOR</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.2vw, 38px)',
          fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
          margin: '0 0 44px', color: 'var(--fg1)', maxWidth: 580,
        }}>Alta rentabilidad de la investigación cuando…</h2>

        <div className="nr-when-grid" style={{ marginBottom: 32 }}>
          {scenarios.map(s => (
            <div key={s.text} style={{
              display: 'flex', alignItems: 'flex-start', gap: 14,
              padding: '20px 22px',
              background: '#fff', border: '1px solid var(--border)',
              borderRadius: 18,
              transition: 'border-color 200ms, box-shadow 200ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = NR.bgMid;
              e.currentTarget.style.boxShadow = `0 0 0 4px ${NR.bg}`;
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'var(--border)';
              e.currentTarget.style.boxShadow = 'none';
            }}
            >
              <div style={{
                width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                background: NR.bg, border: `1px solid ${NR.bgMid}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={s.icon} size={15} color={NR.magenta} />
              </div>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--fg1)', margin: 0 }}>{s.text}</p>
            </div>
          ))}
        </div>

        {/* NeuroCopy Lab connection */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32,
          padding: '28px 32px',
          background: `linear-gradient(135deg, ${NR.dark} 0%, ${NR.violet} 100%)`,
          borderRadius: 24, alignItems: 'center',
        }}>
          <div>
            <div style={{
              fontSize: 10.5, fontWeight: 700, letterSpacing: '0.12em',
              textTransform: 'uppercase', color: NR.bgMid, marginBottom: 10,
            }}>¿Ya tienes los insights? Optimiza tu copy con ellos.</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: 0 }}>
              NeuroCopy Lab toma los aprendizajes de tu investigación y los traduce en variantes de
              copy optimizadas con IA para tus páginas, ads y creatividades.
            </p>
          </div>
          <a href="/ia/neurocopy-lab" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '12px 20px', borderRadius: 999,
            background: '#fff', color: NR.violet,
            fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap',
            textDecoration: 'none', flexShrink: 0,
          }}>
            Ver NeuroCopy Lab
            <Icon name="arrow-right" size={13} color={NR.violet} />
          </a>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function NrFaq() {
  const [open, setOpen] = React.useState(null);

  const faqs = [
    {
      q: '¿Necesito equipo especial de laboratorio para hacer neuromarketing?',
      a: 'No siempre. Muchos estudios se realizan en el entorno natural del consumidor — tienda, hogar, oficina — con equipamiento portátil. El contexto natural da datos más válidos que el laboratorio en la mayoría de los casos.',
    },
    {
      q: '¿Cuánto tiempo toma un estudio?',
      a: 'Depende de la complejidad y el tamaño de muestra. Un estudio de evaluación de creatividades puede tomar 2 a 3 semanas. Una investigación de audiencia completa, entre 4 y 8 semanas. Lo especificamos en la propuesta.',
    },
    {
      q: '¿Cuántas personas necesito para el estudio?',
      a: 'Los estudios de neuromarketing funcionan bien con muestras menores que la investigación cuantitativa tradicional — entre 20 y 40 participantes por segmento suele ser suficiente para detectar patrones significativos. La profundidad compensa el volumen.',
    },
    {
      q: '¿Los resultados son accionables o solo descriptivos?',
      a: 'Siempre entregamos el reporte con recomendaciones concretas y priorizadas. No te damos solo datos — te decimos qué cambiar, qué mantener y qué probar a continuación.',
    },
    {
      q: '¿Trabajan con industrias reguladas como farma o financiero?',
      a: 'Sí. Tenemos experiencia en investigación para industrias con restricciones en comunicación. El neuromarketing es especialmente valioso en estos casos porque permite optimizar al máximo lo que sí se puede comunicar.',
    },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '88px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 64, alignItems: 'start' }}>
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>FAQ</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.2vw, 38px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1,
              margin: 0, color: 'var(--fg1)',
            }}>Preguntas frecuentes</h2>
          </div>

          <div>
            {faqs.map((f, i) => (
              <div key={i} style={{
                borderRadius: 16, marginBottom: 10, overflow: 'hidden',
                border: `1px solid ${open === i ? NR.bgMid : 'var(--border)'}`,
                background: open === i ? NR.bg : '#fff',
                transition: 'border-color 200ms, background 200ms',
              }}>
                <button style={{
                  width: '100%', padding: '18px 22px',
                  background: 'none', border: 'none', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  gap: 16, textAlign: 'left',
                }} onClick={() => setOpen(open === i ? null : i)}>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontWeight: 700,
                    fontSize: 15, lineHeight: 1.35, color: 'var(--fg1)',
                  }}>{f.q}</span>
                  <Icon name="arrow-right" size={14}
                    color={open === i ? NR.magenta : 'var(--fg3)'}
                    style={{
                      transform: open === i ? 'rotate(90deg)' : 'rotate(0deg)',
                      transition: 'transform 200ms', flexShrink: 0,
                    }} />
                </button>
                {open === i && (
                  <div style={{ padding: '0 22px 20px' }}>
                    <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>{f.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// CTA
// ============================================================
function NrCta({ onCta }) {
  return (
    <section style={{
      background: `linear-gradient(160deg, ${NR.dark} 0%, #1A1035 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -80, top: -40 }} color={NR.magenta} opacity={0.2}  size={320} />
      <Droplets style={{ left: -60, bottom: -60 }} color={NR.violet}  opacity={0.18} size={280} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto' }}>
          <Eyebrow style={{ color: NR.bgMid, marginBottom: 24 }}>INVESTIGACIÓN DE MERCADO</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4.5vw, 52px)',
            fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.08,
            margin: '0 0 20px',
            background: `linear-gradient(135deg, #fff 30%, ${NR.bgMid})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>
            ¿Sabes realmente por qué tu consumidor te elige a ti y no a tu competencia?
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)',
            margin: '0 0 40px',
          }}>
            Si la respuesta es "más o menos" o "lo que nos dicen en las encuestas", hay una
            conversación que vale la pena tener. Cuéntanos qué decisión quieres informar mejor
            y te proponemos la metodología correcta.
          </p>

          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 52 }}>
            <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
              Solicitar propuesta de investigación
            </Button>
            <Button variant="inverse" size="lg" icon="arrow-right">
              Hablar con un especialista
            </Button>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 36,
          }}>
            {[
              { num: '+40',   label: 'estudios realizados en México y LATAM' },
              { num: '3',     label: 'metodologías combinadas en cada estudio' },
              { num: '20–40', label: 'participantes: profundidad sobre volumen' },
            ].map((s, i) => (
              <div key={s.num} style={{
                textAlign: 'center', padding: '0 20px',
                borderRight: i < 2 ? '1px solid rgba(255,255,255,0.12)' : 'none',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1,
                  color: NR.bgMid, marginBottom: 6,
                }}>{s.num}</div>
                <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { NrTypes, NrUnique, NrWhen, NrFaq, NrCta });