// Diagrama de la paz — popup with zoom

const DiagramScreen = ({ onClose }) => {
  const [zoom, setZoom] = React.useState(1);
  const [pan, setPan] = React.useState({ x: 0, y: 0 });

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 70,
      background: 'rgba(10, 6, 18, 0.85)',
      backdropFilter: 'blur(36px)',
      WebkitBackdropFilter: 'blur(36px)',
      display: 'flex', flexDirection: 'column',
      padding: '54px 0 34px',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 16px', marginBottom: 12,
      }}>
        <button onClick={onClose} style={{
          width: 36, height: 36, borderRadius: 18,
          background: 'rgba(255,255,255,0.1)',
          border: '0.5px solid rgba(255,255,255,0.18)',
          color: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><I.Close size={16}/></button>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>
            Para cuando discutimos
          </div>
          <div className="serif" style={{ fontSize: 22, lineHeight: 1, marginTop: 2 }}>
            Diagrama de la paz
          </div>
        </div>
        <div style={{ width: 36 }}/>
      </div>

      <div style={{
        flex: 1, overflow: 'hidden', position: 'relative',
        margin: '0 12px', borderRadius: 22,
        background: 'radial-gradient(circle at 50% 35%, rgba(255,255,255,0.04), transparent 70%)',
        border: '0.5px solid rgba(255,255,255,0.1)',
      }}>
        <div style={{
          width: '100%', height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transform: `scale(${zoom}) translate(${pan.x}px, ${pan.y}px)`,
          transition: 'transform 0.25s cubic-bezier(.2,.8,.2,1)',
          transformOrigin: 'center center',
        }}>
          <DiagramContent/>
        </div>
      </div>

      {/* Zoom controls */}
      <div style={{
        display: 'flex', justifyContent: 'center', gap: 8, marginTop: 14, padding: '0 16px',
      }}>
        <button onClick={() => setZoom(z => Math.max(0.6, z - 0.2))} style={zoomBtn}>−</button>
        <div style={{
          height: 40, padding: '0 16px', display: 'flex', alignItems: 'center',
          borderRadius: 20, background: 'rgba(255,255,255,0.08)',
          border: '0.5px solid rgba(255,255,255,0.14)',
          fontSize: 12, fontVariantNumeric: 'tabular-nums', color: 'rgba(255,255,255,0.85)',
          minWidth: 64, justifyContent: 'center',
        }}>{Math.round(zoom * 100)}%</div>
        <button onClick={() => setZoom(z => Math.min(2.5, z + 0.2))} style={zoomBtn}>+</button>
        <button onClick={() => { setZoom(1); setPan({ x: 0, y: 0 }); }} style={{ ...zoomBtn, width: 'auto', padding: '0 14px', fontSize: 12 }}>
          Reset
        </button>
      </div>
    </div>
  );
};

const zoomBtn = {
  width: 40, height: 40, borderRadius: 20,
  background: 'rgba(255,255,255,0.08)',
  border: '0.5px solid rgba(255,255,255,0.18)',
  color: '#fff', cursor: 'pointer', fontSize: 18, fontWeight: 400,
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  fontFamily: 'inherit',
};

// The actual peace flow chart — original, hand-drawn feeling
const DiagramContent = () => (
  <svg width="320" height="500" viewBox="0 0 320 500" style={{ overflow: 'visible' }}>
    <defs>
      <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5"
              markerWidth="6" markerHeight="6" orient="auto">
        <path d="M0,0 L10,5 L0,10" fill="rgba(255,255,255,0.5)"/>
      </marker>
    </defs>

    {/* Top — start */}
    <g>
      <rect x="80" y="0" width="160" height="50" rx="14" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)"/>
      <text x="160" y="26" fill="#fff" fontSize="11" fontWeight="600" textAnchor="middle"
            fontFamily="-apple-system" letterSpacing="0.16em">DISCUTIMOS</text>
      <text x="160" y="40" fill="rgba(255,255,255,0.55)" fontSize="9" textAnchor="middle">algo se ha tensado</text>
    </g>

    {/* Arrow */}
    <line x1="160" y1="50" x2="160" y2="80" stroke="rgba(255,255,255,0.5)" strokeWidth="1" markerEnd="url(#arr)"/>

    {/* Step 1 — pause */}
    <g>
      <rect x="40" y="86" width="240" height="64" rx="14" fill="oklch(0.78 0.14 28 / 0.18)" stroke="oklch(0.78 0.14 28 / 0.5)"/>
      <text x="56" y="106" fill="oklch(0.85 0.13 50)" fontSize="9" fontWeight="600" letterSpacing="0.18em">PASO 1</text>
      <text x="56" y="124" fill="#fff" fontSize="13" fontWeight="600" fontFamily="-apple-system">Parar 10 minutos</text>
      <text x="56" y="140" fill="rgba(255,255,255,0.65)" fontSize="11">Nada de seguir hablando caliente</text>
    </g>

    <line x1="160" y1="150" x2="160" y2="180" stroke="rgba(255,255,255,0.5)" strokeWidth="1" markerEnd="url(#arr)"/>

    {/* Step 2 */}
    <g>
      <rect x="40" y="186" width="240" height="64" rx="14" fill="oklch(0.78 0.14 350 / 0.18)" stroke="oklch(0.78 0.14 350 / 0.5)"/>
      <text x="56" y="206" fill="oklch(0.86 0.11 350)" fontSize="9" fontWeight="600" letterSpacing="0.18em">PASO 2</text>
      <text x="56" y="224" fill="#fff" fontSize="13" fontWeight="600" fontFamily="-apple-system">Cada uno escribe</text>
      <text x="56" y="240" fill="rgba(255,255,255,0.65)" fontSize="11">qué he sentido y qué necesito</text>
    </g>

    <line x1="160" y1="250" x2="160" y2="280" stroke="rgba(255,255,255,0.5)" strokeWidth="1" markerEnd="url(#arr)"/>

    {/* Step 3 — diamond decision */}
    <g>
      <polygon points="160,286 280,343 160,400 40,343" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.3)"/>
      <text x="160" y="332" fill="#fff" fontSize="12" fontWeight="600" textAnchor="middle">¿Hablamos ya</text>
      <text x="160" y="348" fill="#fff" fontSize="12" fontWeight="600" textAnchor="middle">o esperamos</text>
      <text x="160" y="364" fill="#fff" fontSize="12" fontWeight="600" textAnchor="middle">a mañana?</text>
    </g>

    {/* branches */}
    <line x1="60" y1="350" x2="20" y2="420" stroke="rgba(255,255,255,0.4)" strokeWidth="1" markerEnd="url(#arr)"/>
    <line x1="260" y1="350" x2="300" y2="420" stroke="rgba(255,255,255,0.4)" strokeWidth="1" markerEnd="url(#arr)"/>

    <g>
      <rect x="-15" y="426" width="120" height="58" rx="12" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)"/>
      <text x="45" y="446" fill="#fff" fontSize="11" fontWeight="600" textAnchor="middle">Ahora · 15 min</text>
      <text x="45" y="462" fill="rgba(255,255,255,0.6)" fontSize="9" textAnchor="middle">turno de palabra,</text>
      <text x="45" y="474" fill="rgba(255,255,255,0.6)" fontSize="9" textAnchor="middle">sin interrumpir</text>
    </g>

    <g>
      <rect x="215" y="426" width="120" height="58" rx="12" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)"/>
      <text x="275" y="446" fill="#fff" fontSize="11" fontWeight="600" textAnchor="middle">Mañana · café</text>
      <text x="275" y="462" fill="rgba(255,255,255,0.6)" fontSize="9" textAnchor="middle">esta noche un</text>
      <text x="275" y="474" fill="rgba(255,255,255,0.6)" fontSize="9" textAnchor="middle">abrazo y dormir</text>
    </g>
  </svg>
);

window.DiagramScreen = DiagramScreen;