/* global React */
const { useState } = React;

/* ============================================================
   P-11 · Footnote / aside  —  long-form sidebar
   ============================================================ */
function Aside({ label = "Aside", children }) {
  return (
    <aside className="aside">
      <div className="aside-rail" aria-hidden="true"></div>
      <div className="aside-inner">
        <div className="aside-label">{label}</div>
        <div className="aside-body">{children}</div>
      </div>
    </aside>
  );
}

/* ============================================================
   P-12 · Specimen  —  full file viewer
   ============================================================ */
function Specimen({ filename, size, ratified, lang = "md", children }) {
  return (
    <div className="prim">
      <div className="prim-head">
        <span className="prim-label"><span className="n">P-12</span> · Specimen</span>
        <span className="prim-caption">{filename} · canon · read-only</span>
      </div>
      <div className="specimen">
        <div className="specimen-bar">
          <div className="specimen-meta">
            <span className="dotrun"></span>
            <span className="specimen-name">{filename}</span>
            <span className="specimen-sep">·</span>
            <span>{size}</span>
          </div>
          <div className="specimen-meta">
            <span>Ratified {ratified}</span>
            <span className="specimen-sep">·</span>
            <span>{lang}</span>
          </div>
        </div>
        <pre className="specimen-body">{children}</pre>
      </div>
    </div>
  );
}

/* ============================================================
   P-13 · Definition
   ============================================================ */
function Definition({ term, lemma, body }) {
  return (
    <div className="defn">
      <div className="defn-label">Defined · in canon</div>
      <div className="defn-term">
        <span className="dt-word">{term}</span>
        {lemma && <span className="dt-lemma">{lemma}</span>}
      </div>
      <p className="defn-body">{body}</p>
    </div>
  );
}

/* ============================================================
   P-14 · Step-through  —  numbered process steps
   ============================================================ */
function Steps({ steps }) {
  return (
    <ol className="steps">
      {steps.map((s, i) => (
        <li key={i} className="step">
          <span className="step-n">S{String(i + 1).padStart(2, "0")}</span>
          <div className="step-body">
            <strong>{s.title}.</strong> {s.body}
          </div>
        </li>
      ))}
    </ol>
  );
}

/* ============================================================
   P-15 · Heartbeat indicator  —  single inline pulse
   ============================================================ */
function Heartbeat({ at, ago, state = "live" }) {
  return (
    <span className="heartbeat">
      <span className={`hb-dot ${state === "live" ? "lvrd-breath" : ""}`}></span>
      <span className="hb-text">
        Last heartbeat <strong>{at}</strong>
        <span className="hb-sep">·</span>
        <span className="hb-ago">{ago}</span>
      </span>
    </span>
  );
}

/* ============================================================
   P-16 · Before / After diff
   ============================================================ */
function Diff({ was, now, label = "Replaced" }) {
  return (
    <div className="diff">
      <div className="diff-col diff-was">
        <div className="diff-label">Was</div>
        <div className="diff-body">{was}</div>
      </div>
      <div className="diff-arrow" aria-hidden="true">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M3 12h18M14 5l7 7-7 7" stroke="currentColor" strokeWidth="1" strokeLinecap="square"/>
        </svg>
        <span className="diff-tag">{label}</span>
      </div>
      <div className="diff-col diff-now">
        <div className="diff-label">Now</div>
        <div className="diff-body">{now}</div>
      </div>
    </div>
  );
}

/* ============================================================
   P-17 · Glossary chip  —  inline defined term
   ============================================================ */
function GChip({ children, lemma }) {
  return (
    <span className="gchip" title={lemma ? `Defined: ${lemma}` : undefined}>
      <span className="gchip-mark">⌐</span>
      {children}
    </span>
  );
}

/* ============================================================
   P-18 · Stat block  —  one hero number
   ============================================================ */
function Stat({ value, unit, label, sub }) {
  return (
    <div className="stat">
      <div className="stat-label">{label}</div>
      <div className="stat-value">
        <span className="sv-num">{value}</span>
        {unit && <span className="sv-unit">{unit}</span>}
      </div>
      {sub && <div className="stat-sub">{sub}</div>}
    </div>
  );
}

/* ============================================================
   P-19 · Article TOC
   ============================================================ */
function TOC({ sections }) {
  return (
    <nav className="toc" aria-label="Sections">
      <div className="toc-label">Contents</div>
      <ol className="toc-list">
        {sections.map((s, i) => (
          <li key={i}>
            <a href={`#${s.anchor}`} className="toc-link">
              <span className="toc-n">{String(i + 1).padStart(2, "0")}</span>
              <span className="toc-text">{s.title}</span>
              <span className="toc-dur">{s.dur}</span>
            </a>
          </li>
        ))}
      </ol>
    </nav>
  );
}

/* ============================================================
   P-20 · Next entry  —  end-of-piece pointer
   ============================================================ */
function NextEntry({ kicker, title, dur, author }) {
  return (
    <a className="nextentry" href="#">
      <div className="ne-head">
        <span className="ne-label">Next field note →</span>
        <span className="ne-meta">{dur}</span>
      </div>
      <h3 className="ne-title">{title}</h3>
      <div className="ne-foot">
        <span>{author}</span>
        <span className="ne-sep">·</span>
        <span>{kicker}</span>
      </div>
    </a>
  );
}

Object.assign(window, {
  Aside, Specimen, Definition, Steps, Heartbeat,
  Diff, GChip, Stat, TOC, NextEntry
});