/* global React */
const { useRef } = React;

/* ───────── BRAIN DIAGRAM (Dossier) — schematic-illustrative hybrid SVG ───────── */
function BrainDiagram() {
  // Each icon path is drawn in a 24x24 viewBox; the renderer translates and scales it.
  const channels = [
    { n: "VOICE",     icon: (<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>) },
    { n: "SMS",       icon: (<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>) },
    { n: "WEBCHAT",   icon: (<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>) },
    { n: "EMAIL",     icon: (<g><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></g>) },
    { n: "WHATSAPP",  icon: (<g><circle cx="12" cy="12" r="10"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49"/><path d="M7.76 16.25a6 6 0 0 1 0-8.49"/></g>) },
    { n: "MESSENGER", icon: (<g><path d="M12 2C6.5 2 2 6.1 2 11.1c0 2.6 1.2 4.9 3.1 6.5V22l3.5-1.9c1.1.3 2.2.5 3.4.5 5.5 0 10-4.1 10-9.5S17.5 2 12 2z"/><path d="M6.5 13.5l4-4 3 2 4-4-4 6-3-2-4 2z"/></g>) },
    { n: "INSTAGRAM", icon: (<g><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.4A4 4 0 1 1 12.6 8 4 4 0 0 1 16 11.4z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></g>) },
    { n: "TELEGRAM",  icon: (<g><path d="M21.5 4.2 2.7 11.4l5.7 1.9 1.9 5.7L21.5 4.2z"/><path d="M21.5 4.2 9.3 14.5"/></g>) },
    { n: "SLACK",     icon: (<g><line x1="9" y1="3" x2="7" y2="21"/><line x1="17" y1="3" x2="15" y2="21"/><line x1="3" y1="9" x2="21" y2="7"/><line x1="3" y1="17" x2="21" y2="15"/></g>) },
    { n: "TIKTOK",    icon: (<path d="M19.5 6.5a4.5 4.5 0 0 1-4.5-4.5h-3v13a3 3 0 1 1-3-3v-3a6 6 0 1 0 6 6V9.2a7.5 7.5 0 0 0 4.5 1.5z"/>) },
  ];

  const cx = 400, cy = 300;
  const ringR = 235;
  const labelR = 290;
  const channelR = 30;

  return (
    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
      <defs>
        <radialGradient id="core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.32" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* Outer ring of channels */}
      {channels.map((c, i) => {
        const angle = (i / channels.length) * Math.PI * 2 - Math.PI / 2;
        const x = cx + Math.cos(angle) * ringR;
        const y = cy + Math.sin(angle) * ringR;
        const lineFromR = 122;
        const lineToR = ringR - channelR;
        const lx = cx + Math.cos(angle) * labelR;
        const ly = cy + Math.sin(angle) * labelR;
        return (
          <g key={c.n} className="d-channel" style={{ animationDelay: `${i * 0.06}s` }}>
            <line
              x1={cx + Math.cos(angle) * lineFromR} y1={cy + Math.sin(angle) * lineFromR}
              x2={cx + Math.cos(angle) * lineToR}   y2={cy + Math.sin(angle) * lineToR}
              stroke="var(--line-3)" strokeWidth="1" strokeDasharray="2 3"
            />
            <circle cx={x} cy={y} r={channelR} fill="var(--bg)" stroke="var(--line-3)" strokeWidth="1" />
            <g transform={`translate(${x - 13}, ${y - 13}) scale(1.083)`}
               fill="none" stroke="var(--text)" strokeWidth="1.6"
               strokeLinecap="round" strokeLinejoin="round">
              {c.icon}
            </g>
            <text x={lx} y={ly + 4} textAnchor="middle" fontSize="11"
                  fill="var(--text-2)" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5">
              {c.n}
            </text>
          </g>
        );
      })}

      {/* Core */}
      <circle cx={cx} cy={cy} r="120" fill="url(#core)" />
      <circle cx={cx} cy={cy} r="105" fill="var(--bg)" stroke="var(--accent)" strokeWidth="1.5" />
      <circle cx={cx} cy={cy} r="88" fill="none" stroke="var(--accent)" strokeWidth="0.5" strokeDasharray="3 4" opacity="0.6" />
      <text x={cx} y={cy - 18} textAnchor="middle" fontSize="11"
            fill="var(--accent)" fontFamily="JetBrains Mono, monospace" letterSpacing="2">CX·CORE</text>
      <text x={cx} y={cy + 8} textAnchor="middle" fontSize="22"
            fill="var(--text)" fontFamily="Instrument Serif, serif" fontStyle="italic">one brain</text>
      <text x={cx} y={cy + 28} textAnchor="middle" fontSize="9"
            fill="var(--muted)" fontFamily="JetBrains Mono, monospace" letterSpacing="2">KNOWLEDGE · MEMORY · IDENTITY</text>

      {/* Crosshair labels */}
      <text x="36" y={cy - 8} fontSize="9" fill="var(--dim)"
            fontFamily="JetBrains Mono, monospace" letterSpacing="1.5">INBOUND →</text>
      <text x="764" y={cy - 8} fontSize="9" fill="var(--dim)"
            fontFamily="JetBrains Mono, monospace" letterSpacing="1.5" textAnchor="end">↗ HANDOFF</text>

      <style>{`
        .d-channel { transform-origin: 400px 300px; animation: dchan 1.8s ease forwards; opacity: 0; }
        @keyframes dchan { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
      `}</style>
    </svg>
  );
}

/* ───────── ISO SYSTEM DIAGRAM (Schematic) — exploded-view style ───────── */
function IsoSystemDiagram() {
  return (
    <svg viewBox="0 0 600 480" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="iso-core" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.1" />
        </linearGradient>
      </defs>
      {/* Top stack of channel plates (isometric-ish) */}
      {[
        { y: 60, label: "VOICE", id: "01" },
        { y: 100, label: "SMS · WEBCHAT", id: "02" },
        { y: 140, label: "EMAIL · INBOX", id: "03" },
        { y: 180, label: "WA · IG · TG · SLACK", id: "04" },
      ].map((p, i) => (
        <g key={p.id}>
          <polygon
            points={`140,${p.y} 460,${p.y} 500,${p.y + 14} 100,${p.y + 14}`}
            fill="var(--panel-2)" stroke="var(--accent)" strokeWidth="0.8" opacity={0.85 - i * 0.08}
          />
          <text x={120} y={p.y + 9} fontSize="8" fill="var(--accent)" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5" textAnchor="end">{p.id}</text>
          <text x={300} y={p.y + 9} fontSize="9" fill="var(--text)" fontFamily="JetBrains Mono, monospace" letterSpacing="2" textAnchor="middle">{p.label}</text>
        </g>
      ))}
      {/* dotted dimension between stack and core */}
      <line x1="300" y1="200" x2="300" y2="270" stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 4"/>
      <circle cx="300" cy="200" r="3" fill="var(--accent)"/>
      <circle cx="300" cy="270" r="3" fill="var(--accent)"/>

      {/* CORE BLOCK */}
      <rect x="170" y="270" width="260" height="100" fill="url(#iso-core)" stroke="var(--accent)" strokeWidth="1.5"/>
      <rect x="180" y="280" width="240" height="80" fill="none" stroke="var(--accent)" strokeWidth="0.5" strokeDasharray="3 3"/>
      <text x="300" y="312" fontSize="14" fill="var(--text)" fontFamily="Inter, sans-serif" fontWeight="500" textAnchor="middle" letterSpacing="-0.5">CORE</text>
      <text x="300" y="332" fontSize="9" fill="var(--accent)" fontFamily="JetBrains Mono, monospace" letterSpacing="2" textAnchor="middle">KNOWLEDGE · MEMORY · IDENTITY</text>
      <text x="300" y="350" fontSize="8" fill="var(--muted)" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5" textAnchor="middle">3-TIER LIVING PROFILE</text>

      {/* dimension labels */}
      <g fontSize="8" fill="var(--dim)" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5">
        <text x="80" y="55">A.</text>
        <text x="80" y="195">B.</text>
        <text x="80" y="320">C.</text>
        <text x="80" y="430">D.</text>
      </g>

      {/* outputs */}
      <line x1="300" y1="370" x2="300" y2="410" stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 4"/>
      <rect x="170" y="410" width="260" height="36" fill="var(--panel)" stroke="var(--line-3)" strokeWidth="1"/>
      <text x="300" y="425" fontSize="9" fill="var(--muted)" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5" textAnchor="middle">YOUR DB · YOUR CRM · YOUR HELPDESK</text>
      <text x="300" y="438" fontSize="8" fill="var(--good)" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5" textAnchor="middle">↳ YOU OWN EVERYTHING</text>

      {/* corner dim ticks */}
      <g stroke="var(--accent)" strokeWidth="1">
        <line x1="36" y1="270" x2="60" y2="270"/>
        <line x1="36" y1="370" x2="60" y2="370"/>
        <line x1="48" y1="270" x2="48" y2="370"/>
      </g>
      <text x="22" y="324" fontSize="8" fill="var(--accent)" fontFamily="JetBrains Mono, monospace" letterSpacing="1" transform="rotate(-90, 22, 324)" textAnchor="middle">100mm</text>
    </svg>
  );
}

window.BrainDiagram = BrainDiagram;
window.IsoSystemDiagram = IsoSystemDiagram;