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

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

const NEURO_TABS = [
  {
    id: 'emoc', label: 'Emoción', score: '78 / 100',
    scoreSub: 'Intensidad emocional neta', note: 'Sorpresa y confianza dominantes en seg. 4–8',
    bars: [
      { label: 'Confianza',     val: 72 },
      { label: 'Sorpresa',      val: 85 },
      { label: 'Alegría',       val: 63 },
      { label: 'Anticipación',  val: 57 },
      { label: 'Miedo',         val: 12 },
      { label: 'Tristeza',      val: 7  },
    ],
  },
  {
    id: 'atenc', label: 'Atención', score: '84 / 100',
    scoreSub: 'Índice de atención visual', note: 'Producto captura mirada en 1.8 seg. promedio',
    zones: [
      { top: '15%', left: '64%', r: 66, op: 0.88 },
      { top: '42%', left: '38%', r: 50, op: 0.65 },
      { top: '62%', left: '22%', r: 40, op: 0.44 },
      { top: '24%', left: '18%', r: 32, op: 0.28 },
      { top: '72%', left: '60%', r: 26, op: 0.16 },
    ],
  },
  {
    id: 'mem', label: 'Memoria', score: '71 / 100',
    scoreSub: 'Índice de memorabilidad', note: 'Decaimiento mínimo a 24h — muy por encima del benchmark',
    recalls: [
      { t: 'Inmediato',  v: 94 },
      { t: '+1 hora',    v: 82 },
      { t: '+24 horas',  v: 71 },
      { t: '+72 horas',  v: 64 },
    ],
  },
];

// ============================================================
// BRAIN INSIGHT CARD — hero visual
// ============================================================
function BrainInsightCard() {
  const [tab, setTab] = React.useState('emoc');
  const active = NEURO_TABS.find(t => t.id === tab);

  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border)',
      borderRadius: 24, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
    }}>
      {/* Chrome */}
      <div style={{
        padding: '12px 16px', background: 'var(--ink-25)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {['#FF5F57','#FEBC2E','#27C840'].map(c => (
            <div key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c }} />
          ))}
        </div>
        <div style={{
          flex: 1, fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'var(--fg3)', textAlign: 'center',
        }}>Neuro Insights · Estudio #04 — Concepto A</div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: NR.dark, padding: '3px 8px', borderRadius: 999, background: NR.bg,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: NR.magenta,
            animation: 'nrPulse 2s ease-in-out infinite',
          }} />
          Análisis
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)' }}>
        {NEURO_TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            flex: 1, padding: '10px 8px',
            background: 'none', border: 'none',
            borderBottom: `2px solid ${tab === t.id ? NR.magenta : 'transparent'}`,
            cursor: 'pointer', fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
            color: tab === t.id ? NR.magenta : 'var(--fg3)',
            transition: 'color 160ms, border-color 160ms',
          }}>{t.label}</button>
        ))}
      </div>

      {/* Score row */}
      <div style={{
        padding: '16px 20px 10px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 30, letterSpacing: '-0.03em', color: NR.magenta, lineHeight: 1,
          }}>{active.score}</div>
          <div style={{ fontSize: 10, color: 'var(--fg3)', marginTop: 2 }}>{active.scoreSub}</div>
        </div>
        <div style={{
          fontSize: 10, fontFamily: 'var(--font-mono)',
          color: NR.violet, fontStyle: 'italic',
          maxWidth: 150, textAlign: 'right', lineHeight: 1.4,
        }}>→ {active.note}</div>
      </div>

      {/* Emotion bars */}
      {tab === 'emoc' && (
        <div style={{ padding: '6px 20px 18px', display: 'flex', flexDirection: 'column', gap: 7 }}>
          {active.bars.map(b => (
            <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 86, fontSize: 10.5, color: 'var(--fg2)',
                flexShrink: 0, textAlign: 'right',
              }}>{b.label}</div>
              <div style={{ flex: 1, height: 12, background: 'var(--ink-50)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{
                  height: '100%', width: b.val + '%', borderRadius: 3,
                  background: b.val > 60 ? NR.magenta : b.val > 25 ? NR.violet + 'AA' : 'var(--border-strong)',
                }} />
              </div>
              <div style={{
                width: 24, textAlign: 'right', fontSize: 10.5,
                fontFamily: 'var(--font-mono)', fontWeight: 700,
                color: b.val > 60 ? NR.magenta : 'var(--fg3)',
              }}>{b.val}</div>
            </div>
          ))}
        </div>
      )}

      {/* Attention heat map */}
      {tab === 'atenc' && (
        <div style={{ padding: '6px 20px 18px' }}>
          <div style={{
            position: 'relative', height: 148,
            background: 'var(--ink-25)', borderRadius: 12, overflow: 'hidden',
          }}>
            {/* Suggested ad content */}
            <div style={{ position: 'absolute', top: '28%', left: 12, right: '55%', height: 11, background: 'var(--border-strong)', borderRadius: 3, opacity: 0.45 }} />
            <div style={{ position: 'absolute', top: '48%', left: 12, right: '42%', height: 9,  background: 'var(--border-strong)', borderRadius: 3, opacity: 0.3  }} />
            <div style={{ position: 'absolute', top: '63%', left: 12, right: '60%', height: 9,  background: 'var(--border-strong)', borderRadius: 3, opacity: 0.3  }} />
            <div style={{ position: 'absolute', top: 12, right: 12, bottom: 12, left: '52%', background: 'var(--border)', borderRadius: 8, opacity: 0.45 }} />
            {/* Heat zones */}
            {active.zones.map((z, i) => (
              <div key={i} style={{
                position: 'absolute', top: z.top, left: z.left,
                width: z.r, height: z.r,
                transform: 'translate(-50%,-50%)',
                borderRadius: 999,
                background: `radial-gradient(circle, ${NR.magenta}${Math.round(z.op * 230).toString(16).padStart(2,'0')} 0%, transparent 70%)`,
              }} />
            ))}
            <div style={{
              position: 'absolute', bottom: 8, right: 10,
              fontSize: 9, color: NR.violet, fontFamily: 'var(--font-mono)',
              background: 'rgba(255,255,255,0.92)', padding: '2px 7px', borderRadius: 999,
            }}>Eye tracking · n=28</div>
          </div>
        </div>
      )}

      {/* Memory recall */}
      {tab === 'mem' && (
        <div style={{ padding: '6px 20px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {active.recalls.map(r => (
            <div key={r.t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 68, fontSize: 10.5, color: 'var(--fg3)', flexShrink: 0 }}>{r.t}</div>
              <div style={{ flex: 1, height: 14, background: 'var(--ink-50)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{
                  height: '100%', width: r.v + '%', borderRadius: 3,
                  background: `linear-gradient(90deg, ${NR.magenta}, ${NR.violet})`,
                }} />
              </div>
              <div style={{
                width: 32, textAlign: 'right', fontSize: 11,
                fontFamily: 'var(--font-mono)', fontWeight: 700, color: NR.violet,
              }}>{r.v}%</div>
            </div>
          ))}
          <div style={{
            marginTop: 4, padding: '8px 12px', borderRadius: 10,
            background: NR.bg, fontSize: 10.5, color: NR.dark, lineHeight: 1.4,
          }}>
            Benchmark sector: 41% a 24h &nbsp;·&nbsp; Este estudio: <strong>71%</strong>
          </div>
        </div>
      )}
    </div>
  );
}

// ============================================================
// HERO
// ============================================================
function NrHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 50% 0%, ${NR.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <style>{`
        @keyframes nrPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
        .nr-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
        .nr-what-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        @media (max-width: 900px) {
          .nr-hero-grid  { grid-template-columns: 1fr; }
          .nr-hero-vis   { display: none; }
          .nr-what-grid  { grid-template-columns: 1fr; }
        }
      `}</style>

      <Droplets style={{ right: -60, top: 60 }}  color={NR.magenta} opacity={0.2}  size={240} />
      <Droplets style={{ left: -80, bottom: -40 }} color={NR.violet}  opacity={0.15} size={280} />

      <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="/servicios" style={{ color: 'var(--fg3)' }}>servicios</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: NR.magenta, fontWeight: 600 }}>neuromarketing</span>
        </div>

        <div className="nr-hero-grid">
          {/* Left — text */}
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 22 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 14px', borderRadius: 999,
                background: '#fff', border: `1px solid ${NR.bgMid}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: NR.violet,
              }}>
                <Icon name="brain" size={12} />
                FRSKO Neuro Insights · Investigación
              </div>
            </div>

            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 48px)',
              fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.08,
              margin: '0 0 20px', color: 'var(--fg1)',
            }}>
              Tus encuestas te dicen lo que la gente piensa que piensa.{' '}
              <em style={{ fontStyle: 'italic', color: NR.magenta }}>
                El neuromarketing te dice lo que realmente siente.
              </em>
            </h2>

            <p style={{
              fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)',
              margin: '0 0 32px', maxWidth: 520,
            }}>
              FRSKO Neuro Insights va más allá del focus group y la encuesta. Medimos emoción,
              atención y memoria con metodología de neuromarketing para darte insights que
              cambian cómo diseñas productos, mensajes y experiencias.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 36 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar propuesta de investigación
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-right"
                onClick={() => document.getElementById('metodologia')?.scrollIntoView({ behavior: 'smooth' })}>
                Conocer la metodología
              </Button>
            </div>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Neuromarketing', 'Eye tracking', 'Microexpresiones', 'México y LATAM'].map(t => (
                <div key={t} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '5px 12px', borderRadius: 999,
                  background: NR.bg, fontSize: 12, color: 'var(--fg2)',
                }}>
                  <Icon name="check" size={11} color={NR.magenta} />
                  {t}
                </div>
              ))}
            </div>
          </div>

          {/* Right — visual */}
          <div className="nr-hero-vis">
            <BrainInsightCard />
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function NrProblem() {
  return (
    <section style={{
      background: 'var(--ink-0)',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
    }}>
      <Container style={{ padding: '80px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          {/* Left */}
          <div>
            <Eyebrow style={{ marginBottom: 20 }}>POR QUÉ LAS ENCUESTAS NO SON SUFICIENTES</Eyebrow>

            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 88, letterSpacing: '-0.05em', lineHeight: 1,
              color: NR.magenta, marginBottom: 4,
            }}>85%</div>
            <div style={{
              fontSize: 13, color: 'var(--fg3)', marginBottom: 30,
              fontFamily: 'var(--font-mono)',
            }}>de las decisiones de compra ocurren en el plano inconsciente</div>

            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2.6vw, 32px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.15,
              margin: '0 0 20px', color: 'var(--fg1)',
            }}>El problema con preguntar: la gente no sabe por qué compra lo que compra.</h2>

            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 14px' }}>
              Cuando le preguntas a alguien por qué eligió una marca, te da la historia que
              tiene sentido para ella — no la causa real.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
              El neuromarketing mide lo que realmente ocurre en el momento de la experiencia:
              qué activa la atención, qué genera emoción genuina, qué se queda en la memoria
              y qué impulsa la acción.
            </p>
          </div>

          {/* Right — comparison */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {/* Encuesta dice */}
            <div style={{
              padding: '22px 24px',
              background: 'var(--ink-25)', border: '1px solid var(--border)',
              borderRadius: 20, opacity: 0.75,
            }}>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 16,
              }}>Encuesta dice</div>
              {[
                { label: 'Calidad del producto',  pct: 42 },
                { label: 'Precio',                pct: 31 },
                { label: 'Tradición y confianza', pct: 18 },
                { label: 'Recomendación',         pct: 9  },
              ].map(r => (
                <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                  <div style={{ fontSize: 12, color: 'var(--fg2)', flex: 1 }}>{r.label}</div>
                  <div style={{ width: 80, height: 8, background: 'var(--border)', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: r.pct + '%', background: 'var(--border-strong)', borderRadius: 3 }} />
                  </div>
                  <div style={{ width: 28, fontSize: 10.5, color: 'var(--fg3)', textAlign: 'right' }}>{r.pct}%</div>
                </div>
              ))}
              <div style={{ fontSize: 11, color: 'var(--fg3)', marginTop: 8, fontStyle: 'italic' }}>n=847 · cuestionario online</div>
            </div>

            {/* Neuro detecta */}
            <div style={{
              padding: '22px 24px',
              background: NR.bg, border: `1px solid ${NR.bgMid}`,
              borderRadius: 20,
            }}>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: NR.magenta, marginBottom: 16,
              }}>Neuro detecta</div>
              {[
                { label: 'Apego emocional al color del packaging',   intensity: 'Alta activación',  color: NR.magenta },
                { label: 'Activación de confianza por voz del vocero', intensity: 'Alta activación', color: NR.magenta },
                { label: 'Micro-rechazo en el claim principal',      intensity: 'Media activación', color: NR.violet  },
                { label: 'Memoria evocativa por melodía del jingle', intensity: 'Alta activación',  color: NR.magenta },
              ].map(d => (
                <div key={d.label} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10,
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: 999,
                    background: d.color, flexShrink: 0, marginTop: 5,
                  }} />
                  <div>
                    <div style={{ fontSize: 12.5, color: 'var(--fg1)', lineHeight: 1.4 }}>{d.label}</div>
                    <div style={{ fontSize: 10.5, color: d.color, fontWeight: 600, marginTop: 1 }}>{d.intensity}</div>
                  </div>
                </div>
              ))}
              <div style={{ fontSize: 11, color: NR.violet, marginTop: 8, fontStyle: 'italic' }}>
                n=32 · eye tracking + microexpresiones + GSR
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// WHAT WE MEASURE
// ============================================================
function NrWhat() {
  const dims = [
    {
      icon: 'heart', dark: true, label: 'Emoción',
      body: 'Qué respuesta emocional genera tu marca, producto o comunicación. No lo que el participante dice que siente — lo que su sistema nervioso registra.',
      methods: ['Análisis de microexpresiones faciales', 'Respuesta galvánica de la piel (GSR)', 'Reconocimiento facial de emociones'],
    },
    {
      icon: 'search', dark: false, label: 'Atención',
      body: 'Qué elementos visuales captan la mirada y cuáles se ignoran. Fundamental para packaging, creatividades, diseño web y exhibición en punto de venta.',
      methods: ['Eye tracking de precisión', 'Mapas de calor de atención visual', 'Medición de tiempo de fijación por zona'],
    },
    {
      icon: 'brain', dark: false, label: 'Memoria',
      body: 'Qué elementos de tu comunicación se quedan en la memoria después de la exposición. Lo que no se recuerda no influye en la decisión de compra.',
      methods: ['Pruebas de recordación espontánea', 'Recordación asistida a 24h y 72h', 'Codificación implícita de marca'],
    },
  ];

  return (
    <section id="metodologia" style={{ background: '#fff' }}>
      <Container style={{ padding: '88px 32px' }}>
        <Eyebrow style={{ marginBottom: 16 }}>QUÉ MEDIMOS</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)',
          }}>Tres dimensiones que las metodologías convencionales no alcanzan.</h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg2)', margin: 0, paddingTop: 22 }}>
            Las encuestas miden lo que la gente cree que siente. El neuromarketing mide lo que
            realmente ocurre — en el momento exacto de la experiencia, antes de que la mente
            racional pueda construir una narrativa.
          </p>
        </div>

        <div className="nr-what-grid">
          {dims.map(d => (
            <div key={d.label} style={{
              padding: '32px 28px',
              background: d.dark ? 'var(--fg1)' : NR.bg,
              border: d.dark ? 'none' : `1px solid ${NR.bgMid}`,
              borderRadius: 24,
              transition: 'transform 200ms var(--ease-out)',
            }}
            onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
            >
              <div style={{
                width: 44, height: 44, borderRadius: 14, marginBottom: 18,
                background: d.dark ? 'rgba(255,255,255,0.1)' : '#fff',
                border: d.dark ? '1px solid rgba(255,255,255,0.15)' : `1px solid ${NR.bgMid}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={d.icon} size={20} color={d.dark ? NR.bgMid : NR.magenta} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 24, letterSpacing: '-0.025em', lineHeight: 1.15,
                margin: '0 0 12px', color: d.dark ? '#fff' : 'var(--fg1)',
              }}>{d.label}</h3>
              <p style={{
                fontSize: 14, lineHeight: 1.65, margin: '0 0 20px',
                color: d.dark ? 'rgba(255,255,255,0.65)' : 'var(--fg2)',
              }}>{d.body}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {d.methods.map(m => (
                  <div key={m} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 8,
                    fontSize: 12.5, lineHeight: 1.4,
                    color: d.dark ? 'rgba(255,255,255,0.5)' : 'var(--fg3)',
                  }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: 999, flexShrink: 0, marginTop: 5,
                      background: d.dark ? NR.bgMid : NR.magenta,
                    }} />
                    {m}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { BrainInsightCard, NrHero, NrProblem, NrWhat });