// MedBridge — screens for the iOS prototype.

const { useState: useS } = React;

// Bottom tab bar — role-based. Hosts see "Inserate" (their own listings + applicants),
// searchers see "Suchen". KPJ students see "Suchen". The second slot adapts.
function TabBar({ active, onChange, unread = 0, persona }) {
  const isHost = persona && persona.canHost;
  const tabs = [
    { id: 'home',     icon: 'home',    label: 'Start' },
    isHost
      ? { id: 'listings', icon: 'briefcase', label: 'Inserate' }
      : { id: 'discover', icon: 'search',    label: 'Suchen' },
    { id: 'calendar', icon: 'calendar', label: 'Kalender' },
    { id: 'news',     icon: 'news',    label: 'News' },
    { id: 'chats',    icon: 'message', label: 'Chat', badge: unread },
    { id: 'profile',  icon: 'user',    label: 'Profil' },
  ];
  return (
    <div className="mb-tabbar" style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(16px)',
      borderTop: `1px solid ${MB.line.hair}`, zIndex: 40,
      display: 'flex', padding: '6px 4px 28px',
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            flex: 1, border: 'none', background: 'transparent', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '8px 2px',
            color: isActive ? MB.brand[700] : MB.ink.secondary,
          }}>
            <span style={{
              width: 48, height: 30, borderRadius: 999,
              background: isActive ? MB.brand[50] : 'transparent',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
              transition: 'background 120ms ease-out',
            }}>
              <Icon name={t.icon} size={22} stroke={isActive ? 2 : 1.6} />
              {t.badge > 0 && (
                <span style={{
                  position: 'absolute', top: -2, right: 6,
                  minWidth: 18, height: 18, borderRadius: 999, padding: '0 5px',
                  background: MB.danger[600], color: '#fff',
                  fontFamily: MB.font, fontSize: 11, fontWeight: 700,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  border: '2px solid #fff', boxSizing: 'content-box',
                  fontVariantNumeric: 'tabular-nums',
                }}>{t.badge}</span>
              )}
            </span>
            <span style={{ fontFamily: MB.font, fontSize: 10.5, fontWeight: isActive ? 700 : 600, letterSpacing: -0.1 }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// Top app header — simple greeting + bell. No more mode toggle here.
function ScreenHeader({ persona }) {
  return (
    <div className="mb-header" style={{ padding: '52px 20px 12px', background: MB.surface.canvas, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary, fontWeight: 500 }}>Guten Tag,</div>
          <div style={{ fontFamily: MB.font, fontSize: 24, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4 }}>{persona.name}</div>
        </div>
        <span style={{ width: 44, height: 44, borderRadius: 999, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <Icon name="bell" size={22} color={MB.ink.secondary} />
          <span style={{ position: 'absolute', top: 10, right: 11, width: 9, height: 9, borderRadius: 999, background: MB.danger[600], border: '2px solid #fff' }} />
        </span>
      </div>
    </div>
  );
}

// Home — Anbieten view (host)
function HomeAnbieten({ persona, onOpen }) {
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 100 }}>
      <SectionTitle>Schnellaktionen</SectionTitle>
      <div style={{ padding: '0 20px', display: 'flex', gap: 12, marginBottom: 28 }}>
        <Quicklink type="Vertretung" label="Vertretung anbieten" sub="Praxis abdecken lassen" />
        {persona.hasBefugnis && <Quicklink type="Ausbildung" label="Ausbildungsstelle anbieten" sub="KPJ · Lehrpraxis" />}
      </div>

      <SectionTitle action="Alle ansehen">Anstehende Buchungen</SectionTitle>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
        <BookingCard booking={{
          type: 'Vertretung', title: 'Dr. M. Berger vertritt Praxis Hofer',
          dateRange: 'Mo 18. — Fr 29. Aug 2026', location: '1080 Wien', status: 'Bestätigt',
        }} />
      </div>

      <SectionTitle action="Verwalten">Offene Inserate</SectionTitle>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div onClick={() => onOpen && onOpen('a1')} style={{ cursor: 'pointer' }}>
          <ListingCardAusbildung listing={{
            ...SAMPLE.ausbildungen[0],
          }} density="compact" />
          <div style={{ marginTop: 8, padding: '8px 12px', background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="users" size={15} color={MB.ausbildung[600]} />
              <strong style={{ color: MB.ink.primary, fontWeight: 600 }}>4 Bewerbungen</strong> · 2 neu
            </span>
            <span style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: MB.brand[600] }}>Prüfen ›</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Home — one unified screen. No mode toggle.
// Shows the user's primary actions, today's bookings, own listings (if host),
// recommended listings, and a news teaser. Everything reachable in one tap.
// ─────────────────────────────────────────────────────────────
function HomeUnified({ persona, onOpenListing, onOpenApplicants, onOpenChats, onNewListing, onOpenCalendar }) {
  const isKPJ = persona.stage === 'KPJ';
  const canHost = persona.canHost;
  const recos = isKPJ
    ? SAMPLE.ausbildungen.slice(0, 2)
    : [SAMPLE.vertretungen[0], SAMPLE.ausbildungen[0]];

  // Big action tiles — role-based. Hosts only see "offer" actions; searchers only see "search" actions.
  const actions = [];
  if (canHost) {
    actions.push({ type: 'Vertretung',  side: 'offer',  label: 'Vertretung\nanbieten',     sub: 'Praxis abdecken lassen', icon: 'plus' });
    if (persona.hasBefugnis) {
      actions.push({ type: 'Ausbildung', side: 'offer', label: 'Ausbildungsstelle\nanbieten', sub: 'KPJ \u00b7 Lehrpraxis', icon: 'plus' });
    }
  } else {
    if (!isKPJ) {
      actions.push({ type: 'Vertretung', side: 'search', label: 'Vertretung\nsuchen', sub: 'Termine \u00b7 Region', icon: 'search' });
    }
    actions.push({ type: 'Ausbildung', side: 'search', label: isKPJ ? 'KPJ-Stelle\nfinden' : 'Ausbildung\nfinden', sub: 'Lehrpraxis \u00b7 KPJ', icon: 'search' });
  }

  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110 }}>

      {/* PRIMARY ACTIONS — the first thing the user sees after the greeting */}
      <SectionTitle>Was möchten Sie tun?</SectionTitle>
      <div style={{ padding: '0 20px 28px', display: 'grid', gridTemplateColumns: actions.length === 3 ? '1fr 1fr 1fr' : '1fr 1fr', gap: 10 }}>
        {actions.map((a, i) => (
          <BigActionTile key={i} {...a}
            onClick={() => {
              if (a.disabled) return;
              if (a.side === 'offer') onNewListing && onNewListing(a.type);
              else onOpenListing && onOpenListing(null, a.type); // null id → discover filtered
            }}
          />
        ))}
      </div>

      {/* TODAY & UPCOMING — combined host + searcher bookings */}
      <SectionTitle action="Kalender ›" onActionClick={onOpenCalendar}>Heute & demnächst</SectionTitle>
      <div style={{ padding: '0 20px 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {canHost && (
          <BookingCard booking={{
            type: 'Vertretung', role: 'host',
            title: 'Dr. M. Berger vertritt Ihre Praxis',
            dateRange: 'Mo 18. — Fr 29. Aug 2026', location: '1080 Wien', status: 'Bestätigt',
          }} />
        )}
        {!canHost && !isKPJ && (
          <BookingCard booking={{
            type: 'Vertretung', role: 'searcher',
            title: 'Vertretung Praxis Dr. Wallner',
            dateRange: 'Di 9. — Fr 12. Sep 2026', location: '1180 Wien', status: 'Heute',
          }} />
        )}
        {isKPJ && (
          <BookingCard booking={{
            type: 'Ausbildung', role: 'searcher',
            title: 'KPJ-Tertial AM · Praxis Hofer',
            dateRange: 'Okt 2026 — Jän 2027', location: '1080 Wien', status: 'Bestätigt',
          }} />
        )}
      </div>

      {/* OWN LISTINGS — only for hosts. Tap → applicants. */}
      {canHost && (
        <>
          <SectionTitle action="Verwalten ›">Ihre Inserate</SectionTitle>
          <div style={{ padding: '0 20px 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div onClick={() => onOpenApplicants && onOpenApplicants(SAMPLE.ausbildungen[0].id)} style={{ cursor: 'pointer' }}>
              <ListingCardAusbildung listing={SAMPLE.ausbildungen[0]} density="compact" />
              <ApplicantsHint count={4} fresh={2} tone="ausbildung" />
            </div>
          </div>
        </>
      )}

      {/* RECOMMENDATIONS — what we'd surface in the old "Suchen" mode */}
      <SectionTitle action="Alle ansehen ›">Empfehlungen für Sie</SectionTitle>
      <div style={{ padding: '0 20px 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {recos.map(l => {
          const ineligible = isKPJ && l.type === 'Vertretung';
          return (
            <div key={l.id} onClick={() => !ineligible && onOpenListing && onOpenListing(l.id)} style={{ cursor: ineligible ? 'default' : 'pointer' }}>
              <ListingCard listing={l} density="compact"
                greyed={ineligible}
                greyReason={ineligible ? 'Für Assistenzärzte und Niedergelassene' : undefined} />
            </div>
          );
        })}
      </div>

      {/* NEWS TEASER — keep secondary, since we dropped the dedicated tab */}
      <SectionTitle action="Alle Beiträge ›">Aus der Ärztekammer</SectionTitle>
      <div style={{ padding: '0 20px' }}>
        <NewsCard item={SAMPLE.news.find(n => n.kind === 'editorial')} compact />
      </div>
    </div>
  );
}

// Big action tile — large, labeled, color-coded by Angebotstyp.
function BigActionTile({ type, side, label, sub, icon, disabled, onClick }) {
  const c = type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
  return (
    <button onClick={onClick} disabled={disabled} className="mb-action-tile" style={{
      textAlign: 'left', cursor: disabled ? 'default' : 'pointer', border: 'none',
      background: disabled ? MB.surface.canvas2 : c[50],
      borderTop: `4px solid ${disabled ? MB.line.border : c[600]}`,
      borderRadius: 14, padding: '14px 14px 16px',
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8,
      minHeight: 130, opacity: disabled ? 0.55 : 1,
      boxShadow: disabled ? 'none' : MB.shadow.card,
    }}>
      <span style={{ width: 32, height: 32, borderRadius: 8, background: disabled ? MB.surface.raised : c[600], color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icon} size={18} color="#fff" />
      </span>
      <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: disabled ? MB.ink.tertiary : c[700], lineHeight: 1.2, whiteSpace: 'pre-line', letterSpacing: -0.1 }}>{label}</div>
      <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, marginTop: -2 }}>{sub}</div>
    </button>
  );
}

function ApplicantsHint({ count, fresh, tone }) {
  const c = tone === 'ausbildung' ? MB.ausbildung : MB.vertretung;
  return (
    <div style={{ marginTop: 8, padding: '10px 12px', background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <span style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="users" size={15} color={c[600]} />
        <strong style={{ color: MB.ink.primary, fontWeight: 600 }}>{count} Bewerbungen</strong>
        {fresh > 0 && <span style={{ color: c[700] }}>· {fresh} neu</span>}
      </span>
      <span style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: MB.brand[600] }}>Prüfen ›</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Chat list — first-class tab so messages are always one tap away.
// ─────────────────────────────────────────────────────────────
function ChatList({ onOpenThread }) {
  const threads = SAMPLE.threads || [];
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110 }}>
      <div className="mb-header" style={{ padding: '52px 20px 8px' }}>
        <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0 }}>Nachrichten</h1>
        <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary }}>{threads.filter(t=>t.unread>0).length} ungelesen · {threads.length} Konversationen</div>
      </div>
      <div style={{ padding: '12px 20px 0' }}>
        <Input leading={<Icon name="search" size={16} />} placeholder="Konversation, Person, Inserat …" />
      </div>
      <div style={{ marginTop: 12, background: MB.surface.raised, borderTop: `1px solid ${MB.line.hair}`, borderBottom: `1px solid ${MB.line.hair}` }}>
        {threads.map((t, i) => {
          const c = t.type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
          return (
            <div key={t.id} onClick={() => onOpenThread && onOpenThread(t)}
              style={{ cursor: 'pointer', display: 'flex', gap: 12, padding: '14px 20px',
                       borderBottom: i === threads.length - 1 ? 'none' : `1px solid ${MB.line.hair}`,
                       background: t.unread > 0 ? c[50] : 'transparent' }}>
              <div style={{ position: 'relative' }}>
                <Avatar name={t.partner.name} size={48} verified={t.partner.verified} />
                <span style={{ position: 'absolute', bottom: -2, right: -2, width: 18, height: 18, borderRadius: 999, background: c[600], border: '2px solid #fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={t.type === 'Vertretung' ? 'stethoscope' : 'graduation'} size={10} color="#fff" />
                </span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: MB.font, fontSize: 15, fontWeight: t.unread > 0 ? 700 : 600, color: MB.ink.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.partner.name}</span>
                  <span style={{ fontFamily: MB.font, fontSize: 12, color: t.unread > 0 ? c[700] : MB.ink.tertiary, fontWeight: t.unread > 0 ? 700 : 500, flex: 'none' }}>{t.time}</span>
                </div>
                <div style={{ marginTop: 2, fontFamily: MB.font, fontSize: 12, color: c[700], fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {t.listing.title}
                </div>
                <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontFamily: MB.font, fontSize: 13, color: t.unread > 0 ? MB.ink.primary : MB.ink.secondary, fontWeight: t.unread > 0 ? 600 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, minWidth: 0 }}>{t.last}</span>
                  {t.unread > 0 && (
                    <span style={{ minWidth: 20, height: 20, borderRadius: 999, padding: '0 6px', background: c[600], color: '#fff', fontFamily: MB.font, fontSize: 11, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontVariantNumeric: 'tabular-nums' }}>{t.unread}</span>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// Home — Suchen view (searcher)
function HomeSuchen({ persona, onOpen }) {
  const isKPJ = persona.stage === 'KPJ';
  const listings = isKPJ ? SAMPLE.ausbildungen : SAMPLE.vertretungen;
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 100 }}>
      <SectionTitle>Schnellaktionen</SectionTitle>
      <div style={{ padding: '0 20px', display: 'flex', gap: 12, marginBottom: 28 }}>
        {!isKPJ && <Quicklink type="Vertretung" label="Vertretungen finden" sub="Termine, Region, Fach" />}
        <Quicklink type="Ausbildung" label={isKPJ ? 'KPJ-Stellen finden' : 'Ausbildungsstellen finden'} sub={isKPJ ? 'Lehrpraxis · KPJ' : 'Lehrpraxis · KPJ'} />
      </div>

      <SectionTitle action="Suche speichern">{isKPJ ? 'Passende Ausbildungsstellen' : 'Passende Vertretungen'}</SectionTitle>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
        {listings.slice(0, 2).map(l => (
          <div key={l.id} onClick={() => onOpen && onOpen(l.id)} style={{ cursor: 'pointer' }}>
            <ListingCard listing={l} density="compact" />
          </div>
        ))}
      </div>

      <SectionTitle action="Alle">Kalender · diese Woche</SectionTitle>
      <div style={{ padding: '0 20px' }}>
        <div style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, padding: 14, boxShadow: MB.shadow.card }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6, fontFamily: MB.font, fontSize: 11, color: MB.ink.tertiary, fontWeight: 600, marginBottom: 6 }}>
            {['Mo','Di','Mi','Do','Fr','Sa','So'].map((d,i) => (
              <div key={d} style={{ textAlign: 'center' }}>
                <div>{d}</div>
                <div style={{ marginTop: 4, fontSize: 14, color: MB.ink.primary, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{11+i}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6, marginTop: 6 }}>
            {[null,null,'V','V',null,null,null].map((c,i) => (
              <div key={i} style={{ height: 24, borderRadius: 6, background: c === 'V' ? MB.vertretung[100] : 'transparent', border: c === 'V' ? `1px solid ${MB.vertretung[600]}` : 'none' }} />
            ))}
            {[null,null,null,null,'A','A','A'].map((c,i) => (
              <div key={'b'+i} style={{ height: 24, borderRadius: 6, background: c === 'A' ? MB.ausbildung[100] : 'transparent', border: c === 'A' ? `1px solid ${MB.ausbildung[600]}` : 'none' }} />
            ))}
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 14, fontFamily: MB.font, fontSize: 12, color: MB.ink.secondary }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: MB.vertretung[600] }} />Vertretung</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: MB.ausbildung[600] }} />Ausbildung</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Discover (searcher)
function DiscoverSearch({ persona, onOpen }) {
  const [filter, setFilter] = useS(['Vertretung','Ausbildung']);
  const [showFilter, setShowFilter] = useS(false);
  const all = [...SAMPLE.vertretungen, ...SAMPLE.ausbildungen]
    .filter(l => filter.includes(l.type))
    .sort((a,b) => (a.urgent ? -1 : 1));
  const isKPJ = persona.stage === 'KPJ';

  return (
    <div style={{ background: MB.surface.canvas, minHeight: '100%', paddingBottom: 100 }}>
      <div style={{ padding: '52px 20px 8px', background: MB.surface.canvas, position: 'sticky', top: 0, zIndex: 5 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0 }}>Suchen</h1>
          <button onClick={() => setShowFilter(true)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, color: MB.brand[700], fontFamily: MB.font, fontSize: 15, fontWeight: 600 }}>
            <Icon name="sliders" size={18} />Filter
          </button>
        </div>
        <Input leading={<Icon name="search" size={18} />} placeholder="Praxis, Region, Sonderfach …" />
        <div style={{ marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <span onClick={() => setFilter(f => f.includes('Vertretung') ? f.filter(x => x !== 'Vertretung') : [...f, 'Vertretung'])} style={{ cursor: 'pointer' }}>
            <Chip tone="vertretung" strong={filter.includes('Vertretung')} size="md"
              leading={<Icon name={filter.includes('Vertretung') ? 'check' : 'stethoscope'} size={14} />}>
              Vertretung
            </Chip>
          </span>
          <span onClick={() => setFilter(f => f.includes('Ausbildung') ? f.filter(x => x !== 'Ausbildung') : [...f, 'Ausbildung'])} style={{ cursor: 'pointer' }}>
            <Chip tone="ausbildung" strong={filter.includes('Ausbildung')} size="md"
              leading={<Icon name={filter.includes('Ausbildung') ? 'check' : 'graduation'} size={14} />}>
              Ausbildung
            </Chip>
          </span>
          <Chip size="md" tone="neutral" leading={<Icon name="pin" size={14} />}>Wien</Chip>
          <Chip size="md" tone="neutral" leading={<Icon name="calendar" size={14} />}>Aug–Sep</Chip>
        </div>
      </div>
      <div style={{ padding: '8px 20px 0', fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary }}>{all.length} Inserate · sortiert nach Dringlichkeit</div>
      <div style={{ padding: '12px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {all.map(l => {
          const ineligible = isKPJ && l.type === 'Vertretung';
          return (
            <div key={l.id} onClick={() => !ineligible && onOpen && onOpen(l.id)} style={{ cursor: ineligible ? 'default' : 'pointer' }}>
              <ListingCard listing={l} density="compact"
                greyed={ineligible}
                greyReason={ineligible ? 'Für Assistenzärzte und Niedergelassene — Ihr Status: KPJ-Studierende' : undefined}
              />
            </div>
          );
        })}
      </div>

      {showFilter && <FilterSheet onClose={() => setShowFilter(false)} />}
    </div>
  );
}

function FilterSheet({ onClose }) {
  const [types, setTypes] = useS(['Vertretung']);
  const tog = (t) => setTypes(x => x.includes(t) ? x.filter(y=>y!==t) : [...x,t]);
  return (
    <div style={{ position: 'absolute', inset: 0, background: MB.surface.overlay, zIndex: 60, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div style={{ background: MB.surface.canvas, borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: '12px 0 30px', maxHeight: '88%', overflow: 'auto' }}>
        <div style={{ width: 44, height: 5, background: MB.line.border, borderRadius: 3, margin: '4px auto 12px' }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px 8px' }}>
          <h2 style={{ fontFamily: MB.font, fontSize: 20, fontWeight: 700, color: MB.ink.primary, margin: 0, letterSpacing: -0.2 }}>Filter</h2>
          <button onClick={onClose} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: MB.brand[700], fontFamily: MB.font, fontSize: 15, fontWeight: 600 }}>Zurücksetzen</button>
        </div>
        <div style={{ padding: '12px 20px 0' }}>
          <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 10 }}>Angebotstyp</div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
            <span onClick={() => tog('Vertretung')} style={{ cursor: 'pointer' }}>
              <Chip tone="vertretung" strong={types.includes('Vertretung')} size="lg" leading={<Icon name="stethoscope" size={16} />}>Vertretung</Chip>
            </span>
            <span onClick={() => tog('Ausbildung')} style={{ cursor: 'pointer' }}>
              <Chip tone="ausbildung" strong={types.includes('Ausbildung')} size="lg" leading={<Icon name="graduation" size={16} />}>Ausbildungsstelle</Chip>
            </span>
          </div>

          <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 10 }}>Region</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
            {['Wien','Niederösterreich','Burgenland','Steiermark','Salzburg','OÖ','Tirol','Kärnten','Vorarlberg'].map(r => (
              <Chip key={r} tone="neutral" size="md">{r}</Chip>
            ))}
          </div>

          <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 10 }}>Fach</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
            {Object.keys(MB.specialty).filter(k => k !== 'default').slice(0,8).map(s => (
              <Chip key={s} tone="neutral" size="md">{s}</Chip>
            ))}
          </div>

          {types.includes('Vertretung') && (
            <>
              <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 10 }}>Zeitraum (Vertretung)</div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
                <Input placeholder="Von" leading={<Icon name="calendar" size={16} />} />
                <Input placeholder="Bis" />
              </div>
            </>
          )}
          {types.includes('Ausbildung') && (
            <>
              <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 10 }}>Subtyp (Ausbildung)</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
                {['KPJ-Stelle','Lehrpraxis AM','Lehrpraxis Sonderfach'].map(s => <Chip key={s} tone="ausbildung" size="md">{s}</Chip>)}
              </div>
            </>
          )}
          <Button kind="primary" full size="lg" onClick={onClose}>342 Ergebnisse anzeigen</Button>
        </div>
      </div>
    </div>
  );
}

// Listing detail — clean, minimal redesign.
// Removes the gradient hero, simplifies the facts layout, and uses a clear
// section rhythm with breathing room.
function ListingDetail({ listing, onBack, onApply, eligible = true, onWhy, onOpenPractice }) {
  const isV = listing.type === 'Vertretung';
  const t = isV ? MB.vertretung : MB.ausbildung;
  const [saved, setSaved] = useS(false);
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 120, position: 'relative', minHeight: '100%' }}>
      {/* Floating header — translucent, sticky */}
      <div style={{ position: 'sticky', top: 0, zIndex: 10, padding: '50px 16px 12px', background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)', borderBottom: `1px solid ${MB.line.hair}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={onBack} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 6, marginLeft: -6, display: 'inline-flex', alignItems: 'center', color: MB.brand[700] }}>
          <Icon name="chevron-l" size={24} />
        </button>
        <div style={{ flex: 1, fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: MB.ink.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{listing.title}</div>
        <button onClick={() => setSaved(s => !s)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 6 }}>
          <Icon name={saved ? 'bookmark-filled' : 'bookmark'} size={22} color={saved ? t[600] : MB.ink.secondary} />
        </button>
      </div>

      {/* Clean photo placeholder — single tinted block, no gradient/stripes */}
      <div style={{ margin: '16px 20px 0', height: 168, borderRadius: 14, background: t[50], border: `1px solid ${t[100]}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 6 }}>
          <Icon name="image" size={28} color={t[600]} />
          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: 1, color: t[700], textTransform: 'uppercase', fontWeight: 600 }}>Praxisfoto</span>
        </div>
      </div>

      {/* Meta block — type pill, title, location. Generous whitespace. */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', marginBottom: 12 }}>
          <TypePill type={listing.type} subtype={listing.subtype} size="md" />
          {listing.urgent && <Chip tone="warning" size="sm" leading={<Icon name="alert" size={12} />}>Dringend</Chip>}
        </div>
        <h1 style={{ fontFamily: MB.font, fontSize: 26, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0, lineHeight: 1.2 }}>{listing.title}</h1>
        <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 8, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary }}>
          <Icon name="pin" size={15} color={MB.ink.tertiary} />
          <span>{listing.location}</span>
          <span style={{ color: MB.ink.tertiary }}>·</span>
          <span style={{ color: t[700], fontWeight: 600 }}>{listing.specialty || listing.sonderfach}</span>
        </div>
      </div>

      {/* Key facts — clean typographic table, no card */}
      <div style={{ margin: '24px 20px 0', padding: '4px 0', borderTop: `1px solid ${MB.line.hair}`, borderBottom: `1px solid ${MB.line.hair}` }}>
        <DetailRow icon="calendar" label={isV ? 'Zeitraum' : 'Rotation & Start'}
          value={isV ? listing.dateRange : `${listing.rotation} · ${listing.start}`} />
        <DetailRow icon="euro" label={isV ? 'Honorar' : 'Stipendium'}
          value={isV ? listing.rate : listing.stipendium} />
        <DetailRow icon="clock" label="Praxiszeiten" value="Mo–Fr · 08:00–17:00" last />
      </div>

      {/* Ausbildungsbefugnis — only for Ausbildung. Quiet tinted block. */}
      {!isV && (
        <div style={{ margin: '24px 20px 0' }}>
          <SectionLabel>Ausbildungsbefugnis</SectionLabel>
          <div style={{ marginTop: 8, background: t[50], border: `1px solid ${t[100]}`, borderRadius: 12, padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <Icon name="badge-check" size={16} color={t[600]} />
              <span style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, color: t[700] }}>ÖÄK verifiziert</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontFamily: MB.font, fontSize: 13 }}>
              <div><div style={{ color: MB.ink.tertiary, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.4 }}>Plätze</div><div style={{ marginTop: 2, color: MB.ink.primary, fontWeight: 600 }}>1 frei · 2 gesamt</div></div>
              <div><div style={{ color: MB.ink.tertiary, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.4 }}>Lehrstruktur</div><div style={{ marginTop: 2, color: MB.ink.primary, fontWeight: 600 }}>Wöchentl. Mentoring</div></div>
            </div>
          </div>
        </div>
      )}

      {/* Praxis-Ausstattung — simpler 2-col list, not heavy tiles */}
      <div style={{ margin: '24px 20px 0' }}>
        <SectionLabel>Praxis-Ausstattung</SectionLabel>
        <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 16, rowGap: 14 }}>
          <FactLine icon="car"        label="Parken"        value="Hofparkplatz" />
          <FactLine icon="train"      label="ÖPNV"          value="U6 · 3 Min" />
          <FactLine icon="wheelchair" label="Barrierefrei"  value="Lift vorhanden" />
          <FactLine icon="monitor"    label="IT-System"     value="Innomed NOVA" />
          <FactLine icon="language"   label="Sprachen"      value="DE · EN · BS" />
          <FactLine icon="users"      label="Team"          value="2 Ärzt:innen · 3 DGKP" />
          <FactLine icon="bed"        label="Übernachtung"  value="Apartment 25 m²" highlight={t} />
          <FactLine icon="syringe"    label="Geräte"        value="EKG · Spiro · Sono" />
        </div>
      </div>

      {/* Host card */}
      <div style={{ margin: '28px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
          <SectionLabel>Gastgeber:in & Praxis</SectionLabel>
          {onOpenPractice && (
            <span onClick={onOpenPractice} style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: MB.brand[600], cursor: 'pointer' }}>
              Praxisprofil ansehen ›
            </span>
          )}
        </div>
        <DoctorCard doctor={{ name: listing.host, stage: 'Niedergelassen', verified: true, rating: 4.9, ratings: 28,
          context: `${listing.hostPractice} · Allgemeinmedizin · Wahlarzt · seit 2014` }} />
      </div>

      {/* Apply bar */}
      <div style={{ position: 'sticky', bottom: 0, marginTop: 28, padding: '14px 20px 30px', background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(16px)', borderTop: `1px solid ${MB.line.hair}` }}>
        {eligible ? (
          <Button kind="primary" tone={t} full size="lg" onClick={onApply}>
            Bewerben · {isV ? 'Vertretung' : 'Ausbildungsstelle'}
          </Button>
        ) : (
          <div style={{ display: 'flex', gap: 10, padding: '12px 14px', background: MB.surface.canvas2, borderRadius: 12, alignItems: 'flex-start' }}>
            <Icon name="info" size={18} color={MB.ink.secondary} />
            <div style={{ flex: 1, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, lineHeight: 1.45 }}>
              Für Assistenzärzte und Niedergelassene · Ihr Status: KPJ-Studierende
              <span onClick={onWhy} style={{ marginLeft: 6, color: MB.brand[600], fontWeight: 600, cursor: 'pointer' }}>Mehr erfahren</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function SectionLabel({ children }) {
  return <div style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary }}>{children}</div>;
}

function DetailRow({ icon, label, value, last }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: last ? 'none' : `1px solid ${MB.line.hair}` }}>
      <span style={{ width: 32, height: 32, borderRadius: 8, background: MB.surface.canvas2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
        <Icon name={icon} size={16} color={MB.ink.secondary} />
      </span>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, fontWeight: 600 }}>{label}</div>
        <div style={{ marginTop: 1, fontFamily: MB.font, fontSize: 15, fontWeight: 600, color: MB.ink.primary, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      </div>
    </div>
  );
}

function FactLine({ icon, label, value, highlight }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
      <span style={{ width: 28, height: 28, borderRadius: 8, background: highlight ? highlight[50] : MB.surface.canvas2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
        <Icon name={icon} size={15} color={highlight ? highlight[700] : MB.ink.secondary} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: MB.font, fontSize: 11, color: MB.ink.tertiary, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.3 }}>{label}</div>
        <div style={{ marginTop: 1, fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: highlight ? highlight[700] : MB.ink.primary, lineHeight: 1.3 }}>{value}</div>
      </div>
    </div>
  );
}

// Apply success
function ApplySuccess({ listing, onChat, onDone }) {
  const t = listing.type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
  return (
    <div style={{ background: MB.surface.canvas, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '60px 20px 0' }}>
        <button onClick={onDone} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: MB.brand[700], fontFamily: MB.font, fontSize: 15, fontWeight: 600 }}>Schliessen</button>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px 24px', textAlign: 'center' }}>
        <div style={{ width: 80, height: 80, borderRadius: 999, background: t[50], display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, border: `2px solid ${t[100]}` }}>
          <Icon name="check" size={40} color={t[600]} stroke={2} />
        </div>
        <div style={{ fontFamily: MB.font, fontSize: 22, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, lineHeight: 1.2 }}>Bewerbung gesendet</div>
        <div style={{ marginTop: 8, fontFamily: MB.font, fontSize: 15, color: MB.ink.secondary, lineHeight: 1.45, maxWidth: 280 }}>
          {listing.host} sieht Ihre Bewerbung ab sofort. Antworten erscheinen im Chat.
        </div>
        <div style={{ marginTop: 24, padding: '12px 14px', background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, width: '100%', maxWidth: 320 }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
            <TypePill type={listing.type} subtype={listing.subtype} size="sm" />
          </div>
          <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: MB.ink.primary, textAlign: 'left' }}>{listing.title}</div>
          <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, textAlign: 'left' }}>{listing.location}</div>
        </div>
      </div>
      <div style={{ padding: '14px 20px 30px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Button kind="primary" full size="lg" tone={t} leading={<Icon name="message" size={18} color="#fff" />} onClick={onChat}>Chat öffnen</Button>
        <Button kind="ghost" full size="md" onClick={onDone}>Weiter suchen</Button>
      </div>
    </div>
  );
}

// Chat with structured offer card
function ChatScreen({ listing, partner, onBack, onCall }) {
  const t = listing.type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
  const who = partner || { name: listing.host, context: listing.hostPractice };
  return (
    <div style={{ background: MB.surface.canvas, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '52px 16px 12px', background: MB.surface.raised, borderBottom: `1px solid ${MB.line.hair}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={onBack} style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}>
          <Icon name="chevron-l" size={24} color={MB.brand[700]} />
        </button>
        <Avatar name={who.name} size={36} verified />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{who.name}</div>
          <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{who.context || who.stage}</div>
        </div>
        <button onClick={onCall} style={{ width: 40, height: 40, borderRadius: 999, background: MB.brand[700], border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="phone" size={18} color="#fff" />
        </button>
      </div>

      {/* listing context strip */}
      <div style={{ padding: '10px 16px', background: t[50], borderBottom: `1px solid ${t[100]}`, display: 'flex', alignItems: 'center', gap: 8 }}>
        <TypePill type={listing.type} subtype={listing.subtype} size="sm" />
        <span style={{ fontFamily: MB.font, fontSize: 13, color: t[700], fontWeight: 600, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{listing.title}</span>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px 16px 100px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Bubble who="them"><b>Guten Tag,</b><br/>vielen Dank für Ihre Bewerbung. Passen die Bedingungen so?</Bubble>

        {/* Structured offer card */}
        <div style={{ background: MB.surface.raised, border: `2px solid ${t[100]}`, borderRadius: 14, overflow: 'hidden', boxShadow: MB.shadow.card }}>
          <div style={{ padding: '10px 14px', background: t[50], borderBottom: `1px solid ${t[100]}`, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="file" size={16} color={t[700]} />
            <span style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, color: t[700], letterSpacing: -0.1 }}>Angebot · Version 1</span>
            <span style={{ marginLeft: 'auto', fontFamily: MB.font, fontSize: 11, color: MB.ink.tertiary }}>vor 4 Min</span>
          </div>
          <div style={{ padding: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <KV k="Zeitraum" v={listing.dateRange || `${listing.rotation} · ${listing.start}`} />
            <KV k="Stunden" v="8h / Tag" />
            <KV k="Honorar" v={listing.rate || listing.stipendium} />
            <KV k="Storno" v="bis 7 Tage" />
          </div>
          <div style={{ padding: '0 14px 14px', display: 'flex', gap: 8 }}>
            <Button kind="primary" full size="md" tone={t}>Annehmen</Button>
            <Button kind="secondary" size="md">Verhandeln</Button>
          </div>
        </div>

        <Bubble who="me">Passt soweit, ich würde gern um 9 Uhr starten statt 8.</Bubble>
        <Bubble who="them">Gerne. Versionsanpassung folgt.</Bubble>
      </div>

      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '10px 12px 30px', background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(12px)', borderTop: `1px solid ${MB.line.hair}`, display: 'flex', gap: 8, alignItems: 'center' }}>
        <Input placeholder="Nachricht …" style={{ flex: 1 }} />
        <button style={{ width: 44, height: 44, borderRadius: 999, background: MB.brand[700], border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <Icon name="send" size={20} color="#fff" />
        </button>
      </div>
    </div>
  );
}

function Bubble({ who, children }) {
  const me = who === 'me';
  return (
    <div style={{ display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start' }}>
      <div style={{
        maxWidth: '78%', padding: '10px 14px', borderRadius: 16,
        background: me ? MB.brand[700] : MB.surface.raised,
        color: me ? '#fff' : MB.ink.primary,
        border: me ? 'none' : `1px solid ${MB.line.hair}`,
        fontFamily: MB.font, fontSize: 15, lineHeight: 1.4,
        borderBottomRightRadius: me ? 4 : 16,
        borderBottomLeftRadius: me ? 16 : 4,
      }}>{children}</div>
    </div>
  );
}

function KV({ k, v }) {
  return (
    <div>
      <div style={{ fontFamily: MB.font, fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary }}>{k}</div>
      <div style={{ marginTop: 2, fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: MB.ink.primary, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
    </div>
  );
}

// News tab — editorial + Fortbildung + sponsored + urgent listings
function NewsFeed() {
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110 }}>
      <div className="mb-header" style={{ padding: '52px 20px 8px' }}>
        <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0 }}>News & Fortbildung</h1>
        <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary }}>Kuratiert von ÖÄK, MedUni und Fachredaktionen</div>
      </div>
      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 6, overflowX: 'auto' }}>
        {['Alle','Pharmakologie','Fortbildung','Recht','Berufspolitik','Dringend'].map((c,i) => (
          <button key={c} style={{ border: 'none', cursor: 'pointer', padding: '6px 12px', borderRadius: 999, background: i===0 ? MB.brand[700] : MB.surface.raised, color: i===0 ? '#fff' : MB.ink.secondary, fontFamily: MB.font, fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', boxShadow: i===0 ? 'none' : `inset 0 0 0 1px ${MB.line.hair}` }}>{c}</button>
        ))}
      </div>
      <div style={{ padding: '16px 20px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {SAMPLE.news.map((n,i) => {
          if (n.kind === 'training') return <TrainingCard key={i} item={n} />;
          if (n.kind === 'editorial') return <NewsCard key={i} item={n} />;
          if (n.kind === 'sponsored') return <SponsoredCard key={i} item={n} />;
          if (n.kind === 'urgent') {
            const t = n.listingType === 'Vertretung' ? MB.vertretung : MB.ausbildung;
            return (
              <div key={i} style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, overflow: 'hidden', boxShadow: MB.shadow.card, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: t[600] }} />
                <UrgencyStrip days={2} tone={n.listingType} />
                <div style={{ padding: '12px 14px 14px 18px' }}>
                  <TypePill type={n.listingType} size="sm" />
                  <div style={{ marginTop: 8, fontFamily: MB.font, fontSize: 16, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.15 }}>{n.text}</div>
                  <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary }}>{n.meta}</div>
                </div>
              </div>
            );
          }
          return null;
        })}
      </div>
    </div>
  );
}

function _NewsFeedOld() {
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 100 }}>
      <div className="mb-header" style={{ padding: '52px 20px 12px' }}>
        <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0 }}>News</h1>
      </div>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {SAMPLE.news.map((n,i) => {
          if (n.kind === 'editorial') return <NewsCard key={i} item={n} />;
          if (n.kind === 'sponsored') return <SponsoredCard key={i} item={n} />;
          if (n.kind === 'urgent') {
            const t = n.listingType === 'Vertretung' ? MB.vertretung : MB.ausbildung;
            return (
              <div key={i} style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, overflow: 'hidden', boxShadow: MB.shadow.card, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: t[600] }} />
                <UrgencyStrip days={2} tone={n.listingType} />
                <div style={{ padding: '12px 14px 14px 18px' }}>
                  <TypePill type={n.listingType} size="sm" />
                  <div style={{ marginTop: 8, fontFamily: MB.font, fontSize: 16, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.15 }}>{n.text}</div>
                  <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary }}>{n.meta}</div>
                </div>
              </div>
            );
          }
          return null;
        })}
      </div>
    </div>
  );
}

// Applicants list (host)
function Applicants({ listing, onBack }) {
  const isV = listing.type === 'Vertretung';
  const apps = isV ? SAMPLE.applicants : SAMPLE.applicantsAusbildung;
  const t = isV ? MB.vertretung : MB.ausbildung;
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 60 }}>
      <div style={{ padding: '52px 16px 12px', background: MB.surface.raised, borderBottom: `1px solid ${MB.line.hair}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={onBack} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 0 }}><Icon name="chevron-l" size={24} color={MB.brand[700]} /></button>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary }}>Bewerbungen für</div>
          <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{listing.title}</div>
        </div>
      </div>
      <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {apps.map((a,i) => (
          <DoctorCard key={i} doctor={a}
            action={<div style={{ display: 'flex', gap: 8 }}>
              <Button kind="primary" size="sm" tone={t} leading={<Icon name="message" size={14} color="#fff" />}>Chat öffnen</Button>
              <Button kind="secondary" size="sm">Profil ansehen</Button>
            </div>}
          />
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HostListings — second tab for hosts. Their own published listings
// with applicant counts. Tapping → applicants board.
// ─────────────────────────────────────────────────────────────
function HostListings({ persona, onOpenListing, onOpenApplicants, onNewListing }) {
  // Demo: hosts "own" the first ausbildung and first vertretung.
  const own = [
    { listing: SAMPLE.ausbildungen[0], applicants: 4, fresh: 2, status: 'Aktiv' },
    { listing: SAMPLE.vertretungen[0], applicants: 2, fresh: 1, status: 'Aktiv' },
  ];
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110 }}>
      <div style={{ padding: '52px 20px 12px', display: 'flex', alignItems: 'flex-end', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0 }}>Meine Inserate</h1>
          <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary }}>{own.length} aktiv · 6 Bewerbungen gesamt</div>
        </div>
        <button onClick={onNewListing} style={{ border: 'none', background: MB.brand[700], color: '#fff', padding: '10px 14px', borderRadius: 999, fontFamily: MB.font, fontSize: 14, fontWeight: 700, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="plus" size={16} color="#fff" /> Neu
        </button>
      </div>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {own.map((o, i) => {
          const tone = o.listing.type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
          return (
            <div key={i} style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, overflow: 'hidden', boxShadow: MB.shadow.card }}>
              <div onClick={() => onOpenListing && onOpenListing(o.listing.id)} style={{ cursor: 'pointer', padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <TypePill type={o.listing.type} subtype={o.listing.subtype} size="sm" />
                  <Chip tone="success" size="sm" leading={<Icon name="check" size={12} />}>{o.status}</Chip>
                </div>
                <div style={{ fontFamily: MB.font, fontSize: 16, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.15, lineHeight: 1.25 }}>{o.listing.title}</div>
                <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary }}>
                  {o.listing.dateRange || `${o.listing.rotation} · ${o.listing.start}`} · {o.listing.location}
                </div>
              </div>
              <button onClick={() => onOpenApplicants && onOpenApplicants(o.listing.id)} style={{
                width: '100%', border: 'none', background: tone[50], borderTop: `1px solid ${tone[100]}`,
                padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
              }}>
                <span style={{ width: 32, height: 32, borderRadius: 8, background: tone[600], color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="user" size={16} color="#fff" />
                </span>
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: tone[700] }}>{o.applicants} Bewerbungen</div>
                  <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary }}>{o.fresh} neu · Prüfung ausstehend</div>
                </div>
                <Icon name="chevron-r" size={18} color={tone[700]} />
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { TabBar, ScreenHeader, HomeUnified, HomeAnbieten, HomeSuchen, HostListings, ChatList, BigActionTile, DiscoverSearch, FilterSheet, ListingDetail, ApplySuccess, ChatScreen, NewsFeed, Applicants });