// foundation.jsx — design system foundation artboards (colors, type, atoms)
// Refactored to Tailwind utilities (tokens map to CSS vars in styles.css).

function ColorSwatches() {
  const groups = [
    {title: 'Brand', colors: [
      {name: 'Orange / Primary', value: '#F18E00', token: '--brand-orange', text: 'white'},
      {name: 'Orange / Dark',    value: '#C57400', token: '--brand-orange-dark', text: 'white'},
      {name: 'Orange / Soft',    value: '#FFA033', token: '--brand-orange-soft', text: 'var(--gray-900)'},
      {name: 'Orange / Tint',    value: '#FFF1DE', token: '--brand-orange-tint', text: 'var(--gray-900)'},
      {name: 'Signature',        value: '#FF5D29', token: '--brand-orange-signature', text: 'white'},
    ]},
    {title: 'Neutrals · Tailwind gray', colors: [
      {name: 'Gray 900', value: '#111827', token: 'gray-900', text: 'white'},
      {name: 'Gray 800', value: '#1F2937', token: 'gray-800', text: 'white'},
      {name: 'Gray 700', value: '#374151', token: 'gray-700', text: 'white'},
      {name: 'Gray 600', value: '#4B5563', token: 'gray-600', text: 'white'},
      {name: 'Gray 500', value: '#6B7280', token: 'gray-500', text: 'white'},
      {name: 'Gray 400', value: '#9CA3AF', token: 'gray-400', text: 'var(--gray-900)'},
      {name: 'Gray 300', value: '#D1D5DB', token: 'gray-300', text: 'var(--gray-900)'},
      {name: 'Gray 200', value: '#E5E7EB', token: 'gray-200', text: 'var(--gray-900)'},
      {name: 'Gray 100', value: '#F3F4F6', token: 'gray-100', text: 'var(--gray-900)'},
      {name: 'White',    value: '#FFFFFF', token: '--surface', text: 'var(--gray-900)'},
    ]},
    {title: 'Semantic · Tailwind', colors: [
      {name: 'Success', value: '#16A34A', token: 'green-600', text: 'white'},
      {name: 'Info',    value: '#2563EB', token: 'blue-600', text: 'white'},
      {name: 'Warning', value: '#D97706', token: 'amber-600', text: 'white'},
      {name: 'Danger',  value: '#DC2626', token: 'red-600', text: 'white'},
    ]},
  ];
  return (
    <div className="page-frame p-9 bg-white">
      <h2 className="text-[28px] font-bold tracking-[-0.02em] mb-[22px]">Color palette</h2>
      {groups.map(g => (
        <div key={g.title} className="mb-7">
          <div className="eyebrow mb-3">{g.title}</div>
          <div className="grid grid-cols-5 gap-3">
            {g.colors.map(c => (
              <div key={c.value} className="rounded-md overflow-hidden border border-solid border-line">
                <div className="pt-8 px-3.5 pb-3.5 min-h-[92px]" style={{background: c.value, color: c.text}}>
                  <div className="font-display font-bold text-sm">{c.name}</div>
                </div>
                <div className="px-3.5 py-2.5 text-xs font-mono flex justify-between">
                  <span className="text-gray-900">{c.value}</span>
                  <span className="text-gray-500">{c.token}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function TypeSpecimen() {
  const weights = [
    {w: 300, name: 'Light'},
    {w: 400, name: 'Regular'},
    {w: 500, name: 'Medium'},
    {w: 600, name: 'Demi'},
    {w: 700, name: 'Bold'},
    {w: 800, name: 'ExtraBold'},
  ];
  return (
    <div className="page-frame p-9 bg-white">
      <h2 className="text-[28px] font-bold tracking-[-0.02em] mb-[22px]">Typography</h2>
      <div className="grid grid-cols-2 gap-8">
        <div>
          <div className="eyebrow mb-3">Typeface · Corporate S Pro</div>
          <div className="font-display font-extrabold text-[56px] tracking-[-0.02em] leading-[1.05]">Unterwegs mit<br/><span className="text-brand-orange">Auto AG Uri</span></div>
          <div className="mt-[22px] flex flex-col gap-3">
            <Spec label="H1 — 64 / Bold (700)" size={64} weight={700} text="Gotthard-Rundfahrt" display/>
            <Spec label="H2 — 44 / Bold (700)" size={44} weight={700} text="Spezialangebote & Freizeit" display/>
            <Spec label="H3 — 24 / Medium (500)" size={24} weight={500} text="Neue Elektrobusse im Einsatz" display/>
            <Spec label="Eyebrow — 13 / Bold (700) / 0.14em" size={13} weight={700} text="MIT DEM BUS ERLEBEN" display
              style={{letterSpacing: '0.14em', color: 'var(--brand-orange-dark)', textTransform: 'uppercase'}}/>
          </div>
        </div>
        <div>
          <div className="eyebrow mb-3">Weights — Light → ExtraBold</div>
          <div className="flex flex-col gap-2.5 mb-6">
            {weights.map(wt => (
              <div key={wt.w} className="flex items-baseline justify-between gap-4 border-b border-solid border-line-2 pb-2.5">
                <span className="font-display text-[26px] tracking-[-0.01em]" style={{fontWeight: wt.w}}>Bewegt im Kanton Uri</span>
                <span className="text-[11px] text-gray-500 font-mono whitespace-nowrap">{wt.name} · {wt.w}</span>
              </div>
            ))}
          </div>
          <div className="eyebrow mb-3">Italics</div>
          <div className="flex flex-col gap-2.5">
            <Spec label="Regular Italic (400)" size={19} weight={400} text="Ihr zuverlässiger Mobilitätspartner seit 1922." style={{fontStyle: 'italic'}}/>
            <Spec label="Demi Italic (600)" size={19} weight={600} text="Jede Kurve, jedes Tal — wir kennen den Weg." style={{fontStyle: 'italic'}}/>
          </div>
        </div>
      </div>
      <div className="mt-7">
        <div className="eyebrow mb-3">Body — Regular (400)</div>
        <div className="grid grid-cols-2 gap-8">
          <Spec label="Lead — 19 / 400" size={19} weight={400} text="Ihr zuverlässiger Mobilitätspartner im Kanton Uri — verbindet Dörfer, Täler und Menschen seit 1922."/>
          <Spec label="Body — 16 / 400" size={16} weight={400} text="Mit 28 Linien, 180 Haltestellen und einer modernen, zunehmend elektrischen Flotte verbinden wir Stadt und Berg."/>
        </div>
      </div>
    </div>
  );
}
function Spec({label, size, weight, text, display, style = {}}) {
  return (
    <div>
      <div className="text-[11px] text-gray-500 font-mono mb-1.5">{label}</div>
      <div style={{
        fontFamily: display ? 'var(--font-display)' : 'var(--font-body)',
        fontSize: size,
        fontWeight: weight,
        letterSpacing: display ? '-0.015em' : 0,
        lineHeight: 1.3,
        ...style,
      }}>{text}</div>
    </div>
  );
}

function ButtonsAndBadges() {
  return (
    <div className="page-frame p-9 bg-white">
      <h2 className="text-[28px] font-extrabold tracking-[-0.02em] mb-[22px]">Buttons</h2>

      <div className="eyebrow mb-3">Buttons</div>
      <div className="flex gap-3 mb-3.5 flex-wrap">
        <button className="btn btn-primary btn-lg"><I.Search/> Fahrplan suchen</button>
        <button className="btn btn-primary"><I.Briefcase/> Alle Jobs</button>
        <button className="btn btn-primary btn-sm"><I.Plus/> Hinzufügen</button>
      </div>
      <div className="flex gap-3 mb-3.5 flex-wrap">
        <button className="btn btn-ghost"><I.Pin/> Alle Linien</button>
        <button className="btn btn-ghost btn-sm">Sekundär</button>
      </div>
      <div className="flex gap-3 p-5 bg-gray-900 rounded-md flex-wrap">
        <button className="btn btn-ghost-light"><I.Pin/> Auf dunkel</button>
        <button className="btn btn-ghost-light btn-sm">Klein</button>
        <button className="btn btn-primary btn-sm">Primär (auf dunkel)</button>
      </div>

      <div className="eyebrow mb-3 mt-7">Links</div>
      <div className="flex gap-[22px]">
        <a href="#" className="link-arrow">Alle News <I.Arrow/></a>
        <a href="#" className="link-arrow">Mehr erfahren <I.Arrow/></a>
        <a href="#" className="link-arrow">Weiterlesen <I.Arrow/></a>
      </div>
    </div>
  );
}

function LogoArtboard() {
  return (
    <div className="page-frame p-9 bg-white">
      <h2 className="text-[28px] font-bold tracking-[-0.02em] mb-[22px]">Logo lockup</h2>
      <div className="grid grid-cols-2 gap-4">
        <div className="border border-solid border-line rounded-md overflow-hidden">
          <div className="p-10 bg-white flex items-center justify-center"><Logo size="lg"/></div>
          <div className="px-3.5 py-2 text-xs font-mono text-gray-500 border-t border-solid border-line">logo-nav.svg · header</div>
        </div>
        <div className="rounded-md overflow-hidden">
          <div className="p-10 bg-gray-900 flex items-center justify-center"><Logo size="lg" invert/></div>
          <div className="px-3.5 py-2 text-xs font-mono text-gray-500 bg-gray-100">logo-nav-invert.svg · footer</div>
        </div>
        <div className="p-[18px] bg-gray-100 rounded-md flex items-center justify-center">
          <Logo size="md"/>
        </div>
        <div className="p-[18px] bg-gray-100 rounded-md flex items-center justify-center">
          <Logo size="sm"/>
        </div>
      </div>

      <div className="eyebrow mt-[26px] mb-2.5">Die drei Bedeutungen</div>
      <ol className="list-none p-0 m-0 grid grid-cols-3 gap-3">
        {[
          {n: '1', t: 'Hin und Zurück', d: 'Fahrgäste in alle Richtungen — von Altdorf nach Flüelen, Göschenen, Seedorf, Bürglen, Linthal, Andermatt …'},
          {n: '2', t: 'Streckennetz',   d: 'Vielseitig — geradlinig und kurvig, durch Täler und über Pässe.'},
          {n: '3', t: 'Bewegt',         d: 'Die AUTO AG URI bewegt Fahrgäste — das Tagline-Wort BEWEGT bleibt Teil des Lockups.'},
        ].map(it => (
          <li key={it.n} className="p-4 bg-gray-100 rounded-sm">
            <div className="font-display font-bold text-xl text-brand-orange mb-1.5">{it.n} · {it.t}</div>
            <p className="text-[13px] text-gray-600 leading-[1.55]">{it.d}</p>
          </li>
        ))}
      </ol>
    </div>
  );
}

function LineColors() {
  const lines = [
    {nr: '401', color: 'var(--line-401)', name: 'Flüelen – Göschenen',           label: 'rot'},
    {nr: '402', color: 'var(--line-402)', name: 'Attinghausen – Bürglen',         label: 'dunkelblau'},
    {nr: '403', color: 'var(--line-403)', name: 'Seedorf – Bürglen',              label: 'hellgrün'},
    {nr: '405', color: 'var(--line-405)', name: 'Schattdorf – Isenthal',          label: 'dunkellila'},
    {nr: '407', color: 'var(--line-407)', name: 'Amsteg – Bristen',               label: 'violett'},
    {nr: '408', color: 'var(--line-408)', name: 'Attinghausen – Linthal',         label: 'hellblau'},
    {nr: '411', color: 'var(--line-411)', name: 'Göschenen – Göscheneralp',       label: 'Meeresgrün'},
    {nr: '412', color: 'var(--line-412)', name: 'Altdorf – Amsteg',               label: 'orange'},
    {nr: '413', color: 'var(--line-413)', name: 'Flüelen – Altdorf',              label: 'magenta'},
    {nr: '493', color: 'var(--line-493)', name: 'Altdorf – Luzern (Tellbus)',     label: 'schwarz'},
    {nr: 'PA',  color: 'var(--line-postauto)', name: 'PostAuto-Linien',           label: 'gelb', ink: 'var(--gray-900)'},
  ];
  return (
    <div className="page-frame p-9 bg-white">
      <h2 className="text-[28px] font-extrabold tracking-[-0.02em] mb-1.5">Linienfarben</h2>
      <p className="text-gray-600 text-sm mb-[22px] max-w-[640px] leading-[1.55]">
        Jede Buslinie der AUTO AG URI besitzt eine offizielle Linienfarbe gemäss CD Mai 2024. Sie wird im Liniennetzplan, in der App und auf der Webseite konsistent verwendet.
      </p>
      <div className="grid grid-cols-2 gap-2.5">
        {lines.map(l => (
          <div key={l.nr} className="grid grid-cols-[auto_1fr_auto] items-center gap-3.5 px-3.5 py-2.5 bg-bg rounded-sm">
            <span className="min-w-[52px] h-9 px-2.5 rounded-[8px] inline-flex items-center justify-center font-display font-extrabold text-base"
              style={{background: l.color, color: l.ink || 'white'}}>{l.nr}</span>
            <div className="font-body font-medium text-sm text-gray-900">{l.name}</div>
            <div className="text-xs text-gray-500 font-mono">{l.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ColorSwatches, TypeSpecimen, ButtonsAndBadges, LogoArtboard, LineColors });