// IVE — Shared atoms used across artboards.
// Exposes: Eyebrow, Rule, Stamp, ArtboardTag, Corners, IVEWordmark, Logo marks,
// Domain & Status icons, ScorePlane glyph, helpers.

const C = {
  ink: '#13150E', ink2: '#2A2D1F', ink3: '#4F5238',
  rule: '#BFC0A4', ruleSoft: '#D2D3B8',
  paper: '#EFEEDD', paper2: '#E8E6D2', bone: '#DDD9C0',
  card: '#F5F3E4', white: '#FBFAEF',
  ochre: '#6F7D3A', ochreDeep: '#4E5A23', ochreSoft: '#AEB783',
  civic: '#1E2A1A', field: '#3E5A35',
  verified: '#3F6B3A', contested: '#6F7D3A', disputed: '#9C3B2E',
  unsupported: '#6E6E4E', opinion: '#4E5A6E', unverified: '#8E9382',
};

// ── Editorial atoms ─────────────────────────────────────────────
const Eyebrow = ({ children, style }) => (
  <div className="ive-eyebrow" style={style}>{children}</div>
);

const Rule = ({ color, style }) => (
  <div style={{ height: 1, background: color || C.rule, ...style }} />
);

const ArtboardTag = ({ label, dark, style }) => (
  <div className={'ive-artboard-tag' + (dark ? ' ive-artboard-tag--dark' : '')} style={style}>
    {label}
  </div>
);

const Stamp = ({ children, dark, style }) => (
  <div className={'ive-stamp' + (dark ? ' ive-stamp--dark' : '')} style={style}>
    <span className="dot" style={{ background: C.ochre }} />
    <span>{children}</span>
  </div>
);

const Corners = ({ color }) => (
  <>
    {['tl','tr','bl','br'].map(k => (
      <span key={k} className={`ive-corner ive-corner--${k}`}
        style={{ borderColor: color || C.ink3 }} />
    ))}
  </>
);

// ── Logo / wordmark ─────────────────────────────────────────────
// Primary wordmark. Low-contrast serif, slight tracking, a quietly
// punctuated full-stop to read as a declaration rather than a brand.
const IVEWordmark = ({ size = 96, color = C.ink, withDot = true, weight = 300 }) => (
  <span
    className="ive-mark"
    style={{ fontSize: size, color, lineHeight: 1, fontWeight: weight, display: 'inline-flex', alignItems: 'baseline' }}
  >
    <span>IVE</span>
    {withDot && (
      <span style={{
        width: size * 0.085, height: size * 0.085, background: C.ochre,
        display: 'inline-block', marginLeft: size * 0.04, alignSelf: 'flex-end',
        marginBottom: size * 0.05,
      }} />
    )}
  </span>
);

// Concept 2 — Wildcard: "the witness mark"
// An offset rectangle (paper) framed by a serif I, a calibrated tick,
// and the ochre dot. Reads as an editorial frame around an evidence
// fragment. Crafted, archival, signature.
const WitnessMark = ({ size = 220, color = C.ink, accent = C.ochre }) => {
  const s = size;
  return (
    <svg viewBox="0 0 220 140" width={s} height={s * 140/220} style={{ display: 'block' }}>
      {/* outer frame */}
      <rect x="14" y="14" width="192" height="112" fill="none" stroke={color} strokeWidth="1.2" />
      {/* inner evidence fragment */}
      <rect x="36" y="38" width="120" height="64" fill={C.bone} stroke={color} strokeWidth=".8" />
      {/* serif "I" stem */}
      <rect x="168" y="38" width="14" height="64" fill={color} />
      <rect x="162" y="36" width="26" height="3" fill={color} />
      <rect x="162" y="101" width="26" height="3" fill={color} />
      {/* calibration ticks across the top of the frame */}
      {[40, 64, 88, 112, 136].map((x, i) => (
        <line key={i} x1={x} y1="14" x2={x} y2={i === 2 ? 22 : 18} stroke={color} strokeWidth=".8" />
      ))}
      {/* signal dot — peer-reviewed mark of authority */}
      <rect x="32" y="116" width="6" height="6" fill={accent} />
    </svg>
  );
};

// Concept 3 — Combined metaphor: aperture / iris / tuning fork / decay
// An iris reads from any angle: concentric arcs (lens), a vertical
// caliper stem (tuning fork / scale beam), the iris pupil as the dot,
// and an exit arc that decays — half-life as a visible quarter sweep.
const ApertureMark = ({ size = 220, color = C.ink, accent = C.ochre }) => {
  const s = size;
  return (
    <svg viewBox="0 0 200 200" width={s} height={s} style={{ display: 'block' }}>
      {/* outer aperture ring */}
      <circle cx="100" cy="100" r="86" fill="none" stroke={color} strokeWidth="1.2" />
      {/* iris arcs — 6 blades, like an aperture */}
      {[0,1,2,3,4,5].map(i => {
        const a = (i * 60) * Math.PI / 180;
        const x1 = 100 + Math.cos(a) * 24;
        const y1 = 100 + Math.sin(a) * 24;
        const x2 = 100 + Math.cos(a) * 70;
        const y2 = 100 + Math.sin(a) * 70;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth=".9" />;
      })}
      {/* calibration ticks around the outside — instrument */}
      {Array.from({length: 24}).map((_, i) => {
        const a = (i * 15) * Math.PI / 180;
        const r1 = 90, r2 = i % 6 === 0 ? 96 : 93;
        return <line key={i}
          x1={100 + Math.cos(a) * r1} y1={100 + Math.sin(a) * r1}
          x2={100 + Math.cos(a) * r2} y2={100 + Math.sin(a) * r2}
          stroke={color} strokeWidth={i % 6 === 0 ? 1.2 : .6}
        />;
      })}
      {/* decay quarter — knowledge half-life made visible */}
      <path d="M 100 14 A 86 86 0 0 1 186 100"
        fill="none" stroke={accent} strokeWidth="2.4" strokeLinecap="butt" />
      {/* tuning fork / scale beam — vertical caliper through the eye */}
      <line x1="100" y1="6" x2="100" y2="22" stroke={color} strokeWidth="1.2" />
      <line x1="100" y1="178" x2="100" y2="194" stroke={color} strokeWidth="1.2" />
      {/* pupil — the witness, the signal */}
      <circle cx="100" cy="100" r="9" fill={color} />
      <rect x="96" y="96" width="8" height="8" fill={accent} />
    </svg>
  );
};

// Monogram — single distinctive letterform. Stylised "i" with a square
// tittle in the signal color. Used as favicon, app icon, profile glyph.
const Monogram = ({ size = 96, color = C.ink, accent = C.ochre, bg = 'transparent' }) => (
  <svg viewBox="0 0 100 100" width={size} height={size}>
    {bg !== 'transparent' && <rect width="100" height="100" fill={bg} />}
    {/* stem */}
    <rect x="42" y="34" width="16" height="46" fill={color} />
    {/* serifs */}
    <rect x="34" y="32" width="32" height="3" fill={color} />
    <rect x="32" y="78" width="36" height="3" fill={color} />
    {/* tittle — the witness */}
    <rect x="42" y="14" width="16" height="16" fill={accent} />
  </svg>
);

// ── Domain icons (7 epistemic domains) ───────────────────────────
// All glyphs share: 48×48 viewBox, 1.4 stroke, drawn from the same
// vocabulary (ticks, lines, dots, simple geometric primitives).
const DomainIcon = ({ name, size = 48, color = C.ink, accent = C.ochre }) => {
  const stroke = { fill: 'none', stroke: color, strokeWidth: 1.4, strokeLinecap: 'square' };
  const dot = { fill: accent };
  const glyphs = {
    mathematical: (
      <>
        {/* infinity / lemniscate as two tangent circles, immutable */}
        <circle cx="17" cy="24" r="9" {...stroke} />
        <circle cx="31" cy="24" r="9" {...stroke} />
        <rect x="22" y="22" width="4" height="4" {...dot} />
      </>
    ),
    scientific: (
      <>
        {/* flask / beaker with scale ticks */}
        <path d="M19 8 L19 18 L11 38 H37 L29 18 V8" {...stroke} />
        <line x1="16" y1="8" x2="32" y2="8" {...stroke} />
        <line x1="14" y1="30" x2="34" y2="30" {...stroke} />
        <rect x="22" y="32" width="4" height="4" {...dot} />
      </>
    ),
    historical: (
      <>
        {/* stratigraphic layers */}
        <rect x="9" y="11" width="30" height="6" {...stroke} />
        <rect x="9" y="21" width="30" height="6" {...stroke} />
        <rect x="9" y="31" width="30" height="6" {...stroke} />
        <line x1="14" y1="14" x2="14" y2="14" stroke={color} strokeWidth="2" />
        <rect x="32" y="23" width="4" height="2" {...dot} />
      </>
    ),
    legal: (
      <>
        {/* balance / scale */}
        <line x1="24" y1="10" x2="24" y2="38" {...stroke} />
        <line x1="12" y1="14" x2="36" y2="14" {...stroke} />
        <path d="M12 14 L8 22 H16 Z" {...stroke} />
        <path d="M36 14 L32 22 H40 Z" {...stroke} />
        <rect x="22" y="36" width="4" height="4" {...dot} />
      </>
    ),
    journalistic: (
      <>
        {/* column rule + headline bar */}
        <line x1="11" y1="12" x2="11" y2="36" {...stroke} />
        <line x1="15" y1="13" x2="37" y2="13" {...stroke} />
        <line x1="15" y1="20" x2="33" y2="20" {...stroke} />
        <line x1="15" y1="24" x2="37" y2="24" {...stroke} />
        <line x1="15" y1="28" x2="30" y2="28" {...stroke} />
        <rect x="33" y="32" width="4" height="4" {...dot} />
      </>
    ),
    philosophical: (
      <>
        {/* thinking — two arcs facing each other across a tick */}
        <path d="M10 24 A 10 10 0 0 1 22 14" {...stroke} />
        <path d="M38 24 A 10 10 0 0 0 26 34" {...stroke} />
        <line x1="24" y1="12" x2="24" y2="36" {...stroke} />
        <rect x="22" y="22" width="4" height="4" {...dot} />
      </>
    ),
    aesthetic: (
      <>
        {/* eye / aperture — immutable, intersubjective */}
        <path d="M8 24 Q 24 10, 40 24 Q 24 38, 8 24 Z" {...stroke} />
        <circle cx="24" cy="24" r="5" {...stroke} />
        <rect x="22" y="22" width="4" height="4" {...dot} />
      </>
    ),
  };
  return (
    <svg viewBox="0 0 48 48" width={size} height={size}>
      {glyphs[name]}
    </svg>
  );
};

// ── Status icons (6 verification statuses) ───────────────────────
const StatusIcon = ({ name, size = 32, color }) => {
  const c = color || ({
    verified: C.verified, contested: C.contested, disputed: C.disputed,
    unsupported: C.unsupported, opinion: C.opinion, unverified: C.unverified,
  })[name];
  const stroke = { fill: 'none', stroke: c, strokeWidth: 1.6, strokeLinecap: 'square' };
  const glyphs = {
    verified: (
      <>
        <rect x="4" y="4" width="24" height="24" {...stroke} />
        <path d="M9 17 L14 22 L23 11" {...stroke} />
      </>
    ),
    contested: (
      <>
        <rect x="4" y="4" width="24" height="24" {...stroke} />
        <line x1="10" y1="16" x2="22" y2="16" {...stroke} />
        <line x1="10" y1="20" x2="18" y2="20" {...stroke} />
        <line x1="10" y1="12" x2="20" y2="12" {...stroke} />
      </>
    ),
    disputed: (
      <>
        <rect x="4" y="4" width="24" height="24" {...stroke} />
        <line x1="10" y1="10" x2="22" y2="22" {...stroke} />
        <line x1="22" y1="10" x2="10" y2="22" {...stroke} />
      </>
    ),
    unsupported: (
      <>
        <rect x="4" y="4" width="24" height="24" strokeDasharray="3 2" {...stroke} />
        <line x1="9" y1="16" x2="23" y2="16" {...stroke} />
      </>
    ),
    opinion: (
      <>
        <rect x="4" y="4" width="24" height="24" {...stroke} />
        <text x="16" y="22" textAnchor="middle"
          fontFamily="Source Serif 4, serif" fontStyle="italic"
          fontSize="16" fill={c}>o</text>
      </>
    ),
    unverified: (
      <>
        <rect x="4" y="4" width="24" height="24" strokeDasharray="2 3" {...stroke} />
      </>
    ),
  };
  return (
    <svg viewBox="0 0 32 32" width={size} height={size}>
      {glyphs[name]}
    </svg>
  );
};

// ── EB/SC score plane — the signature chart of IVE ───────────────
const ScorePlane = ({ size = 360, points = [], showAxes = true, color = C.ink, accent = C.ochre, paper = C.paper }) => {
  const pad = 36;
  const innerSize = size - pad * 2;
  const xy = (eb, sc) => [pad + eb * innerSize, size - pad - sc * innerSize];
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} style={{ display: 'block', background: paper }}>
      {/* light grid */}
      {Array.from({length: 11}).map((_, i) => (
        <g key={i}>
          <line x1={pad + (i/10) * innerSize} y1={pad} x2={pad + (i/10) * innerSize} y2={size - pad}
            stroke={color} strokeWidth={i % 5 === 0 ? .6 : .25} opacity={i % 5 === 0 ? .35 : .15} />
          <line x1={pad} y1={pad + (i/10) * innerSize} x2={size - pad} y2={pad + (i/10) * innerSize}
            stroke={color} strokeWidth={i % 5 === 0 ? .6 : .25} opacity={i % 5 === 0 ? .35 : .15} />
        </g>
      ))}
      {/* axes */}
      {showAxes && (
        <>
          <line x1={pad} y1={size - pad} x2={size - pad} y2={size - pad} stroke={color} strokeWidth="1" />
          <line x1={pad} y1={pad} x2={pad} y2={size - pad} stroke={color} strokeWidth="1" />
          {/* labels */}
          <text x={size/2} y={size - 8} textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="9" letterSpacing="1.5" fill={color}>
            EVIDENCE BASIS →
          </text>
          <text x={14} y={size/2} textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="9" letterSpacing="1.5" fill={color}
            transform={`rotate(-90 14 ${size/2})`}>
            SOCIAL CONSENSUS →
          </text>
        </>
      )}
      {/* canonical zones */}
      <rect x={xy(0.66, 0.66)[0]} y={pad}
        width={(size - pad) - xy(0.66, 0.66)[0]}
        height={xy(0.66, 0.66)[1] - pad}
        fill={accent} opacity=".08" />
      {/* plotted points */}
      {points.map((p, i) => {
        const [x, y] = xy(p.eb, p.sc);
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="3.5" fill={p.color || color} />
            {p.label && (
              <text x={x + 8} y={y + 3.5} fontFamily="Geist Mono, monospace" fontSize="9" fill={color}>
                {p.label}
              </text>
            )}
          </g>
        );
      })}
    </svg>
  );
};

Object.assign(window, {
  IVE_C: C,
  Eyebrow, Rule, ArtboardTag, Stamp, Corners,
  IVEWordmark, WitnessMark, ApertureMark, Monogram,
  DomainIcon, StatusIcon, ScorePlane,
});