// Civic Modern — shared shell with left sidebar navigation.
// Every page wraps its sections in <Shell current="home|type|color|spacing|components|dashboard">.

function Shell({ current, children }) {
  const t = window.tokens;

  const nav = [
    {
      label: 'Start',
      items: [
        { id: 'home', name: 'Overview', href: 'index.html', code: '00' },
      ],
    },
    {
      label: 'Foundations',
      items: [
        { id: 'type', name: 'Typography', href: 'typography.html', code: '02' },
        { id: 'color', name: 'Color', href: 'color.html', code: '03' },
        { id: 'spacing', name: 'Spacing + Radii', href: 'spacing.html', code: '04' },
        { id: 'icons', name: 'Icons', href: 'icons.html', code: '05' },
      ],
    },
    {
      label: 'Components',
      items: [
        { id: 'buttons', name: 'Buttons', href: 'components-buttons.html', code: '06' },
        { id: 'pills', name: 'Pills', href: 'components-pills.html', code: '07' },
        { id: 'forms', name: 'Forms', href: 'components-forms.html', code: '08' },
        { id: 'containers', name: 'Containers', href: 'components-containers.html', code: '09' },
        { id: 'alerts', name: 'Alerts', href: 'components-alerts.html', code: '10' },
        { id: 'composer', name: 'Composer', href: 'components-composer.html', code: '11' },
        { id: 'breadcrumbs', name: 'Breadcrumbs', href: 'components-breadcrumbs.html', code: '12' },
        { id: 'navitem', name: 'Nav Item', href: 'components-navitem.html', code: '13' },
        { id: 'tabs', name: 'Tabs', href: 'components-tabs.html', code: '14' },
        { id: 'avatar', name: 'Avatar', href: 'components-avatar.html', code: '15' },
        { id: 'progress', name: 'Progress', href: 'components-progress.html', code: '16' },
        { id: 'stepper', name: 'Stepper', href: 'components-stepper.html', code: '17' },
        { id: 'data', name: 'Data Table', href: 'components-data.html', code: '18' },
      ],
    },
  ];

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '248px 1fr',
      minHeight: '100vh',
      background: t.color.bg,
      color: t.color.text,
      fontFamily: t.font.sans,
    }}>
      {/* ─────── SIDEBAR ─────── */}
      <aside style={{
        position: 'sticky',
        top: 0,
        alignSelf: 'start',
        height: '100vh',
        overflowY: 'auto',
        borderRight: `1px solid ${t.color.hair}`,
        background: t.color.paper,
        padding: '28px 0',
      }}>
        <a href="index.html" style={{
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          padding: '0 24px 24px',
          textDecoration: 'none',
          color: t.color.text,
        }}>
          <GPMark size={22} hollow={t.color.action} solid={t.color.text} />
          <div style={{ lineHeight: 1.15 }}>
            <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: -0.2 }}>Civic Modern</div>
            <div style={{ fontFamily: t.font.mono, fontSize: 9, color: t.color.muted, letterSpacing: 1.2, textTransform: 'uppercase', marginTop: 2 }}>GovPilot · v0.1</div>
          </div>
        </a>

        {nav.map((group) => (
          <div key={group.label} style={{ padding: '16px 0 8px' }}>
            <div style={{
              padding: '0 24px 10px',
              fontFamily: t.font.mono,
              fontSize: 10,
              letterSpacing: 1.6,
              textTransform: 'uppercase',
              color: t.color.dim,
              fontWeight: 500,
            }}>{group.label}</div>
            {group.items.map((item) => {
              const active = item.id === current;
              return (
                <a
                  key={item.id}
                  href={item.href}
                  className="cm-nav-link"
                  data-active={active ? 'true' : 'false'}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    padding: '9px 24px',
                    textDecoration: 'none',
                    color: active ? t.color.text : t.color.body,
                    fontSize: 13,
                    fontWeight: active ? 500 : 400,
                    background: active ? t.color.bg : 'transparent',
                    borderLeft: active ? `2px solid ${t.color.action}` : '2px solid transparent',
                  }}
                >
                  <span>{item.name}</span>
                  <span style={{
                    fontFamily: t.font.mono,
                    fontSize: 9,
                    color: active ? t.color.action : t.color.dim,
                    letterSpacing: 1,
                  }}>{item.code}</span>
                </a>
              );
            })}
          </div>
        ))}

        <div style={{ padding: '24px', marginTop: 20, borderTop: `1px solid ${t.color.hair}` }}>
          <div style={{ fontFamily: t.font.mono, fontSize: 9, color: t.color.dim, letterSpacing: 1.2, textTransform: 'uppercase' }}>Last updated</div>
          <div style={{ fontFamily: t.font.mono, fontSize: 11, color: t.color.muted, marginTop: 4, letterSpacing: 0.8 }}>APR 2026</div>
        </div>
      </aside>

      {/* ─────── CONTENT ─────── */}
      <main style={{ minWidth: 0, maxWidth: 1280, width: '100%' }}>
        {children}
      </main>
    </div>
  );
}

Object.assign(window, { Shell });