/* layers-viz.jsx — visual diagrams for the 3-layer cognitive model */

const MacroVizLayer = () =>
<svg viewBox="0 0 240 100" style={{ width: '100%', height: '100%' }}>
    <circle cx="50" cy="50" r="20" fill="rgba(75,173,175,0.25)" stroke="var(--teal)" strokeWidth="0.8" />
    <circle cx="115" cy="38" r="16" fill="rgba(75,173,175,0.18)" stroke="var(--teal)" strokeWidth="0.8" />
    <circle cx="170" cy="60" r="22" fill="rgba(216,180,138,0.18)" stroke="var(--warm)" strokeWidth="0.8" />
    <circle cx="210" cy="30" r="10" fill="rgba(75,173,175,0.12)" stroke="rgba(75,173,175,0.5)" strokeWidth="0.6" />
    <text x="50" y="52" textAnchor="middle" fontSize="6" fill="rgba(20,30,40,0.92)" fontFamily="var(--sans)">Premiumization</text>
    <text x="115" y="40" textAnchor="middle" fontSize="5.5" fill="rgba(20,30,40,0.92)" fontFamily="var(--sans)">Ritualization</text>
    <text x="170" y="62" textAnchor="middle" fontSize="6" fill="rgba(20,16,8,0.85)" fontFamily="var(--sans)">Efficiency</text>
  </svg>;


const PerspectivesViz = () =>
<svg viewBox="0 0 240 100" style={{ width: '100%', height: '100%' }} data-comment-anchor="8e1832a94d-svg-16-3">
    {[
  ['Treating mocktails as rituals', 12],
  ['Pricing premium for craft', 28],
  ['Comparing to "glorified juice"', 44],
  ['Adopting trends as life-hacks', 60],
  ['Demanding sub-2-min prep', 76]].
  map(([t, y], i) =>
  <g key={i}>
        <circle cx="14" cy={y} r="3" fill="none" stroke="var(--teal)" strokeWidth="0.7" />
        <line x1="20" y1={y} x2="40" y2={y} stroke="var(--line-2)" strokeWidth="0.4" />
        <text x="44" y={y + 1.8} fontSize="9" fill="currentColor" fontFamily="var(--sans)">{t}</text>
      </g>
  )}
  </svg>;


const ConvergeViz = () =>
<svg viewBox="0 0 240 100" style={{ width: '100%', height: '100%' }}>
    <defs>
      <marker id="dot1" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
        <circle cx="1.5" cy="1.5" r="1.2" fill="var(--teal)" />
      </marker>
    </defs>
    <circle cx="60" cy="35" r="18" fill="rgba(75,173,175,0.18)" stroke="var(--teal)" strokeWidth="0.6" />
    <circle cx="180" cy="35" r="18" fill="rgba(75,173,175,0.18)" stroke="var(--teal)" strokeWidth="0.6" />
    <circle cx="120" cy="80" r="14" fill="rgba(216,180,138,0.18)" stroke="var(--warm)" strokeWidth="0.6" />

    <path d="M 78 38 Q 120 25 162 38" fill="none" stroke="var(--teal)" strokeWidth="0.8" strokeDasharray="2 2" />
    <text x="120" y="22" textAnchor="middle" fontSize="5.5" fill="var(--teal)" fontFamily="var(--mono)" letterSpacing="0.1em">CONVERGENCE</text>

    <path d="M 70 50 Q 90 75 108 78" fill="none" stroke="var(--warm)" strokeWidth="0.8" strokeDasharray="2 2" />
    <text x="74" y="68" fontSize="5.5" fill="var(--warm)" fontFamily="var(--mono)" letterSpacing="0.1em">DIVERGENCE</text>

    <text x="60" y="38" textAnchor="middle" fontSize="6" fill="rgba(20,30,40,0.92)" fontFamily="var(--sans)">Theme A</text>
    <text x="180" y="38" textAnchor="middle" fontSize="6" fill="rgba(20,30,40,0.92)" fontFamily="var(--sans)">Theme B</text>
    <text x="120" y="82" textAnchor="middle" fontSize="6" fill="rgba(20,16,8,0.85)" fontFamily="var(--sans)">Theme C</text>
  </svg>;


window.MacroVizLayer = MacroVizLayer;
window.PerspectivesViz = PerspectivesViz;
window.ConvergeViz = ConvergeViz;