// Design System artifact — the kit overview

const DSCell = ({ label, sub, children, style }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', ...style }}>
    <div style={{ minHeight: 60, display: 'flex', alignItems: 'center' }}>{children}</div>
    <div>
      <div style={{ fontSize: '13px', color: 'var(--ink)', fontWeight: 500 }}>{label}</div>
      {sub && <div style={{ fontSize: '12px', color: 'var(--ink-faint)', marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{sub}</div>}
    </div>
  </div>
);

const DSGroup = ({ title, kicker, children, style }) => (
  <section style={{ paddingBottom: 56, borderBottom: '1px solid var(--line)', marginBottom: 56, ...style }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 32 }}>
      <h2 className="head-26" style={{ color: 'var(--ink)' }}>{title}</h2>
      {kicker && <div style={{ fontSize: 13, color: 'var(--ink-faint)' }}>{kicker}</div>}
    </div>
    {children}
  </section>
);

const Swatch = ({ color, label, value, dark }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    <div style={{
      height: 88,
      borderRadius: 12,
      background: color,
      border: '1px solid var(--line)',
    }} />
    <div>
      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{label}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>{value}</div>
    </div>
  </div>
);

const DesignSystem = () => (
  <div className="de" style={{ padding: '64px 80px', minHeight: 1880, background: 'var(--cream)' }}>
    {/* Header */}
    <header style={{ marginBottom: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48 }}>
      <div>
        <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 12 }}>Digital Empathy · Support workspace</div>
        <h1 className="display-44" style={{ marginBottom: 16 }}>Design system</h1>
        <p style={{ fontSize: 17, color: 'var(--ink-secondary)', maxWidth: 640, lineHeight: 1.55 }}>
          Tokens, type, and named components used across the queue, case views, and account brief. Editorial restraint, generous whitespace, terracotta used once per screen.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--ink-faint)' }}>
        <div><div style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 13 }}>v0.3</div><div>Draft</div></div>
        <div><div style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 13 }}>1280+</div><div>Desktop only</div></div>
        <div><div style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 13 }}>15 components</div><div>Named</div></div>
      </div>
    </header>

    {/* Color */}
    <DSGroup title="Color" kicker="One accent. Once per screen.">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24, marginBottom: 32 }}>
        <Swatch color="#faf9f5" label="Cream" value="#faf9f5 · canvas" />
        <Swatch color="#f0eee6" label="Cream deeper" value="#f0eee6 · nested" />
        <Swatch color="#f8f8f6" label="Paper" value="#f8f8f6 · inputs" />
        <Swatch color="#ffffff" label="White" value="#ffffff · elevated" />
        <Swatch color="#141413" label="Ink" value="#141413 · text" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24 }}>
        <Swatch color="#c6613f" label="Accent" value="#c6613f · terracotta" />
        <Swatch color="#6b9d5e" label="Good" value="#6b9d5e · healthy" />
        <Swatch color="#3d3d3a" label="Ink secondary" value="#3d3d3a · body" />
        <Swatch color="#73726c" label="Ink faint" value="#73726c · meta" />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{
            height: 88,
            borderRadius: 12,
            background: 'var(--cream)',
            border: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <div style={{ width: '85%', height: 1, background: 'var(--line)' }} />
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Line</div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 2 }}>rgba(20,20,19,0.08)</div>
          </div>
        </div>
      </div>
    </DSGroup>

    {/* Type */}
    <DSGroup title="Type" kicker="Inter for UI. Source Serif 4 for display.">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 64 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div>
            <div className="display-44" style={{ marginBottom: 6 }}>Where we are right now</div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>Source Serif 4 · 44 / 1.1 / 300</div>
          </div>
          <div>
            <div className="display-32" style={{ marginBottom: 6 }}>14 tickets · 3 high-priority</div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>Source Serif 4 · 32 / 1.12 / 400</div>
          </div>
          <div>
            <div className="head-22" style={{ marginBottom: 6 }}>Voice — how Mel writes</div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>Source Serif 4 · 22 / 1.2 / 400</div>
          </div>
          <div>
            <div style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink)', marginBottom: 6, maxWidth: 540 }}>
              Mel emails Fairfax's tickets directly. Usually short, clean. She prefers copy without exclamation marks per Alie's brand-voice note from March.
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>Inter · 16 / 1.55 / 400 — chat body</div>
          </div>
          <div>
            <div style={{ fontSize: 14, color: 'var(--ink-secondary)', marginBottom: 6 }}>
              Growth · 14 mo · Alie touched 3 weeks ago · Voice: confident, warm, crisp.
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>Inter · 14 / 1.5 / 400 — meta</div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-secondary)', marginBottom: 6 }}>Waiting on client</div>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>Inter · 12 / 1.4 / 500 — sentence-case label (never tracked caps)</div>
          </div>
        </div>
        <div style={{ background: 'var(--cream-deeper)', borderRadius: 16, padding: 28, fontSize: 13, lineHeight: 1.6, color: 'var(--ink-secondary)' }}>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 12 }}>Scale</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 14px', fontVariantNumeric: 'tabular-nums', color: 'var(--ink)' }}>
            {[11, 12, 13, 14, 15, 16, 17, 18, 22, 26, 32, 44].map(n => (
              <span key={n} style={{ fontSize: 13, color: 'var(--ink-secondary)' }}>{n}</span>
            ))}
          </div>
          <div style={{ height: 1, background: 'var(--line)', margin: '20px 0' }} />
          <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 12 }}>Weights</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 12px', fontSize: 13 }}>
            <span style={{ fontWeight: 400 }}>Inter 400 — body</span>
            <span style={{ fontWeight: 500 }}>Inter 500 — labels</span>
            <span style={{ fontWeight: 600 }}>Inter 600 — strong</span>
            <span style={{ fontWeight: 700 }}>Inter 700 — buttons</span>
            <span style={{ fontFamily: 'var(--serif)', fontWeight: 300 }}>Serif 300 — display</span>
            <span style={{ fontFamily: 'var(--serif)', fontWeight: 400 }}>Serif 400 — heads</span>
          </div>
        </div>
      </div>
    </DSGroup>

    {/* Spacing / Radii */}
    <DSGroup title="Spacing & radii" kicker="8px base. No 2 / 4 / 6 radii.">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 16 }}>Spacing scale</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12 }}>
            {[8, 16, 24, 32, 48, 64, 96].map(n => (
              <div key={n} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <div style={{ width: n, height: n, background: 'var(--accent)', borderRadius: 2 }} />
                <div style={{ fontSize: 11, color: 'var(--ink-faint)', fontVariantNumeric: 'tabular-nums' }}>{n}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 16 }}>Radii</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12 }}>
            {[
              { r: 0, label: '0' },
              { r: 8, label: '8' },
              { r: 12, label: '12' },
              { r: 16, label: '16' },
              { r: 24, label: '24' },
              { r: 9999, label: 'pill' },
            ].map(({ r, label }) => (
              <div key={label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 56, height: 56, background: 'var(--cream-deeper)', border: '1px solid var(--line)', borderRadius: r }} />
                <div style={{ fontSize: 11, color: 'var(--ink-faint)' }}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </DSGroup>

    {/* Components */}
    <DSGroup title="Components" kicker="Named, reusable across all five templates.">

      {/* Row 1: Surface, ChatBubbles, OptionCard */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, marginBottom: 48 }}>
        <DSCell label="Surface" sub="cream-deeper · 12px radius · 20px padding">
          <Surface style={{ width: '100%' }}>
            <div style={{ fontSize: 13, color: 'var(--ink-secondary)' }}>Nested surface — no shadows.</div>
          </Surface>
        </DSCell>
        <DSCell label="ChatBubble (user)" sub="right-aligned · max 80%">
          <ChatBubble from="user" style={{ width: '100%' }}>Ship the urgent care banner.</ChatBubble>
        </DSCell>
        <DSCell label="ChatBubble (Claude)" sub="no bg · indented under glyph">
          <ChatBubble from="claude" style={{ width: '100%' }}>Reading the ticket now.<span className="caret" /></ChatBubble>
        </DSCell>
      </div>

      {/* Row 2: StatusDot, Avatar, Pill, LivePulse */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginBottom: 48 }}>
        <DSCell label="StatusDot" sub="6px · 4 variants">
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-faint)' }}><StatusDot kind="high" /> high</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-faint)' }}><StatusDot kind="routine" /> routine</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-faint)' }}><StatusDot kind="good" /> done</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-faint)' }}><StatusDot kind="waiting" /> waiting</span>
          </div>
        </DSCell>
        <DSCell label="Avatar" sub="Claude glyph · team initial">
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <Avatar kind="claude" size={24} />
            <Avatar kind="user" initial="J" color="#9a7a5e" size={24} />
            <Avatar kind="user" initial="A" color="#7a8b6f" size={24} />
            <Avatar kind="user" initial="R" color="#7a6f9a" size={24} />
          </div>
        </DSCell>
        <DSCell label="Pill" sub="mode · accent · quiet">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Pill variant="mode">Practice mode</Pill>
            <Pill variant="accent">Recommended</Pill>
            <Pill variant="quiet">Routine</Pill>
          </div>
        </DSCell>
        <DSCell label="LivePulse" sub="6px green · 2s pulse ring">
          <LivePulse label="Auto-refreshing" sub="last update 28s ago" />
        </DSCell>
      </div>

      {/* Row 3: OptionCard wide */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 48 }}>
        <DSCell label="OptionCard · default" sub="line border · neutral fill">
          <OptionCard title="Build the pop-up as asked" meta="2h · same as previous tickets" />
        </DSCell>
        <DSCell label="OptionCard · recommended" sub="white bg · 3px accent left-border">
          <OptionCard recommended title="Send a quick note first" meta="10 min · clarifies the goal" />
        </DSCell>
      </div>

      {/* Row 4: ChecklistItem states */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32, marginBottom: 48 }}>
        <DSCell label="ChecklistItem" sub="done · in-progress · question · pending" style={{ gap: 16 }}>
          <Surface style={{ width: '100%', padding: '14px 20px' }}>
            <ChecklistItem state="done">Update urgent care hours banner</ChecklistItem>
            <ChecklistItem state="in-progress">Swap homepage hero image</ChecklistItem>
            <ChecklistItem state="question" sub="Mel hasn't sent the new bio yet">Add Dr. Patel to the team page</ChecklistItem>
            <ChecklistItem state="pending">Update services menu copy</ChecklistItem>
          </Surface>
        </DSCell>
      </div>

      {/* Row 5: Button, Input, BrowserChrome */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 48 }}>
        <DSCell label="Button" sub="primary · accent · secondary · ghost">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Button variant="primary">Ship it</Button>
            <Button variant="accent">Recommend this</Button>
            <Button variant="secondary">Loop in Alie</Button>
            <Button variant="ghost">Cancel</Button>
          </div>
        </DSCell>
        <DSCell label="Input" sub="12px radius · 1px line border · accent focus">
          <Input placeholder="Search 14 open tickets" />
        </DSCell>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32, marginBottom: 48 }}>
        <DSCell label="BrowserChrome" sub="three dots · URL pill · desktop / mobile (decorative)" style={{ gap: 16 }}>
          <div style={{ width: '100%', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', background: 'var(--white)' }}>
            <BrowserChrome url="fairfaxvet.com/services/urgent-care" />
            <div style={{ padding: '20px', fontSize: 13, color: 'var(--ink-faint)' }}>
              <ChangeHighlight>Saturday urgent-care availability: 9am – 12pm from May 20 – 25.</ChangeHighlight>
            </div>
          </div>
        </DSCell>
      </div>

      {/* Row 6: EmptySlot, MetaLine, ChangeHighlight */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, marginBottom: 48 }}>
        <DSCell label="EmptySlot" sub="dashed · for client-supplied content">
          <EmptySlot height={84}>Dr. Patel's bio will land here</EmptySlot>
        </DSCell>
        <DSCell label="MetaLine" sub="middle-dot bullets · ink-faint">
          <MetaLine items={['Growth', '14 mo', 'Alie touched 3 wk ago', 'Confident, warm']} />
        </DSCell>
        <DSCell label="ChangeHighlight" sub="yellow gradient underline on changed text">
          <div style={{ fontSize: 15 }}>
            Saturday urgent-care availability: <ChangeHighlight>9am – 12pm from May 20 – 25</ChangeHighlight>.
          </div>
        </DSCell>
      </div>

      {/* Row 7: AccountBriefSection */}
      <DSCell label="AccountBriefSection" sub="serif 22 / 400 + 16 sans body" style={{ gap: 16 }}>
        <div style={{ width: '100%', maxWidth: 640 }}>
          <AccountBriefSection title="Voice">
            Mel writes short. Clean, plain, no exclamation marks. When she's stressed, she gets terser, not louder. Our replies on Fairfax should match: confident, warm, crisp.
          </AccountBriefSection>
        </div>
      </DSCell>
    </DSGroup>

    {/* Anti-patterns footer */}
    <section style={{ background: 'var(--cream-deeper)', borderRadius: 24, padding: '40px 48px' }}>
      <h2 className="head-22" style={{ marginBottom: 20 }}>Anti-patterns</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 48px', fontSize: 14, color: 'var(--ink-secondary)', lineHeight: 1.6 }}>
        {[
          'No tracked-caps labels — sentence-case at 12 / 500.',
          'No box-shadows. Depth via tint, never elevation.',
          'No gray borders — semi-transparent ink only.',
          'No purple, gradients, neon, sparkles.',
          'No three-column feature grids.',
          'No Material elevation.',
          'No exclamation marks in in-character copy.',
          'No em dashes in customer or support dialogue.',
          'No 3D / cartoon avatars — circle + letter or star.',
          'No accent on links — links are underlined ink.',
          'No buttons in the artifact pane — chat is the action surface.',
          'No persistent preview on the queue.',
        ].map((t, i) => (
          <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span style={{ flex: '0 0 auto', marginTop: 8, width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-faint)' }} />
            <span>{t}</span>
          </div>
        ))}
      </div>
    </section>
  </div>
);

window.DesignSystem = DesignSystem;