/* global React */
/*
 * Nudge brand identity v2 — primitives + preview page.
 *
 *   "Nudge forces the next real outcome."
 *
 * Every component below is a reusable primitive (exported to window so
 * it's reachable from any screen file). They consume the `.nudge` token
 * scope defined in styles.css; the preview page just composes them.
 *
 *   <NudgeDot/>, <NudgeSignalBadge/>, <NudgeCard/>, <NudgeSectionHeader/>,
 *   <NudgeButton/>, <NudgeRiskPanel/>, <NudgeHero/>, <NudgeEmptyState/>,
 *   <NudgeDealClarityPanel/>, <NudgeLogoLockup/>
 *
 * None of these classes mutate the existing prototype's look; they only
 * apply inside an ancestor with `className="nudge"`.
 */

// ── Status Dot ──────────────────────────────────────────────
// Sizes: xs (4px, pattern) · sm (6px, label) · md (8px, default UI) ·
// lg (12px, hero/section). States documented in the brief.
function NudgeDot({ state = "weak", size = "md", style, ...rest }) {
  return (
    <span
      className="nudge-dot"
      data-state={state}
      data-size={size}
      style={style}
      aria-hidden="true"
      {...rest}
    />
  );
}

// ── Signal Badge ───────────────────────────────────────────
// Inline [dot][LABEL]. Mono small caps. Background tinted only on risk.
function NudgeSignalBadge({ state = "verified", label, ...rest }) {
  const text = label || state.toUpperCase();
  return (
    <span className="nudge-badge" data-state={state} {...rest}>
      <NudgeDot state={state} size="sm" />
      {text}
    </span>
  );
}

// ── Section Header ─────────────────────────────────────────
// Three dots whose states reflect section completeness, then the label.
// Dot count is whatever you pass; default is the brand's three-dot mark.
function NudgeSectionHeader({
  label,
  dots = ["weak", "weak", "weak"],
  showRule = false,
}) {
  return (
    <header className="nudge-section-header">
      <span className="nudge-section-dots" aria-hidden="true">
        {dots.map((s, i) => <NudgeDot key={i} state={s} size="md" />)}
      </span>
      <span className="nudge-label">{label}</span>
      {showRule && <span className="nudge-section-rule" />}
    </header>
  );
}

// ── Card / Operating Panel ─────────────────────────────────
// Border-as-affordance. No shadow. Optional header with label + right slot.
function NudgeCard({ label, headerRight, density = "default", children, style }) {
  return (
    <section className="nudge-card" data-density={density} style={style}>
      {(label || headerRight) && (
        <header className="nudge-card-head">
          {label && <span className="nudge-label">{label}</span>}
          {headerRight && <span>{headerRight}</span>}
        </header>
      )}
      {children}
    </section>
  );
}

// ── Button ─────────────────────────────────────────────────
// Variants: primary · secondary · risk · ghost. Always uppercase + tracked.
function NudgeButton({ variant = "primary", children, ...rest }) {
  return (
    <button className="nudge-btn" data-variant={variant} type="button" {...rest}>
      {children}
    </button>
  );
}

// ── Risk / Missing Proof Panel ─────────────────────────────
// Amber-muted background, amber rail, factual copy. The headline names
// the gap; the list enumerates fields without softening language.
function NudgeRiskPanel({ headline, fields = [] }) {
  return (
    <aside className="nudge-risk" role="status">
      <header className="nudge-risk-head">
        <NudgeDot state="missing" size="md" />
        <span className="nudge-risk-headline">{headline}</span>
      </header>
      {fields.length > 0 && (
        <ul className="nudge-risk-list">
          {fields.map((f, i) => <li key={i}>{f}</li>)}
        </ul>
      )}
    </aside>
  );
}

// ── Hero Block ─────────────────────────────────────────────
// Dot-grid texture · headline · supporting statement. No illustration.
function NudgeHero({ eyebrow, headline, sub }) {
  return (
    <div className="nudge-hero">
      <span className="nudge-hero-grid" aria-hidden="true" />
      <div className="nudge-hero-content">
        {eyebrow && (
          <span className="nudge-hero-eyebrow">
            <NudgeDot state="verified" size="sm" />
            <span className="nudge-label">{eyebrow}</span>
          </span>
        )}
        <h1 className="nudge-hero-type">{headline}</h1>
        {sub && <p className="nudge-hero-sub">{sub}</p>}
      </div>
    </div>
  );
}

// ── Empty State ────────────────────────────────────────────
// Three hollow dots. Direct headline. No CTA pretending all is fine.
function NudgeEmptyState({ headline, sub }) {
  return (
    <div className="nudge-empty">
      <span className="nudge-empty-dots" aria-hidden="true">
        <NudgeDot state="missing" size="lg" />
        <NudgeDot state="missing" size="lg" />
        <NudgeDot state="missing" size="lg" />
      </span>
      <h3 className="nudge-empty-headline">{headline}</h3>
      {sub && <p className="nudge-empty-sub">{sub}</p>}
    </div>
  );
}

// ── Deal Clarity Status Panel ──────────────────────────────
// Three-dot row at top — decision owner · approval path · next step —
// each labelled below in mono caps. Field list is flat: name + value
// (or "—" if missing). Risk fields use the missing dot and amber label.
function NudgeDealClarityPanel({
  dealName,
  badge,
  dots = [
    { label: "Decision owner", state: "missing" },
    { label: "Approval path", state: "missing" },
    { label: "Next step", state: "missing" },
  ],
  fields = [],
}) {
  return (
    <NudgeCard label={dealName} headerRight={badge} density="heavy">
      <div className="nudge-clarity-dots" role="list">
        {dots.map((d) => (
          <div
            key={d.label}
            className="nudge-clarity-dot"
            data-state={d.state}
            role="listitem"
          >
            <NudgeDot state={d.state} size="lg" />
            <span className="nudge-clarity-dot-label">{d.label}</span>
          </div>
        ))}
      </div>
      <ul className="nudge-clarity-fields">
        {fields.map((f) => (
          <li key={f.label} className="nudge-clarity-field" data-missing={f.missing ? "true" : "false"}>
            <span className="nudge-clarity-field-label">{f.label}</span>
            <span className="nudge-clarity-field-value">{f.missing ? "—" : f.value}</span>
          </li>
        ))}
      </ul>
    </NudgeCard>
  );
}

// ── Logo Lockup ────────────────────────────────────────────
// Wordmark + three-dot motif. Both dark-bg and light-bg variants live
// here; the surface decides the colorway via `data-on`. The dots are
// part of the lockup; the wordmark text uses Geist as a placeholder
// stand-in for the asset (the brief specifies "use the asset" — until
// an SVG/PNG is dropped in, this is the typographic placeholder).
function NudgeLogoLockup({ on = "dark" }) {
  return (
    <span className="nudge-preview-logo" data-on={on}>
      <span className="nudge-preview-logo-dots" aria-hidden="true">
        <span className="nudge-preview-logo-dot" />
        <span className="nudge-preview-logo-dot" />
        <span className="nudge-preview-logo-dot" />
      </span>
      <span>Nudge</span>
    </span>
  );
}

// ═══════════════════════════════════════════════════════════════════
// PREVIEW PAGE — single internal route showing the entire system.
// ═══════════════════════════════════════════════════════════════════

const COLOR_TOKENS = [
  { name: "--color-bg-primary",        hex: "#0D0D0D", note: "Near-black. Primary surface." },
  { name: "--color-bg-secondary",      hex: "#161616", note: "Cards, panels." },
  { name: "--color-bg-tertiary",       hex: "#1F1F1F", note: "Borders, dividers, input fills." },
  { name: "--color-bg-inverse",        hex: "#F5F3EE", note: "Warm off-white. Light surface." },
  { name: "--color-text-primary",      hex: "#F5F3EE", note: "Main text on dark." },
  { name: "--color-text-secondary",    hex: "#A8A29E", note: "Supporting text." },
  { name: "--color-text-muted",        hex: "#57534E", note: "Timestamps, placeholders." },
  { name: "--color-text-inverse",      hex: "#0D0D0D", note: "Text on light surfaces." },
  { name: "--color-border-subtle",     hex: "#292524", note: "Default card border on dark." },
  { name: "--color-border-default",    hex: "#3D3937", note: "Hairlines + secondary buttons." },
  { name: "--color-signal-weak",       hex: "#78716C", note: "Unverified or partial." },
  { name: "--color-signal-partial",    hex: "#57534E", note: "Movement, no commitment." },
  { name: "--color-signal-verified",   hex: "#F5F3EE", note: "Confirmed commitment." },
  { name: "--color-signal-risk",       hex: "#B45309", note: "Attention required." },
  { name: "--color-signal-risk-muted", hex: "#1C1008", note: "Risk surface background." },
  { name: "--color-accent",            hex: "#B45309", note: "Single operational accent." },
];

const TYPE_ROWS = [
  { label: "HERO",   className: "nudge-hero-type", sample: "Real pipeline." },
  { label: "H1",     className: "nudge-h1",       sample: "Seller activity is not buyer progression." },
  { label: "H2",     className: "nudge-h2",       sample: "What's the next real outcome?" },
  { label: "H3",     className: "nudge-h3",       sample: "Decision owner, approval path, next step." },
  { label: "BODY",   className: "nudge-body",     sample: "Inter 14 / 1.6 / 400. Disappears in service of content. Never the headline." },
  { label: "LABEL",  className: "nudge-label",    sample: "Decision owner" },
  { label: "MONO",   className: "nudge-mono",     sample: "$184,000 · ACME-2031 · 14 Apr 2026" },
  { label: "MICRO",  className: "nudge-micro",    sample: "Last verified · 2h ago" },
];

const DOT_ROWS = [
  { state: "missing",  name: "MISSING",  desc: "No proof exists. A gap. Required is absent." },
  { state: "weak",     name: "WEAK",     desc: "Signal present but unverified. Claimed, not confirmed." },
  { state: "partial",  name: "PARTIAL",  desc: "Movement detected. No commitment locked." },
  { state: "verified", name: "VERIFIED", desc: "Confirmed buyer commitment. Proof on record." },
  { state: "risk",     name: "RISK",     desc: "Attention required. Decision window closing or gap is blocking." },
];

function BrandPreview() {
  return (
    <div className="nudge nudge-preview" data-screen-label="Brand">
      <div className="nudge-preview-inner">

        <nav className="nudge-preview-nav" aria-label="Brand preview sections">
          <a href="#brand-logo">Logo</a>
          <a href="#brand-color">Color</a>
          <a href="#brand-type">Typography</a>
          <a href="#brand-dots">Dot motif</a>
          <a href="#brand-badges">Signal badges</a>
          <a href="#brand-buttons">Buttons</a>
          <a href="#brand-cards">Card</a>
          <a href="#brand-clarity">Deal clarity</a>
          <a href="#brand-risk">Risk</a>
          <a href="#brand-empty">Empty state</a>
          <a href="#brand-hero">Hero</a>
          <a href="#brand-section">Section header</a>
        </nav>

        <NudgeHero
          eyebrow="Nudge brand identity · v2"
          headline="Seller activity is not buyer progression."
          sub="Nudge is the revenue control layer. It exposes fake pipeline momentum and forces the next real outcome — who decides, how it gets approved, what happens next, by when."
        />

        {/* ── Logo lockups ──────────────────────────────────── */}
        <section id="brand-logo" className="nudge-preview-section">
          <NudgeSectionHeader
            label="01 · Logo lockups"
            dots={["verified", "verified", "verified"]}
            showRule
          />
          <div className="nudge-preview-grid-2">
            <div className="nudge-preview-logo-frame" data-bg="dark">
              <NudgeLogoLockup on="dark" />
            </div>
            <div className="nudge-preview-logo-frame" data-bg="light">
              <NudgeLogoLockup on="light" />
            </div>
          </div>
          <p className="nudge-body nudge-muted">
            Wordmark in Geist with the three-dot motif at left. The dots are the
            most important brand asset — they reappear across the UI as the
            semantic signal language. Minimum width 80px. Clear space equals
            the height of the capital N. Never recolor, distort, or use the
            dots in isolation as a logo substitute.
          </p>
        </section>

        {/* ── Color palette ──────────────────────────────────── */}
        <section id="brand-color" className="nudge-preview-section">
          <NudgeSectionHeader
            label="02 · Color palette"
            dots={["verified", "verified", "weak"]}
            showRule
          />
          <div className="nudge-preview-grid-2">
            {COLOR_TOKENS.map((t) => (
              <div key={t.name} className="nudge-preview-swatch">
                <span
                  className="nudge-preview-swatch-chip"
                  style={{ background: t.hex }}
                />
                <span className="nudge-preview-swatch-text">
                  <span className="nudge-mono">{t.name}</span>
                  <span className="nudge-micro">{t.hex} · {t.note}</span>
                </span>
              </div>
            ))}
          </div>
        </section>

        {/* ── Typography ─────────────────────────────────────── */}
        <section id="brand-type" className="nudge-preview-section">
          <NudgeSectionHeader
            label="03 · Typography"
            dots={["verified", "verified", "verified"]}
            showRule
          />
          <NudgeCard density="heavy">
            {TYPE_ROWS.map((row) => (
              <div key={row.label} className="nudge-preview-type-row">
                <span className="nudge-mono nudge-muted">{row.label}</span>
                <span className={row.className}>{row.sample}</span>
              </div>
            ))}
          </NudgeCard>
          <p className="nudge-body nudge-muted">
            Geist for display. Inter for body and UI. JetBrains Mono reserved
            strictly for facts — evidence, timestamps, scores, CRM field
            values, deal IDs. Using mono elsewhere breaks the semantic
            contract.
          </p>
        </section>

        {/* ── Dot motif ──────────────────────────────────────── */}
        <section id="brand-dots" className="nudge-preview-section">
          <NudgeSectionHeader
            label="04 · Dot motif — semantic signal language"
            dots={["verified", "verified", "verified"]}
            showRule
          />
          <NudgeCard density="heavy">
            {DOT_ROWS.map((row) => (
              <div key={row.state} className="nudge-preview-dot-row">
                <NudgeDot state={row.state} size="lg" />
                <span className="nudge-preview-dot-meaning">
                  <span className="nudge-preview-dot-name">{row.name}</span>
                  <span className="nudge-preview-dot-desc">{row.desc}</span>
                </span>
              </div>
            ))}
          </NudgeCard>
          <NudgeCard label="Dot sizes — 4 · 6 · 8 · 12 px">
            <div className="nudge-preview-row">
              <NudgeDot state="verified" size="xs" />
              <NudgeDot state="verified" size="sm" />
              <NudgeDot state="verified" size="md" />
              <NudgeDot state="verified" size="lg" />
            </div>
          </NudgeCard>
          <NudgeCard label="Processing — sequenced left → right">
            <span className="nudge-dots-processing">
              <NudgeDot size="md" />
              <NudgeDot size="md" />
              <NudgeDot size="md" />
            </span>
          </NudgeCard>
        </section>

        {/* ── Signal badges ──────────────────────────────────── */}
        <section id="brand-badges" className="nudge-preview-section">
          <NudgeSectionHeader
            label="05 · Signal badges"
            dots={["verified", "verified", "weak"]}
            showRule
          />
          <NudgeCard density="heavy">
            <div className="nudge-preview-row">
              <NudgeSignalBadge state="missing"  label="MISSING" />
              <NudgeSignalBadge state="weak"     label="WEAK SIGNAL" />
              <NudgeSignalBadge state="partial"  label="PARTIAL" />
              <NudgeSignalBadge state="verified" label="VERIFIED" />
              <NudgeSignalBadge state="risk"     label="RISK" />
            </div>
          </NudgeCard>
        </section>

        {/* ── Buttons ────────────────────────────────────────── */}
        <section id="brand-buttons" className="nudge-preview-section">
          <NudgeSectionHeader
            label="06 · Buttons"
            dots={["verified", "verified", "verified"]}
            showRule
          />
          <NudgeCard density="heavy">
            <div className="nudge-preview-row">
              <NudgeButton variant="primary">Force next outcome</NudgeButton>
              <NudgeButton variant="secondary">Review evidence</NudgeButton>
              <NudgeButton variant="risk">Flag for review</NudgeButton>
              <NudgeButton variant="ghost">Dismiss</NudgeButton>
            </div>
          </NudgeCard>
          <p className="nudge-body nudge-muted">
            Never rounded-full. Never gradient. Uppercase + tracked. Primary is
            high-contrast neutral; the single operational accent (amber) is
            reserved for risk-flag actions only.
          </p>
        </section>

        {/* ── Card / Operating Panel ─────────────────────────── */}
        <section id="brand-cards" className="nudge-preview-section">
          <NudgeSectionHeader
            label="07 · Operating panel"
            dots={["verified", "verified", "weak"]}
            showRule
          />
          <NudgeCard
            label="Acme · enterprise renewal"
            headerRight={<NudgeSignalBadge state="partial" label="PARTIAL" />}
          >
            <div className="nudge-preview-row">
              <span className="nudge-label">Stage</span>
              <span className="nudge-mono">Negotiation</span>
              <span className="nudge-faint">·</span>
              <span className="nudge-label">Value</span>
              <span className="nudge-mono">$184,000</span>
              <span className="nudge-faint">·</span>
              <span className="nudge-label">Close date</span>
              <span className="nudge-mono">14 Apr 2026</span>
            </div>
            <p className="nudge-body nudge-muted" style={{ marginTop: 16 }}>
              Activity logged. No buyer confirmation on record.
            </p>
          </NudgeCard>
        </section>

        {/* ── Deal Clarity Status Panel ───────────────────────── */}
        <section id="brand-clarity" className="nudge-preview-section">
          <NudgeSectionHeader
            label="08 · Deal clarity status"
            dots={["verified", "weak", "missing"]}
            showRule
          />
          <NudgeDealClarityPanel
            dealName="Acme · enterprise renewal"
            badge={<NudgeSignalBadge state="risk" label="UNVERIFIED" />}
            dots={[
              { label: "Decision owner", state: "verified" },
              { label: "Approval path",  state: "partial"  },
              { label: "Next step",      state: "missing"  },
            ]}
            fields={[
              { label: "Decision owner",        value: "Maya Lansing · VP Operations" },
              { label: "Economic buyer",        value: "Confirmed · 28 Mar 2026" },
              { label: "Approval path",         value: "Procurement + legal · partial sign-off" },
              { label: "Approved budget",       missing: true },
              { label: "Confirmed next step",   missing: true },
              { label: "Last buyer signal",     value: "2 weeks ago · meeting accepted" },
            ]}
          />
        </section>

        {/* ── Risk / Missing Proof ────────────────────────────── */}
        <section id="brand-risk" className="nudge-preview-section">
          <NudgeSectionHeader
            label="09 · Risk · missing proof"
            dots={["risk", "missing", "missing"]}
            showRule
          />
          <NudgeRiskPanel
            headline="Decision window: 3 days. No approved budget. No confirmed next step."
            fields={[
              "No buyer-side commitment in the last 14 days.",
              "Economic buyer present but not aligned on price.",
              "Last touch logged 9 days ago. Channel: Slack.",
            ]}
          />
        </section>

        {/* ── Empty state ────────────────────────────────────── */}
        <section id="brand-empty" className="nudge-preview-section">
          <NudgeSectionHeader
            label="10 · Empty state"
            dots={["missing", "missing", "missing"]}
            showRule
          />
          <NudgeCard density="heavy">
            <NudgeEmptyState
              headline="No verified buyer commitment."
              sub="Nothing to show. Capture a confirmed next step, an approval path, or a decision owner to start tracking real progression."
            />
          </NudgeCard>
        </section>

        {/* ── Hero block ─────────────────────────────────────── */}
        <section id="brand-hero" className="nudge-preview-section">
          <NudgeSectionHeader
            label="11 · Brand hero block"
            dots={["verified", "verified", "verified"]}
            showRule
          />
          <NudgeHero
            eyebrow="Operating principle"
            headline="Nudge forces the next real outcome."
            sub="No motivational copy. No celebratory animation. No vague status. Just signal, gap, and the next decision required."
          />
        </section>

        {/* ── Section header pattern ─────────────────────────── */}
        <section id="brand-section" className="nudge-preview-section">
          <NudgeSectionHeader
            label="12 · Section header pattern"
            dots={["verified", "verified", "weak"]}
            showRule
          />
          <NudgeCard density="heavy">
            <NudgeSectionHeader
              label="Decision owner"
              dots={["verified", "missing", "missing"]}
            />
            <p className="nudge-body nudge-muted">
              Three dots whose states reflect that section's data completeness.
              The label announces the section in uppercase. Optional horizontal
              rule to separate from body content.
            </p>
          </NudgeCard>
        </section>

      </div>
    </div>
  );
}

// Expose primitives + the preview page so any screen file (and app.jsx)
// can render them without prop-drilling through shared.jsx.
window.NudgeDot                = NudgeDot;
window.NudgeSignalBadge        = NudgeSignalBadge;
window.NudgeSectionHeader      = NudgeSectionHeader;
window.NudgeCard               = NudgeCard;
window.NudgeButton             = NudgeButton;
window.NudgeRiskPanel          = NudgeRiskPanel;
window.NudgeHero               = NudgeHero;
window.NudgeEmptyState         = NudgeEmptyState;
window.NudgeDealClarityPanel   = NudgeDealClarityPanel;
window.NudgeLogoLockup         = NudgeLogoLockup;
window.BrandPreview            = BrandPreview;