const { useState, useEffect, useRef } = React;
const { Nav, Footer, Btn, SectionLabel, Card, ContactModal, useIsMobile } = window;
const { EmotionWheel, AnxietyCycle, AttachmentMap } = window;

/* ══════════════════════════════════════════════════
   DATA
══════════════════════════════════════════════════ */
/* ── Article SVG illustrations ────────────────────── */
const ArticleImg = ({ id }) => {
  const imgs = {
    autoexigencia: (
      <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%'}}>
        <rect width="400" height="200" fill="#EEE9DF"/>
        {[0,1,2,3,4].map(i => <circle key={i} cx={200} cy={210} r={30+i*30} fill="none" stroke="#2D5A4F" strokeWidth={0.8} strokeOpacity={0.1+i*0.04}/>)}
        <line x1={200} y1={210} x2={200} y2={75} stroke="#C8A87A" strokeWidth={2} strokeLinecap="round"/>
        <line x1={200} y1={210} x2={265} y2={153} stroke="#2D5A4F" strokeWidth={1.5} strokeLinecap="round"/>
        <circle cx={200} cy={210} r={5} fill="#C8A87A"/>
        {[0,30,60,90,120,150,180,210,240,270,300,330].map(a => { const rad=a*Math.PI/180,r=115; return <line key={a} x1={200+r*Math.cos(rad)} y1={210+r*Math.sin(rad)} x2={200+(r+9)*Math.cos(rad)} y2={210+(r+9)*Math.sin(rad)} stroke="#2D5A4F" strokeWidth={1} strokeOpacity={0.25}/>; })}
        <text x={200} y={70} textAnchor="middle" fontFamily="Georgia,serif" fontStyle="italic" fontSize={14} fill="#2D5A4F" fillOpacity={0.5}>¿suficiente?</text>
      </svg>
    ),
    'ansiedad-social': (
      <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%'}}>
        <rect width="400" height="200" fill="#EAEEf4"/>
        {[40,90,145,200,255,310,360].map((x,i) => <g key={i}><ellipse cx={x} cy={178} rx={13} ry={28-i%3*3} fill="#7496B8" fillOpacity={i===3?0.45:0.18}/><circle cx={x} cy={138} r={9-i%2} fill="#7496B8" fillOpacity={i===3?0.5:0.18}/></g>)}
        <circle cx={200} cy={134} r={16} fill="none" stroke="#7496B8" strokeWidth={1.5} strokeOpacity={0.55}/>
        <circle cx={200} cy={134} r={26} fill="none" stroke="#7496B8" strokeWidth={1} strokeOpacity={0.25}/>
        <text x={200} y={44} textAnchor="middle" fontFamily="sans-serif" fontSize={10} fill="#3A5A78" fillOpacity={0.45} letterSpacing="0.12em">¿CÓMO ME VEN?</text>
      </svg>
    ),
    'gestion-emocional': (
      <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%'}}>
        <rect width="400" height="200" fill="#ECF4F1"/>
        <path d="M0,140 C60,110 100,162 160,122 C220,82 260,142 320,102 C360,74 390,92 400,88" fill="none" stroke="#7BAE9F" strokeWidth={2} strokeOpacity={0.45}/>
        <path d="M0,158 C80,132 120,168 180,142 C240,118 280,158 340,128 C370,112 390,122 400,118" fill="none" stroke="#2D5A4F" strokeWidth={1.5} strokeOpacity={0.22}/>
        <path d="M0,118 C50,88 90,132 150,98 C210,68 250,118 310,84 C355,60 385,80 400,72" fill="none" stroke="#C8A87A" strokeWidth={1.5} strokeOpacity={0.3}/>
        <text x={200} y={56} textAnchor="middle" fontFamily="Georgia,serif" fontStyle="italic" fontSize={16} fill="#2D5A4F" fillOpacity={0.42}>sentir sin desbordarse</text>
      </svg>
    ),
    'apego-ghosting': (
      <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%'}}>
        <rect width="400" height="200" fill="#EEEAF5"/>
        {[[120,105],[200,65],[280,105],[160,150],[240,150]].map(([x,y],i) => <g key={i}><circle cx={x} cy={y} r={14} fill="#9B78B8" fillOpacity={0.16} stroke="#9B78B8" strokeWidth={1} strokeOpacity={0.28}/></g>)}
        {[[0,1],[0,2],[1,2],[1,3],[2,4],[3,4]].map(([a,b],i) => { const p=[[120,105],[200,65],[280,105],[160,150],[240,150]]; return <line key={i} x1={p[a][0]} y1={p[a][1]} x2={p[b][0]} y2={p[b][1]} stroke="#9B78B8" strokeWidth={1} strokeOpacity={0.22}/>; })}
        <circle cx={200} cy={65} r={5} fill="#9B78B8" fillOpacity={0.65}/>
        <text x={200} y={178} textAnchor="middle" fontFamily="sans-serif" fontSize={10} fill="#5C3A78" fillOpacity={0.4} letterSpacing="0.12em">VÍNCULOS · DISTANCIA · APEGO</text>
      </svg>
    ),
  };
  return imgs[id] || <div style={{width:'100%',height:'100%',background:'var(--bg-alt)'}}/>;
};

const ARTICLES = [
  {
    id: 'autoexigencia',
    tag: 'Autoestima',
    date: 'Abril 2026',
    readTime: '5 min',
    title: 'La trampa de la autoexigencia',
    subtitle: 'Cuando el esfuerzo se convierte en exigencia desmedida, el problema no es falta de voluntad. Es la relación que tienes contigo mismo.',
    content: `La autoexigencia no es un defecto de carácter. Es un aprendizaje.

Aprendemos a exigirnos cuando el entorno nos enseña que el valor personal depende del rendimiento. Cuando los elogios solo llegaban con el aprobado, cuando equivocarse tenía consecuencias emocionales importantes, cuando "podrías haberlo hecho mejor" era el resumen de los logros.

**El problema no es el estándar. Es la condición.**

Hay una diferencia fundamental entre tener objetivos altos y estar condicionado a no sentirte suficiente si no los alcanzas. El primero te da energía. El segundo te agota.

La autoexigencia problemática tiene una característica definitoria: el listón siempre sube. Cuando alcanzas la meta, no hay descanso. Solo aparece una nueva exigencia. El cerebro aprende que el alivio es momentáneo y que hay que seguir corriendo.

**Qué dice la psicología**

El concepto de "perfeccionismo mal adaptativo" lleva décadas siendo investigado. No es lo mismo querer hacer las cosas bien (sano) que no poder tolerar no hacerlas perfectas (problemático). La diferencia está en cómo te tratas cuando fallas.

Las personas con autoexigencia elevada tienden a tener un crítico interno muy activo. Ese crítico usa un tono que no usarías nunca con un amigo. Pero sí contigo mismo.

**Por dónde empezar**

Primero: nombra el patrón. Observa cuándo aparece el crítico interno y qué te dice exactamente. No para silenciarlo de golpe, sino para empezar a conocerlo.

Segundo: pregúntate de dónde aprendiste ese estándar. ¿Lo elegiste o te fue impuesto? ¿Sigue siendo útil o solo familiar?

Tercero: practica la autocompasión, no como un slogan, sino como una habilidad concreta. ¿Qué le dirías a alguien que quieres si estuviera pasando por lo mismo que tú?

El objetivo no es bajar el listón. Es dejar de atarte el valor personal a él.`,
  },
  {
    id: 'ansiedad-social',
    tag: 'Ansiedad',
    date: 'Marzo 2026',
    readTime: '4 min',
    title: 'Ansiedad social: cuando conectar duele',
    subtitle: 'No es timidez. No es introversión. Es un patrón de miedo aprendido que tiene solución.',
    content: `Hay personas que sienten un nudo en el estómago antes de cualquier situación social. Antes de una reunión, de hablar en clase, de conocer a alguien nuevo. Eso no es ser "tímido". Es ansiedad social.

**Qué es la ansiedad social**

La ansiedad social es el miedo persistente a ser evaluado negativamente por los demás. No es solo ponerse nervioso antes de hablar en público. Es anticipar con terror cualquier situación en la que puedas ser juzgado, rechazado o humillado.

Se diferencia de la introversión en algo clave: el introvertido prefiere la soledad porque la disfruta. La persona con ansiedad social prefiere la soledad porque las interacciones le generan un sufrimiento real.

**Los pensamientos que la mantienen**

La ansiedad social vive de predicciones catastrofistas. "Van a pensar que soy raro". "Se van a dar cuenta de que estoy nervioso". "Voy a decir algo estúpido". Estas predicciones se tratan como hechos, aunque raramente se cumplen.

También hay una tendencia a sobrestimar cuánto se fijan los demás en nosotros. El "efecto foco" es la creencia de que los demás nos observan con la misma intensidad con la que nos observamos a nosotros mismos. La realidad es que los demás están demasiado ocupados pensando en lo que los demás piensan de ellos.

**El ciclo que la perpetúa**

Cuanto más evitamos las situaciones sociales, más se confirma al cerebro que son peligrosas. La evitación alivia a corto plazo pero alimenta el problema a largo plazo.

La solución, paradójicamente, es la exposición gradual: acercarse poco a poco a las situaciones temidas, tolerando la incomodidad, hasta que el sistema nervioso aprende que no hay amenaza real.

**Pedir ayuda no es señal de debilidad.** La ansiedad social responde muy bien a la terapia, especialmente a los enfoques cognitivo-conductuales.`,
  },
  {
    id: 'gestion-emocional',
    tag: 'Gestión emocional',
    date: 'Febrero 2026',
    readTime: '6 min',
    title: 'Gestión emocional: más allá de "piensa en positivo"',
    subtitle: 'La positividad tóxica nos enseña a ignorar lo que sentimos. La psicología propone algo diferente.',
    content: `"Anímate, podría ser peor." "Solo tienes que cambiar el chip." "Piensa en positivo."

Seguramente hayas escuchado alguna de estas frases. Quizá las hayas dicho tú mismo. El problema no es que vengan de mala intención. El problema es que no funcionan.

**Qué es la positividad tóxica**

La positividad tóxica es la tendencia a negar, minimizar o invalidar emociones dolorosas a favor de un estado de ánimo "positivo". El mensaje implícito es: sentirte mal está mal.

Esto genera dos problemas. Primero, las emociones no desaparecen cuando las ignoramos. Se acumulan, se desplazan, o aparecen en forma de síntomas físicos o conductuales. Segundo, añade una capa de culpa: no solo estás triste, sino que además "deberías estar bien" y no lo estás.

**Qué es la gestión emocional de verdad**

Gestionar las emociones no significa no tenerlas. Significa tener la capacidad de experimentarlas sin que te desborden, comprenderlas, y decidir cómo actuar en función de ellas.

La psicóloga Susan David llama a esto "agilidad emocional": la capacidad de relacionarse con los propios pensamientos y emociones de una manera flexible, sin huir ni quedar atrapado.

**Las cuatro habilidades clave**

Primero, la conciencia emocional: nombrar lo que sientes con precisión. No solo "estoy mal", sino "estoy frustrado porque esperaba más de mí mismo en esta situación".

Segundo, la tolerancia al malestar: aprender que las emociones difíciles son temporales y que puedes contenerlas sin explotar ni huirles.

Tercero, la regulación: estrategias concretas para bajar la activación emocional cuando es excesiva. Respiración, movimiento, escritura expresiva.

Cuarto, la acción consciente: no dejar que la emoción dicte el comportamiento, sino elegir desde tus valores.

Las emociones no son enemigas. Son datos. Aprende su idioma.`,
  },
  {
    id: 'apego-ghosting',
    tag: 'Relaciones',
    date: 'Enero 2026',
    readTime: '5 min',
    title: 'Vínculos de apego en la era del ghosting',
    subtitle: 'John Bowlby nunca imaginó las apps de citas. Pero su teoría explica perfectamente lo que nos pasa con ellas.',
    content: `En 1969, John Bowlby publicó la primera parte de su trilogía sobre el apego. Describía cómo los seres humanos estamos biológicamente programados para buscar cercanía con otras personas, especialmente en momentos de estrés o vulnerabilidad.

No imaginaba el ghosting. Pero su teoría lo explica a la perfección.

**Qué activa el apego ansioso en el mundo digital**

Las aplicaciones de citas crean las condiciones perfectas para activar el estilo de apego ansioso. La incertidumbre continua ("¿ha leído el mensaje? ¿por qué no responde?"), la comparación constante ("hay miles de opciones mejores que yo"), y la intermitencia del refuerzo (a veces sí, a veces no) son exactamente los factores que activan la hipervigilancia en personas con apego ansioso.

El ghosting, en particular, es especialmente dañino porque no ofrece cierre. El cerebro queda en un bucle de búsqueda. ¿Hice algo mal? ¿Qué pasó? Esta falta de respuesta activa los mismos circuitos neurales que el dolor físico.

**Por qué el apego evitativo huye**

Las personas con estilo evitativo también se ven afectadas, pero de forma diferente. La intimidad les genera incomodidad, y la velocidad a la que las apps promueven la conexión ("match, chat, cita") puede activar sus mecanismos de distancia.

El resultado: una danza en la que el ansioso persigue y el evitativo se aleja, retroalimentándose mutuamente.

**¿Puede cambiar el estilo de apego?**

Sí. El apego no es un destino. Es un patrón aprendido que puede modificarse. Las relaciones reparadoras, la terapia y la mayor conciencia sobre los propios patrones son las vías de cambio.

El primer paso es siempre el mismo: reconocer el patrón sin juzgarlo. No eres tu estilo de apego. Tienes un estilo de apego que puedes entender y transformar.`,
  },
];

const EMPIEZA_TOPICS = [
  {
    id: 'autoestima',
    label: 'Autoestima',
    question: '¿Sientes que nada de lo que haces es suficiente?',
    color: '#C8A87A',
    bg: 'rgba(200,168,122,0.08)',
    icon: (
      <svg width={32} height={32} viewBox="0 0 32 32" fill="none">
        <circle cx={16} cy={16} r={13} stroke="#C8A87A" strokeWidth={1.5} />
        <path d="M16 9v7l4 3" stroke="#C8A87A" strokeWidth={1.5} strokeLinecap="round" />
      </svg>
    ),
    desc: 'La autoestima no es quererse mucho. Es tener una relación honesta y compasiva con uno mismo, incluyendo los defectos.',
    signs: ['Crítica interna constante', 'Compararte desfavorablemente con otros', 'Dificultad para recibir elogios', 'Miedo al fracaso paralizante'],
    cta: 'Artículo: La trampa de la autoexigencia',
    articleId: 'autoexigencia',
  },
  {
    id: 'ansiedad',
    label: 'Ansiedad',
    question: '¿Tu mente no para de anticipar lo peor?',
    color: '#7496B8',
    bg: 'rgba(116,150,184,0.08)',
    icon: (
      <svg width={32} height={32} viewBox="0 0 32 32" fill="none">
        <path d="M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4z" stroke="#7496B8" strokeWidth={1.5} />
        <path d="M12 13c0-2.21 1.79-4 4-4s4 1.79 4 4-4 7-4 7-4-4.79-4-7z" stroke="#7496B8" strokeWidth={1.5} />
      </svg>
    ),
    desc: 'La ansiedad es una señal de alarma. El problema aparece cuando la alarma se activa sin amenaza real y no podemos apagarla.',
    signs: ['Preocupación constante y difícil de controlar', 'Tensión física (nudo en el estómago, contracturas)', 'Evitación de situaciones temidas', 'Sensación de peligro inminente sin causa clara'],
    cta: 'Artículo: Ansiedad social',
    articleId: 'ansiedad-social',
  },
  {
    id: 'relaciones',
    label: 'Relaciones y vínculos',
    question: '¿Te cuesta confiar o te enganchas demasiado?',
    color: '#9B78B8',
    bg: 'rgba(155,120,184,0.08)',
    icon: (
      <svg width={32} height={32} viewBox="0 0 32 32" fill="none">
        <path d="M16 26s-10-6.27-10-13a6 6 0 0112 0 6 6 0 0112 0c0 6.73-10 13-10 13z" stroke="#9B78B8" strokeWidth={1.5} strokeLinejoin="round" />
      </svg>
    ),
    desc: 'La forma en que nos vinculamos de adultos tiene raíces en la infancia. Entenderlo es el primer paso para relacionarnos diferente.',
    signs: ['Miedo intenso al abandono o al rechazo', 'Dificultad para poner límites', 'Relaciones inestables o muy dependientes', 'Desconfianza generalizada hacia los demás'],
    cta: 'Artículo: Vínculos de apego',
    articleId: 'apego-ghosting',
  },
  {
    id: 'gestion-emocional',
    label: 'Gestión emocional',
    question: '¿Tus emociones te desbordan o las suprimes?',
    color: '#7BAE9F',
    bg: 'rgba(123,174,159,0.08)',
    icon: (
      <svg width={32} height={32} viewBox="0 0 32 32" fill="none">
        <path d="M8 24V12l8-8 8 8v12" stroke="#7BAE9F" strokeWidth={1.5} strokeLinejoin="round" />
        <rect x={13} y={17} width={6} height={7} rx={1} stroke="#7BAE9F" strokeWidth={1.5} />
      </svg>
    ),
    desc: 'Gestionar las emociones no es no tenerlas. Es aprender a escucharlas, tolerarlas y decidir cómo actuar en consecuencia.',
    signs: ['Reacciones emocionales intensas y difíciles de controlar', 'Dificultad para identificar qué sientes exactamente', '"Anestesia" emocional o sensación de no sentir nada', 'Las emociones te paralizan o te llevan a actuar impulsivamente'],
    cta: 'Artículo: Gestión emocional',
    articleId: 'gestion-emocional',
  },
  {
    id: 'identidad',
    label: 'Identidad personal',
    question: '¿Sabes quién eres cuando nadie te mira?',
    color: '#C07878',
    bg: 'rgba(192,120,120,0.08)',
    icon: (
      <svg width={32} height={32} viewBox="0 0 32 32" fill="none">
        <circle cx={16} cy={12} r={5} stroke="#C07878" strokeWidth={1.5} />
        <path d="M6 28c0-5.523 4.477-10 10-10s10 4.477 10 10" stroke="#C07878" strokeWidth={1.5} strokeLinecap="round" />
      </svg>
    ),
    desc: 'La identidad no es algo que se tiene, sino algo que se construye. La confusión identitaria es más común de lo que parece, y tiene solución.',
    signs: ['No sabes qué quieres o quién eres', 'Cambias mucho según con quién estás', 'Sensación de vacío o falta de propósito', 'Dudas constantes sobre tus valores y decisiones'],
    cta: 'Explorar el Laboratorio',
    articleId: null,
  },
];

/* ══════════════════════════════════════════════════
   PAGES
══════════════════════════════════════════════════ */

/* ── Neural canvas hook ───────────────────────────── */
const useNeuralCanvas = (canvasRef) => {
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animId;

    const resize = () => {
      canvas.width  = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    const NODE_COUNT = 42;
    const COLORS = ['rgba(123,174,159,', 'rgba(45,90,79,', 'rgba(200,168,122,'];
    const nodes = Array.from({ length: NODE_COUNT }, () => ({
      x:  Math.random() * canvas.width,
      y:  Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.35,
      vy: (Math.random() - 0.5) * 0.35,
      r:  Math.random() * 2.5 + 1.5,
      pulse: Math.random() * Math.PI * 2,
      color: COLORS[Math.floor(Math.random() * COLORS.length)],
    }));

    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      nodes.forEach(n => {
        n.x += n.vx; n.y += n.vy; n.pulse += 0.018;
        if (n.x < 0 || n.x > canvas.width)  n.vx *= -1;
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
      });

      // Connections
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const dx = nodes[i].x - nodes[j].x;
          const dy = nodes[i].y - nodes[j].y;
          const d = Math.sqrt(dx*dx + dy*dy);
          if (d < 150) {
            ctx.beginPath();
            ctx.moveTo(nodes[i].x, nodes[i].y);
            ctx.lineTo(nodes[j].x, nodes[j].y);
            ctx.strokeStyle = `rgba(45,90,79,${(1 - d/150) * 0.09})`;
            ctx.lineWidth = 0.8;
            ctx.stroke();
          }
        }
      }

      // Nodes
      nodes.forEach(n => {
        const p = (Math.sin(n.pulse) + 1) / 2;
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.r + p * 0.8, 0, Math.PI * 2);
        ctx.fillStyle = `${n.color}${0.25 + p * 0.18})`;
        ctx.fill();
      });

      animId = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize); };
  }, []);
};

/* ── HOME ─────────────────────────────────────────── */
const HomePage = ({ setPage }) => {
  const canvasRef = useRef(null);
  const isMobile = useIsMobile();
  useNeuralCanvas(canvasRef);
  const go = (id) => { setPage(id); window.scrollTo(0, 0); };

  return (
    <div className="page-enter">
      {/* ── Hero ── */}
      <section style={{ minHeight:'100vh', display:'flex', alignItems:'center', paddingTop:80, paddingBottom:80, position:'relative', overflow:'hidden',
        background:'linear-gradient(160deg, #F7F4EF 0%, #EEE9DF 60%, #E8F0ED 100%)',
      }}>
        {/* Neural canvas */}
        <canvas ref={canvasRef} style={{ position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none' }} />

        {/* Subtle radial glow */}
        <div style={{ position:'absolute', right:'-5%', top:'10%', width:600, height:600, borderRadius:'50%', background:'radial-gradient(circle, rgba(123,174,159,0.13) 0%, transparent 70%)', pointerEvents:'none' }}></div>
        <div style={{ position:'absolute', left:'20%', bottom:'-5%', width:400, height:400, borderRadius:'50%', background:'radial-gradient(circle, rgba(200,168,122,0.1) 0%, transparent 70%)', pointerEvents:'none' }}></div>

        <div className="container" style={{ position:'relative', zIndex:1 }}>
          <div style={{ maxWidth:700 }}>
            {/* Status badge */}
            <div style={{ display:'inline-flex', alignItems:'center', gap:10, marginBottom:28, padding:'8px 16px', borderRadius:100, background:'rgba(255,255,255,0.7)', backdropFilter:'blur(8px)', border:'1px solid rgba(123,174,159,0.3)', animation:'float-badge 4s ease-in-out infinite' }}>
              <div className="pulse-dot"><div className="dot-core"></div></div>
              <span style={{ fontSize:12, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--primary-mid)' }}>Psicología del siglo XXI</span>
            </div>

            <h1 style={{ fontFamily:'Playfair Display', fontSize:'clamp(44px, 7vw, 82px)', lineHeight:1.08, letterSpacing:'-0.02em', marginBottom:28, color:'var(--text)' }}>
              Psicología<br />
              <em style={{ color:'var(--primary)', fontStyle:'italic', fontWeight:400 }}>que te habla</em><br />
              de verdad.
            </h1>
            <p style={{ fontSize:18, color:'var(--text-mid)', lineHeight:1.8, maxWidth:500, marginBottom:44 }}>
              Aquí no encontrarás respuestas fáciles ni frases de póster. Encontrarás psicología honesta, accesible y con base científica para quien quiere entenderse mejor.
            </p>
            <div style={{ display:'flex', gap:16, flexWrap:'wrap', alignItems:'center' }}>
              <Btn onClick={() => go('empieza')}>Empieza aquí →</Btn>
              <Btn variant="outline" onClick={() => go('laboratorio')}>Ver el laboratorio</Btn>
            </div>


          </div>
        </div>

        {/* Scroll indicator */}
        <div style={{ position:'absolute', bottom:32, left:'50%', transform:'translateX(-50%)', display:'flex', flexDirection:'column', alignItems:'center', gap:8, opacity:0.4 }}>
          <span style={{ fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--text-mid)' }}>Scroll</span>
          <div style={{ width:1, height:32, background:'var(--primary-light)', animation:'fadeUp 1.5s ease infinite alternate' }}></div>
        </div>
      </section>

      {/* ── Quick stats ── */}
      <section style={{ background:'var(--primary)', padding:'48px 0' }}>
        <div className="container">
          <div className="stats-grid" style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:32 }}>
            {[
              ['1 de cada 5', 'personas experimenta ansiedad significativa en su vida.'],
              ['Solo el 40%', 'de quienes necesitan apoyo psicológico llega a pedirlo.'],
              ['Entenderte a ti', 'es la única forma de entender mejor el mundo que te rodea.'],
            ].map(([num, text], i) => (
              <div key={i} style={{ borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.1)' : 'none', paddingLeft: i > 0 ? 32 : 0 }}>
                <div style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:28, color:'var(--accent-light)', marginBottom:8 }}>{num}</div>
                <p style={{ fontSize:14, color:'rgba(255,255,255,0.65)', lineHeight:1.6 }}>{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Sections grid ── */}
      <section style={{ padding:'96px 0' }}>
        <div className="container">
          <SectionLabel>Qué encontrarás</SectionLabel>
          <h2 style={{ fontFamily:'Playfair Display', fontSize:'clamp(28px, 4vw, 42px)', marginBottom:48 }}>
            Cuatro formas de entenderte mejor
          </h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:20 }}>
            {[
              { id:'empieza', title:'Empieza aquí', desc:'Si no sabes por dónde empezar, aquí te orientamos según lo que estás viviendo ahora.', color:'var(--accent)' },
              { id:'articulos', title:'Artículos', desc:'Psicología sin jerga. Artículos escritos para que los entiendas y te sirvan.', color:'var(--primary-light)' },
              { id:'laboratorio', title:'Laboratorio', desc:'Herramientas interactivas: ruedas emocionales, ciclos cognitivos, mapas de apego.', color:'#7496B8' },
              { id:'sobre', title:'Sobre mí y contacto', desc:'Quién soy, cómo trabajo y cómo podemos vernos si lo necesitas.', color:'#9B78B8' },
            ].map(s => (
              <Card key={s.id} onClick={() => go(s.id)} style={{ padding:32 }}>
                <div style={{ width:40, height:4, borderRadius:2, background:s.color, marginBottom:24 }}></div>
                <h3 style={{ fontFamily:'Playfair Display', fontSize:20, marginBottom:12 }}>{s.title}</h3>
                <p style={{ fontSize:14, color:'var(--text-mid)', lineHeight:1.7, marginBottom:20 }}>{s.desc}</p>
                <span style={{ fontSize:13, fontWeight:500, color:'var(--primary)' }}>Explorar →</span>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── Featured article ── */}
      <section style={{ padding:'0 0 96px' }}>
        <div className="container">
          <SectionLabel>Último artículo</SectionLabel>
          <Card onClick={() => go('articulos')} style={{ display:'flex', gap:0, overflow:'hidden' }}>
            <div style={{ flex:1, padding:'48px 40px' }}>
              <span style={{ fontSize:11, fontWeight:500, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--primary-light)', marginBottom:16, display:'block' }}>
                {ARTICLES[0].tag} · {ARTICLES[0].readTime} de lectura
              </span>
              <h3 style={{ fontFamily:'Playfair Display', fontSize:28, marginBottom:14, lineHeight:1.3 }}>{ARTICLES[0].title}</h3>
              <p style={{ fontSize:15, color:'var(--text-mid)', lineHeight:1.75, marginBottom:24, maxWidth:520 }}>{ARTICLES[0].subtitle}</p>
              <Btn variant="ghost">Leer artículo →</Btn>
            </div>
            <div style={{ width:280, background:'linear-gradient(135deg, rgba(45,90,79,0.06), rgba(200,168,122,0.12))', flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <div style={{ width:80, height:80, borderRadius:'50%', border:'2px dashed var(--border)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                <span style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:13, color:'var(--text-soft)', textAlign:'center', lineHeight:1.4 }}>imagen<br />artículo</span>
              </div>
            </div>
          </Card>
        </div>
      </section>
    </div>
  );
};

/* ── EMPIEZA AQUÍ ─────────────────────────────────── */
const EmpiezaAquiPage = ({ setPage }) => {
  const [expanded, setExpanded] = useState(null);

  const toggle = (id) => setExpanded(expanded === id ? null : id);

  return (
    <div className="page-enter" style={{ paddingTop:100, paddingBottom:80 }}>
      <div className="container-sm">
        <SectionLabel>Orientación</SectionLabel>
        <h1 style={{ fontFamily:'Playfair Display', fontSize:'clamp(32px, 5vw, 52px)', marginBottom:16, lineHeight:1.2 }}>
          Empieza <em style={{ fontStyle:'italic', color:'var(--primary)' }}>aquí</em>
        </h1>
        <p style={{ fontSize:17, color:'var(--text-mid)', lineHeight:1.75, marginBottom:56, maxWidth:560 }}>
          No hace falta saber exactamente qué te pasa. Elige lo que más se acerque a lo que estás viviendo ahora mismo.
        </p>

        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {EMPIEZA_TOPICS.map(topic => {
            const isOpen = expanded === topic.id;
            return (
              <div
                key={topic.id}
                style={{
                  background:'var(--white)',
                  borderRadius:'var(--radius-lg)',
                  border:`1.5px solid ${isOpen ? topic.color : 'var(--border)'}`,
                  overflow:'hidden',
                  transition:'all 0.3s ease',
                  boxShadow: isOpen ? `0 8px 32px ${topic.color}22` : 'var(--shadow)',
                }}
              >
                {/* Header */}
                <button
                  onClick={() => toggle(topic.id)}
                  style={{ width:'100%', padding:'28px 32px', display:'flex', alignItems:'center', gap:20, background:'none', textAlign:'left' }}
                >
                  <div style={{ flexShrink:0 }}>{topic.icon}</div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:11, fontWeight:500, letterSpacing:'0.12em', textTransform:'uppercase', color:topic.color, marginBottom:6 }}>
                      {topic.label}
                    </div>
                    <div style={{ fontFamily:'Playfair Display', fontSize:20, color:'var(--text)', lineHeight:1.3 }}>
                      {topic.question}
                    </div>
                  </div>
                  <div style={{
                    width:32, height:32, borderRadius:'50%', border:`1.5px solid ${isOpen ? topic.color : 'var(--border)'}`,
                    display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, transition:'all 0.3s',
                    background: isOpen ? topic.color : 'transparent',
                  }}>
                    <span style={{ fontSize:16, color: isOpen ? '#fff' : 'var(--text-soft)', transform: isOpen ? 'rotate(45deg)' : 'none', transition:'transform 0.3s', lineHeight:1, display:'block' }}>+</span>
                  </div>
                </button>

                {/* Body */}
                {isOpen && (
                  <div style={{ padding:'0 32px 32px', borderTop:`1px solid ${topic.bg.replace('0.08)', '0.2)')}`, animation:'fadeUp 0.3s ease' }}>
                    <p style={{ fontSize:15, color:'var(--text-mid)', lineHeight:1.75, marginBottom:24, marginTop:20 }}>{topic.desc}</p>
                    <div style={{ marginBottom:24 }}>
                      <div style={{ fontSize:11, fontWeight:500, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--text-soft)', marginBottom:12 }}>
                        Señales frecuentes
                      </div>
                      <ul style={{ listStyle:'none', display:'flex', flexDirection:'column', gap:8 }}>
                        {topic.signs.map(s => (
                          <li key={s} style={{ display:'flex', alignItems:'flex-start', gap:12, fontSize:14, color:'var(--text-mid)' }}>
                            <span style={{ width:6, height:6, borderRadius:'50%', background:topic.color, flexShrink:0, marginTop:6 }}></span>
                            {s}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <Btn
                      small
                      onClick={() => { topic.articleId ? setPage('articulos') : setPage('laboratorio'); window.scrollTo(0,0); }}
                      variant="outline"
                    >
                      {topic.cta} →
                    </Btn>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

/* ── ARTÍCULOS ────────────────────────────────────── */
const ArticulosPage = () => {
  const [detail, setDetail] = useState(null);

  if (detail) {
    const art = ARTICLES.find(a => a.id === detail);
    return (
      <div className="page-enter" style={{ paddingTop:100, paddingBottom:96 }}>
        <div className="container-sm">
          <button
            onClick={() => setDetail(null)}
            style={{ display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--text-soft)', marginBottom:40, background:'none' }}
            onMouseEnter={e => e.currentTarget.style.color='var(--primary)'}
            onMouseLeave={e => e.currentTarget.style.color='var(--text-soft)'}
          >
            ← Todos los artículos
          </button>
          {/* Hero image */}
          <div className="article-hero-img" style={{ height:220, borderRadius:'var(--radius-lg)', overflow:'hidden', marginBottom:32 }}>
            <ArticleImg id={art.id} />
          </div>
          <div style={{ marginBottom:8, display:'flex', gap:12, alignItems:'center', flexWrap:'wrap' }}>
            <span style={{ fontSize:11, fontWeight:500, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--primary-light)' }}>{art.tag}</span>
            <span style={{ fontSize:12, color:'var(--text-soft)' }}>{art.date} · {art.readTime} de lectura</span>
          </div>
          <h1 style={{ fontFamily:'Playfair Display', fontSize:'clamp(28px, 4vw, 44px)', marginBottom:16, lineHeight:1.2 }}>{art.title}</h1>
          <p style={{ fontSize:18, color:'var(--text-mid)', fontStyle:'italic', marginBottom:48, lineHeight:1.7, borderBottom:'1px solid var(--border)', paddingBottom:40 }}>
            {art.subtitle}
          </p>
          <div style={{ fontSize:16, color:'var(--text)', lineHeight:1.85 }}>
            {art.content.split('\n\n').map((para, i) => {
              if (para.startsWith('**') && para.endsWith('**')) {
                return <h3 key={i} style={{ fontFamily:'Playfair Display', fontSize:22, marginTop:40, marginBottom:16, fontWeight:600 }}>{para.replace(/\*\*/g,'')}</h3>;
              }
              if (para.includes('**')) {
                const parts = para.split('**');
                return (
                  <p key={i} style={{ marginBottom:24 }}>
                    {parts.map((p, j) => j % 2 === 1 ? <strong key={j}>{p}</strong> : p)}
                  </p>
                );
              }
              return <p key={i} style={{ marginBottom:24, color:'var(--text-mid)' }}>{para}</p>;
            })}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page-enter" style={{ paddingTop:100, paddingBottom:96 }}>
      <div className="container">
        <SectionLabel>Artículos</SectionLabel>
        <h1 style={{ fontFamily:'Playfair Display', fontSize:'clamp(32px, 5vw, 52px)', marginBottom:16, lineHeight:1.2 }}>
          Psicología sin <em style={{ fontStyle:'italic', color:'var(--primary)' }}>jerga</em>
        </h1>
        <p style={{ fontSize:17, color:'var(--text-mid)', marginBottom:56, maxWidth:520 }}>
          Artículos escritos para que los entiendas, no para impresionarte.
        </p>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(300px, 1fr))', gap:24 }}>
          {ARTICLES.map((art) => (
            <Card key={art.id} onClick={() => setDetail(art.id)} style={{ padding:0, overflow:'hidden', display:'flex', flexDirection:'column' }}>
              {/* Article image */}
              <div style={{ height:160, overflow:'hidden', flexShrink:0 }}>
                <ArticleImg id={art.id} />
              </div>
              <div style={{ padding:'24px 28px 22px', flex:1, display:'flex', flexDirection:'column' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
                  <span style={{ fontSize:11, fontWeight:500, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--primary-light)' }}>{art.tag}</span>
                  <span style={{ fontSize:12, color:'var(--text-soft)' }}>{art.readTime}</span>
                </div>
                <h3 style={{ fontFamily:'Playfair Display', fontSize:21, marginBottom:10, lineHeight:1.3 }}>{art.title}</h3>
                <p style={{ fontSize:14, color:'var(--text-mid)', lineHeight:1.7, marginBottom:20, flex:1 }}>{art.subtitle}</p>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <span style={{ fontSize:12, color:'var(--text-soft)' }}>{art.date}</span>
                  <span style={{ fontSize:13, fontWeight:500, color:'var(--primary)' }}>Leer →</span>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ── LABORATORIO ──────────────────────────────────── */
const LaboratorioPage = () => {
  const [activeTab, setActiveTab] = useState(0);
  const [activeGroup, setActiveGroup] = useState(0);

  const groups = [
    {
      id: 'conceptos',
      label: 'Mapas conceptuales',
      desc: 'Visualiza conceptos psicológicos clave de forma interactiva.',
      tools: [
        {
          id: 'emociones',
          label: 'Rueda de emociones',
          tag: 'Emociones',
          desc: 'Explora las 8 emociones primarias, sus intensidades y cómo gestionarlas.',
          component: <EmotionWheel />,
        },
        {
          id: 'ansiedad',
          label: 'Ciclo de la ansiedad',
          tag: 'Ansiedad',
          desc: 'Entiende cómo funciona la ansiedad y dónde puedes interrumpir el ciclo.',
          component: <AnxietyCycle />,
        },
        {
          id: 'apego',
          label: 'Estilos de apego',
          tag: 'Relaciones',
          desc: 'Descubre los cuatro estilos de apego y lo que dicen sobre tus relaciones.',
          component: <AttachmentMap />,
        },
      ],
    },
    {
      id: 'herramientas',
      label: 'Herramientas de análisis',
      desc: 'Casos ficticios para entender cómo funcionan los patrones psicológicos.',
      tools: [
        {
          id: 'habito',
          label: '¿Qué mantiene este hábito?',
          tag: 'Conducta',
          desc: 'Un árbol de decisión que analiza por qué ciertos hábitos se resisten a cambiar.',
          component: <HabitTree />,
        },
        {
          id: 'contexto',
          label: 'El termómetro del contexto',
          tag: 'Gestión emocional',
          desc: 'Cómo el estado interno cambia radicalmente cómo respondemos ante la misma situación.',
          component: <ContextThermometer />,
        },
        {
          id: 'aprendizaje',
          label: 'Mapa del aprendizaje',
          tag: 'Identidad',
          desc: 'Cómo aprendemos a lo largo de la vida: mecanismos, etapas y ejemplos reales.',
          component: <LifeLearningMap />,
        },
      ],
    },
  ];

  const currentGroup = groups[activeGroup];
  const tools = currentGroup.tools;

  return (
    <div className="page-enter" style={{ paddingTop:100, paddingBottom:96 }}>
      <div className="container">
        <SectionLabel>Laboratorio</SectionLabel>
        <h1 style={{ fontFamily:'Playfair Display', fontSize:'clamp(32px, 5vw, 52px)', marginBottom:16, lineHeight:1.2 }}>
          Herramientas <em style={{ fontStyle:'italic', color:'var(--primary)' }}>interactivas</em>
        </h1>
        <p style={{ fontSize:17, color:'var(--text-mid)', marginBottom:36, maxWidth:540 }}>
          Visualiza conceptos psicológicos clave. Toca, explora e interactúa para entender mejor cómo funciona tu mente.
        </p>

        {/* Group selector */}
        <div style={{ display:'flex', gap:12, marginBottom:32, flexWrap:'wrap' }}>
          {groups.map((g, i) => (
            <button key={g.id} onClick={() => { setActiveGroup(i); setActiveTab(0); }} style={{
              padding:'12px 22px', borderRadius:12, fontSize:14, fontWeight: activeGroup===i ? 600 : 400,
              background: activeGroup===i ? 'var(--primary)' : 'var(--white)',
              color: activeGroup===i ? 'var(--white)' : 'var(--text-mid)',
              border: `1.5px solid ${activeGroup===i ? 'var(--primary)' : 'var(--border)'}`,
              cursor:'pointer', transition:'all 0.22s ease',
              boxShadow: activeGroup===i ? '0 4px 16px rgba(45,90,79,0.2)' : 'none',
            }}>
              {g.label}
            </button>
          ))}
        </div>

        {/* Tool tab bar */}
        <div style={{ display:'flex', gap:8, marginBottom:28, background:'var(--bg-alt)', borderRadius:12, padding:6, width:'fit-content', flexWrap:'wrap' }}>
          {tools.map((t, i) => (
            <button key={t.id} onClick={() => setActiveTab(i)} style={{
              padding:'10px 20px', borderRadius:9, fontSize:14, fontWeight: activeTab===i ? 500 : 400,
              background: activeTab===i ? 'var(--white)' : 'transparent',
              color: activeTab===i ? 'var(--primary)' : 'var(--text-mid)',
              boxShadow: activeTab===i ? '0 2px 8px rgba(45,90,79,0.1)' : 'none',
              transition:'all 0.2s', border:'none', cursor:'pointer',
            }}>
              {t.label}
            </button>
          ))}
        </div>

        {/* Active tool card */}
        <Card style={{ padding:40 }} hover={false}>
          <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:16, marginBottom:24, flexWrap:'wrap' }}>
            <div>
              <div style={{ display:'inline-block', fontSize:11, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--primary-light)', marginBottom:6 }}>
                {tools[activeTab].tag}
              </div>
              <h2 style={{ fontFamily:'Playfair Display', fontSize:26, marginBottom:6, lineHeight:1.2 }}>{tools[activeTab].label}</h2>
              <p style={{ fontSize:14, color:'var(--text-mid)', maxWidth:500 }}>{tools[activeTab].desc}</p>
            </div>
          </div>
          <div style={{ borderTop:'1px solid var(--border)', paddingTop:32 }}>
            {tools[activeTab].component}
          </div>
        </Card>
      </div>
    </div>
  );
};

/* ── SOBRE MÍ ─────────────────────────────────────── */
const SobreMiPage = () => (
  <div className="page-enter" style={{ paddingTop:100, paddingBottom:96 }}>
    <div className="container-sm">
      <SectionLabel>Sobre mí · Contacto</SectionLabel>
      <h1 style={{ fontFamily:'Playfair Display', fontSize:'clamp(32px, 5vw, 52px)', marginBottom:16, lineHeight:1.2 }}>
        Hola, soy <em style={{ fontStyle:'italic', color:'var(--primary)' }}>Javi</em>
      </h1>
      <div className="sobremi-wrap" style={{ display:'flex', gap:48, alignItems:'flex-start', flexWrap:'wrap', marginTop:40 }}>
        <div style={{ width:200, height:240, borderRadius:'var(--radius-lg)', background:'var(--bg-alt)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, border:'2px dashed var(--border)' }}>
          <span style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:13, color:'var(--text-soft)', textAlign:'center', lineHeight:1.5, padding:16 }}>foto de<br />perfil</span>
        </div>
        <div style={{ flex:1, minWidth:240 }}>
          <p style={{ fontSize:16, color:'var(--text-mid)', lineHeight:1.8, marginBottom:24 }}>
            Esta sección está en construcción. Aquí irá mi presentación, formación, enfoque terapéutico y la forma de contactar conmigo.
          </p>
          <div style={{ padding:'24px 28px', background:'rgba(45,90,79,0.06)', borderRadius:'var(--radius-lg)', borderLeft:'3px solid var(--primary-light)' }}>
            <p style={{ fontSize:14, color:'var(--text-mid)', fontStyle:'italic', lineHeight:1.7 }}>
              "Próximamente disponible. Si quieres contactar ya, puedes escribirme directamente a través de las redes sociales."
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
);

/* ══════════════════════════════════════════════════
   APP ROOT
══════════════════════════════════════════════════ */
const App = () => {
  const [page, setPage] = useState('home');
  const [showContact, setShowContact] = useState(false);

  const changePage = (id) => { setPage(id); window.scrollTo(0, 0); };

  const pages = {
    home:        <HomePage setPage={changePage} onContact={() => setShowContact(true)} />,
    empieza:     <EmpiezaAquiPage setPage={changePage} />,
    articulos:   <ArticulosPage />,
    laboratorio: <LaboratorioPage />,
    sobre:       <SobreMiPage />,
  };

  return (
    <>
      <Nav page={page} setPage={changePage} onContact={() => setShowContact(true)} />
      <main style={{ flex:1 }}>
        {pages[page] || pages.home}
      </main>
      <Footer setPage={changePage} />
      {showContact && <ContactModal onClose={() => setShowContact(false)} />}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
