/* global React, ReactDOM, NeroLogo, NeroMark, Tag, Transcript, EmotionTimeline,
   Confidence, InsightCard, VideoTile, FigLabel, ReceiptChip, VerdictCard */
const { useState, useEffect } = React;

// ============================================================
// BRAND SYSTEM PAGE — the brand book as an evidence report.
// The subject of the study is the brand itself. Sections are
// exhibits; rules are verdicts. Everything renders from the
// live tokens in styles.css, so this page cannot drift.
// ============================================================

const TOKENS = [
  { name: "Bone", cssVar: "--bg", role: "Page background" },
  { name: "Card", cssVar: "--bg-elev", role: "Elevated surfaces" },
  { name: "Muted surface", cssVar: "--bg-elev-2", role: "Nested cards" },
  { name: "Ink", cssVar: "--fg", role: "Primary text" },
  { name: "Ink muted", cssVar: "--fg-muted", role: "Secondary text" },
  { name: "Ink dim", cssVar: "--fg-dim", role: "Mono labels" },
  { name: "Border", cssVar: "--border", role: "Default 1px stroke" },
  { name: "Border strong", cssVar: "--border-strong", role: "Hover / interactive" },
  { name: "Cobalt", cssVar: "--accent", role: "THE signal color" },
  { name: "On-cobalt", cssVar: "--accent-ink", role: "Text on cobalt" },
  { name: "Sealing red", cssVar: "--alert", role: "Negative signals only" },
];

function Swatch({ token }) {
  const [value, setValue] = useState("");
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    setValue(getComputedStyle(document.documentElement).getPropertyValue(token.cssVar).trim());
  }, [token.cssVar]);
  const copy = () => {
    navigator.clipboard && navigator.clipboard.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };
  return (
    <button className={"bb-swatch" + (copied ? " is-copied" : "")} onClick={copy}
      aria-label={`Copy ${token.name} ${value}`}>
      <div className="bb-swatch__chip" style={{ background: `var(${token.cssVar})` }} />
      <div className="bb-swatch__meta">
        <div className="bb-swatch__name">{token.name}</div>
        <span className="bb-swatch__var">{token.cssVar} · {token.role}</span>
        <span className="bb-swatch__hex">{copied ? "COPIED" : value.toUpperCase()}</span>
      </div>
    </button>
  );
}

function Exhibit({ n, title, lede, children }) {
  return (
    <section className="bb-section">
      <div className="bb-exhibit-n">EXHIBIT {String(n).padStart(2, "0")}</div>
      <h2>{title}</h2>
      <p className="bb-lede">{lede}</p>
      {children}
    </section>
  );
}

function Rule({ no, children }) {
  return (
    <li>
      <span className={"bb-rules__mark " + (no ? "bb-rules__mark--no" : "bb-rules__mark--yes")}>
        {no ? "✗" : "→"}
      </span>
      <span>{children}</span>
    </li>
  );
}

function BrandPage() {
  return (
    <>
      <header className="bb-header">
        <div className="bb-header__inner">
          <NeroLogo />
          <span className="bb-header__tag">BRAND SYSTEM · V1.0 · JULY 2026</span>
          <a className="bb-header__back" href="/">NEROVIEW.COM →</a>
        </div>
      </header>

      <main className="bb-page">
        <div className="bb-hero">
          <FigLabel n={0}>STUDY NV-BRAND · SUBJECT: THE BRAND ITSELF</FigLabel>
          <h1>The evidence,<br />on us.</h1>
          <p>
            This is the NeroView brand system, documented the way we document
            everything: as exhibits with verdicts. It reads the live design
            tokens from the site, so it is correct by construction. If a color
            here disagrees with the site, the site changed and this page
            already knows.
          </p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Tag dot>BOARDROOM MODE · COMMITTED</Tag>
            <Tag>SINGLE THEME · NO SWITCHING</Tag>
            <Tag>GOVERNED BY docs/brand-voice.md</Tag>
          </div>
        </div>

        <Exhibit n={1} title="The mark"
          lede={<>A squared aperture — a registration mark sighting a single cobalt
            dot. Registration marks mean one thing in print: <strong>verified against
            source</strong>. That is the product promise, drawn.</>}>
          <div className="bb-grid2">
            <div>
              <div className="bb-stage"><NeroMark size={120} /></div>
              <div className="bb-stage__caption">PRIMARY · ON BONE</div>
            </div>
            <div>
              <div className="bb-stage section--ink"><NeroMark size={120} /></div>
              <div className="bb-stage__caption">ON INK · TOKENS FLIP AUTOMATICALLY</div>
            </div>
          </div>
          <div style={{ height: 32 }} />
          <div className="bb-grid2">
            <div>
              <div className="bb-stage">
                <div className="bb-sizes">
                  <div><NeroMark size={96} /><div className="bb-stage__caption">96</div></div>
                  <div><NeroMark size={48} /><div className="bb-stage__caption">48</div></div>
                  <div><NeroMark size={26} /><div className="bb-stage__caption">26 · NAV</div></div>
                  <div><img src="/favicon.svg" width="32" height="32" alt="" /><div className="bb-stage__caption">32 · FAVICON</div></div>
                  <div><img src="/favicon.svg" width="16" height="16" alt="" /><div className="bb-stage__caption">16 · TAB</div></div>
                </div>
              </div>
              <div className="bb-stage__caption">SCALE · THE FAVICON INVERTS TO A COBALT CHIP BELOW 32PX</div>
            </div>
            <div>
              <ul className="bb-rules">
                <Rule>The lockup is <strong>mark + "NeroView"</strong> — CamelCase, Archivo 800,
                  expanded 115%. Use the <strong>NeroLogo</strong> component; never rebuild it.</Rule>
                <Rule>Clearspace: one tick-length (the reticle tick) on all sides, minimum.</Rule>
                <Rule no>Never circular. The circle is the competitor shape; the square is ours.</Rule>
                <Rule no>Never "neroview" or "NEROVIEW" in the wordmark. Never the old yellow dot.</Rule>
                <Rule no>Never recolor the dot. The dot is cobalt or the mark is wrong.</Rule>
              </ul>
            </div>
          </div>
        </Exhibit>

        <Exhibit n={2} title="Color"
          lede={<>Eleven tokens, one signal. Cobalt is the <strong>only</strong> color
            that means "look here"; sealing red is reserved for negative and
            emotion signals. Everything else is paper and ink. Click a swatch
            to copy its value.</>}>
          <div className="bb-swatches">
            {TOKENS.map((t) => <Swatch key={t.cssVar} token={t} />)}
          </div>
          <div style={{ height: 32 }} />
          <VerdictCard id="NV-BRAND-02" title="Cobalt is the only signal."
            receipts={["ONE ACCENT", "RED = NEGATIVE ONLY", "NO GRADIENTS"]}>
            <p style={{ fontSize: 14, color: "var(--fg-muted)", margin: "8px 0 14px", lineHeight: 1.55 }}>
              If two colors compete for attention, one of them is lying about
              its importance. New UI states inherit these tokens; they do not
              introduce colors.
            </p>
          </VerdictCard>
        </Exhibit>

        <Exhibit n={3} title="Typography"
          lede={<>Two voices. <strong>Archivo</strong> argues; <strong>JetBrains Mono</strong> testifies.
            Display is 900 weight, expanded 115%, uppercase — never bolded body
            text pretending to be a headline. Mono carries evidence: labels,
            timestamps, IDs, tags.</>}>
          <div className="bb-spec">
            <div className="bb-spec__label">DISPLAY · ARCHIVO 900 · EXPANDED 115% · UPPERCASE</div>
            <div className="bb-spec__display">From noise<br />to verdict.</div>
          </div>
          <div className="bb-spec">
            <div className="bb-spec__label">BODY · ARCHIVO 400–600</div>
            <div className="bb-spec__body">
              We interview your customers and tell you exactly what to change —
              every call backed by a real quote, clip, and moment you can replay.
              Short sentences. Long thoughts.
            </div>
          </div>
          <div className="bb-spec">
            <div className="bb-spec__label">EVIDENCE VOICE · JETBRAINS MONO 400–700</div>
            <div className="bb-spec__mono">
              TRANSCRIPT · P-042 · <b>02:14</b><br />
              HESITATION · 8.2s · CONFIDENCE <b>86%</b><br />
              STUDY NV-0612 · n=48 · 14 CLIPS · 6 SEGMENTS
            </div>
          </div>
        </Exhibit>

        <Exhibit n={4} title="Artifact treatments"
          lede={<>Authority objects — verdicts, popovers, key cards — get a 1px ink
            border and a flat cobalt offset shadow. Mono labels open with a dot
            pill. Figures are numbered like a technical document, because the
            product is one.</>}>
          <div className="bb-grid2">
            <div>
              <VerdictCard id="NV-0612" title="Pricing clarity blocks team-plan conversion."
                receipts={["86% CONF", "14 CLIPS", "n=48"]}>
                <p style={{ fontSize: 14, color: "var(--fg-muted)", margin: "8px 0 14px", lineHeight: 1.55 }}>
                  The verdict card: 1px ink border, cobalt offset shadow
                  (4px 4px 0), mono receipts. This is the brand's signature object.
                </p>
              </VerdictCard>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <div>
                <FigLabel n={12}>FIGURE LABELS — TECHNICAL-DOCUMENT VOCABULARY</FigLabel>
              </div>
              <div className="card__label">
                <span className="card__label-dot"></span>
                MONO LABEL · WITH LEADING DOT PILL
              </div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <Tag dot>CONSENSUS: NAMING CONFUSES</Tag>
                <Tag accent>RAGE-CLICK · 01:47</Tag>
                <Tag>GDPR-AWARE</Tag>
              </div>
              <ReceiptChip stat="86%" label="typical confidence"
                source={{ ref: "NV-0612 · VERDICT LOG", body: "Confidence is computed per verdict from clip agreement across segments — shown, never asserted." }} />
            </div>
          </div>
        </Exhibit>

        <Exhibit n={5} title="Evidence primitives"
          lede={<>These components are the differentiator — the blog deliberately
            uses them so posts look like the product. <strong>Reuse them; never
            reinvent them.</strong> All live below, rendering from the same code
            the homepage ships.</>}>
          <div className="bb-grid2" style={{ alignItems: "start" }}>
            <InsightCard title="Users don't trust the auto-summary until they see the source clip."
              clips={14} participants={12} segments={3} confidence={0.86}>
              <Transcript time="02:14" speaker="P-042">
                "I'd probably look around for a cheaper option — the pricing page
                didn't explain what's included in the team plan."
              </Transcript>
            </InsightCard>
            <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <EmotionTimeline moments={[0.31, 0.55, 0.78]} />
              <VideoTile participant="P-042" duration="04:32" />
            </div>
          </div>
        </Exhibit>

        <Exhibit n={6} title="Voice"
          lede={<>Talk like the partner who closes the meeting. Quietly certain,
            operator vocabulary, specific numbers. Full guide:
            <strong> docs/brand-voice.md</strong> — it governs every channel.</>}>
          <div className="bb-grid2">
            <div className="bb-voice">
              {[
                ["yes", "Run the interviews. Read the verdict. Decide before Friday."],
                ["yes", "You have 200 voices to listen to. Here are the four that matter."],
                ["yes", "The signal in the room: pricing isn't the objection. Trust is."],
                ["no", "🚀 Revolutionize your research workflow with the power of AI!"],
                ["no", "Leverage cutting-edge AI to unlock actionable insights at scale."],
              ].map(([v, line], i) => (
                <div key={i} className={"bb-voice__row" + (v === "no" ? " bb-voice__row--no" : "")}>
                  <span className={"bb-voice__verdict bb-voice__verdict--" + v}>{v.toUpperCase()}</span>
                  <span>{line}</span>
                </div>
              ))}
            </div>
            <div className="bb-grid2" style={{ gap: 24 }}>
              <div className="bb-vocab">
                <h4>· USE</h4>
                <em>signal, verdict, direction, hold, decide, ship, evidence,
                the clip at 02:14, the room</em>
              </div>
              <div className="bb-vocab">
                <h4>· AVOID</h4>
                leverage, unlock, revolutionize, supercharge, seamless,
                actionable insights, emoji
              </div>
              <div className="bb-vocab">
                <h4>· NUMBERS</h4>
                Specific over round. <em>"2.3× faster, in 11 days"</em> beats
                "up to 20× faster". Keep <em>n=48</em>, <em>14 clips</em>, <em>86%</em>.
              </div>
              <div className="bb-vocab">
                <h4>· STANCE ON AI</h4>
                AI is the method, not the message. The buyer cares the answer
                is right, not how it was generated.
              </div>
            </div>
          </div>
        </Exhibit>

        <Exhibit n={7} title="Assets"
          lede={<>Standalone files with hardcoded brand hexes, for use outside this
            codebase — decks, socials, partner requests. Inside the codebase,
            always use the components instead.</>}>
          <div className="bb-assets">
            {[
              { name: "Mark — on light", file: "brand-assets/neroview-mark.svg", ink: false },
              { name: "Mark — on ink", file: "brand-assets/neroview-mark-ink.svg", ink: true },
              { name: "Lockup — on light (PNG, 524×104 base)", file: "brand-assets/neroview-lockup.png", ink: false,
                links: [["1X", "brand-assets/neroview-lockup.png"], ["2X", "brand-assets/neroview-lockup@2x.png"], ["4X", "brand-assets/neroview-lockup@4x.png"]] },
              { name: "Lockup — on ink (PNG, 524×104 base)", file: "brand-assets/neroview-lockup-ink.png", ink: true,
                links: [["1X", "brand-assets/neroview-lockup-ink.png"], ["2X", "brand-assets/neroview-lockup-ink@2x.png"], ["4X", "brand-assets/neroview-lockup-ink@4x.png"]] },
              { name: "Favicon (SVG)", file: "favicon.svg", ink: false },
              { name: "Favicon (ICO, 32px)", file: "favicon.ico", ink: false, noPreview: true, ext: ".ICO" },
              { name: "Design tokens (CSS, --nv- prefixed)", file: "brand-assets/tokens.css", ink: false, noPreview: true, ext: ".CSS" },
              { name: "Design tokens (JSON)", file: "brand-assets/tokens.json", ink: false, noPreview: true, ext: ".JSON" },
            ].map((a) => (
              <div key={a.file} className="bb-asset">
                <div className={"bb-asset__preview" + (a.ink ? " bb-asset__preview--ink" : "")}>
                  {!a.noPreview && <img src={"/" + a.file} height="28" alt="" style={{ maxWidth: 40, objectFit: "contain" }} />}
                  {a.noPreview && <span className="bb-asset__file">{a.ext}</span>}
                </div>
                <div>
                  <div className="bb-asset__name">{a.name}</div>
                  <span className="bb-asset__file">/{a.file.replace(/\.png$/, "[@2x|@4x].png")}</span>
                </div>
                <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                  {(a.links || [["DOWNLOAD ↓", a.file]]).map(([label, href]) => (
                    <a key={href} className="bb-asset__dl" style={{ marginLeft: 0 }} href={"/" + href} download>{label}</a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Exhibit>
      </main>

      <footer className="bb-page bb-footer">
        <span>© 2026 NEROVIEW · BRAND SYSTEM V1.0</span>
        <span>QUESTIONS → HELLO@NEROVIEW.COM</span>
      </footer>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BrandPage />);