const { useState, useEffect, useRef } = React;

/* ══════════════════════════════════════════════════
   HERRAMIENTA 1 — ¿Qué mantiene este hábito?
   Árbol de decisión: "revisar el móvil al despertar"
══════════════════════════════════════════════════ */

const HABIT_TREE = {
  id: 'root',
  question: '¿Qué pasa justo antes de revisar el móvil?',
  sub: 'Piensa en ese momento exacto: acabas de abrir los ojos.',
  options: [
    {
      label: 'Silencio e incertidumbre sobre el día',
      next: 'silence',
    },
    {
      label: 'Notificaciones pendientes que sé que tengo',
      next: 'notifs',
    },
    {
      label: 'Es automático, ni lo pienso',
      next: 'auto',
    },
  ],
};

const HABIT_NODES = {
  silence: {
    question: '¿Cómo te sientes en ese momento de silencio?',
    sub: 'Antes de tocar el móvil.',
    options: [
      { label: 'Algo inquieto, con tensión en el pecho', next: 'anxiety_relief' },
      { label: 'Aburrido, sin motivación', next: 'boredom_relief' },
    ],
  },
  notifs: {
    question: '¿Qué esperas encontrar?',
    sub: 'Sé honesto, ¿qué te genera esa espera?',
    options: [
      { label: 'Algo positivo: mensajes, likes, noticias buenas', next: 'reward_seeking' },
      { label: 'Comprobar que no ha pasado nada malo', next: 'anxiety_relief' },
    ],
  },
  auto: {
    question: '¿Recuerdas cuándo empezó este hábito?',
    sub: 'Intenta recordar la primera vez.',
    options: [
      { label: 'No tengo ni idea, siempre ha sido así', next: 'conditioned' },
      { label: 'Empezó en una época de estrés o cambio', next: 'stress_origin' },
    ],
  },
  anxiety_relief: {
    result: true,
    type: 'alivio',
    trigger: 'La incomodidad del silencio o la incertidumbre',
    action: 'Revisar el móvil',
    gain: 'Alivio inmediato de la tensión',
    insight: 'El hábito funciona como un escudo ante el malestar. No es que te guste el móvil tanto: es que te quita algo incómodo. Eso lo hace muy resistente al cambio.',
    color: '#7496B8',
  },
  boredom_relief: {
    result: true,
    type: 'alivio del aburrimiento',
    trigger: 'El vacío o la falta de estímulo al despertar',
    action: 'Revisar el móvil',
    gain: 'Activación mental instantánea',
    insight: 'El aburrimiento es incómodo, y el móvil lo resuelve en segundos. El problema es que con el tiempo, tu tolerancia al silencio baja: cada vez necesitas llenarlo más rápido.',
    color: '#9B78B8',
  },
  reward_seeking: {
    result: true,
    type: 'búsqueda de recompensa',
    trigger: 'La anticipación de algo positivo',
    action: 'Revisar el móvil',
    gain: 'Pequeñas dosis de placer e impacto social',
    insight: 'El móvil funciona como una máquina tragaperras: a veces hay algo emocionante, a veces no. Esa incertidumbre hace el hábito más adictivo, no menos.',
    color: '#C8A87A',
  },
  conditioned: {
    result: true,
    type: 'automatismo aprendido',
    trigger: 'Despertar (ya no necesita señal específica)',
    action: 'Revisar el móvil',
    gain: 'Sensación de normalidad y rutina',
    insight: 'El hábito lleva tanto tiempo ahí que ya no necesita motivo. Forma parte de tu guión de mañana como lavarte los dientes. Cambiarlo requiere consciencia y repetición, no fuerza de voluntad.',
    color: '#7BAE9F',
  },
  stress_origin: {
    result: true,
    type: 'respuesta al estrés (ya integrada)',
    trigger: 'Despertar — recuerdo inconsciente de una época difícil',
    action: 'Revisar el móvil',
    gain: 'Control e información sobre el entorno',
    insight: 'Aprendiste a revisar el móvil cuando necesitabas estar al tanto de todo. Ya no estás en esa situación, pero el patrón se quedó. Entender su origen es el primer paso para decidir si lo quieres cambiar.',
    color: '#C07878',
  },
};

const HabitTree = () => {
  const [path, setPath] = useState([]);
  const [current, setCurrent] = useState('root');
  const [result, setResult] = useState(null);

  const getNode = (id) => id === 'root' ? HABIT_TREE : HABIT_NODES[id];

  const choose = (optionNext) => {
    const node = HABIT_NODES[optionNext];
    if (node?.result) {
      setResult(node);
      setPath(p => [...p, optionNext]);
    } else {
      setPath(p => [...p, optionNext]);
      setCurrent(optionNext);
    }
  };

  const reset = () => { setPath([]); setCurrent('root'); setResult(null); };

  const node = getNode(current);
  const progress = result ? 100 : Math.min(path.length * 22, 88);

  return (
    <div>
      {/* Progress bar */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <span style={{ fontSize: 12, color: 'var(--text-soft)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500 }}>
            Analizando el hábito
          </span>
          <span style={{ fontSize: 12, color: 'var(--primary)', fontWeight: 600 }}>{progress}%</span>
        </div>
        <div style={{ height: 4, background: 'var(--bg-alt)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${progress}%`, background: 'linear-gradient(90deg, var(--primary-light), var(--primary))', borderRadius: 2, transition: 'width 0.5s ease' }}></div>
        </div>
      </div>

      {/* Path breadcrumb */}
      {path.length > 0 && (
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 24 }}>
          {path.map((p, i) => (
            <span key={i} style={{ fontSize: 11, padding: '3px 10px', borderRadius: 100, background: 'var(--bg-alt)', color: 'var(--text-soft)' }}>
              {i + 1}
            </span>
          ))}
        </div>
      )}

      {!result ? (
        <div style={{ animation: 'fadeUp 0.35s ease' }}>
          {/* Subject tag */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 100, background: 'rgba(45,90,79,0.07)', marginBottom: 20 }}>
            <span style={{ fontSize: 14 }}>📱</span>
            <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--primary)' }}>Hábito analizado: revisar el móvil al despertar</span>
          </div>

          <h3 style={{ fontFamily: 'Playfair Display', fontSize: 22, marginBottom: 8, lineHeight: 1.3 }}>{node.question}</h3>
          <p style={{ fontSize: 14, color: 'var(--text-soft)', marginBottom: 28 }}>{node.sub}</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {node.options.map((opt, i) => (
              <button
                key={i}
                onClick={() => choose(opt.next)}
                style={{
                  padding: '16px 22px', borderRadius: 12, border: '1.5px solid var(--border)',
                  background: 'var(--white)', textAlign: 'left', cursor: 'pointer',
                  fontSize: 15, color: 'var(--text)', fontFamily: 'DM Sans',
                  transition: 'all 0.22s ease', display: 'flex', alignItems: 'center', gap: 14,
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--primary-light)'; e.currentTarget.style.background = 'rgba(123,174,159,0.05)'; e.currentTarget.style.transform = 'translateX(4px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.background = 'var(--white)'; e.currentTarget.style.transform = 'translateX(0)'; }}
              >
                <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-alt)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, color: 'var(--primary)', flexShrink: 0 }}>{i + 1}</span>
                {opt.label}
              </button>
            ))}
          </div>
        </div>
      ) : (
        <div style={{ animation: 'fadeUp 0.4s ease' }}>
          {/* Result header */}
          <div style={{ marginBottom: 28 }}>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: result.color, marginBottom: 8 }}>
              Este hábito funciona por: {result.type}
            </div>
            <h3 style={{ fontFamily: 'Playfair Display', fontSize: 22, marginBottom: 0 }}>Así funciona el ciclo</h3>
          </div>

          {/* Visual cycle: trigger → action → gain */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginBottom: 28, flexWrap: 'wrap' }}>
            {[
              { label: 'La señal', value: result.trigger, icon: '⚡' },
              { label: 'Lo que haces', value: result.action, icon: '→' },
              { label: 'Lo que obtienes', value: result.gain, icon: '✓' },
            ].map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{
                  padding: '16px 18px', borderRadius: 12,
                  background: i === 1 ? result.color : 'var(--white)',
                  border: `1.5px solid ${i === 1 ? result.color : 'var(--border)'}`,
                  minWidth: 130, textAlign: 'center',
                  boxShadow: i === 1 ? `0 4px 20px ${result.color}33` : 'none',
                }}>
                  <div style={{ fontSize: 13, marginBottom: 4 }}>{item.icon}</div>
                  <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: i === 1 ? 'rgba(255,255,255,0.7)' : 'var(--text-soft)', marginBottom: 6 }}>{item.label}</div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: i === 1 ? '#fff' : 'var(--text)', lineHeight: 1.4 }}>{item.value}</div>
                </div>
                {i < 2 && (
                  <div style={{ width: 24, height: 1.5, background: 'var(--border)', flexShrink: 0 }}></div>
                )}
              </div>
            ))}
          </div>

          {/* Insight box */}
          <div style={{ padding: '20px 24px', background: `${result.color}12`, borderRadius: 14, borderLeft: `3px solid ${result.color}`, marginBottom: 24 }}>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: result.color, marginBottom: 8 }}>Lo que esto significa</div>
            <p style={{ fontSize: 15, color: 'var(--text-mid)', lineHeight: 1.75, fontStyle: 'italic' }}>{result.insight}</p>
          </div>

          <button onClick={reset} style={{ fontSize: 14, color: 'var(--primary)', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'DM Sans', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.7'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >
            ↺ Volver a empezar
          </button>
        </div>
      )}
    </div>
  );
};

/* ══════════════════════════════════════════════════
   HERRAMIENTA 2 — El termómetro del contexto
   Laura en dos momentos distintos
══════════════════════════════════════════════════ */

const LAURA_PROFILES = [
  {
    id: 'monday',
    label: 'Laura — Lunes',
    sublabel: 'Tras dormir mal y una semana cargada',
    emoji: '😔',
    color: '#C07878',
    bg: 'rgba(192,120,120,0.08)',
    indicators: {
      descanso: { value: 20, label: 'Descanso' },
      estres: { value: 85, label: 'Estrés acumulado' },
      emocional: { value: 30, label: 'Estado emocional' },
      social: { value: 25, label: 'Apoyo social reciente' },
    },
    situation: 'Su jefe le dice en voz alta: "Este informe tiene errores, Laura."',
    reaction: '💥',
    reactionText: 'Se le hace un nudo en el estómago. Siente que todo el mundo la está mirando. Piensa: "No soy suficientemente buena." Por la tarde rumia la escena varias veces.',
    reactionLabel: 'Reacción intensa',
    closing: 'No es que Laura sea frágil. Es que llegó al límite de lo que podía sostener ese día. El contexto la dejó sin recursos para gestionar algo que otro día habría manejado con facilidad.',
  },
  {
    id: 'saturday',
    label: 'Laura — Sábado',
    sublabel: 'Descansada, con planes y buenas noticias',
    emoji: '😊',
    color: '#7BAE9F',
    bg: 'rgba(123,174,159,0.08)',
    indicators: {
      descanso: { value: 85, label: 'Descanso' },
      estres: { value: 20, label: 'Estrés acumulado' },
      emocional: { value: 82, label: 'Estado emocional' },
      social: { value: 78, label: 'Apoyo social reciente' },
    },
    situation: 'Su jefe le dice en voz alta: "Este informe tiene errores, Laura."',
    reaction: '💪',
    reactionText: 'Se tensa un momento, respira. Piensa: "Vaya, habrá que revisarlo." Le escribe un mensaje al jefe para aclarar los puntos. Lo soluciona y sigue con su día.',
    reactionLabel: 'Respuesta adaptativa',
    closing: 'Laura en sábado no es "mejor" Laura. Es la misma persona con más recursos disponibles. El descanso, el apoyo y el estado emocional cambian todo lo que está en juego antes de que ocurra algo.',
  },
  {
    id: 'crisis',
    label: 'Laura — En crisis',
    sublabel: 'Semana de pico de trabajo, conflicto familiar reciente',
    emoji: '😰',
    color: '#9B78B8',
    bg: 'rgba(155,120,184,0.08)',
    indicators: {
      descanso: { value: 10, label: 'Descanso' },
      estres: { value: 97, label: 'Estrés acumulado' },
      emocional: { value: 12, label: 'Estado emocional' },
      social: { value: 15, label: 'Apoyo social reciente' },
    },
    situation: 'Su jefe le dice en voz alta: "Este informe tiene errores, Laura."',
    reaction: '🌊',
    reactionText: 'Se le llenan los ojos de lágrimas y sale al baño. Pasa el resto del día pensando en dejarlo todo. Por la noche no puede dormir. Esa frase se convierte en la gota que colma el vaso.',
    reactionLabel: 'Desbordamiento',
    closing: 'Cuando estamos en este punto, incluso situaciones normales se viven como amenazas. No porque seamos débiles sino porque el sistema ya no tiene más capacidad. Aquí es cuando pedir ayuda tiene más sentido.',
  },
];

const Thermometer = ({ value, color, label }) => {
  const [displayed, setDisplayed] = useState(0);
  useEffect(() => {
    const t = setTimeout(() => setDisplayed(value), 120);
    return () => clearTimeout(t);
  }, [value]);

  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
        <span style={{ fontSize: 13, color: 'var(--text-mid)', fontWeight: 400 }}>{label}</span>
        <span style={{ fontSize: 13, fontWeight: 600, color }}>{displayed}%</span>
      </div>
      <div style={{ height: 8, background: 'var(--bg-alt)', borderRadius: 4, overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: `${displayed}%`,
          background: `linear-gradient(90deg, ${color}88, ${color})`,
          borderRadius: 4, transition: 'width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1)',
        }}></div>
      </div>
    </div>
  );
};

const ContextThermometer = () => {
  const [active, setActive] = useState(0);
  const profile = LAURA_PROFILES[active];

  return (
    <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'flex-start' }}>
      {/* Left: profile selector */}
      <div style={{ flexShrink: 0, width: 240 }}>
        <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-soft)', marginBottom: 12 }}>
          Elige un momento de Laura
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {LAURA_PROFILES.map((p, i) => (
            <button key={p.id} onClick={() => setActive(i)} style={{
              padding: '14px 16px', borderRadius: 12,
              border: `1.5px solid ${active === i ? p.color : 'var(--border)'}`,
              background: active === i ? p.bg : 'var(--white)',
              textAlign: 'left', cursor: 'pointer', transition: 'all 0.25s ease',
              boxShadow: active === i ? `0 4px 16px ${p.color}22` : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <span style={{ fontSize: 18 }}>{p.emoji}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: active === i ? p.color : 'var(--text)' }}>{p.label}</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-soft)', lineHeight: 1.4, paddingLeft: 28 }}>{p.sublabel}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Right: profile detail */}
      <div style={{ flex: 1, minWidth: 280, animation: 'fadeUp 0.35s ease' }} key={profile.id}>
        {/* Indicators */}
        <div style={{ padding: '22px 24px', background: 'var(--white)', borderRadius: 14, border: '1px solid var(--border)', marginBottom: 16 }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-soft)', marginBottom: 16 }}>
            Estado interno
          </div>
          {Object.values(profile.indicators).map(ind => (
            <Thermometer key={ind.label} value={ind.value} color={profile.color} label={ind.label} />
          ))}
        </div>

        {/* Situation */}
        <div style={{ padding: '16px 20px', background: 'rgba(45,90,79,0.05)', borderRadius: 12, marginBottom: 14, border: '1px solid var(--border)' }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-soft)', marginBottom: 8 }}>
            La misma situación
          </div>
          <p style={{ fontSize: 14, color: 'var(--text)', fontStyle: 'italic', lineHeight: 1.6 }}>"{profile.situation}"</p>
        </div>

        {/* Reaction */}
        <div style={{ padding: '18px 20px', background: profile.bg, borderRadius: 12, borderLeft: `3px solid ${profile.color}`, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span style={{ fontSize: 18 }}>{profile.reaction}</span>
            <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: profile.color }}>
              {profile.reactionLabel}
            </span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--text-mid)', lineHeight: 1.7 }}>{profile.reactionText}</p>
        </div>

        {/* Closing thought */}
        <div style={{ padding: '16px 20px', background: 'var(--bg-alt)', borderRadius: 12 }}>
          <p style={{ fontSize: 13, color: 'var(--text-mid)', lineHeight: 1.7, fontStyle: 'italic' }}>💡 {profile.closing}</p>
        </div>
      </div>
    </div>
  );
};

/* ══════════════════════════════════════════════════
   HERRAMIENTA 3 — Línea de aprendizaje
   Marcos, 34 años
══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   HERRAMIENTA 3 — Mapa del aprendizaje a lo largo de la vida
   Conceptual, no personificado
══════════════════════════════════════════════════ */

const LEARNING_NODES = [
  {
    id: 'asociacion',
    label: 'Por asociación',
    icon: '🔗',
    color: '#7BAE9F',
    angle: 270,
    short: 'Tu mente conecta cosas que ocurren juntas, aunque no tengan relación causal.',
    desc: 'Cuando dos experiencias coinciden en el tiempo o el espacio repetidamente, el cerebro las une. No hace falta entenderlo: ocurre solo.',
    examples: [
      { stage: 'Infancia', text: 'Un niño que asocia el olor a hospital con el miedo puede sentir ansiedad en consultas médicas durante años, aunque no recuerde por qué.' },
      { stage: 'Adolescencia', text: 'Escuchar una canción durante una ruptura hace que esa canción active tristeza años después, sin que el cerebro lo avise.' },
      { stage: 'Adultez', text: 'El olor a café por la mañana activa el estado de alerta antes de que se tome una sola gota: la mente ya aprendió la secuencia.' },
    ],
    insight: 'Muchas respuestas emocionales "sin motivo aparente" son aprendizajes por asociación que ocurrieron sin que los eligieras.',
  },
  {
    id: 'consecuencias',
    label: 'Por consecuencias',
    icon: '⚡',
    color: '#C8A87A',
    angle: 330,
    short: 'Repites lo que te da algo bueno. Evitas lo que te da algo malo.',
    desc: 'El cerebro está diseñado para buscar recompensas y evitar el malestar. Cada vez que una conducta funciona, se refuerza. Cada vez que duele, se debilita.',
    examples: [
      { stage: 'Infancia', text: 'Un niño que llora y consigue atención aprende que llorar funciona. No lo planea: simplemente lo que funciona se repite.' },
      { stage: 'Adolescencia', text: 'Evitar hablar en clase reduce la ansiedad momentáneamente, pero refuerza el patrón de evitación para el futuro.' },
      { stage: 'Adultez', text: 'Trabajar hasta tarde y recibir reconocimiento puede crear una dependencia al trabajo como fuente de valor personal.' },
    ],
    insight: 'Muchos hábitos difíciles de cambiar existen porque en algún momento funcionaron. No son irracionales: son aprendizajes exitosos que ya no encajan.',
  },
  {
    id: 'observacion',
    label: 'Observando a otros',
    icon: '👁',
    color: '#7496B8',
    angle: 30,
    short: 'Aprendes viendo cómo actúan, sienten y reaccionan las personas que tienes cerca.',
    desc: 'Los humanos somos extraordinariamente buenos aprendiendo sin hacer. Ver a alguien hacer algo activa en nuestro cerebro zonas similares a si lo hiciéramos nosotros.',
    examples: [
      { stage: 'Infancia', text: 'Un niño que ve a su padre tratar el conflicto con silencio aprende que los conflictos no se hablan, aunque nadie se lo haya dicho.' },
      { stage: 'Adolescencia', text: 'Ver a un compañero recibir admiración por ser gracioso puede motivar imitar ese estilo aunque no sea auténtico.' },
      { stage: 'Adultez', text: 'Trabajar junto a alguien que gestiona el estrés con serenidad puede reconfigurar gradualmente la forma propia de responder.' },
    ],
    insight: 'Las personas que nos rodearon en la infancia fueron nuestros primeros "manuales de instrucciones" sobre cómo vivir.',
  },
  {
    id: 'reflexion',
    label: 'Por reflexión',
    icon: '💭',
    color: '#9B78B8',
    angle: 90,
    short: 'Le das significado a lo que te pasa. Construyes una historia que da sentido a tu experiencia.',
    desc: 'Los humanos no solo aprendemos de lo que ocurre, sino de cómo interpretamos lo que ocurre. La narrativa que construimos sobre nosotros mismos moldea lo que hacemos.',
    examples: [
      { stage: 'Infancia', text: '"Siempre meto la pata" dicho repetidamente por un adulto puede convertirse en una historia que un niño adopta como propia.' },
      { stage: 'Adolescencia', text: 'Un fracaso académico interpretado como "no sirvo para esto" limita futuras elecciones más que el fracaso en sí.' },
      { stage: 'Adultez', text: 'Reinterpretar una etapa difícil como aprendizaje en lugar de error puede cambiar radicalmente cómo se afronta el presente.' },
    ],
    insight: 'Lo que más nos moldea no es lo que vivimos, sino la historia que nos contamos sobre ello.',
  },
  {
    id: 'relacion',
    label: 'En las relaciones',
    icon: '🤝',
    color: '#C07878',
    angle: 150,
    short: 'Lo que los demás reflejan de ti moldea cómo te ves a ti mismo.',
    desc: 'Los vínculos no son solo conexiones emocionales: son espejos. Lo que nos devuelven las personas importantes se convierte en parte de nuestra identidad.',
    examples: [
      { stage: 'Infancia', text: 'Un cuidador que responde con calidez ante el llanto enseña que las emociones son bienvenidas y que pedir ayuda es seguro.' },
      { stage: 'Adolescencia', text: 'Un grupo de iguales que valora el rendimiento por encima de todo puede instalar estándares de exigencia que duran décadas.' },
      { stage: 'Adultez', text: 'Una relación donde alguien es reconocido y visto puede reparar aprendizajes de invisibilidad de etapas anteriores.' },
    ],
    insight: 'Las relaciones no solo nos acompañan: nos forman. Y también pueden reformarnos.',
  },
  {
    id: 'cuerpo',
    label: 'Con el cuerpo',
    icon: '🌊',
    color: '#B8936A',
    angle: 210,
    short: 'Tu cuerpo recuerda lo que tu mente ha olvidado.',
    desc: 'No todo el aprendizaje pasa por la conciencia. El cuerpo almacena experiencias en forma de tensiones, respuestas automáticas y reacciones físicas que preceden al pensamiento.',
    examples: [
      { stage: 'Infancia', text: 'Situaciones de peligro vividas de pequeño pueden quedar grabadas en el sistema nervioso, generando respuestas de alerta en contextos similares de adulto.' },
      { stage: 'Adolescencia', text: 'La vergüenza repetida puede quedar registrada como una postura: hombros hacia adentro, mirada baja, voz pequeña.' },
      { stage: 'Adultez', text: 'Aprender a regular la respiración puede calmar el sistema nervioso antes de que el pensamiento haya procesado qué ocurrió.' },
    ],
    insight: 'Cuando el cuerpo reacciona "sin razón", suele estar recordando algo que la mente no tiene acceso directo a recuperar.',
  },
];

const LIFE_STAGES = ['Infancia', 'Adolescencia', 'Adultez'];

const LifeLearningMap = () => {
  const [selected, setSelected] = useState(null);
  const [stageFilter, setStageFilter] = useState(null);
  const cx = 160, cy = 160, r = 105;

  const selNode = selected ? LEARNING_NODES.find(n => n.id === selected) : null;

  return (
    <div className="lab-tool-wrap" style={{ display:'flex', gap:32, alignItems:'flex-start', flexWrap:'wrap' }}>
      {/* SVG map */}
      <div style={{ flexShrink:0 }}>
        <svg width={320} height={320} viewBox="0 0 320 320">
          {/* Connection lines */}
          {LEARNING_NODES.map((node, i) => {
            const rad = (node.angle - 90) * Math.PI / 180;
            const nx = cx + r * Math.cos(rad);
            const ny = cy + r * Math.sin(rad);
            return (
              <line key={node.id}
                x1={cx} y1={cy} x2={nx} y2={ny}
                stroke={selected === node.id ? node.color : 'var(--border)'}
                strokeWidth={selected === node.id ? 1.5 : 1}
                strokeDasharray={selected === node.id ? 'none' : '4 4'}
                style={{ transition:'all 0.3s' }}
              />
            );
          })}

          {/* Center node */}
          <circle cx={cx} cy={cy} r={36} fill="var(--primary)" />
          <text x={cx} y={cy - 7} textAnchor="middle" style={{ fill:'rgba(255,255,255,0.9)', fontSize:9, fontFamily:'DM Sans', fontWeight:500, letterSpacing:'0.08em', textTransform:'uppercase' }}>Aprender</text>
          <text x={cx} y={cy + 7} textAnchor="middle" style={{ fill:'rgba(255,255,255,0.7)', fontSize:8.5, fontFamily:'Playfair Display', fontStyle:'italic' }}>a lo largo</text>
          <text x={cx} y={cy + 19} textAnchor="middle" style={{ fill:'rgba(255,255,255,0.7)', fontSize:8.5, fontFamily:'Playfair Display', fontStyle:'italic' }}>de la vida</text>

          {/* Outer nodes */}
          {LEARNING_NODES.map(node => {
            const rad = (node.angle - 90) * Math.PI / 180;
            const nx = cx + r * Math.cos(rad);
            const ny = cy + r * Math.sin(rad);
            const isSel = selected === node.id;
            return (
              <g key={node.id} onClick={() => setSelected(isSel ? null : node.id)} style={{ cursor:'pointer' }}>
                <circle cx={nx} cy={ny} r={isSel ? 30 : 26}
                  fill={isSel ? node.color : 'var(--white)'}
                  stroke={isSel ? node.color : 'var(--border)'}
                  strokeWidth={isSel ? 0 : 1.5}
                  style={{ transition:'all 0.28s cubic-bezier(0.34,1.56,0.64,1)', filter: isSel ? `drop-shadow(0 4px 14px ${node.color}55)` : 'none' }}
                />
                <text x={nx} y={ny - 1} textAnchor="middle" dominantBaseline="middle"
                  style={{ fontSize:16, pointerEvents:'none' }}>{node.icon}</text>
                {/* Label outside */}
                <text
                  x={cx + (r + 44) * Math.cos(rad)}
                  y={cy + (r + 44) * Math.sin(rad)}
                  textAnchor="middle" dominantBaseline="middle"
                  style={{ fontSize:8, fill: isSel ? node.color : 'var(--text-mid)', fontFamily:'DM Sans', fontWeight: isSel ? 600 : 400, pointerEvents:'none', transition:'fill 0.2s' }}
                >
                  {node.label.split(' ').map((w, wi, arr) => (
                    <tspan key={wi} x={cx + (r + 44) * Math.cos(rad)} dy={wi === 0 ? (arr.length > 1 ? -5 : 0) : 11}>{w}</tspan>
                  ))}
                </text>
              </g>
            );
          })}
        </svg>
        <p style={{ fontSize:12, color:'var(--text-soft)', textAlign:'center', marginTop:4 }}>Toca un mecanismo para explorarlo</p>
      </div>

      {/* Detail panel */}
      <div style={{ flex:1, minWidth:260 }}>
        {!selNode ? (
          <div style={{ paddingTop:16 }}>
            <h3 style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:22, marginBottom:12 }}>
              Cómo aprendemos a lo largo de la vida
            </h3>
            <p style={{ color:'var(--text-mid)', fontSize:15, lineHeight:1.75, marginBottom:16 }}>
              El aprendizaje no termina en la infancia ni ocurre solo en las aulas. Es un proceso continuo, multiforme y muchas veces invisible que moldea quiénes somos.
            </p>
            <p style={{ color:'var(--text-mid)', fontSize:15, lineHeight:1.75, marginBottom:24 }}>
              Cada nodo representa una forma distinta en que el cerebro y la experiencia se combinan para dejarnos una huella. Toca cualquiera para ver ejemplos reales.
            </p>
            <div style={{ padding:'14px 18px', background:'rgba(45,90,79,0.06)', borderRadius:10, borderLeft:'3px solid var(--primary-light)' }}>
              <p style={{ fontSize:13, color:'var(--text-mid)', fontStyle:'italic', lineHeight:1.7 }}>
                "No elegimos lo que aprendemos de pequeños. Sí podemos elegir qué hacer con ello de adultos."
              </p>
            </div>
          </div>
        ) : (
          <div style={{ animation:'fadeUp 0.3s ease' }} key={selNode.id}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6 }}>
              <span style={{ fontSize:22 }}>{selNode.icon}</span>
              <span style={{ fontFamily:'Playfair Display', fontSize:22, fontWeight:600, color:'var(--text)' }}>{selNode.label}</span>
            </div>
            <p style={{ fontSize:13, fontStyle:'italic', color:selNode.color, marginBottom:12, fontWeight:500 }}>{selNode.short}</p>
            <p style={{ fontSize:14, color:'var(--text-mid)', lineHeight:1.75, marginBottom:20 }}>{selNode.desc}</p>

            {/* Stage filter */}
            <div style={{ display:'flex', gap:6, marginBottom:16, flexWrap:'wrap' }}>
              <span style={{ fontSize:11, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-soft)', lineHeight:'28px', marginRight:4 }}>Ver en:</span>
              {LIFE_STAGES.map(s => (
                <button key={s} onClick={() => setStageFilter(stageFilter===s ? null : s)} style={{
                  padding:'4px 12px', borderRadius:100, fontSize:12, fontWeight:500,
                  background: stageFilter===s ? selNode.color : 'var(--bg-alt)',
                  color: stageFilter===s ? '#fff' : 'var(--text-mid)',
                  border:'none', cursor:'pointer', transition:'all 0.2s',
                }}>{s}</button>
              ))}
            </div>

            {/* Examples */}
            <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:20 }}>
              {selNode.examples
                .filter(ex => !stageFilter || ex.stage === stageFilter)
                .map(ex => (
                  <div key={ex.stage} style={{ padding:'14px 18px', background:'var(--bg-alt)', borderRadius:10, borderLeft:`3px solid ${selNode.color}` }}>
                    <div style={{ fontSize:10, fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase', color:selNode.color, marginBottom:6 }}>{ex.stage}</div>
                    <p style={{ fontSize:13, color:'var(--text-mid)', lineHeight:1.7 }}>{ex.text}</p>
                  </div>
                ))}
            </div>

            <div style={{ padding:'14px 18px', background:`${selNode.color}12`, borderRadius:10, borderLeft:`3px solid ${selNode.color}` }}>
              <div style={{ fontSize:10, fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase', color:selNode.color, marginBottom:6 }}>Para recordar</div>
              <p style={{ fontSize:13, color:'var(--text-mid)', fontStyle:'italic', lineHeight:1.7 }}>{selNode.insight}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

/* ─────────────────────────────────── legacy placeholder ── */
const MARCOS_HITOS = [
  {
    id: 'infancia',
    age: '0–8 años',
    label: 'Infancia',
    icon: '🏠',
    color: '#C8A87A',
    what: 'Marcos creció en una familia donde las emociones no se hablaban mucho. Sus padres se querían, pero el llanto o el miedo "no se llevaban bien". Cuando estaba asustado, aprendió a aguantar.',
    learned: 'Que mostrar vulnerabilidad es una señal de debilidad. Que los problemas se gestionan solos, en silencio.',
    today: 'patrones-1',
  },
  {
    id: 'colegio',
    age: '9–12 años',
    label: 'Colegio',
    icon: '📚',
    color: '#7BAE9F',
    what: 'En el colegio Marcos era el gracioso de la clase. Era su forma de encajar, de caer bien, de que nadie se fijara en que a veces se sentía solo o diferente.',
    learned: 'Que el humor es un escudo. Que si haces reír a los demás, no te preguntan cómo estás de verdad.',
    today: 'patrones-2',
  },
  {
    id: 'adolescencia',
    age: '13–17 años',
    label: 'Adolescencia',
    icon: '🎸',
    color: '#9B78B8',
    what: 'Tuvo una relación con una persona que lo dejaba y volvía constantemente. Marcos aprendió a estar siempre disponible, a no decir que no, a hacer lo que hiciera falta para que la relación no se rompiera.',
    learned: 'Que el amor requiere esfuerzo constante. Que si alguien se va es porque hiciste algo mal.',
    today: 'patrones-3',
  },
  {
    id: 'universidad',
    age: '18–23 años',
    label: 'Universidad',
    icon: '🎓',
    color: '#7496B8',
    what: 'Estudió Ingeniería para satisfacer la expectativa de su padre, aunque él quería dedicarse al diseño. Tuvo éxito académico pero una sensación constante de estar en el lugar equivocado.',
    learned: 'Que lo correcto pesa más que lo propio. Que los deseos personales son un lujo del que no siempre se puede disponer.',
    today: 'patrones-1',
  },
  {
    id: 'trabajo',
    age: '24–29 años',
    label: 'Primeros empleos',
    icon: '💼',
    color: '#C07878',
    what: 'En su primer trabajo sufrió un jefe muy exigente y poco justo. Aprendió a anticipar los estados de ánimo de los demás, a leer el ambiente antes de hablar, a no destacar demasiado.',
    learned: 'Que es mejor pasar desapercibido que arriesgarse a recibir críticas. Que adaptarse es más seguro que ser auténtico.',
    today: 'patrones-2',
  },
  {
    id: 'ruptura',
    age: '30–32 años',
    label: 'Ruptura importante',
    icon: '💔',
    color: '#B8936A',
    what: 'Marcos terminó una relación de seis años. Se volcó en el trabajo y en los demás para no sentir el dolor. Le costó meses reconocer que estaba mal.',
    learned: 'Que ocuparse es una forma de no sentir. Y que el dolor postergado siempre vuelve, más tarde o más temprano.',
    today: 'patrones-3',
  },
  {
    id: 'hoy',
    age: '33–34 años',
    label: 'Hoy',
    icon: '📍',
    color: '#2D5A4F',
    what: 'Marcos tiene trabajo estable, amigos, una vida que "desde fuera parece bien". Pero nota que le cuesta pedir ayuda, que siempre intenta ser el que soluciona el de los demás, y que cuando está mal prefiere desaparecer antes que contarlo.',
    learned: 'Todavía está aprendiendo a reconocer que lo que evitó en el pasado sigue influyendo en el presente.',
    today: null,
  },
];

const MARCOS_PATTERNS = [
  {
    id: 'patrones-1',
    label: 'Dificultad para pedir ayuda',
    desc: 'Marcos raramente dice que está mal. Lo procesa solo, o no lo procesa. Esto viene de cuando aprendió que la vulnerabilidad era incómoda para los demás.',
    connections: ['infancia', 'universidad'],
    color: '#C8A87A',
  },
  {
    id: 'patrones-2',
    label: 'Usa el humor o el trabajo para tapar',
    desc: 'Cuando algo le duele, Marcos hace chistes o se llena de tareas. Es un escudo que aprendió de pequeño y perfeccionó en el trabajo.',
    connections: ['colegio', 'trabajo'],
    color: '#7BAE9F',
  },
  {
    id: 'patrones-3',
    label: 'Miedo a que le abandonen',
    desc: 'En relaciones íntimas, Marcos se esfuerza mucho para que funcionen. A veces demasiado. Viene de su adolescencia y se reforzó con la ruptura de los 30.',
    connections: ['adolescencia', 'ruptura'],
    color: '#9B78B8',
  },
];

const LearningTimeline = () => {
  const [selected, setSelected] = useState(null);
  const [showPatterns, setShowPatterns] = useState(false);

  const hito = selected ? MARCOS_HITOS.find(h => h.id === selected) : null;
  const relatedPattern = hito && hito.today ? MARCOS_PATTERNS.find(p => p.id === hito.today) : null;

  return (
    <div>
      {/* Intro */}
      <div style={{ marginBottom: 28, padding: '16px 20px', background: 'rgba(45,90,79,0.05)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>👤</div>
        <div>
          <div style={{ fontWeight: 600, color: 'var(--text)', marginBottom: 2 }}>Marcos, 34 años</div>
          <div style={{ fontSize: 13, color: 'var(--text-soft)' }}>Ingeniero. Vive en Madrid. "Aparentemente bien."</div>
        </div>
      </div>

      {/* Timeline horizontal scroll */}
      <div style={{ overflowX: 'auto', paddingBottom: 12, marginBottom: 28 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 0, minWidth: 'max-content', padding: '8px 4px' }}>
          {MARCOS_HITOS.map((hito, i) => {
            const isSel = selected === hito.id;
            return (
              <div key={hito.id} style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0 }}>
                  {/* Node */}
                  <button
                    onClick={() => { setSelected(isSel ? null : hito.id); setShowPatterns(false); }}
                    style={{
                      width: isSel ? 58 : 50, height: isSel ? 58 : 50,
                      borderRadius: '50%', border: `2px solid ${isSel ? hito.color : 'var(--border)'}`,
                      background: isSel ? hito.color : 'var(--white)',
                      fontSize: isSel ? 22 : 18,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      cursor: 'pointer', transition: 'all 0.28s cubic-bezier(0.34,1.56,0.64,1)',
                      boxShadow: isSel ? `0 6px 20px ${hito.color}44` : 'none',
                      zIndex: isSel ? 2 : 1, position: 'relative',
                      flexShrink: 0,
                    }}
                  >
                    {hito.icon}
                  </button>
                  {/* Label */}
                  <div style={{ marginTop: 8, textAlign: 'center', width: 80 }}>
                    <div style={{ fontSize: 12, fontWeight: isSel ? 600 : 400, color: isSel ? hito.color : 'var(--text-mid)' }}>{hito.label}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-soft)' }}>{hito.age}</div>
                  </div>
                </div>
                {/* Connector */}
                {i < MARCOS_HITOS.length - 1 && (
                  <div style={{ width: 32, height: 2, background: 'var(--border)', marginBottom: 28, flexShrink: 0 }}></div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Detail panel */}
      {hito ? (
        <div style={{ animation: 'fadeUp 0.35s ease' }} key={hito.id}>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 16 }}>
            {/* What happened */}
            <div style={{ flex: 1, minWidth: 220, padding: '20px 22px', background: 'var(--white)', borderRadius: 14, border: '1px solid var(--border)' }}>
              <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: hito.color, marginBottom: 10 }}>Qué pasó</div>
              <p style={{ fontSize: 14, color: 'var(--text-mid)', lineHeight: 1.75 }}>{hito.what}</p>
            </div>
            {/* What learned */}
            <div style={{ flex: 1, minWidth: 220, padding: '20px 22px', background: `${hito.color}0d`, borderRadius: 14, border: `1px solid ${hito.color}33` }}>
              <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: hito.color, marginBottom: 10 }}>Lo que aprendió</div>
              <p style={{ fontSize: 14, color: 'var(--text)', lineHeight: 1.75, fontStyle: 'italic' }}>"{hito.learned}"</p>
            </div>
          </div>

          {/* Pattern connection */}
          {relatedPattern && (
            <div style={{ padding: '16px 20px', background: 'rgba(45,90,79,0.05)', borderRadius: 12, marginBottom: 16, display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: relatedPattern.color, flexShrink: 0, marginTop: 6 }}></div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--primary)', marginBottom: 4 }}>Conectado con un patrón actual:</div>
                <div style={{ fontSize: 14, color: 'var(--text-mid)' }}><strong>{relatedPattern.label}</strong> — {relatedPattern.desc}</div>
              </div>
            </div>
          )}
        </div>
      ) : (
        <div style={{ padding: '20px', background: 'var(--bg-alt)', borderRadius: 12, marginBottom: 16, textAlign: 'center' }}>
          <p style={{ fontSize: 14, color: 'var(--text-soft)' }}>Toca cualquier hito de la vida de Marcos para ver qué pasó y qué aprendió de ello.</p>
        </div>
      )}

      {/* Patterns section */}
      <div>
        <button
          onClick={() => setShowPatterns(!showPatterns)}
          style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: '12px 20px',
            borderRadius: 10, background: showPatterns ? 'var(--primary)' : 'var(--white)',
            border: '1.5px solid var(--primary)', cursor: 'pointer', transition: 'all 0.25s',
            color: showPatterns ? 'var(--white)' : 'var(--primary)', fontSize: 14, fontWeight: 500,
            fontFamily: 'DM Sans', marginBottom: showPatterns ? 16 : 0,
          }}
        >
          <span>{showPatterns ? '↑' : '↓'}</span>
          Ver los 3 patrones actuales de Marcos
        </button>

        {showPatterns && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, animation: 'fadeUp 0.3s ease' }}>
            {MARCOS_PATTERNS.map(p => (
              <div key={p.id} style={{ padding: '18px 22px', background: 'var(--white)', borderRadius: 12, border: `1.5px solid ${p.color}44`, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: p.color, flexShrink: 0, marginTop: 5 }}></div>
                <div>
                  <div style={{ fontWeight: 600, color: 'var(--text)', marginBottom: 6, fontSize: 15 }}>{p.label}</div>
                  <p style={{ fontSize: 14, color: 'var(--text-mid)', lineHeight: 1.7, marginBottom: 8 }}>{p.desc}</p>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 11, color: 'var(--text-soft)' }}>Origen:</span>
                    {p.connections.map(cId => {
                      const h = MARCOS_HITOS.find(h => h.id === cId);
                      return (
                        <span key={cId} style={{ fontSize: 11, padding: '2px 8px', borderRadius: 100, background: `${p.color}22`, color: p.color, fontWeight: 500 }}>
                          {h?.label}
                        </span>
                      );
                    })}
                  </div>
                </div>
              </div>
            ))}

            {/* Closing message */}
            <div style={{ padding: '20px 24px', background: 'linear-gradient(135deg, rgba(45,90,79,0.06), rgba(123,174,159,0.1))', borderRadius: 14, marginTop: 4, borderLeft: '3px solid var(--primary-light)' }}>
              <p style={{ fontSize: 15, color: 'var(--text-mid)', lineHeight: 1.8, fontStyle: 'italic' }}>
                "Entender de dónde vienen tus patrones no es estar atrapado en ellos. Es el primer paso para cambiarlos."
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { HabitTree, ContextThermometer, LifeLearningMap });