const { useState, useEffect, useRef } = React;

/* ── Utility: SVG annular sector path ─────────────── */
function sectorPath(cx, cy, r1, r2, startDeg, endDeg) {
  const rad = d => (d - 90) * Math.PI / 180;
  const s = rad(startDeg), e = rad(endDeg);
  const large = (endDeg - startDeg) > 180 ? 1 : 0;
  const p = (r, a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
  const [x1,y1] = p(r2,s), [x2,y2] = p(r2,e), [x3,y3] = p(r1,e), [x4,y4] = p(r1,s);
  return `M${x1},${y1} A${r2},${r2},0,${large},1,${x2},${y2} L${x3},${y3} A${r1},${r1},0,${large},0,${x4},${y4} Z`;
}

function labelPos(cx, cy, r, startDeg, endDeg) {
  const mid = (startDeg + endDeg) / 2;
  const rad = (mid - 90) * Math.PI / 180;
  return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
}

/* ── 1. RUEDA DE EMOCIONES ────────────────────────── */
const EMOTIONS = [
  {
    name: 'Alegría', color: '#E8C847', light: '#F5E89A',
    desc: 'La alegría es una respuesta emocional ante algo que evaluamos como positivo o satisfactorio. Va desde el placer suave hasta la euforia.',
    sub: ['Serenidad', 'Júbilo', 'Éxtasis'],
    tags: ['Conexión', 'Logro', 'Amor'],
    coping: 'Saborea el momento conscientemente. No la aceleres. Compártela.',
  },
  {
    name: 'Confianza', color: '#7BAE9F', light: '#B8D9D2',
    desc: 'Sensación de seguridad hacia uno mismo o hacia los demás. Base del vínculo y de la autoestima sana.',
    sub: ['Aceptación', 'Admiración', 'Confianza plena'],
    tags: ['Vínculo', 'Seguridad', 'Identidad'],
    coping: 'Refuerza con evidencias reales. Confiar se entrena con pequeñas acciones.',
  },
  {
    name: 'Miedo', color: '#5CA09A', light: '#A4CEC9',
    desc: 'El miedo es una señal de alerta. Es útil cuando la amenaza es real, problemático cuando el cerebro genera falsas alarmas.',
    sub: ['Aprensión', 'Susto', 'Terror'],
    tags: ['Amenaza', 'Incertidumbre', 'Ansiedad'],
    coping: 'Nombra el miedo. Pregúntate: ¿es real o probable? Respira despacio.',
  },
  {
    name: 'Sorpresa', color: '#7496B8', light: '#B0C8DE',
    desc: 'Estado breve de orientación hacia algo inesperado. Puede ir seguida de emociones positivas o negativas.',
    sub: ['Distracción', 'Asombro', 'Desconcierto'],
    tags: ['Novedad', 'Cambio', 'Atención'],
    coping: 'Pausa antes de reaccionar. La sorpresa es neutra, tú decides qué sigue.',
  },
  {
    name: 'Tristeza', color: '#7882C0', light: '#B4BAE0',
    desc: 'Respuesta natural ante una pérdida, real o simbólica. Es una emoción sana que necesita espacio y tiempo.',
    sub: ['Melancolía', 'Pena', 'Duelo'],
    tags: ['Pérdida', 'Duelo', 'Reflexión'],
    coping: 'No huyas de ella. Permite que fluya. Pide acompañamiento si la necesitas.',
  },
  {
    name: 'Asco', color: '#9B78B8', light: '#CABFDE',
    desc: 'El asco protege de amenazas físicas o morales. En contextos sociales, puede estar relacionado con valores o traumas.',
    sub: ['Hastío', 'Rechazo', 'Repulsión'],
    tags: ['Valores', 'Límites', 'Protección'],
    coping: 'Observa qué valor está siendo violado. El asco a menudo protege algo importante.',
  },
  {
    name: 'Ira', color: '#C07878', light: '#DEB4B4',
    desc: 'La ira señala una injusticia o una necesidad no cubierta. No es mala en sí; su gestión es lo que importa.',
    sub: ['Irritación', 'Enfado', 'Rabia'],
    tags: ['Injusticia', 'Límites', 'Energía'],
    coping: 'Baja la activación primero. Luego identifica la necesidad detrás.',
  },
  {
    name: 'Anticipación', color: '#C4956A', light: '#E0C4A0',
    desc: 'Orientación hacia el futuro. Puede ser motivadora o convertirse en ansiedad anticipatoria cuando se vuelve excesiva.',
    sub: ['Interés', 'Expectativa', 'Vigilancia'],
    tags: ['Futuro', 'Motivación', 'Planes'],
    coping: 'Distingue anticipar de preocuparte. Enfócate en lo que puedes hacer hoy.',
  },
];

const EmotionWheel = () => {
  const [selected, setSelected] = useState(null);
  const cx = 170, cy = 170, r1 = 60, r2 = 120, r3 = 155;
  const each = 360 / 8;

  return (
    <div className="lab-tool-wrap" style={{ display:'flex', gap:32, alignItems:'flex-start', flexWrap:'wrap' }}>
      <div style={{ flexShrink:0 }}>
        <svg width={340} height={340} viewBox="0 0 340 340">
          {/* Center circle */}
          <circle cx={cx} cy={cy} r={r1 - 4} fill="var(--white)" stroke="var(--border)" strokeWidth={1.5} />
          <text x={cx} y={cy - 7} textAnchor="middle" style={{ fontFamily:'Playfair Display', fontSize:13, fontStyle:'italic', fill:'var(--primary)' }}>¿Qué</text>
          <text x={cx} y={cy + 9} textAnchor="middle" style={{ fontFamily:'Playfair Display', fontSize:13, fontStyle:'italic', fill:'var(--primary)' }}>sientes?</text>

          {EMOTIONS.map((em, i) => {
            const s = i * each, e = s + each;
            const isSel = selected === i;
            const [lx, ly] = labelPos(cx, cy, (r1 + r2) / 2, s, e);
            const [lx2, ly2] = labelPos(cx, cy, r2 + 18, s, e);
            return (
              <g key={i} onClick={() => setSelected(isSel ? null : i)} style={{ cursor:'pointer' }}>
                {/* Main sector */}
                <path
                  d={sectorPath(cx, cy, r1, r2, s, e)}
                  fill={isSel ? em.color : em.light}
                  stroke="var(--white)"
                  strokeWidth={2.5}
                  style={{ transition:'fill 0.2s' }}
                />
                {/* Outer dot */}
                <circle
                  cx={lx2} cy={ly2} r={isSel ? 6 : 4}
                  fill={em.color}
                  stroke="var(--white)"
                  strokeWidth={2}
                  style={{ transition:'all 0.2s' }}
                />
                {/* Label inside sector */}
                <text
                  x={lx} y={ly}
                  textAnchor="middle" dominantBaseline="middle"
                  style={{ fontSize: 9.5, fontWeight: isSel ? 600 : 400, fill: isSel ? '#fff' : 'var(--text)', pointerEvents:'none', transition:'all 0.2s', fontFamily:'DM Sans' }}
                >
                  {em.name}
                </text>
              </g>
            );
          })}
        </svg>
        <p style={{ fontSize:12, color:'var(--text-soft)', textAlign:'center', marginTop:4 }}>Toca un sector para explorar la emoción</p>
      </div>

      {/* Info panel */}
      <div style={{ flex:1, minWidth:240 }}>
        {selected === null ? (
          <div style={{ padding:'32px 0' }}>
            <h3 style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:22, color:'var(--text)', marginBottom:12 }}>
              Explora tus emociones
            </h3>
            <p style={{ color:'var(--text-mid)', fontSize:15, lineHeight:1.7 }}>
              Cada sector representa una emoción primaria según el modelo de Robert Plutchik. Toca cualquiera para ver qué significa, qué la activa y cómo gestionarla.
            </p>
            <div style={{ marginTop:24, padding:'16px 20px', background:'var(--bg-alt)', borderRadius:'var(--radius)', borderLeft:'3px solid var(--primary-light)' }}>
              <p style={{ fontSize:13, color:'var(--text-mid)', fontStyle:'italic' }}>
                "Nombrar una emoción reduce su intensidad en el cerebro. No es magia, es neurociencia."
              </p>
            </div>
          </div>
        ) : (() => {
          const em = EMOTIONS[selected];
          return (
            <div style={{ animation:'fadeUp 0.3s ease' }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16 }}>
                <div style={{ width:14, height:14, borderRadius:'50%', background:em.color, flexShrink:0 }}></div>
                <span style={{ fontFamily:'Playfair Display', fontSize:24, fontWeight:600, color:'var(--text)' }}>{em.name}</span>
              </div>
              <p style={{ fontSize:15, color:'var(--text-mid)', lineHeight:1.75, marginBottom:20 }}>{em.desc}</p>
              <div style={{ marginBottom:20 }}>
                <div className="label-tag" style={{ marginBottom:10 }}>Intensidades</div>
                <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                  {em.sub.map(s => (
                    <span key={s} style={{ padding:'5px 12px', borderRadius:100, fontSize:12, background: em.light, color:'var(--text)', fontWeight:500 }}>{s}</span>
                  ))}
                </div>
              </div>
              <div style={{ marginBottom:20 }}>
                <div className="label-tag" style={{ marginBottom:10 }}>Aparece cuando...</div>
                <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                  {em.tags.map(t => (
                    <span key={t} style={{ padding:'5px 12px', borderRadius:100, fontSize:12, border:'1px solid var(--border)', color:'var(--text-mid)' }}>{t}</span>
                  ))}
                </div>
              </div>
              <div style={{ padding:'16px 20px', background:'var(--bg-alt)', borderRadius:'var(--radius)', borderLeft:`3px solid ${em.color}` }}>
                <div className="label-tag" style={{ marginBottom:8, color:em.color }}>Qué puedes hacer</div>
                <p style={{ fontSize:14, color:'var(--text-mid)', fontStyle:'italic' }}>{em.coping}</p>
              </div>
            </div>
          );
        })()}
      </div>
    </div>
  );
};

/* ── 2. CICLO DE LA ANSIEDAD ──────────────────────── */
const CYCLE_NODES = [
  { id:'trigger',   label:'Detonante',               angle:270, color:'#C07878',
    desc:'Una situación real o imaginada activa el sistema de alarma. Puede ser un pensamiento, una imagen, un recuerdo o algo externo.' },
  { id:'thoughts',  label:'Pensamientos automáticos', angle:342, color:'#C4956A',
    desc:'El cerebro genera interpretaciones rápidas: "No puedo con esto", "Va a salir mal". Estos pensamientos son automáticos, no elegidos.' },
  { id:'body',      label:'Activación física',        angle:54,  color:'#7496B8',
    desc:'El cuerpo responde: corazón acelerado, tensión muscular, dificultad respiratoria, sudor. Es el modo lucha-huida activado.' },
  { id:'avoidance', label:'Conducta de evitación',    angle:126, color:'#9B78B8',
    desc:'Para aliviar el malestar, evitamos la situación. Esto funciona a corto plazo pero enseña al cerebro que el peligro era real.' },
  { id:'relief',    label:'Alivio temporal',           angle:198, color:'#7BAE9F',
    desc:'La evitación reduce la ansiedad momentáneamente. El problema es que refuerza el ciclo y la ansiedad regresa más intensa.' },
];

const AnxietyCycle = () => {
  const [selected, setSelected] = useState(null);
  const [mode, setMode] = useState('cycle'); // 'cycle' | 'break'
  const cx = 160, cy = 160, r = 110;

  const breakPoints = {
    thoughts:  'Cuestiona el pensamiento: ¿qué evidencias tengo? ¿Es catastrófico?',
    body:      'Respira diafragmáticamente. 4s inhala, 7s aguanta, 8s exhala.',
    avoidance: 'Exposición gradual: acércate poco a poco a lo que evitas.',
  };

  return (
    <div className="lab-tool-wrap" style={{ display:'flex', gap:32, alignItems:'flex-start', flexWrap:'wrap' }}>
      <div style={{ flexShrink:0 }}>
        {/* Mode toggle */}
        <div style={{ display:'flex', gap:8, marginBottom:20 }}>
          {[['cycle','El ciclo'],['break','Cómo romperlo']].map(([m,l]) => (
            <button key={m} onClick={() => { setMode(m); setSelected(null); }} style={{
              padding:'8px 16px', borderRadius:8, fontSize:13, fontWeight:500,
              background: mode===m ? 'var(--primary)' : 'var(--bg-alt)',
              color: mode===m ? 'var(--white)' : 'var(--text-mid)',
              border:'none', transition:'all 0.2s',
            }}>{l}</button>
          ))}
        </div>

        <svg width={320} height={320} viewBox="0 0 320 320">
          {/* Circular arrow path hint */}
          <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--border)" strokeWidth={1} strokeDasharray="4 6" />

          {CYCLE_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);

            // Arrow to next node
            const next = CYCLE_NODES[(i + 1) % CYCLE_NODES.length];
            const nrad = (next.angle - 90) * Math.PI / 180;
            const nnx = cx + r * Math.cos(nrad);
            const nny = cy + r * Math.sin(nrad);
            const midAngle = (node.angle + next.angle) / 2;
            const mrad = (midAngle - 90) * Math.PI / 180;
            const mx = cx + (r + 0) * Math.cos(mrad);
            const my = cy + (r + 0) * Math.sin(mrad);

            const isSel = selected === node.id;
            const isBreakable = mode === 'break' && breakPoints[node.id];

            return (
              <g key={node.id}>
                {/* Arrow */}
                <path
                  d={`M${nx},${ny} Q${mx},${my} ${nnx},${nny}`}
                  fill="none"
                  stroke={node.color}
                  strokeWidth={1.5}
                  strokeOpacity={0.4}
                  markerEnd="none"
                />

                {/* Node */}
                <circle
                  cx={nx} cy={ny} r={isBreakable ? 28 : 26}
                  fill={isSel ? node.color : (isBreakable ? '#fff' : 'var(--white)')}
                  stroke={isBreakable ? node.color : (isSel ? node.color : 'var(--border)')}
                  strokeWidth={isBreakable ? 2.5 : 1.5}
                  style={{ cursor:'pointer', transition:'all 0.2s', filter: isSel ? `drop-shadow(0 4px 12px ${node.color}55)` : 'none' }}
                  onClick={() => setSelected(isSel ? null : node.id)}
                />

                {/* Break indicator */}
                {isBreakable && (
                  <text x={nx} y={ny - 30} textAnchor="middle" style={{ fontSize:14, fill:node.color, fontWeight:'bold' }}>✕</text>
                )}

                <text
                  x={nx} y={ny}
                  textAnchor="middle" dominantBaseline="middle"
                  style={{ fontSize:8.5, fontWeight:500, fill: isSel ? '#fff' : 'var(--text)', pointerEvents:'none', fontFamily:'DM Sans' }}
                  onClick={() => setSelected(isSel ? null : node.id)}
                >
                  {node.label.split(' ').map((w, wi) => (
                    <tspan key={wi} x={nx} dy={wi === 0 ? (node.label.split(' ').length > 1 ? -6 : 0) : 12}>{w}</tspan>
                  ))}
                </text>
              </g>
            );
          })}

          {/* Center label */}
          <text x={cx} y={cy - 8} textAnchor="middle" style={{ fontFamily:'Playfair Display', fontSize:12, fontStyle:'italic', fill:'var(--text-mid)' }}>Ciclo de</text>
          <text x={cx} y={cy + 8} textAnchor="middle" style={{ fontFamily:'Playfair Display', fontSize:12, fontStyle:'italic', fill:'var(--text-mid)' }}>la ansiedad</text>
        </svg>
        <p style={{ fontSize:12, color:'var(--text-soft)', textAlign:'center', marginTop:4 }}>Toca cada nodo para entenderlo</p>
      </div>

      {/* Info panel */}
      <div style={{ flex:1, minWidth:240 }}>
        {!selected ? (
          <div style={{ paddingTop:16 }}>
            <h3 style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:22, marginBottom:12 }}>
              {mode === 'cycle' ? 'Cómo funciona la ansiedad' : 'Los puntos de ruptura'}
            </h3>
            <p style={{ color:'var(--text-mid)', fontSize:15, lineHeight:1.75 }}>
              {mode === 'cycle'
                ? 'La ansiedad no aparece de la nada. Sigue un ciclo predecible que se retroalimenta. Entenderlo es el primer paso para manejarlo.'
                : 'Puedes interrumpir el ciclo en varios puntos. Los nodos marcados tienen una intervención específica. Toca uno para ver cómo.'}
            </p>
            {mode === 'break' && (
              <div style={{ marginTop:20, padding:'16px 20px', background:'rgba(123,174,159,0.12)', borderRadius:'var(--radius)', borderLeft:'3px solid var(--primary-light)' }}>
                <p style={{ fontSize:13, color:'var(--text-mid)' }}>
                  <strong style={{ color:'var(--primary)' }}>La clave:</strong> no tienes que romper el ciclo entero. Con interrumpirlo en un punto es suficiente.
                </p>
              </div>
            )}
          </div>
        ) : (() => {
          const node = CYCLE_NODES.find(n => n.id === selected);
          return (
            <div style={{ animation:'fadeUp 0.3s ease' }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
                <div style={{ width:12, height:12, borderRadius:'50%', background:node.color }}></div>
                <span style={{ fontFamily:'Playfair Display', fontSize:22, fontWeight:600 }}>{node.label}</span>
              </div>
              <p style={{ fontSize:15, color:'var(--text-mid)', lineHeight:1.75, marginBottom:20 }}>{node.desc}</p>
              {mode === 'break' && breakPoints[node.id] && (
                <div style={{ padding:'18px 20px', background:'rgba(123,174,159,0.12)', borderRadius:'var(--radius)', borderLeft:`3px solid ${node.color}` }}>
                  <div className="label-tag" style={{ marginBottom:8 }}>Intervención</div>
                  <p style={{ fontSize:14, color:'var(--text-mid)', fontStyle:'italic' }}>{breakPoints[node.id]}</p>
                </div>
              )}
            </div>
          );
        })()}
      </div>
    </div>
  );
};

/* ── 3. MAPA DE ESTILOS DE APEGO ──────────────────── */
const ATTACHMENT = [
  {
    id:'secure', label:'Seguro', pos:[0,0],
    color:'#7BAE9F', bg:'rgba(123,174,159,0.12)',
    desc:'Comodidad con la intimidad y la autonomía. Confianza en los demás y en uno mismo. No teme el abandono ni la dependencia.',
    traits:['Confía sin idealizar','Comunica sus necesidades','Tolera la separación','Relaciones estables'],
    path:'Base habitual en infancias con cuidadores consistentes y atentos.',
  },
  {
    id:'anxious', label:'Ansioso / Preocupado', pos:[0,1],
    color:'#C4956A', bg:'rgba(196,149,106,0.1)',
    desc:'Alta necesidad de cercanía y miedo intenso al abandono. Tendencia a la hipervigilancia emocional en las relaciones.',
    traits:['Miedo al abandono','Busca validación constante','Celos e hipervigilancia','Dificultad con la soledad'],
    path:'Suele desarrollarse con cuidadores inconsistentes (a veces presentes, a veces ausentes).',
  },
  {
    id:'avoidant', label:'Evitativo / Alejado', pos:[1,0],
    color:'#7496B8', bg:'rgba(116,150,184,0.1)',
    desc:'Incomodidad con la intimidad. Valora la independencia extrema. Tiende a suprimir las emociones y desconectarse afectivamente.',
    traits:['Evita la intimidad','Autosuficiencia extrema','Supresión emocional','Distancia en conflictos'],
    path:'Frecuente con cuidadores fríos, desdeñosos o que no validaban emociones.',
  },
  {
    id:'disorganized', label:'Desorganizado / Temeroso', pos:[1,1],
    color:'#9B78B8', bg:'rgba(155,120,184,0.1)',
    desc:'Conflicto entre el deseo de cercanía y el miedo a ella. Comportamiento impredecible. A menudo relacionado con experiencias de trauma.',
    traits:['Desea y teme intimidad','Relaciones caóticas','Dificultad para regular emociones','Desconfianza profunda'],
    path:'Asociado a cuidadores que eran fuente de tanto miedo como consuelo.',
  },
];

const AttachmentMap = () => {
  const [selected, setSelected] = useState(null);

  const sel = selected ? ATTACHMENT.find(a => a.id === selected) : null;

  return (
    <div className="lab-tool-wrap" style={{ display:'flex', gap:32, alignItems:'flex-start', flexWrap:'wrap' }}>
      <div style={{ flexShrink:0, width:320 }}>
        {/* Axes labels */}
        <div style={{ position:'relative', width:320, height:320 }}>
          {/* Axis labels */}
          <div style={{ position:'absolute', top:0, left:'50%', transform:'translateX(-50%)', fontSize:11, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-soft)' }}>
            Ansiedad alta
          </div>
          <div style={{ position:'absolute', bottom:0, left:'50%', transform:'translateX(-50%)', fontSize:11, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-soft)' }}>
            Ansiedad baja
          </div>
          <div style={{ position:'absolute', left:0, top:'50%', transform:'translateY(-50%) rotate(-90deg)', fontSize:11, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-soft)', transformOrigin:'center center', whiteSpace:'nowrap' }}>
            Evitación baja
          </div>
          <div style={{ position:'absolute', right:0, top:'50%', transform:'translateY(-50%) rotate(90deg)', fontSize:11, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-soft)', transformOrigin:'center center', whiteSpace:'nowrap' }}>
            Evitación alta
          </div>

          {/* Grid */}
          <div style={{ position:'absolute', top:24, left:24, right:24, bottom:24, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr', gap:4 }}>
            {/* Top-left: Ansioso (high anxiety, low avoidance) */}
            {/* Top-right: Desorganizado (high anxiety, high avoidance) */}
            {/* Bottom-left: Seguro (low anxiety, low avoidance) */}
            {/* Bottom-right: Evitativo (low anxiety, high avoidance) */}
            {[
              ATTACHMENT[1], // Ansioso (top-left)
              ATTACHMENT[3], // Desorganizado (top-right)
              ATTACHMENT[0], // Seguro (bottom-left)
              ATTACHMENT[2], // Evitativo (bottom-right)
            ].map((att) => {
              const isSel = selected === att.id;
              return (
                <div
                  key={att.id}
                  onClick={() => setSelected(isSel ? null : att.id)}
                  style={{
                    background: isSel ? att.color : att.bg,
                    border: `2px solid ${isSel ? att.color : 'transparent'}`,
                    borderRadius:10,
                    display:'flex', alignItems:'center', justifyContent:'center',
                    cursor:'pointer', transition:'all 0.25s ease',
                    transform: isSel ? 'scale(1.02)' : 'scale(1)',
                    padding:12,
                    boxShadow: isSel ? `0 4px 20px ${att.color}44` : 'none',
                  }}
                >
                  <span style={{
                    fontFamily:'Playfair Display', fontSize:13,
                    fontWeight: isSel ? 600 : 400,
                    color: isSel ? '#fff' : 'var(--text)',
                    textAlign:'center', lineHeight:1.4,
                    fontStyle: isSel ? 'normal' : 'italic',
                  }}>
                    {att.label}
                  </span>
                </div>
              );
            })}
          </div>

          {/* Center crosshair */}
          <div style={{ position:'absolute', top:'50%', left:24, right:24, height:1, background:'var(--border)', pointerEvents:'none' }}></div>
          <div style={{ position:'absolute', left:'50%', top:24, bottom:24, width:1, background:'var(--border)', pointerEvents:'none' }}></div>
        </div>
        <p style={{ fontSize:12, color:'var(--text-soft)', textAlign:'center', marginTop:8 }}>Toca un cuadrante para explorar el estilo</p>
      </div>

      {/* Info panel */}
      <div style={{ flex:1, minWidth:240 }}>
        {!sel ? (
          <div style={{ paddingTop:16 }}>
            <h3 style={{ fontFamily:'Playfair Display', fontStyle:'italic', fontSize:22, marginBottom:12 }}>
              Los 4 estilos de apego
            </h3>
            <p style={{ color:'var(--text-mid)', fontSize:15, lineHeight:1.75, marginBottom:16 }}>
              La teoría del apego de Bowlby explica cómo las experiencias tempranas moldean la forma en que nos relacionamos de adultos.
            </p>
            <p style={{ color:'var(--text-mid)', fontSize:15, lineHeight:1.75 }}>
              Ningún estilo es una condena. El apego puede evolucionar con trabajo personal y relaciones reparadoras.
            </p>
          </div>
        ) : (
          <div style={{ animation:'fadeUp 0.3s ease' }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
              <div style={{ width:12, height:12, borderRadius:'50%', background:sel.color }}></div>
              <span style={{ fontFamily:'Playfair Display', fontSize:20, fontWeight:600 }}>{sel.label}</span>
            </div>
            <p style={{ fontSize:15, color:'var(--text-mid)', lineHeight:1.75, marginBottom:20 }}>{sel.desc}</p>
            <div style={{ marginBottom:20 }}>
              <div className="label-tag" style={{ marginBottom:10 }}>Características</div>
              <ul style={{ listStyle:'none', display:'flex', flexDirection:'column', gap:8 }}>
                {sel.traits.map(t => (
                  <li key={t} style={{ display:'flex', alignItems:'flex-start', gap:10, fontSize:14, color:'var(--text-mid)' }}>
                    <span style={{ width:6, height:6, borderRadius:'50%', background:sel.color, flexShrink:0, marginTop:6 }}></span>
                    {t}
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ padding:'16px 20px', background:sel.bg, borderRadius:'var(--radius)', borderLeft:`3px solid ${sel.color}` }}>
              <div className="label-tag" style={{ marginBottom:8 }}>Origen frecuente</div>
              <p style={{ fontSize:13, color:'var(--text-mid)', fontStyle:'italic' }}>{sel.path}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { EmotionWheel, AnxietyCycle, AttachmentMap });