// MedBridge — foundations cards for the design canvas.

function Swatch({ name, value, fg = '#0F1B2D', big }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ height: big ? 64 : 44, background: value, borderRadius: 8, border: `1px solid rgba(0,0,0,0.06)` }} />
      <div style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 600, color: MB.ink.primary }}>{name}</div>
      <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: MB.ink.tertiary }}>{value}</div>
    </div>
  );
}

function FoundationColors() {
  return (
    <div style={{ padding: 28, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', fontFamily: MB.font, overflow: 'auto' }}>
      <h2 style={{ fontSize: 24, fontWeight: 700, color: MB.ink.primary, margin: '0 0 4px', letterSpacing: -0.3 }}>Color · Foundations</h2>
      <p style={{ fontSize: 14, color: MB.ink.secondary, margin: '0 0 24px' }}>Brand · Angebotstyp · Surface · Ink · Semantic · Specialty</p>

      <Section title="Brand">
        <Grid>
          <Swatch big name="brand/800" value={MB.brand[800]} />
          <Swatch big name="brand/700 · default" value={MB.brand[700]} />
          <Swatch big name="brand/600" value={MB.brand[600]} />
          <Swatch big name="brand/100" value={MB.brand[100]} />
          <Swatch big name="accent/600" value={MB.accent[600]} />
        </Grid>
      </Section>

      <Section title="Angebotstyp — structural" subtitle="Used as dominant cue on every listing, chip, calendar event, notification.">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div style={{ background: MB.surface.raised, borderRadius: 12, padding: 14, border: `1px solid ${MB.line.hair}` }}>
            <Chip tone="vertretung" strong size="md" leading={<Icon name="stethoscope" size={14} />}>Vertretung</Chip>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginTop: 12 }}>
              {[700,600,500,100,50].map(s => (
                <div key={s} style={{ height: 36, borderRadius: 6, background: MB.vertretung[s] }} />
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginTop: 4, fontFamily: 'ui-monospace, monospace', fontSize: 9, color: MB.ink.tertiary }}>
              <span>700</span><span>600</span><span>500</span><span>100</span><span>050</span>
            </div>
          </div>
          <div style={{ background: MB.surface.raised, borderRadius: 12, padding: 14, border: `1px solid ${MB.line.hair}` }}>
            <Chip tone="ausbildung" strong size="md" leading={<Icon name="graduation" size={14} />}>Ausbildungsstelle</Chip>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginTop: 12 }}>
              {[700,600,500,100,50].map(s => (
                <div key={s} style={{ height: 36, borderRadius: 6, background: MB.ausbildung[s] }} />
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginTop: 4, fontFamily: 'ui-monospace, monospace', fontSize: 9, color: MB.ink.tertiary }}>
              <span>700</span><span>600</span><span>500</span><span>100</span><span>050</span>
            </div>
          </div>
        </div>
      </Section>

      <Section title="Surface & Ink">
        <Grid>
          <Swatch name="surface/canvas" value={MB.surface.canvas} />
          <Swatch name="surface/canvas2" value={MB.surface.canvas2} />
          <Swatch name="surface/raised" value={MB.surface.raised} />
          <Swatch name="ink/primary" value={MB.ink.primary} />
          <Swatch name="ink/secondary" value={MB.ink.secondary} />
          <Swatch name="ink/tertiary" value={MB.ink.tertiary} />
        </Grid>
      </Section>

      <Section title="Semantic">
        <Grid>
          <Swatch name="success/600" value={MB.success[600]} />
          <Swatch name="warning/600" value={MB.warning[600]} />
          <Swatch name="danger/600" value={MB.danger[600]} />
          <Swatch name="info/600" value={MB.info[600]} />
          <Swatch name="sponsored/bg" value={MB.sponsored.bg} />
        </Grid>
      </Section>

      <Section title="Specialty tags · muted" subtitle="Single muted tone per specialty. Always loses to Angebotstyp in hierarchy.">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {Object.entries(MB.specialty).filter(([k]) => k !== 'default').map(([k,v]) => (
            <span key={k} style={{ padding: '6px 10px', borderRadius: 999, background: '#fff', border: `1px solid ${MB.line.hair}`, color: v, fontFamily: MB.font, fontSize: 12, fontWeight: 600 }}>{k}</span>
          ))}
        </div>
      </Section>
    </div>
  );
}

function FoundationType() {
  const samples = [
    ['Display · 32/600',     MB.type.display, 'Vertretung & Ausbildung'],
    ['H1 · 26/600',          MB.type.h1, 'Kassenordination · Wien 1080'],
    ['H2 · 20/600',          MB.type.h2, 'Anstehende Buchungen'],
    ['H3 · 17/600',          MB.type.h3, 'Praxis-Ausstattung'],
    ['Body · 16/400',        MB.type.body, 'Mo 18. — Fr 29. August 2026 · 8h/Tag · Hofparkplatz, U6 in 3 Min, barrierefrei zugänglich.'],
    ['Body Bold · 16/600',   MB.type.bodyB, '€ 680 / Tag · 8h'],
    ['Label · 14/600',       MB.type.label, 'Anbieten · Suchen'],
    ['Caption · 13/400',     MB.type.caption, 'Verifiziert via ID Austria · ÖÄK-Mitgliedsnummer'],
    ['Micro · 11/600/0.4',   MB.type.micro, 'ANGEBOTSTYP · ZEITRAUM · HONORAR'],
  ];
  return (
    <div style={{ padding: 28, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', fontFamily: MB.font, overflow: 'auto' }}>
      <h2 style={{ fontSize: 24, fontWeight: 700, color: MB.ink.primary, margin: '0 0 4px', letterSpacing: -0.3 }}>Type · Source Sans 3</h2>
      <p style={{ fontSize: 14, color: MB.ink.secondary, margin: '0 0 24px' }}>Tabular numerals · 3 weights (400/600/700) · German diacritics tested</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {samples.map(([label, t, sample]) => (
          <div key={label} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, alignItems: 'baseline' }}>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: MB.ink.tertiary, paddingTop: 6 }}>{label}</div>
            <div style={{ fontSize: t.size, fontWeight: t.weight, lineHeight: t.line, letterSpacing: t.tracking, color: MB.ink.primary, fontVariantNumeric: 'tabular-nums', textTransform: label.includes('Micro') ? 'uppercase' : 'none' }}>
              {sample}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 32, padding: 20, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: MB.ink.tertiary, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 12 }}>Tabular numerals · numerische Lesbarkeit</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, fontFamily: MB.font, fontVariantNumeric: 'tabular-nums' }}>
          <div><div style={{ fontSize: 12, color: MB.ink.tertiary }}>Honorar</div><div style={{ fontSize: 22, fontWeight: 600 }}>€ 1.480,00</div></div>
          <div><div style={{ fontSize: 12, color: MB.ink.tertiary }}>Datum</div><div style={{ fontSize: 22, fontWeight: 600 }}>18. 08. 2026</div></div>
          <div><div style={{ fontSize: 12, color: MB.ink.tertiary }}>Bewertung</div><div style={{ fontSize: 22, fontWeight: 600 }}>4,87 (28)</div></div>
        </div>
      </div>
    </div>
  );
}

function FoundationShape() {
  return (
    <div style={{ padding: 28, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', fontFamily: MB.font, overflow: 'auto' }}>
      <h2 style={{ fontSize: 24, fontWeight: 700, color: MB.ink.primary, margin: '0 0 4px', letterSpacing: -0.3 }}>Shape · Elevation · Motion</h2>
      <p style={{ fontSize: 14, color: MB.ink.secondary, margin: '0 0 24px' }}>Restrained shadows · two elevation levels max</p>

      <Section title="Radius">
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          {Object.entries(MB.radius).map(([k,v]) => (
            <div key={k} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 64, height: 64, background: MB.brand[100], borderRadius: v, border: `1px solid ${MB.brand[100]}` }} />
              <div style={{ fontSize: 11, color: MB.ink.tertiary, fontFamily: 'ui-monospace, monospace' }}>{k} · {v}{typeof v === 'number' ? 'px' : ''}</div>
            </div>
          ))}
        </div>
      </Section>

      <Section title="Elevation">
        <div style={{ display: 'flex', gap: 16 }}>
          <div style={{ width: 130, height: 80, background: '#fff', borderRadius: 12, boxShadow: MB.shadow.card, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: MB.ink.tertiary, fontFamily: 'ui-monospace, monospace' }}>card</div>
          <div style={{ width: 130, height: 80, background: '#fff', borderRadius: 12, boxShadow: MB.shadow.card2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: MB.ink.tertiary, fontFamily: 'ui-monospace, monospace' }}>card·hover</div>
          <div style={{ width: 130, height: 80, background: '#fff', borderRadius: 12, boxShadow: MB.shadow.pop, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: MB.ink.tertiary, fontFamily: 'ui-monospace, monospace' }}>popover</div>
        </div>
      </Section>

      <Section title="Spacing scale">
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
          {[4,8,12,16,20,24,32,40,56].map(s => (
            <div key={s} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 22, height: s, background: MB.brand[600], borderRadius: 3 }} />
              <div style={{ fontSize: 10, color: MB.ink.tertiary, fontFamily: 'ui-monospace, monospace' }}>{s}</div>
            </div>
          ))}
        </div>
      </Section>

      <Section title="Motion">
        <div style={{ display: 'flex', gap: 14, fontSize: 13, color: MB.ink.secondary, fontFamily: MB.font }}>
          <div><b style={{ color: MB.ink.primary }}>fast</b> · 120 ms · chip / toggle</div>
          <div><b style={{ color: MB.ink.primary }}>base</b> · 180 ms · sheet / nav</div>
          <div><b style={{ color: MB.ink.primary }}>slow</b> · 240 ms · large overlays</div>
        </div>
        <div style={{ marginTop: 12, fontSize: 12, color: MB.ink.tertiary, fontFamily: 'ui-monospace, monospace' }}>ease: cubic-bezier(0.2, 0.7, 0.3, 1) · no bounce, no overshoot</div>
      </Section>
    </div>
  );
}

function FoundationComponents() {
  return (
    <div style={{ padding: 28, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', fontFamily: MB.font, overflow: 'auto' }}>
      <h2 style={{ fontSize: 24, fontWeight: 700, color: MB.ink.primary, margin: '0 0 24px', letterSpacing: -0.3 }}>Components</h2>

      <Section title="Buttons">
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <Button kind="primary">Vertretung veröffentlichen</Button>
          <Button kind="primary" tone={MB.vertretung}>Bewerben</Button>
          <Button kind="primary" tone={MB.ausbildung}>Bewerben</Button>
          <Button kind="secondary">Profil ansehen</Button>
          <Button kind="soft" tone={MB.brand}>Entwurf speichern</Button>
          <Button kind="ghost">Abbrechen</Button>
          <Button kind="danger">Absagen</Button>
          <Button kind="primary" disabled>Bewerben</Button>
        </div>
      </Section>

      <Section title="Chips · Tags">
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
          <TypePill type="Vertretung" />
          <TypePill type="Vertretung" strong />
          <TypePill type="Ausbildung" subtype="KPJ-Stelle" />
          <TypePill type="Ausbildung" subtype="Lehrpraxis AM" strong />
          <Chip tone="success" leading={<Icon name="check" size={12} />}>Bestätigt</Chip>
          <Chip tone="warning" leading={<Icon name="alert" size={12} />}>Dringend</Chip>
          <Chip tone="danger">Abgesagt</Chip>
          <Chip tone="brand">Pro</Chip>
          <Chip tone="neutral">Ausstehend</Chip>
        </div>
        <div style={{ marginTop: 12, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <CareerChip stage="KPJ" />
          <CareerChip stage="AssistAM" />
          <CareerChip stage="AssistSF" />
          <CareerChip stage="Niedergelassen" />
          <CareerChip stage="Spitalsarzt" />
        </div>
      </Section>

      <Section title="Inputs">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 320 }}>
          <Input leading={<Icon name="search" size={16} />} placeholder="Praxis, Region, Sonderfach …" />
          <Input leading={<Icon name="calendar" size={16} />} placeholder="Zeitraum wählen" />
          <Segmented value="Anbieten" onChange={()=>{}} options={[{value:'Anbieten',label:'Anbieten'},{value:'Suchen',label:'Suchen'}]} />
        </div>
      </Section>

      <Section title="Avatars & verification">
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <Avatar name="Sabine Hofer" size={48} verified />
          <Avatar name="Michael Berger" size={40} verified />
          <Avatar name="Lena Weiss" size={36} />
          <VerifiedBadge size={22} />
          <Chip tone="success" size="md" leading={<Icon name="badge-check" size={14} />}>ID Austria</Chip>
        </div>
      </Section>

      <Section title="Sponsored vs Editorial — clearly fenced">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <NewsCard item={SAMPLE.news[0]} />
          <SponsoredCard item={SAMPLE.news[2]} />
        </div>
      </Section>
    </div>
  );
}

function Grid({ children }) {
  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 12 }}>{children}</div>;
}
function Section({ title, subtitle, children }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <h3 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, margin: '0 0 4px' }}>{title}</h3>
      {subtitle && <p style={{ fontSize: 13, color: MB.ink.secondary, margin: '0 0 10px' }}>{subtitle}</p>}
      {!subtitle && <div style={{ height: 8 }} />}
      {children}
    </div>
  );
}

Object.assign(window, { FoundationColors, FoundationType, FoundationShape, FoundationComponents });