// Diagrams.jsx — Mono-stroke abstract "research artifact" diagrams.
// Used as small visuals beside research items and section heads.
// Style rules:
//   • mono-stroke, 1.25px nominal
//   • slate-blue accent only — no fill except where specified
//   • compact viewBox so they sit inline with type
//   • subtle CSS animations applied when in view

const accent      = 'var(--kpi-accent)';
const accentLight = 'var(--kpi-accent-light)';
const ink         = 'var(--kpi-fg-3)';

/* ---------- 4 small diagrams for the Research section ----- */

function DiagListening({ className = '' }) {
  // Concentric arcs — listening / signal capture
  return (
    <svg className={`kpi-diag kpi-diag-listening ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g fill="none" strokeWidth="1.25" strokeLinecap="round">
        <circle cx="14" cy="46" r="3"  fill={accent} stroke="none"/>
        <path d="M14 46 A 12 12 0 0 1  2 34"  stroke={ink}/>
        <path d="M14 46 A 22 22 0 0 1 -8 24"  stroke={ink} opacity="0.55"/>
        <path d="M14 46 A 32 32 0 0 1 -18 14" stroke={ink} opacity="0.30"/>
        <path d="M14 46 A 42 42 0 0 1 -28 4"  stroke={ink} opacity="0.15"/>
        {/* signal pings */}
        <circle cx="36" cy="26" r="1.4" fill={accentLight} stroke="none"/>
        <circle cx="58" cy="14" r="1.4" fill={accentLight} stroke="none"/>
        <circle cx="72" cy="38" r="1.4" fill={accent} stroke="none"/>
      </g>
    </svg>
  );
}

function DiagTwins({ className = '' }) {
  // Paired dot lattice — synthetic audience mirrored on a real one
  return (
    <svg className={`kpi-diag kpi-diag-twins ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g strokeWidth="1.25" strokeLinecap="round">
        {/* Left cluster — real */}
        {[[10,18],[18,30],[10,42],[26,18],[26,42],[18,18],[18,42]].map((p,i)=>(
          <circle key={`l${i}`} cx={p[0]} cy={p[1]} r="2" fill={ink} stroke="none"/>
        ))}
        {/* Vertical mirror axis */}
        <line x1="40" y1="6" x2="40" y2="54" stroke={accent} strokeDasharray="2 3"/>
        {/* Right cluster — synthetic (rings) */}
        {[[70,18],[62,30],[70,42],[54,18],[54,42],[62,18],[62,42]].map((p,i)=>(
          <circle key={`r${i}`} cx={p[0]} cy={p[1]} r="2.4" fill="none" stroke={accentLight}/>
        ))}
      </g>
    </svg>
  );
}

function DiagAudience({ className = '' }) {
  // Segmented arc — audience slices
  return (
    <svg className={`kpi-diag kpi-diag-audience ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g fill="none" strokeWidth="1.25" strokeLinecap="round">
        {/* full arc */}
        <path d="M 8 50 A 32 32 0 0 1 72 50" stroke={ink} opacity="0.30"/>
        {/* highlighted slices */}
        <path d="M 8 50 A 32 32 0 0 1 24 22" stroke={accent} strokeWidth="2"/>
        <path d="M 26 20 A 32 32 0 0 1 52 16" stroke={accentLight} strokeWidth="2"/>
        <path d="M 54 16 A 32 32 0 0 1 72 50" stroke={ink} strokeWidth="1.25" opacity="0.45"/>
        {/* radial spokes */}
        <line x1="40" y1="50" x2="40" y2="18" stroke={ink} opacity="0.30"/>
        <line x1="40" y1="50" x2="14" y2="40" stroke={ink} opacity="0.30"/>
        <line x1="40" y1="50" x2="66" y2="40" stroke={ink} opacity="0.30"/>
        {/* center */}
        <circle cx="40" cy="50" r="2" fill={accent} stroke="none"/>
      </g>
    </svg>
  );
}

function DiagBrand({ className = '' }) {
  // 2x2 positioning grid with a single marked point
  return (
    <svg className={`kpi-diag kpi-diag-brand ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g fill="none" strokeWidth="1.25" strokeLinecap="round">
        {/* axes */}
        <line x1="40" y1="4"  x2="40" y2="56" stroke={ink} opacity="0.35"/>
        <line x1="6"  y1="30" x2="74" y2="30" stroke={ink} opacity="0.35"/>
        {/* competitors */}
        <circle cx="18" cy="42" r="1.6" fill={ink}        stroke="none" opacity="0.5"/>
        <circle cx="26" cy="22" r="1.6" fill={ink}        stroke="none" opacity="0.5"/>
        <circle cx="56" cy="20" r="1.6" fill={ink}        stroke="none" opacity="0.5"/>
        <circle cx="62" cy="44" r="1.6" fill={ink}        stroke="none" opacity="0.5"/>
        {/* you */}
        <circle cx="50" cy="16" r="3"   fill={accent}     stroke="none"/>
        <circle cx="50" cy="16" r="6"   stroke={accent}   strokeOpacity="0.4"/>
      </g>
    </svg>
  );
}

/* ---------- Shift section — 3 small diagrams -------------- */
/* Same mono-stroke vocabulary as the research diagrams.       */

function DiagWeeksToHours({ className = '' }) {
  // Long sparse strip (weeks) collapses into a tight cluster (hours)
  return (
    <svg className={`kpi-diag kpi-diag-weeks ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g fill="none" strokeWidth="1.25" strokeLinecap="round">
        {/* left strip — long, sparse, faded */}
        <line x1="4" y1="22" x2="34" y2="22" stroke={ink} opacity="0.35"/>
        {[6, 14, 22, 30].map(x => (
          <line key={`tl${x}`} x1={x} y1="19" x2={x} y2="25" stroke={ink} opacity="0.5"/>
        ))}
        {/* collapse curve */}
        <path d="M 34 22 C 44 22, 50 38, 62 38" stroke={accent} strokeWidth="1.5"/>
        {/* right tight cluster */}
        <line x1="58" y1="38" x2="74" y2="38" stroke={ink} opacity="0.35"/>
        {[60, 64, 68, 72].map(x => (
          <line key={`tr${x}`} x1={x} y1="35" x2={x} y2="41" stroke={accent}/>
        ))}
        <circle cx="66" cy="38" r="1.6" fill={accent} stroke="none"/>
      </g>
    </svg>
  );
}

function DiagDataToAnswer({ className = '' }) {
  // Scatter of dots converging to a single tagged answer point
  return (
    <svg className={`kpi-diag kpi-diag-data ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g fill="none" strokeWidth="1" strokeLinecap="round">
        {/* scatter — left two-thirds */}
        {[[6,12],[12,22],[8,34],[14,42],[18,18],[22,30],[20,46],[28,16],[26,38],[32,26],[34,46],[36,16]].map((p,i)=>(
          <circle key={`d${i}`} cx={p[0]} cy={p[1]} r="1.4" fill={ink} stroke="none" opacity="0.55"/>
        ))}
        {/* convergence lines from the right edge of the scatter */}
        <line x1="36" y1="16" x2="58" y2="30" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
        <line x1="34" y1="46" x2="58" y2="30" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
        <line x1="32" y1="26" x2="58" y2="30" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
        <line x1="26" y1="38" x2="58" y2="30" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
        {/* the answer */}
        <circle cx="60" cy="30" r="3.4" fill={accent} stroke="none"/>
        <line x1="64" y1="30" x2="74" y2="30" stroke={accent} strokeWidth="1.5"/>
        <path d="M 71 27 L 74 30 L 71 33" stroke={accent} strokeWidth="1.5"/>
      </g>
    </svg>
  );
}

function DiagSamplingToScale({ className = '' }) {
  // Small ring (n=panel) on the left, expanding ring grid (network) on the right
  return (
    <svg className={`kpi-diag kpi-diag-scale ${className}`} viewBox="0 0 80 60" aria-hidden="true">
      <g fill="none" strokeWidth="1.25" strokeLinecap="round">
        {/* panel — 5 dots ringed */}
        <circle cx="16" cy="30" r="10" stroke={ink} opacity="0.5"/>
        {[[16,22],[10,28],[22,28],[12,36],[20,36]].map((p,i)=>(
          <circle key={`s${i}`} cx={p[0]} cy={p[1]} r="1.4" fill={ink} stroke="none" opacity="0.6"/>
        ))}
        {/* arrow */}
        <line x1="30" y1="30" x2="40" y2="30" stroke={accent} strokeWidth="1"/>
        <path d="M 37 27 L 40 30 L 37 33" stroke={accent} strokeWidth="1"/>
        {/* network — wider lattice */}
        {Array.from({length: 5}).map((_, r) =>
          Array.from({length: 5}).map((_, c) => {
            const x = 46 + c * 7;
            const y = 12 + r * 9;
            const isHighlighted = (r + c) % 3 === 0;
            return (
              <circle
                key={`n${r}-${c}`}
                cx={x} cy={y}
                r={isHighlighted ? 1.4 : 1}
                fill={isHighlighted ? accent : ink}
                opacity={isHighlighted ? 1 : 0.55}
                stroke="none"
              />
            );
          })
        )}
      </g>
    </svg>
  );
}

/* ---------- Hero ambient — line-art constellation --------- */
// Replaces the dot matrix. Same mono-stroke language as the
// research diagrams: 18 nodes, sparse connections, one "anchor"
// node that ripples out. Reads as "synthetic audience network"
// without being literal about it.
function HeroDotMatrix() {
  // Hand-placed nodes — clustered, not gridded, so it feels organic.
  const nodes = [
    { x: 12, y: 18, k: 's' }, { x: 22, y: 10, k: 's' }, { x: 8,  y: 32, k: 's' },
    { x: 24, y: 28, k: 'm' }, { x: 38, y: 16, k: 's' }, { x: 36, y: 36, k: 'm' },
    { x: 50, y: 8,  k: 's' }, { x: 52, y: 26, k: 's' }, { x: 48, y: 44, k: 's' },
    { x: 64, y: 14, k: 's' }, { x: 62, y: 32, k: 'a' }, // anchor
    { x: 72, y: 22, k: 's' }, { x: 78, y: 36, k: 's' }, { x: 70, y: 48, k: 's' },
    { x: 30, y: 50, k: 's' }, { x: 18, y: 44, k: 's' }, { x: 84, y: 14, k: 's' },
    { x: 86, y: 50, k: 's' },
  ];
  // Edges — by index — chosen by hand to suggest clusters.
  const edges = [
    [0,1],[0,2],[1,4],[2,15],[2,3],[3,5],[3,4],[4,6],[4,7],[5,7],[5,8],
    [6,9],[7,10],[8,10],[9,10],[9,11],[10,11],[10,12],[11,12],[12,13],
    [13,17],[15,14],[14,8],[16,9],[16,11],
  ];

  return (
    <svg className="kpi-hero-constellation" viewBox="0 0 96 60" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <g fill="none" strokeLinecap="round">
        {/* Edges */}
        {edges.map((e, i) => {
          const a = nodes[e[0]], b = nodes[e[1]];
          return (
            <line
              key={`e${i}`}
              x1={a.x} y1={a.y} x2={b.x} y2={b.y}
              stroke="var(--kpi-accent-light)"
              strokeWidth="0.4"
              strokeOpacity={(i % 3 === 0) ? 0.45 : 0.22}
            />
          );
        })}
        {/* Nodes */}
        {nodes.map((n, i) => {
          if (n.k === 'a') {
            return (
              <g key={`n${i}`} className="kpi-hero-anchor">
                <circle cx={n.x} cy={n.y} r="2.2" fill="var(--kpi-accent-light)" />
                <circle cx={n.x} cy={n.y} r="2.2" fill="none" stroke="var(--kpi-accent-light)" strokeWidth="0.4" className="kpi-hero-anchor-ring"/>
                <circle cx={n.x} cy={n.y} r="2.2" fill="none" stroke="var(--kpi-accent-light)" strokeWidth="0.4" className="kpi-hero-anchor-ring kpi-hero-anchor-ring-2"/>
              </g>
            );
          }
          const r = n.k === 'm' ? 1.1 : 0.7;
          return (
            <circle key={`n${i}`} cx={n.x} cy={n.y} r={r}
              fill="var(--kpi-on-ink-3)" fillOpacity="0.75"/>
          );
        })}
      </g>
    </svg>
  );
}

/* ---------- "Weeks to hours" — typographic moment ----------- */
// Replaces the previous infographic-style strip. Two big numerals
// (6w / 2h) bridged by a thin arc that draws on scroll. Reads as
// editorial, not as "data viz".
function ShiftTimeline() {
  return (
    <div className="kpi-shift-collapse" aria-hidden="true">
      <div className="kpi-shift-collapse-from">
        <div className="kpi-numbered">Before</div>
        <div className="kpi-shift-collapse-num kpi-shift-collapse-num-from">6w</div>
      </div>

      <svg className="kpi-shift-arc-svg" viewBox="0 0 400 60" preserveAspectRatio="none">
        <path
          d="M 4 30 C 120 30, 280 30, 396 30"
          stroke="var(--kpi-accent)"
          strokeWidth="1.5"
          fill="none"
          strokeDasharray="420"
          strokeDashoffset="420"
          className="kpi-shift-arc"
        />
      </svg>

      <div className="kpi-shift-collapse-to">
        <div className="kpi-numbered">After</div>
        <div className="kpi-shift-collapse-num kpi-shift-collapse-num-to">2h</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  DiagListening, DiagTwins, DiagAudience, DiagBrand,
  DiagWeeksToHours, DiagDataToAnswer, DiagSamplingToScale,
  HeroDotMatrix, ShiftTimeline,
});