// MedBridge — additional flows called out in the design brief that weren't
// in the initial bundle. Each is reachable from the existing navigation; some
// are also rendered as static artboards in the design canvas.
//
// Screens defined here:
//   IDAustriaLogin     — the login surface that precedes onboarding step 0
//   PracticeProfile    — full practice page with Ausbildungsbefugnis block
//   BookingDetail      — confirmed booking; chat/call/cancel/Honorarnote
//   HonorarNoteBuilder — invoice composer with live PDF preview
//   HonorarNoteArchive — list of past invoices
//   SubscriptionPaywall— Free vs Pro comparison + trainee-free-tier note
//   SavedSearches      — saved search criteria + new-result counts
//   SettingsScreen     — account, notifications (split by role), privacy, about
//   VerificationStatus — ID Austria, ÖÄK, MedUni, Ausbildungsbefugnis
//   EmptyStates        — collection used in the canvas only

const { useState: useEx } = React;

// ─────────────────────────────────────────────────────────────
// Generic screen header with back chevron — reused below.
// ─────────────────────────────────────────────────────────────
function SheetHeader({ title, subtitle, onBack, action }) {
  return (
    <div className="mb-header" style={{
      padding: '52px 20px 14px', background: MB.surface.canvas,
      borderBottom: `1px solid ${MB.line.hair}`, position: 'sticky', top: 0, zIndex: 5,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {onBack && (
          <button onClick={onBack} style={{
            width: 36, height: 36, borderRadius: 10, border: 0,
            background: MB.surface.raised, color: MB.ink.primary, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: MB.shadow.card,
          }}>
            <Icon name="chevron-l" size={18} />
          </button>
        )}
        <div style={{ flex: 1, minWidth: 0 }}>
          <h1 style={{ fontFamily: MB.font, fontSize: 22, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, margin: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</h1>
          {subtitle && <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary, marginTop: 2 }}>{subtitle}</div>}
        </div>
        {action}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ID Austria login — the surface that precedes onboarding.
// Mirrors the trust-app tone the brief asks for (closer to FinanzOnline than
// a consumer app). Real ID Austria branding is intentionally restrained —
// we don't ship the official orange/red logo, we use a clean treatment.
// ─────────────────────────────────────────────────────────────
function IDAustriaLogin({ onLogin, onInvite }) {
  return (
    <div style={{ background: MB.surface.canvas, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, padding: '80px 28px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        {/* Brand */}
        <div style={{
          width: 72, height: 72, borderRadius: 18, background: MB.brand[700],
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: MB.shadow.pop, marginBottom: 24,
        }}>
          <Icon name="stethoscope" size={36} color="#fff" />
        </div>
        <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: '0 0 6px' }}>Willkommen bei MedBridge</h1>
        <p style={{ fontFamily: MB.font, fontSize: 15, color: MB.ink.secondary, margin: '0 0 32px', maxWidth: 320, lineHeight: 1.5 }}>
          Der verifizierte Marktplatz für Vertretungen und Ausbildungsstellen in Österreich.
        </p>

        {/* Trust row */}
        <div style={{
          display: 'flex', gap: 18, padding: '14px 18px', marginBottom: 36,
          background: MB.surface.raised, border: `1px solid ${MB.line.hair}`,
          borderRadius: 12, boxShadow: MB.shadow.card,
        }}>
          {[
            { ic: 'badge-check', l: 'ID Austria' },
            { ic: 'shield',      l: 'ÖÄK-geprüft' },
            { ic: 'building',    l: 'DSGVO-konform' },
          ].map(t => (
            <div key={t.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
              <Icon name={t.ic} size={20} color={MB.brand[600]} />
              <div style={{ fontFamily: MB.font, fontSize: 11, fontWeight: 600, color: MB.ink.secondary, letterSpacing: 0.2 }}>{t.l}</div>
            </div>
          ))}
        </div>

        {/* Primary CTA */}
        <div style={{ width: '100%', maxWidth: 340, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Button kind="primary" size="lg" full onClick={onLogin}
            leading={<Icon name="shield" size={18} color="#fff" />}>
            Mit ID Austria anmelden
          </Button>
          <Button kind="secondary" size="lg" full onClick={onInvite}>
            Mit Einladungslink fortfahren
          </Button>
        </div>

        <p style={{ marginTop: 28, fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, maxWidth: 320, lineHeight: 1.5 }}>
          Mit der Anmeldung akzeptieren Sie unsere{' '}
          <span style={{ color: MB.brand[600], fontWeight: 600 }}>AGB</span> und die{' '}
          <span style={{ color: MB.brand[600], fontWeight: 600 }}>Datenschutzerklärung</span>.
        </p>
      </div>

      {/* Footer */}
      <div style={{
        padding: '16px 28px 32px', display: 'flex', justifyContent: 'space-between',
        fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary,
        borderTop: `1px solid ${MB.line.hair}`, background: MB.surface.raised,
      }}>
        <span>Impressum</span>
        <span>Hilfe & Support</span>
        <span>v1.0 (Beta)</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Practice profile — distinct from a listing detail. Used when a user wants
// to see "what is this Praxis like generally", independent of a specific
// listing. Includes the Ausbildungsbefugnis block when present.
// ─────────────────────────────────────────────────────────────
function PracticeProfile({ practice, onBack }) {
  const p = practice || DEMO_PRACTICE;
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Praxisprofil" subtitle={p.address} onBack={onBack}
        action={<Icon name="bookmark" size={20} color={MB.ink.tertiary} />} />

      {/* Photo strip */}
      <div style={{ display: 'flex', gap: 8, overflow: 'auto', padding: '14px 20px 0', scrollSnapType: 'x mandatory' }}>
        {p.photos.map((bg, i) => (
          <div key={i} style={{
            flex: 'none', width: 280, height: 160, borderRadius: 12,
            background: bg, boxShadow: MB.shadow.card, scrollSnapAlign: 'start',
          }} />
        ))}
      </div>

      <div style={{ padding: '18px 20px' }}>
        {/* Title + key chips */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 6 }}>
          <Chip tone="brand" strong size="sm" leading={<Icon name="badge-check" size={12} />}>Verifiziert</Chip>
          <Chip tone="neutral" size="sm" style={{ color: MB.specialty[p.specialty] || MB.specialty.default }}>{p.specialty}</Chip>
          {p.hasBefugnis && <Chip tone="ausbildung" size="sm" leading={<Icon name="graduation" size={12} />}>Ausbildungsbefugnis</Chip>}
        </div>
        <h2 style={{ fontFamily: MB.font, fontSize: 22, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, margin: '4px 0 4px' }}>{p.name}</h2>
        <div style={{ fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary, display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="pin" size={14} color={MB.ink.tertiary} /> {p.address}
          <span style={{ color: MB.brand[600], fontWeight: 600, cursor: 'pointer', marginLeft: 8 }}>Auf Karte zeigen</span>
        </div>

        {/* Mentor / host doctor card */}
        <div style={{ marginTop: 18, padding: 14, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, display: 'flex', gap: 12, alignItems: 'center', boxShadow: MB.shadow.card }}>
          <Avatar name={p.host} size={48} verified />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary }}>{p.host}</div>
            <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary }}>{p.hostStage} · {p.specialty}</div>
          </div>
          <Button kind="soft" size="sm" tone={MB.brand} leading={<Icon name="message" size={14} color={MB.brand[700]} />}>Nachricht</Button>
        </div>

        {/* Quick facts grid */}
        <h3 style={{ fontFamily: MB.font, fontSize: 16, fontWeight: 700, color: MB.ink.primary, margin: '24px 0 10px', letterSpacing: -0.2 }}>Über die Praxis</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <FactTile icon="car"        label="Parken"     value="Tiefgarage · 4 Plätze" />
          <FactTile icon="wheelchair" label="Barrierefrei" value="Lift · WC" />
          <FactTile icon="monitor"    label="IT-System"  value="InnoMed NOVA" />
          <FactTile icon="users"      label="Team"       value="2 Ärzt:innen · 4 Assist." />
          <FactTile icon="language"   label="Sprachen"   value="DE · EN · BCS" />
          <FactTile icon="train"      label="Anbindung"  value="U6 · 4 Min Fußweg" />
          {p.uebernachtung && <FactTile icon="bed" label="Übernachtung" value="Auf Anfrage" elevated tone="ausbildung" />}
        </div>

        {/* Ausbildungsbefugnis block — only when applicable */}
        {p.hasBefugnis && (
          <div style={{
            marginTop: 24, padding: 18,
            background: MB.ausbildung[50], border: `1px solid ${MB.ausbildung[100]}`,
            borderRadius: 14,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <Icon name="graduation" size={18} color={MB.ausbildung[700]} />
              <h3 style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ausbildung[700], margin: 0, letterSpacing: -0.1 }}>Ausbildungsbefugnis</h3>
              <Chip tone="success" size="sm" leading={<Icon name="badge-check" size={11} />}>ÖÄK bestätigt</Chip>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { l: 'Befugnis-Typ', v: 'Lehrpraxis AM + KPJ' },
                { l: 'Slots',       v: '2 von 3 belegt' },
                { l: 'Rotation',    v: '6 Monate (AM) · 16 Wo. (KPJ)' },
                { l: 'Förderung',   v: 'Bund + ÖÄK + Praxis' },
              ].map(r => (
                <div key={r.l}>
                  <div style={{ fontFamily: MB.font, fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ausbildung[700] }}>{r.l}</div>
                  <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: MB.ink.primary, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{r.v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, lineHeight: 1.5 }}>
              "Strukturierter Mentoring-Plan, wöchentliche Fallbesprechung, Eigenverantwortung ab Woche 3."
              <span style={{ display: 'block', marginTop: 4, color: MB.ink.tertiary, fontStyle: 'italic' }}>— Dr. Hofer, Lehrpraxis-Inhaberin</span>
            </div>
          </div>
        )}

        {/* Currently open listings from this practice */}
        <h3 style={{ fontFamily: MB.font, fontSize: 16, fontWeight: 700, color: MB.ink.primary, margin: '24px 0 10px', letterSpacing: -0.2 }}>Aktuelle Inserate</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {p.openListings.map(l => <ListingCard key={l.id} listing={l} density="compact" />)}
        </div>
      </div>
    </div>
  );
}

const DEMO_PRACTICE = {
  name: 'Praxis Dr. Hofer & Kollegen',
  address: '1080 Wien · Lederergasse 22',
  specialty: 'Allgemeinmedizin',
  host: 'Dr. Sabine Hofer',
  hostStage: 'Niedergelassene Ärztin',
  hasBefugnis: true,
  uebernachtung: true,
  photos: [
    'linear-gradient(135deg, #DCE7F4 0%, #EEF3FA 100%)',
    'linear-gradient(135deg, #D8EEEB 0%, #EAF6F4 100%)',
    'linear-gradient(135deg, #F6E4CB 0%, #FBF1E2 100%)',
  ],
  openListings: window.SAMPLE ? [window.SAMPLE.vertretungen[0], window.SAMPLE.ausbildungen[0]] : [],
};

// ─────────────────────────────────────────────────────────────
// Booking detail — what a user sees when tapping a confirmed booking row.
// Replaces the brief stub `ApplySuccess` for already-confirmed bookings.
// ─────────────────────────────────────────────────────────────
function BookingDetail({ booking, onBack, onChat, onCall, onCreateInvoice, onCancel }) {
  const b = booking;
  const tone = b.type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
  const completed = b.status === 'Abgeschlossen';
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Buchung" subtitle={b.dateRange} onBack={onBack} />

      <div style={{ padding: '18px 20px' }}>
        {/* Type-coloured confirmation tile */}
        <div style={{
          padding: 18, borderRadius: 14, background: tone[50], border: `1px solid ${tone[100]}`,
          borderLeft: `4px solid ${tone[600]}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <TypePill type={b.type} size="sm" />
            <Chip tone={b.status === 'Heute' ? 'brand' : b.status === 'Abgeschlossen' ? 'neutral' : 'success'} size="sm">{b.status}</Chip>
          </div>
          <div style={{ fontFamily: MB.font, fontSize: 19, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.2, lineHeight: 1.25 }}>{b.title}</div>
          <div style={{ marginTop: 10, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary, display: 'flex', flexDirection: 'column', gap: 4, fontVariantNumeric: 'tabular-nums' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="calendar" size={14} color={MB.ink.tertiary} />{b.dateRange}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="pin" size={14} color={MB.ink.tertiary} />{b.location}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="clock" size={14} color={MB.ink.tertiary} />Mo–Fr · 08:00 — 18:00</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="euro" size={14} color={MB.ink.tertiary} /><strong style={{ color: MB.ink.primary, fontWeight: 600 }}>{b.rate}</strong></div>
          </div>
        </div>

        {/* Partner card */}
        <div style={{ marginTop: 16, padding: 14, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, boxShadow: MB.shadow.card }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <Avatar name={b.partner} size={48} verified />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary }}>{b.partner}</div>
              <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary }}>{b.role === 'host' ? 'Vertretung in Ihrer Praxis' : 'Ihre Praxis-Vertretung'}</div>
            </div>
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
            <Button kind="soft" tone={tone} size="md" full leading={<Icon name="message" size={14} color={tone[700]} />} onClick={onChat}>Chat</Button>
            <Button kind="secondary" size="md" full leading={<Icon name="phone" size={14} />} onClick={onCall}>Anrufen</Button>
          </div>
        </div>

        {/* Office quick facts */}
        <h3 style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary, margin: '22px 0 10px', letterSpacing: -0.1 }}>Vor Ort</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <FactTile icon="monitor" label="IT-System"   value="InnoMed NOVA" />
          <FactTile icon="car"     label="Parken"      value="Tiefgarage" />
          <FactTile icon="users"   label="Team"        value="2 Ärzt:innen" />
          <FactTile icon="train"   label="Anbindung"   value="U6 · 4 Min" />
        </div>

        {/* Honorarnote — only for completed Vertretungs-bookings */}
        {completed && b.type === 'Vertretung' && (
          <div style={{
            marginTop: 22, padding: 14, background: MB.surface.raised,
            border: `1px solid ${MB.line.hair}`, borderLeft: `3px solid ${MB.success[600]}`,
            borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 36, height: 36, borderRadius: 8, background: MB.success[100], color: MB.success[700], display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="file" size={18} />
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.primary }}>Honorarnote erstellen</div>
              <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary }}>Auf Basis der Buchungsdaten — €&nbsp;{b.totalEstimate || '6.800'} brutto</div>
            </div>
            <Button kind="primary" size="sm" onClick={onCreateInvoice}>Erstellen</Button>
          </div>
        )}

        {/* Cancellation policy */}
        <div style={{ marginTop: 22, padding: 14, background: MB.surface.canvas2, borderRadius: 12, border: `1px dashed ${MB.line.border}` }}>
          <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, color: MB.ink.primary, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="info" size={14} color={MB.ink.tertiary} /> Stornierungsregelung
          </div>
          <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, lineHeight: 1.5 }}>
            Kostenlos stornierbar bis 14 Tage vor Beginn. Danach 50 % des vereinbarten Tagsatzes als Ausfallhonorar.
          </div>
        </div>

        {!completed && (
          <div style={{ marginTop: 16 }}>
            <Button kind="ghost" full size="md" onClick={onCancel} style={{ color: MB.danger[600] }}>Buchung stornieren</Button>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Honorarnote builder — three-section layout per the design brief.
// 1) Pre-filled data (read-only with edit affordance)
// 2) Variable fields (hours, expense lines, Verwendungszweck)
// 3) Live PDF preview
// ─────────────────────────────────────────────────────────────
function HonorarNoteBuilder({ booking, onBack, onSaveDraft, onCreatePdf }) {
  const b = booking || DEMO_BOOKING_FOR_INVOICE;
  const [hours, setHours] = useEx(80);
  const [rate, setRate] = useEx(85);
  const [expenses, setExpenses] = useEx([
    { id: 1, label: 'Anfahrt (160 km × 0,42)', amount: 67.20 },
    { id: 2, label: 'Übernachtung 4 Nächte',   amount: 280.00 },
  ]);
  const [ref, setRef] = useEx('Vertretung KW 32–33');
  const subtotal = hours * rate;
  const expensesSum = expenses.reduce((s, e) => s + e.amount, 0);
  const total = subtotal + expensesSum;

  const invoiceNo = '2026-V-019';
  const today = '11. Mai 2026';
  const fmt = (n) => `€ ${n.toLocaleString('de-AT', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Honorarnote" subtitle={`Buchung ${b.id} · ${b.dateRange}`} onBack={onBack}
        action={<Chip tone="warning" size="sm">Entwurf</Chip>} />

      <div style={{ padding: '18px 20px' }}>

        {/* Section 1: pre-filled data */}
        <div style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, padding: 16, boxShadow: MB.shadow.card }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
            <h3 style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.tertiary, letterSpacing: 0.4, textTransform: 'uppercase', margin: 0 }}>Rechnungsdaten</h3>
            <span style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: MB.brand[600], cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <Icon name="edit" size={13} /> Bearbeiten
            </span>
          </div>
          <RowKV k="Rechnungsnr."        v={invoiceNo} mono />
          <RowKV k="Datum"               v={today} />
          <RowKV k="Rechnungssteller:in" v="Dr. Michael Berger · Allgemeinmedizin" />
          <RowKV k="ÖÄK-ID (Aussteller)" v="13045672" mono />
          <RowKV k="Empfänger"           v={`${b.partner} · ${b.partnerAddress}`} />
          <RowKV k="ÖÄK-ID (Empfänger)"  v={b.partnerOAEK} mono last />
        </div>

        {/* Section 2: variable fields */}
        <div style={{ marginTop: 16, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, padding: 16, boxShadow: MB.shadow.card }}>
          <h3 style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.tertiary, letterSpacing: 0.4, textTransform: 'uppercase', margin: 0, marginBottom: 12 }}>Leistungen</h3>

          {/* Hours x rate */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
            <Field label="Stunden">
              <Input value={hours} onChange={(e) => setHours(Number(e.target.value) || 0)} trailing={<span style={{ fontSize: 12, color: MB.ink.tertiary }}>h</span>} />
            </Field>
            <Field label="Stundensatz">
              <Input value={rate} onChange={(e) => setRate(Number(e.target.value) || 0)} trailing={<span style={{ fontSize: 12, color: MB.ink.tertiary }}>€/h</span>} />
            </Field>
          </div>

          {/* Expense lines */}
          <div style={{ marginTop: 4, marginBottom: 6, fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: MB.ink.secondary }}>Spesen</div>
          {expenses.map(e => (
            <div key={e.id} style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
              <Input value={e.label} onChange={() => {}} style={{ flex: 1 }} />
              <Input value={e.amount.toFixed(2)} onChange={() => {}} trailing={<span style={{ fontSize: 12, color: MB.ink.tertiary }}>€</span>} style={{ width: 130 }} />
              <button onClick={() => setExpenses(expenses.filter(x => x.id !== e.id))} style={{ width: 36, height: 36, border: 0, background: 'transparent', color: MB.ink.tertiary, cursor: 'pointer', borderRadius: 8 }}>
                <Icon name="x" size={16} />
              </button>
            </div>
          ))}
          <button onClick={() => setExpenses([...expenses, { id: Date.now(), label: '', amount: 0 }])} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            border: `1px dashed ${MB.line.border}`, background: 'transparent', cursor: 'pointer',
            padding: '8px 12px', borderRadius: 8, color: MB.brand[600],
            fontFamily: MB.font, fontSize: 13, fontWeight: 600,
          }}>
            <Icon name="plus" size={14} color={MB.brand[600]} /> Spesenposition hinzufügen
          </button>

          {/* Reference */}
          <div style={{ marginTop: 14 }}>
            <Field label="Verwendungszweck">
              <Input value={ref} onChange={(e) => setRef(e.target.value)} />
            </Field>
          </div>
        </div>

        {/* Section 3: PDF preview */}
        <h3 style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.tertiary, letterSpacing: 0.4, textTransform: 'uppercase', margin: '22px 0 10px' }}>PDF-Vorschau</h3>
        <div style={{
          background: '#FFFFFF', border: `1px solid ${MB.line.border}`,
          borderRadius: 8, padding: 22, fontFamily: MB.font,
          boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(15,27,45,0.10)',
          color: MB.ink.primary, fontSize: 11.5, lineHeight: 1.5, fontVariantNumeric: 'tabular-nums',
        }}>
          {/* PDF letterhead */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Dr. Michael Berger</div>
              <div style={{ color: MB.ink.secondary }}>Allgemeinmedizin</div>
              <div style={{ color: MB.ink.tertiary, marginTop: 2 }}>Schottenfeldgasse 12 · 1070 Wien</div>
              <div style={{ color: MB.ink.tertiary }}>ÖÄK-ID 13045672</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: MB.ink.primary }}>HONORARNOTE</div>
              <div style={{ color: MB.ink.tertiary, marginTop: 2 }}>Nr. {invoiceNo}</div>
              <div style={{ color: MB.ink.tertiary }}>{today}</div>
            </div>
          </div>
          <hr style={{ border: 0, borderTop: `1px solid ${MB.line.hair}`, margin: '8px 0 12px' }} />
          <div style={{ marginBottom: 12 }}>
            <div style={{ fontWeight: 600 }}>Empfänger</div>
            <div style={{ color: MB.ink.secondary }}>{b.partner}</div>
            <div style={{ color: MB.ink.tertiary }}>{b.partnerAddress}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 100px 100px', gap: 8, marginBottom: 6, fontSize: 10.5, color: MB.ink.tertiary, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>
            <span>Leistung</span><span style={{ textAlign: 'right' }}>Menge</span><span style={{ textAlign: 'right' }}>Einzel</span><span style={{ textAlign: 'right' }}>Summe</span>
          </div>
          <hr style={{ border: 0, borderTop: `1px solid ${MB.line.hair}`, margin: '0 0 8px' }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 100px 100px', gap: 8, marginBottom: 4 }}>
            <span>Ärztliche Vertretungstätigkeit</span>
            <span style={{ textAlign: 'right' }}>{hours} h</span>
            <span style={{ textAlign: 'right' }}>{fmt(rate)}</span>
            <span style={{ textAlign: 'right' }}>{fmt(subtotal)}</span>
          </div>
          {expenses.filter(e => e.label).map(e => (
            <div key={e.id} style={{ display: 'grid', gridTemplateColumns: '1fr 60px 100px 100px', gap: 8, marginBottom: 4 }}>
              <span>{e.label}</span><span /><span /><span style={{ textAlign: 'right' }}>{fmt(e.amount)}</span>
            </div>
          ))}
          <hr style={{ border: 0, borderTop: `1px solid ${MB.line.hair}`, margin: '8px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, fontWeight: 700 }}>
            <span>Gesamtbetrag</span><span>{fmt(total)}</span>
          </div>
          <div style={{ marginTop: 4, fontSize: 10, color: MB.ink.tertiary }}>Gemäß § 6 Abs. 1 Z 19 UStG umsatzsteuerbefreit. Zahlbar binnen 14 Tagen ohne Abzug.</div>
          {ref && <div style={{ marginTop: 10, fontSize: 10.5, color: MB.ink.secondary }}>Verwendungszweck: <strong>{ref}</strong></div>}
        </div>

        {/* CTAs */}
        <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
          <Button kind="secondary" size="lg" full onClick={onSaveDraft}>Entwurf speichern</Button>
          <Button kind="primary" size="lg" full onClick={onCreatePdf} leading={<Icon name="file" size={16} color="#fff" />}>PDF erstellen</Button>
        </div>
      </div>
    </div>
  );
}

const DEMO_BOOKING_FOR_INVOICE = {
  id: 'b-l-5', type: 'Vertretung', role: 'searcher', status: 'Abgeschlossen',
  title: 'Praxis Dr. Müller-Brandt', partner: 'Dr. Eva Müller-Brandt',
  partnerAddress: 'Sporgasse 14 · 8010 Graz', partnerOAEK: '11290837',
  location: '8010 Graz', dateRange: 'Mo 22. Jun — Fr 3. Jul 2026', rate: '€ 660 / Tag',
};

// Helpers used by the builder
function RowKV({ k, v, mono, last }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '7px 0', borderBottom: last ? 'none' : `1px solid ${MB.line.hair}` }}>
      <span style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary }}>{k}</span>
      <span style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 600, color: MB.ink.primary, fontVariantNumeric: mono ? 'tabular-nums' : 'normal', textAlign: 'right' }}>{v}</span>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'block' }}>
      <div style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 700, color: MB.ink.tertiary, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      {children}
    </label>
  );
}

// ─────────────────────────────────────────────────────────────
// Honorarnote archive — list view, filter chips.
// ─────────────────────────────────────────────────────────────
function HonorarNoteArchive({ onBack, onOpen, onNew }) {
  const items = [
    { id: 'h1', no: '2026-V-018', practice: 'Praxis Dr. Müller-Brandt', date: '03.07.2026', amount: 7280.20, status: 'Bezahlt' },
    { id: 'h2', no: '2026-V-017', practice: 'Praxis Dr. Wallner',       date: '12.06.2026', amount: 5180.00, status: 'Bezahlt' },
    { id: 'h3', no: '2026-V-016', practice: 'Praxis Dr. Reiter',        date: '28.04.2026', amount: 6320.40, status: 'Gesendet' },
    { id: 'h4', no: '2026-V-019', practice: 'Praxis Dr. Müller-Brandt', date: '11.05.2026', amount: 7147.20, status: 'Entwurf' },
  ];
  const statusTone = { Bezahlt: 'success', Gesendet: 'brand', Entwurf: 'warning' };
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Honorarnoten" subtitle={`${items.length} archiviert`} onBack={onBack}
        action={<Button kind="primary" size="sm" onClick={onNew} leading={<Icon name="plus" size={12} color="#fff" />}>Neu</Button>} />
      <div style={{ padding: '14px 20px 6px', display: 'flex', gap: 8, overflow: 'auto' }}>
        {['Alle','Entwürfe','Gesendet','Bezahlt','2026','2025'].map((c, i) => (
          <Chip key={c} tone={i === 0 ? 'brand' : 'neutral'} strong={i === 0} size="md">{c}</Chip>
        ))}
      </div>
      <div style={{ padding: '8px 20px' }}>
        {items.map(it => (
          <div key={it.id} onClick={() => onOpen && onOpen(it)} style={{
            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12, padding: 14,
            background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12,
            marginBottom: 8, boxShadow: MB.shadow.card,
          }}>
            <span style={{ width: 40, height: 40, borderRadius: 8, background: MB.surface.canvas2, color: MB.ink.secondary, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="file" size={18} />
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.primary, fontVariantNumeric: 'tabular-nums' }}>{it.no}</div>
              <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.practice} · {it.date}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.primary, fontVariantNumeric: 'tabular-nums' }}>{`€ ${it.amount.toLocaleString('de-AT', { minimumFractionDigits: 2 })}`}</div>
              <div style={{ marginTop: 3 }}><Chip tone={statusTone[it.status]} size="sm">{it.status}</Chip></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Subscription paywall — Free vs Pro. Trainees free.
// ─────────────────────────────────────────────────────────────
function SubscriptionPaywall({ persona, onBack, onSubscribe }) {
  const traineeStage = persona && (persona.stage === 'KPJ' || persona.stage === 'AssistAM' || persona.stage === 'AssistSF');
  const features = [
    { l: 'Inserate erstellen',                    free: '1 aktiv',          pro: 'Unbegrenzt' },
    { l: 'Bewerber:innen-Übersicht',              free: 'Basis',            pro: 'Profile + Ratings + Filter' },
    { l: 'Gespeicherte Suchen',                   free: '2',                pro: 'Unbegrenzt + Push' },
    { l: 'Honorarnoten generieren',               free: '–',                pro: 'PDF + Archiv' },
    { l: 'Bevorzugte Platzierung in Suchergebnissen', free: '–',           pro: 'Aktiv' },
    { l: 'Statistiken & Analytics',               free: '–',                pro: 'Inkl. Bewerberquelle' },
  ];

  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="MedBridge Pro" onBack={onBack} />

      {traineeStage && (
        <div style={{
          margin: '14px 20px 0', padding: 14, background: MB.success[100], border: `1px solid ${MB.success[600]}`,
          borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <Icon name="badge-check" size={20} color={MB.success[700]} />
          <div>
            <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.success[700] }}>Für Sie kostenlos</div>
            <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, marginTop: 2 }}>MedBridge ist während Ihrer Ausbildung (KPJ / Assistenzarzt) ohne Aufpreis voll nutzbar.</div>
          </div>
        </div>
      )}

      <div style={{ padding: '20px' }}>
        <div style={{
          background: MB.surface.raised, border: `1px solid ${MB.brand[100]}`, borderRadius: 16,
          padding: 22, boxShadow: MB.shadow.card, marginBottom: 16,
          borderTop: `4px solid ${MB.brand[600]}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 4 }}>
            <span style={{ fontFamily: MB.font, fontSize: 18, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.2 }}>Pro</span>
            <Chip tone="brand" strong size="sm" leading={<Icon name="sparkle" size={11} />}>Empfohlen</Chip>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
            <span style={{ fontFamily: MB.font, fontSize: 34, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.6, fontVariantNumeric: 'tabular-nums' }}>€&nbsp;19</span>
            <span style={{ fontFamily: MB.font, fontSize: 14, color: MB.ink.tertiary }}>/ Monat</span>
          </div>
          <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary, marginBottom: 14 }}>oder €&nbsp;190 / Jahr — entspricht ~16,60 / Monat</div>
          <Button kind="primary" size="lg" full disabled={traineeStage} onClick={onSubscribe}
            leading={traineeStage ? <Icon name="check" size={16} color="#fff" /> : <Icon name="sparkle" size={16} color="#fff" />}>
            {traineeStage ? 'Bereits kostenlos aktiv' : 'Pro abonnieren'}
          </Button>
        </div>

        {/* Comparison table */}
        <div style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, overflow: 'hidden', boxShadow: MB.shadow.card }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', padding: '12px 14px', background: MB.surface.canvas2, borderBottom: `1px solid ${MB.line.hair}`, fontFamily: MB.font, fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary }}>
            <span>Funktion</span><span>Free</span><span>Pro</span>
          </div>
          {features.map((f, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', padding: '12px 14px',
              borderBottom: i === features.length - 1 ? 'none' : `1px solid ${MB.line.hair}`,
              fontFamily: MB.font, fontSize: 13, color: MB.ink.primary, alignItems: 'center',
            }}>
              <span style={{ fontWeight: 600 }}>{f.l}</span>
              <span style={{ color: MB.ink.tertiary }}>{f.free}</span>
              <span style={{ color: MB.brand[700], fontWeight: 600 }}>{f.pro}</span>
            </div>
          ))}
        </div>

        <p style={{ marginTop: 14, fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, lineHeight: 1.5 }}>
          Monatlich kündbar. Zahlung über App Store / Google Play. Rechnung auf Wunsch direkt im PDF-Format.
        </p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Saved searches — list with new-result counts.
// ─────────────────────────────────────────────────────────────
function SavedSearches({ persona, onBack, onOpen, onNew }) {
  const isKPJ = persona && persona.stage === 'KPJ';
  const items = isKPJ ? [
    { id: 's1', type: 'Ausbildung', label: 'KPJ AM · Wien · ab Sep',       criteria: 'Allgemeinmedizin · 1010–1230 Wien · ab Sep 2026', news: 3 },
    { id: 's2', type: 'Ausbildung', label: 'KPJ AM · NÖ · ab Okt',         criteria: 'Allgemeinmedizin · Niederösterreich · ab Okt 2026', news: 0 },
  ] : [
    { id: 's1', type: 'Vertretung', label: 'AM Wien · Aug–Sep',           criteria: 'Allgemeinmedizin · Wien · 4. Aug – 30. Sep · ab €&nbsp;650/T', news: 5 },
    { id: 's2', type: 'Ausbildung', label: 'Lehrpraxis Innere Stmk',      criteria: 'Innere Medizin · Steiermark · Start 2027', news: 2 },
    { id: 's3', type: 'Vertretung', label: 'Wochenend-Bereitschaft Wien', criteria: 'Allgemeinmedizin · Wien · Sa+So · Q4 2026', news: 0 },
  ];

  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Gespeicherte Suchen" subtitle={`${items.length} Abos · ${items.reduce((s,i) => s + i.news, 0)} neue Treffer`} onBack={onBack}
        action={<Button kind="primary" size="sm" onClick={onNew} leading={<Icon name="plus" size={12} color="#fff" />}>Neu</Button>} />
      <div style={{ padding: '14px 20px 0' }}>
        {items.map(it => {
          const c = it.type === 'Vertretung' ? MB.vertretung : MB.ausbildung;
          return (
            <div key={it.id} onClick={() => onOpen && onOpen(it)} style={{
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12, padding: 14,
              background: MB.surface.raised, border: `1px solid ${MB.line.hair}`,
              borderLeft: `4px solid ${c[600]}`, borderRadius: 12, marginBottom: 10,
              boxShadow: MB.shadow.card,
            }}>
              <span style={{ width: 40, height: 40, borderRadius: 8, background: c[50], color: c[600], display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${c[100]}` }}>
                <Icon name={it.type === 'Vertretung' ? 'stethoscope' : 'graduation'} size={18} />
              </span>
              <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' }}>{it.label}</div>
                <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} dangerouslySetInnerHTML={{ __html: it.criteria }} />
              </div>
              {it.news > 0 && (
                <span style={{
                  minWidth: 22, height: 22, padding: '0 7px', borderRadius: 999,
                  background: c[600], color: '#fff', fontFamily: MB.font, fontSize: 11, fontWeight: 700,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontVariantNumeric: 'tabular-nums',
                }}>{it.news}</span>
              )}
              <Icon name="chevron-r" size={16} color={MB.ink.tertiary} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Settings — operational completeness.
// ─────────────────────────────────────────────────────────────
function SettingsScreen({ persona, onBack, onVerification, onSubscription }) {
  const sections = [
    { title: 'Konto', items: [
      { ic: 'user',   l: 'Profil bearbeiten',         d: 'Foto, Bio, Sprachen' },
      { ic: 'shield', l: 'Verifizierung',             d: 'ID Austria · ÖÄK · MedUni', onClick: onVerification },
      { ic: 'sparkle',l: 'MedBridge Pro',             d: 'Aktiv · €19/Monat', onClick: onSubscription },
      { ic: 'building', l: 'Praxisprofil(e) verwalten', d: persona && persona.canHost ? '1 Praxis · Lehrpraxis aktiv' : 'Keine Praxis verknüpft' },
    ] },
    { title: 'Benachrichtigungen', items: [
      { ic: 'bell',  l: 'Als Anbietende:r',  d: 'Neue Bewerbungen · Push · E-Mail' },
      { ic: 'bell',  l: 'Als Suchende:r',    d: 'Passende Inserate · Push · in-App' },
      { ic: 'calendar', l: 'Buchungen & Reminders', d: 'Push, 24 h vorab' },
    ] },
    { title: 'Datenschutz & Sicherheit', items: [
      { ic: 'shield',  l: 'Zwei-Faktor-Authentifizierung', d: 'Aktiv · Geräte-Pairing' },
      { ic: 'document',l: 'Daten herunterladen',           d: 'DSGVO Art. 15' },
      { ic: 'x',       l: 'Konto löschen',                 d: 'Anonymisiert nach 30 Tagen', danger: true },
    ] },
    { title: 'Über', items: [
      { ic: 'info',     l: 'AGB & Datenschutz' },
      { ic: 'message',  l: 'Hilfe & Support' },
      { ic: 'archive',  l: 'Versionshinweise', d: 'v1.0.4 (2026.05)' },
    ] },
  ];

  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Einstellungen" onBack={onBack} />
      <div style={{ padding: '14px 20px 0' }}>
        {sections.map((sec, si) => (
          <div key={sec.title} style={{ marginBottom: 18 }}>
            <div style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, padding: '0 4px 8px' }}>{sec.title}</div>
            <div style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, overflow: 'hidden', boxShadow: MB.shadow.card }}>
              {sec.items.map((r, i) => (
                <div key={r.l} onClick={r.onClick} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '13px 14px',
                  borderBottom: i === sec.items.length - 1 ? 'none' : `1px solid ${MB.line.hair}`,
                  cursor: r.onClick ? 'pointer' : 'default',
                }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: r.danger ? MB.danger[100] : MB.surface.canvas2,
                    color: r.danger ? MB.danger[700] : MB.ink.secondary,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name={r.ic} size={16} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: r.danger ? MB.danger[700] : MB.ink.primary }}>{r.l}</div>
                    {r.d && <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary }}>{r.d}</div>}
                  </div>
                  <Icon name="chevron-r" size={14} color={MB.ink.tertiary} />
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Verification status — ID Austria, ÖÄK, MedUni, Befugnis.
// ─────────────────────────────────────────────────────────────
function VerificationStatus({ persona, onBack }) {
  const stage = persona ? persona.stage : 'Niedergelassen';
  const items = [
    { l: 'ID Austria',     d: 'Verifiziert am 12.03.2026',                 ok: true,                      meta: 'Gültig bis 12.03.2031' },
    { l: 'Ärzteliste ÖÄK', d: stage === 'KPJ' ? 'Nicht erforderlich' : `ÖÄK-ID 13045672 · ${persona ? persona.specialty : ''}`, ok: stage !== 'KPJ', neutral: stage === 'KPJ' },
    { l: 'MedUni-Einschreibung', d: stage === 'KPJ' ? 'MedUni Wien · 5. Studienjahr (06/2027)' : 'Nicht erforderlich', ok: stage === 'KPJ', neutral: stage !== 'KPJ' },
    { l: 'Ausbildungsbefugnis', d: persona && persona.hasBefugnis ? 'Lehrpraxis AM · KPJ · ÖÄK-bestätigt' : 'Nicht hinterlegt', ok: persona && persona.hasBefugnis, neutral: !(persona && persona.hasBefugnis) },
  ];
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '100%' }}>
      <SheetHeader title="Verifizierung" subtitle="Status der für MedBridge geprüften Identitätsnachweise" onBack={onBack} />
      <div style={{ padding: '14px 20px 0' }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12, padding: 14, marginBottom: 10,
            background: MB.surface.raised,
            border: `1px solid ${it.ok ? MB.success[100] : (it.neutral ? MB.line.hair : MB.warning[100])}`,
            borderLeft: `3px solid ${it.ok ? MB.success[600] : (it.neutral ? MB.line.border : MB.warning[600])}`,
            borderRadius: 12, boxShadow: MB.shadow.card,
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: 8,
              background: it.ok ? MB.success[100] : (it.neutral ? MB.surface.canvas2 : MB.warning[100]),
              color: it.ok ? MB.success[700] : (it.neutral ? MB.ink.tertiary : MB.warning[700]),
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={it.ok ? 'badge-check' : (it.neutral ? 'info' : 'alert')} size={18} />
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.primary }}>{it.l}</div>
              <div style={{ marginTop: 3, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, fontVariantNumeric: 'tabular-nums' }}>{it.d}</div>
              {it.meta && <div style={{ marginTop: 2, fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary }}>{it.meta}</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Empty states — canvas-only collection. Six of the most common ones.
// ─────────────────────────────────────────────────────────────
function EmptyStates() {
  const cases = [
    { ic: 'calendar', t: 'Noch keine Buchungen',          s: 'Sobald eine Bewerbung bestätigt ist, erscheint sie hier.', cta: 'Inserate suchen' },
    { ic: 'users',    t: 'Noch keine Bewerbungen',        s: 'Sie haben Ihr Inserat vor 2 Stunden veröffentlicht. Bewerbungen treffen meist innerhalb von 48 h ein.', cta: 'Inserat bearbeiten' },
    { ic: 'bookmark', t: 'Keine gespeicherten Suchen',    s: 'Speichern Sie eine Suche, um neue passende Inserate als Push zu erhalten.', cta: 'Neue Suche speichern' },
    { ic: 'search',   t: 'Keine Treffer für diese Filter',s: 'Versuchen Sie ein anderes Bundesland oder erweitern Sie den Zeitraum.',     cta: 'Filter zurücksetzen' },
    { ic: 'file',     t: 'Noch keine Honorarnoten',       s: 'Sobald eine Vertretung abgeschlossen ist, können Sie hier die Honorarnote erstellen.', cta: 'Buchungen ansehen' },
    { ic: 'graduation', t: 'Keine Ausbildungsbefugnis hinterlegt', s: 'Reichen Sie Ihre Befugnis ein, um Lehrpraxis- und KPJ-Stellen zu inserieren.', cta: 'Befugnis hinzufügen', tone: 'ausbildung' },
  ];
  return (
    <div style={{ background: MB.surface.canvas, padding: '20px 16px', height: '100%', overflow: 'auto' }}>
      <h2 style={{ fontFamily: MB.font, fontSize: 18, fontWeight: 700, color: MB.ink.primary, margin: '0 4px 14px', letterSpacing: -0.2 }}>Empty States</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {cases.map((c, i) => {
          const accent = c.tone === 'ausbildung' ? MB.ausbildung : MB.brand;
          return (
            <div key={i} style={{
              background: MB.surface.raised, border: `1px dashed ${MB.line.border}`, borderRadius: 14,
              padding: '20px 16px', textAlign: 'center', minHeight: 220, display: 'flex', flexDirection: 'column', justifyContent: 'center',
            }}>
              <span style={{
                width: 48, height: 48, borderRadius: 12,
                background: accent[50], color: accent[700],
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 10px',
              }}>
                <Icon name={c.ic} size={22} />
              </span>
              <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.1 }}>{c.t}</div>
              <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, lineHeight: 1.5 }}>{c.s}</div>
              <div style={{ marginTop: 12 }}>
                <span style={{
                  display: 'inline-block', padding: '6px 12px', borderRadius: 999,
                  background: accent[600], color: '#fff', fontFamily: MB.font, fontSize: 12, fontWeight: 600,
                }}>{c.cta}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// iOSPushNotification — system-style push banner. Floats at the top of the
// screen with frosted glass background, app icon, app name, timestamp, and
// title + body. Matches iOS 17/26 lock-screen-style banner notifications.
// ─────────────────────────────────────────────────────────────
function IOSPushNotification({ appName = 'MedBridge', time = 'jetzt', title, body }) {
  return (
    <div style={{
      position: 'absolute', top: 56, left: 12, right: 12, zIndex: 50,
      borderRadius: 22, padding: '12px 14px',
      background: 'rgba(255,255,255,0.78)',
      WebkitBackdropFilter: 'blur(28px) saturate(180%)',
      backdropFilter: 'blur(28px) saturate(180%)',
      border: '0.5px solid rgba(255,255,255,0.8)',
      boxShadow:
        '0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 36px rgba(15,27,45,0.18), 0 1px 2px rgba(15,27,45,0.06)',
      fontFamily: '-apple-system, "SF Pro Display", "SF Pro Text", system-ui, sans-serif',
      color: '#0F1B2D',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
        {/* App icon */}
        <span style={{
          width: 22, height: 22, borderRadius: 6, flex: 'none',
          background: `linear-gradient(135deg, ${MB.brand[600]} 0%, ${MB.brand[800]} 100%)`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 1px 2px rgba(0,0,0,0.12)',
        }}>
          <Icon name="stethoscope" size={13} color="#fff" />
        </span>
        <span style={{ fontSize: 13, fontWeight: 500, color: 'rgba(15,27,45,0.6)', letterSpacing: -0.05, textTransform: 'uppercase' }}>{appName}</span>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: 'rgba(15,27,45,0.5)', letterSpacing: -0.05 }}>{time}</span>
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2, lineHeight: 1.3 }}>{title}</div>
      {body && (
        <div style={{ marginTop: 1, fontSize: 15, fontWeight: 400, color: 'rgba(15,27,45,0.78)', letterSpacing: -0.1, lineHeight: 1.3 }}>{body}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  IDAustriaLogin, PracticeProfile, BookingDetail,
  HonorarNoteBuilder, HonorarNoteArchive,
  SubscriptionPaywall, SavedSearches,
  SettingsScreen, VerificationStatus, EmptyStates,
  IOSPushNotification,
  DEMO_BOOKING_FOR_INVOICE, DEMO_PRACTICE,
});