// Primust — Shared UI primitives

const { useState, useEffect, useRef } = React;

// ────────── Mark & Logo ──────────
function Mark({ size = 22, bg, fg }) {
  const { C } = window.PT;
  bg = bg || C.ink;
  fg = fg || C.bg;
  const sw = Math.max(1.5, size * 0.09);
  return (
    <div style={{ width: size, height: size, background: bg, position: 'relative', flexShrink: 0 }}>
      <div style={{ position: 'absolute', top: size*0.14, left: size*0.24, width: sw, height: size*0.72, background: fg }} />
      <div style={{ position: 'absolute', top: size*0.47, left: size*0.24, width: size*0.56, height: sw, background: fg }} />
    </div>
  );
}

function Logo({ size = 22, variant = 'dark', showWord = true }) {
  const { C, F } = window.PT;
  const wordColor = variant === 'light' ? C.darkInk : C.ink;
  const markBg = variant === 'light' ? C.darkInk : C.ink;
  const markFg = variant === 'light' ? C.darkBg : C.bg;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <Mark size={size} bg={markBg} fg={markFg} />
      {showWord && (
        <span style={{
          fontFamily: F.serif, fontWeight: 500, fontSize: size * 0.86,
          color: wordColor, letterSpacing: 0, lineHeight: 1,
        }}>Primust</span>
      )}
    </div>
  );
}

// ────────── Button ──────────
function Btn({ children, variant = 'primary', icon, ...p }) {
  const { C, F } = window.PT;
  const base = {
    fontFamily: F.sans, fontSize: 14, fontWeight: 500, letterSpacing: 0,
    padding: '11px 18px', borderRadius: 100, cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'all 140ms ease', textDecoration: 'none', whiteSpace: 'nowrap',
  };
  const styles = {
    primary: { ...base, background: C.ink, color: C.bg, border: `1px solid ${C.ink}` },
    ghost:   { ...base, background: 'transparent', color: C.ink, border: `1px solid ${C.ink}` },
    soft:    { ...base, background: C.paper, color: C.ink, border: `1px solid ${C.line}` },
    light:   { ...base, background: C.darkInk, color: C.darkBg, border: `1px solid ${C.darkInk}` },
    lightGhost: { ...base, background: 'transparent', color: C.darkInk, border: `1px solid ${C.darkInk}` },
  };
  return <button {...p} style={{ ...styles[variant], ...(p.style || {}) }}>{children}{icon && <span style={{ opacity: 0.7 }}>{icon}</span>}</button>;
}

// ────────── Eyebrow ──────────
function Eyebrow({ children, color, dot = true }) {
  const { C, F } = window.PT;
  color = color || C.dim;
  return (
    <div style={{
      fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase',
      color, display: 'inline-flex', alignItems: 'center', gap: 10,
    }}>
      {dot && <span style={{ width: 5, height: 5, background: color, borderRadius: '50%' }} />}
      {children}
    </div>
  );
}

// ────────── SectionHead (numbered) ──────────
function SectionHead({ number, label, title, kicker, children, align = 'left' }) {
  const { C, F } = window.PT;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 64, marginBottom: 56 }}>
      <div>
        <div style={{ fontFamily: F.mono, fontSize: 11, color: C.dim, letterSpacing: 1.4, textTransform: 'uppercase' }}>
          § {number} — {label}
        </div>
      </div>
      <div>
        {kicker && <div style={{ marginBottom: 18 }}><Eyebrow color={C.accent}>{kicker}</Eyebrow></div>}
        <h2 style={{
          fontFamily: F.serif, fontSize: 'clamp(36px, 4.2vw, 56px)',
          letterSpacing: -1.2, fontWeight: 400, lineHeight: 1.08,
          margin: 0, color: C.ink, maxWidth: 820,
        }}>{title}</h2>
        {children && <div style={{ marginTop: 20, maxWidth: 720 }}>{children}</div>}
      </div>
    </div>
  );
}

// ────────── Legacy Credential Artifact (detailed) ──────────
function LegacyCredentialCard({ compact = false }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      background: C.paper, border: `1px solid ${C.line}`,
      boxShadow: '0 1px 0 rgba(20,17,13,0.02), 0 24px 64px -24px rgba(20,17,13,0.18)',
      fontFamily: F.sans, color: C.ink, overflow: 'hidden',
    }}>
      {/* Document header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 24px', borderBottom: `1px solid ${C.line}`,
      }}>
        <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: C.dim }}>
          Credential of Record
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: C.accent }}>
          <span style={{ width: 6, height: 6, background: C.accent, borderRadius: '50%' }} />
          verified · offline · 0.8ms
        </div>
      </div>

      {/* Lede */}
      <div style={{ padding: '28px 28px 20px', borderBottom: `1px solid ${C.line}` }}>
        <div style={{ fontFamily: F.serif, fontSize: 22, lineHeight: 1.25, letterSpacing: -0.4, marginBottom: 14 }}>
          A process ran <em style={{ color: C.accent }}>14 checks</em> against policy pack{' '}
          <span style={{ fontFamily: F.mono, fontSize: 16 }}>eu_ai_act_art12_v1</span>{' '}
          and was signed at <span style={{ fontFamily: F.mono, fontSize: 15 }}>09:14:01 UTC</span>.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontFamily: F.mono, fontSize: 11 }}>
          {[
            ['Process run',      'run_01HXK8F9A4Q2'],
            ['Issuer',           'primust.com'],
            ['Organization',     'acme-corp'],
            ['Policy pack',      'eu_ai_act_art12_v1'],
            ['Input commit',     'poseidon2:b7f2…a41c'],
            ['Output commit',    'poseidon2:9d08…3e21'],
            ['Proof Coverage',   'Execution'],
            ['Mode',             'pk_live · production'],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: `1px dotted ${C.line}` }}>
              <span style={{ color: C.dim, textTransform: 'uppercase', letterSpacing: 1 }}>{k}</span>
              <span>{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Surface */}
      <div style={{ padding: '22px 28px', borderBottom: `1px solid ${C.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <div>
            <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: C.dim }}>Proof Coverage</div>
            <div style={{ fontFamily: F.serif, fontSize: 44, lineHeight: 1, letterSpacing: -1.5, color: C.accent, marginTop: 6 }}>0.73</div>
          </div>
          <div style={{ fontFamily: F.mono, fontSize: 11, color: C.dim, textAlign: 'right', lineHeight: 1.6 }}>
            14 executed<br />
            3 blocked<br />
            2 gaps
          </div>
        </div>
        {[
          { k: 'Mathematical',   v: 0.51, c: C.accent },
          { k: 'Verified Model', v: 0.11, c: C.ink },
          { k: 'Execution',      v: 0.11, c: C.ink },
          { k: 'Witnessed',      v: 0.00, c: C.dimmer },
          { k: 'Attestation',    v: 0.00, c: C.dimmer },
          { k: 'Ungoverned',     v: 0.27, c: '#C2BCB0' },
        ].map(r => (
          <div key={r.k} style={{ marginBottom: 8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 10.5, letterSpacing: 0.8, marginBottom: 4 }}>
              <span style={{ color: r.c, textTransform: 'uppercase' }}>{r.k}</span>
              <span style={{ color: r.c }}>{r.v.toFixed(2)}</span>
            </div>
            <div style={{ height: 2, background: C.lineSoft }}>
              <div style={{ height: '100%', width: `${r.v * 100}%`, background: r.c }} />
            </div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div style={{ padding: '14px 24px', display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 10, color: C.dim, letterSpacing: 0.8 }}>
        <span>Signed · RFC 3161 timestamped · Offline-verifiable forever</span>
        <span>2026-03-16T09:14:01Z</span>
      </div>
    </div>
  );
}

Object.assign(window, { Mark, Logo, Btn, Eyebrow, SectionHead, LegacyCredentialCard });