/* global React */
/* ============================================================
   PF GLYPHS — inline SVG, stroke-based, recolor via currentColor.
   Faithful reproductions of the brand glyph motifs (no baked
   frame), so each can take any futures-ink. viewBox 0 0 240 240.
   ============================================================ */

const PF_STROKE = { stroke: "currentColor", strokeWidth: 7, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" };
const PF_DOT = { fill: "currentColor", stroke: "none" };

function GlyphRipples() {
  return (
    <g {...PF_STROKE}>
      <circle cx="120" cy="120" r="14" {...PF_DOT} />
      <circle cx="120" cy="120" r="36" />
      <circle cx="120" cy="120" r="62" />
      <circle cx="120" cy="120" r="88" />
    </g>
  );
}

function GlyphSpiral() {
  // single sweeping path, faithful to glyph-spiral
  return (
    <g {...PF_STROKE}>
      <path d="M120 120 C120 110 110 104 100 110 C86 118 86 140 104 152 C128 168 160 150 166 120 C174 80 138 48 96 60 C44 75 36 138 80 178 C132 226 214 170 210 104" />
    </g>
  );
}

function GlyphBranching() {
  return (
    <g {...PF_STROKE}>
      <path d="M120 212 L120 130" />
      <path d="M120 130 L62 68" />
      <path d="M120 130 L120 48" />
      <path d="M120 130 L178 68" />
      <circle cx="62" cy="68" r="11" {...PF_DOT} />
      <circle cx="120" cy="48" r="11" {...PF_DOT} />
      <circle cx="178" cy="68" r="11" {...PF_DOT} />
      <circle cx="120" cy="130" r="9" {...PF_DOT} />
    </g>
  );
}

function GlyphNetwork() {
  const nodes = [[70,62],[166,56],[120,112],[56,146],[180,140],[96,188],[170,194]];
  const edges = [[0,2],[1,2],[2,3],[2,4],[2,5],[2,6],[3,5],[4,6],[5,6],[0,3],[1,4]];
  return (
    <g {...PF_STROKE}>
      {edges.map((e, i) => (
        <line key={i} x1={nodes[e[0]][0]} y1={nodes[e[0]][1]} x2={nodes[e[1]][0]} y2={nodes[e[1]][1]} />
      ))}
      {nodes.map((n, i) => <circle key={i} cx={n[0]} cy={n[1]} r="10" {...PF_DOT} />)}
    </g>
  );
}

function GlyphEye() {
  // open eye with radiating lashes + iris — the "sense-making" mark
  const lashes = [];
  const cx = 120, lift = 96;
  for (let k = -3; k <= 3; k++) {
    const a = (k * 16) * Math.PI / 180;
    const x1 = cx + Math.sin(a) * 30;
    const y1 = lift - 8 - Math.cos(a) * 8;
    const x2 = cx + Math.sin(a) * 52;
    const y2 = lift - 8 - Math.cos(a) * 44;
    lashes.push(<line key={k} x1={x1} y1={y1} x2={x2} y2={y2} />);
  }
  return (
    <g {...PF_STROKE}>
      <path d="M58 132 C84 158 156 158 182 132" />
      {lashes}
      <circle cx="120" cy="128" r="22" />
      <circle cx="120" cy="128" r="5" {...PF_DOT} />
    </g>
  );
}

function GlyphDots() {
  const cells = [];
  const n = 6, start = 38, gap = 33;
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      cells.push(<circle key={`${r}-${c}`} cx={start + c * gap} cy={start + r * gap} r="7.5" {...PF_DOT} />);
    }
  }
  return <g>{cells}</g>;
}

function GlyphChevron() {
  const rows = [];
  for (let r = 0; r < 4; r++) {
    const y = 56 + r * 44;
    rows.push(<path key={r} d={`M60 ${y} L120 ${y + 34} L180 ${y}`} {...PF_STROKE} />);
  }
  return <g>{rows}</g>;
}

const PF_GLYPHS = {
  ripples: GlyphRipples,
  spiral: GlyphSpiral,
  branching: GlyphBranching,
  network: GlyphNetwork,
  eye: GlyphEye,
  dots: GlyphDots,
  chevron: GlyphChevron,
};

function PFGlyph({ name = "eye", size, style, className }) {
  const G = PF_GLYPHS[name] || GlyphEye;
  const dim = size ? { width: size, height: size } : null;
  return (
    <svg viewBox="0 0 240 240" className={className} aria-hidden="true"
         style={{ display: "block", ...dim, ...style }}>
      <G />
    </svg>
  );
}

/* sector → ink + glyph mapping, shared across pages */
const PF_SECTOR_INK = {
  agrifood:  { ink: "sprout", glyph: "ripples" },
  tech:      { ink: "sky",    glyph: "spiral" },
  governance:{ ink: "bloom",  glyph: "branching" },
};

window.PFGlyph = PFGlyph;
window.PF_SECTOR_INK = PF_SECTOR_INK;