// t24-design-system.jsx — design system showcase (colors, type, components, icon grid)

function DSSwatch({ name, hex, fg = '#fff', sub }) {
  return (
    <div style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid var(--t24-border)', background: 'var(--t24-surface)' }}>
      <div style={{ height: 80, background: hex, color: fg, padding: 12, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
        <div style={{ font: '700 14px/1 var(--t24-font-en)' }}>{name}</div>
      </div>
      <div style={{ padding: '8px 12px', background: 'var(--t24-surface)' }}>
        <div style={{ font: '600 12px/1 var(--t24-font-en)', color: 'var(--t24-text)' }}>{hex}</div>
        {sub && <div style={{ font: '500 10px/1.3 var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 3 }}>{sub}</div>}
      </div>
    </div>
  );
}

function ScreenDesignSystem() {
  return (
    <div style={{ background: 'var(--t24-bg)', padding: 32, fontFamily: 'var(--t24-font-en)', minHeight: '100%', boxSizing: 'border-box' }}>
      {/* Header */}
      <div style={{ display: 'flex', gap: 18, alignItems: 'center', marginBottom: 32 }}>
        <div style={{ width: 84, height: 84, borderRadius: 22, background: 'var(--t24-grad-hero)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--t24-sh-3)' }}>
          <TaskerMark size={54} color="#fff"/>
        </div>
        <div>
          <h1 style={{ margin: 0, font: '800 36px/1 var(--t24-font-en)', color: 'var(--t24-text)', letterSpacing: -0.6 }}>
            Tasker<span style={{ color: 'var(--t24-blue)' }}>24</span> · Design System
          </h1>
          <p style={{ margin: '8px 0 0', color: 'var(--t24-muted)', font: '500 14px/1.4 var(--t24-font-en)' }}>
            Visual foundation for the Tasker 24 mobile and web apps. Tokens map 1:1 to Flutter <code style={{ background: 'var(--t24-sky)', padding: '2px 6px', borderRadius: 4 }}>ThemeData</code>.
          </p>
        </div>
      </div>

      {/* Brand colors */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '8px 0 14px' }}>Brand colors</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
        <DSSwatch name="Navy"  hex="#0B1F3A" sub="Background dark / titles"/>
        <DSSwatch name="Deep"  hex="#123A73" sub="Headings · primary text"/>
        <DSSwatch name="Blue"  hex="#1E63D6" sub="Primary CTAs · brand"/>
        <DSSwatch name="Cyan"  hex="#22D3EE" fg="#0B1F3A" sub="Accent · gradients"/>
        <DSSwatch name="Sky"   hex="#EAF6FF" fg="#0B1F3A" sub="Icon tile · soft fills"/>
        <DSSwatch name="White" hex="#FFFFFF" fg="#0B1F3A" sub="Surface"/>
      </div>

      {/* Neutrals + semantic */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 14px' }}>Neutrals & semantic</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
        <DSSwatch name="Text"     hex="#0F172A" sub="Primary text"/>
        <DSSwatch name="Muted"    hex="#64748B" sub="Secondary text"/>
        <DSSwatch name="Border"   hex="#DDEBFA" fg="#0B1F3A" sub="Lines & dividers"/>
        <DSSwatch name="Success"  hex="#16A34A" sub="Done · online"/>
        <DSSwatch name="Warning"  hex="#F59E0B" fg="#0B1F3A" sub="Pending · KYC"/>
        <DSSwatch name="Danger"   hex="#DC2626" sub="Cancel · errors"/>
      </div>

      {/* Gradients */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 14px' }}>Gradients</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {[
          { name: 'Hero',  g: 'var(--t24-grad-hero)', sub: 'Navy → Deep → Blue · headers, splash' },
          { name: 'Cyan',  g: 'var(--t24-grad-cyan)', sub: 'Blue → Cyan · primary CTA, FAB' },
          { name: 'Soft',  g: 'var(--t24-grad-soft)', sub: 'White → Sky · cards & sections' },
        ].map(g => (
          <div key={g.name} style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid var(--t24-border)' }}>
            <div style={{ height: 90, background: g.g }}/>
            <div style={{ padding: '10px 14px', background: 'var(--t24-surface)' }}>
              <div style={{ font: '700 13px var(--t24-font-en)', color: 'var(--t24-text)' }}>{g.name}</div>
              <div style={{ font: '500 11px var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 2 }}>{g.sub}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Typography */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 14px' }}>Typography</h2>
      <div className="t24-card" style={{ padding: 24 }}>
        <div className="t24-display-l">Display L · 32 / 700 — Welcome back</div>
        <div className="t24-title-l" style={{ marginTop: 16 }}>Title L · 22 / 700 — Top rated near you</div>
        <div className="t24-title-m" style={{ marginTop: 12 }}>Title M · 17 / 600 — Section headings</div>
        <div className="t24-body-l" style={{ marginTop: 12, color: 'var(--t24-muted)' }}>Body L · 15 / 400 — Long-form descriptive copy in cards and details.</div>
        <div className="t24-body-m" style={{ marginTop: 8, color: 'var(--t24-muted)' }}>Body M · 13 / 400 — Helper text, meta info</div>
        <div className="t24-caption" style={{ marginTop: 12, color: 'var(--t24-muted)' }}>CAPTION · 11 / 500 / UPPERCASE</div>
        <div className="t24-title-m t24-bn" style={{ marginTop: 24, color: 'var(--t24-deep)' }}>বাংলা ফন্ট · Hind Siliguri — টাস্কার ২৪ এ স্বাগতম</div>
      </div>

      {/* Buttons & inputs */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 14px' }}>Buttons, chips & inputs</h2>
      <div className="t24-card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <T24Button kind="primary" icon={LineIcons.plus(15)}>Primary CTA</T24Button>
          <T24Button kind="primary" size="lg">Large primary</T24Button>
          <T24Button kind="secondary">Secondary</T24Button>
          <T24Button kind="navy">Navy</T24Button>
          <T24Button kind="ghost">Ghost</T24Button>
          <T24Button kind="danger">Danger</T24Button>
          <T24Button kind="primary" size="sm">Small</T24Button>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <T24Chip active>Active</T24Chip>
          <T24Chip>Filter</T24Chip>
          <T24Chip icon={LineIcons.star(11)}>4★ &amp; up</T24Chip>
          <T24Chip icon={LineIcons.pin(11)}>Near me</T24Chip>
          <T24Chip danger>Suspended</T24Chip>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <input className="t24-input" placeholder="Default input"/>
          <input className="t24-input" defaultValue="Focused state" style={{ borderColor: 'var(--t24-blue)', boxShadow: '0 0 0 4px rgba(30,99,214,0.12)' }}/>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <T24StatusPill status="pending"/>
          <T24StatusPill status="discuss"/>
          <T24StatusPill status="inprogress"/>
          <T24StatusPill status="done"/>
          <T24StatusPill status="cancelled"/>
        </div>
      </div>

      {/* Iconography */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 6px' }}>Category iconography</h2>
      <p style={{ color: 'var(--t24-muted)', font: '500 13px var(--t24-font-en)', margin: '0 0 14px' }}>Duotone marks on a soft-sky tile. Each category icon contains the universal blue arc + a primary glyph.</p>
      <div className="t24-card" style={{ padding: 22 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
          {T24_CATEGORIES.map(c => (
            <div key={c.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <TaskerIcon kind="cat" name={c.icon} size={64}/>
              <span style={{ font: '600 11px/1.2 var(--t24-font-en)', color: 'var(--t24-text)', textAlign: 'center' }}>{c.name.split(',')[0]}</span>
            </div>
          ))}
        </div>
      </div>

      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 14px' }}>Service icons (sample)</h2>
      <div className="t24-card" style={{ padding: 22 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 14 }}>
          {T24_SERVICES.slice(0, 24).map(s => (
            <div key={s.s} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <TaskerIcon kind="svc" name={s.s} size={52}/>
              <span style={{ font: '500 10px/1.2 var(--t24-font-en)', color: 'var(--t24-muted)', textAlign: 'center' }}>{s.name}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Spacing & radius */}
      <h2 style={{ font: '700 22px/1 var(--t24-font-en)', color: 'var(--t24-text)', margin: '32px 0 14px' }}>Radius & shadows</h2>
      <div className="t24-card" style={{ padding: 22 }}>
        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-end' }}>
          {[
            { r: 8, n: 'xs · 8' },
            { r: 12, n: 'sm · 12' },
            { r: 16, n: 'md · 16' },
            { r: 20, n: 'lg · 20' },
            { r: 26, n: 'xl · 26' },
            { r: 32, n: '2xl · 32' },
            { r: 9999, n: 'pill' },
          ].map(o => (
            <div key={o.n} style={{ textAlign: 'center' }}>
              <div style={{ width: 64, height: 64, borderRadius: o.r, background: 'var(--t24-sky)', border: '1px solid var(--t24-border)' }}/>
              <div style={{ font: '500 11px var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 6 }}>{o.n}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 18, marginTop: 24 }}>
          {[1,2,3,4].map(i => (
            <div key={i} style={{ width: 90, height: 70, borderRadius: 14, background: '#fff', boxShadow: `var(--t24-sh-${i})`, display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 11px var(--t24-font-en)', color: 'var(--t24-muted)' }}>sh-{i}</div>
          ))}
          <div style={{ width: 90, height: 70, borderRadius: 14, background: 'var(--t24-grad-cyan)', boxShadow: 'var(--t24-sh-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 11px var(--t24-font-en)', color: '#fff' }}>sh-blue</div>
        </div>
      </div>

      <p style={{ font: '500 12px/1.4 var(--t24-font-en)', color: 'var(--t24-muted)', margin: '40px 0 0', textAlign: 'center' }}>
        Tasker 24 · Design tokens v1.0 · 100+ services across 11 categories
      </p>
    </div>
  );
}

Object.assign(window, { ScreenDesignSystem });