// Bonus surface — Component library (a compact spec page).

function SurfaceComponents() {
  return (
    <div style={{ height: '100%', background: 'var(--bg)', overflowY: 'auto' }}
         data-screen-label="Component library">
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '20px 28px 40px' }}>
        <header style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)',
            letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 4 }}>
            Reference
          </div>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>Component library</h1>
          <p style={{ margin: '4px 0 0', fontSize: 13.5, color: 'var(--text-muted)' }}>
            The 10 named components, in their states. Built on Tailwind + shadcn + Radix primitives.
          </p>
        </header>

        <div style={{ display: 'grid', gap: 18 }}>
          <CmpSection name="StatusPill" desc="Compact chip used in Modules + Layouts lists.">
            <Row>
              <StatusPill status="accepted" />
              <StatusPill status="proposed" />
              <StatusPill status="issues" />
              <StatusPill status="pending" />
              <StatusPill status="error" />
            </Row>
          </CmpSection>

          <CmpSection name="ValidationPill" desc="Header chip; click to open the validation side panel.">
            <Row>
              <ValidationPill count={0} level="success" />
              <ValidationPill count={1} level="warning" />
              <ValidationPill count={3} level="warning" />
              <ValidationPill count={1} level="error" />
            </Row>
          </CmpSection>

          <CmpSection name="AiBadge" desc="Quiet AI presence — never pulses or glows.">
            <Row>
              <AiBadge />
              <AiBadge label="AI · v3.2" />
              <AiBadge label="Gemini" />
              <AiBadge label="HeyGen" />
            </Row>
          </CmpSection>

          <CmpSection name="LayoutTypeChip" desc="Monospace + icon for the 16 layout types.">
            <Row>
              <LayoutTypeChip type="sequence" />
              <LayoutTypeChip type="text_and_image" />
              <LayoutTypeChip type="small_video" />
              <LayoutTypeChip type="icons_discover" />
              <LayoutTypeChip type="mandatoryQuestion" />
              <LayoutTypeChip type="object_viewer" />
            </Row>
          </CmpSection>

          <CmpSection name="CitationChip" desc="Inline reference; click reveals the citation card.">
            <Row>
              <CitationChip source="Source p.2, ¶3" status="verified" />
              <CitationChip source="Source p.3, ¶4" status="verifying" />
              <CitationChip source="Source p.5, ¶1" status="failed" />
            </Row>
          </CmpSection>

          <CmpSection name="ProvenanceCard" desc="Collapsible 'what produced this' for any AI artifact.">
            <ProvenanceCard data={{
              model: 'claude-opus-4-5', prompt: 'rewriter-v3.2', seed: '7184',
              cost: '$0.14', timestamp: '2 minutes ago',
            }} />
          </CmpSection>

          <CmpSection name="SuggestionCard" desc="Surface 2 right column. Top pick gets a primary action; others secondary.">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              <SuggestionCard isTop suggestion={{ id:'a', type:'sequence', score:0.91,
                rationale:'Strong narrative arc — 6 tabs map cleanly to the SBI scaffold.' }} />
              <SuggestionCard suggestion={{ id:'b', type:'small_video', score:0.78,
                rationale:'Re-shoot as dialogue clip — works if production budget allows.' }} />
              <SuggestionCard suggestion={{ id:'c', type:'vertical_tabs', score:0.71,
                rationale:'Re-framed as Sarah-view vs Jordan-view. Loses some chronology.' }} />
            </div>
          </CmpSection>

          <CmpSection name="MediaSlot" desc="Three states. Bound · unbound-with-hint · unbound-no-hint.">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              <MediaSlot kind="video" label="Bound"
                bound={{ alt: 'sarah-jordan_scene.mp4', duration: '01:24',
                  previewBg: 'linear-gradient(135deg, #1e293b, #0f172a)' }} compact />
              <MediaSlot kind="image" label="Unbound · prompt ready"
                hintPrompt="Office hallway, daylight, two figures mid-conversation." />
              <MediaSlot kind="image" label="Unbound · manual" />
            </div>
          </CmpSection>

          <CmpSection name="AnswersEditor" desc="Standard question answers — tick the correct one, optional per-answer feedback. Any number of options.">
            <AnswersEditor answers={[
              { text: 'Naming the specific behaviour: "When you missed the spec review on Tuesday…"',
                isCorrect: true, feedback: 'Right — specific and observable.' },
              { text: 'Opening with the impact instead — "It really set the team back".',
                isCorrect: false, feedback: 'Impact lands better after the behaviour is named.' },
              { text: 'Asking how Jordan is feeling first — softer but loses scaffolding.',
                isCorrect: false, feedback: 'Warm, but it buries the point.' },
            ]} />
          </CmpSection>

          <CmpSection name="LocalizedStringEditor" desc="Per-language tabbed input. Warning dot when an EN edit invalidates the translation.">
            <LocalizedStringEditor label="Title" languages={['en','it','de','fr']}
              values={{ en: { value: 'Sarah & Jordan: a feedback scenario' },
                        it: { value: 'Sarah e Jordan: uno scenario di feedback', status: 'needs-review' },
                        de: { value: 'Sarah & Jordan: ein Feedback-Szenario' },
                        fr: { value: 'Sarah et Jordan: scénario de feedback' } }} />
          </CmpSection>
        </div>
      </div>
    </div>
  );
}

function CmpSection({ name, desc, children }) {
  return (
    <section className="card" style={{ padding: 18 }}>
      <header style={{ marginBottom: 14, display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <h2 style={{ margin: 0, fontSize: 14, fontWeight: 600,
          fontFamily: 'var(--font-mono)' }}>{name}</h2>
        <p style={{ margin: 0, fontSize: 12.5, color: 'var(--text-muted)' }}>{desc}</p>
      </header>
      {children}
    </section>
  );
}

function Row({ children }) {
  return <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>{children}</div>;
}

Object.assign(window, { SurfaceComponents });