// MedBridge — main app. Tweaks + Canvas with Foundations + Phone prototype.

const { useState: uS, useEffect: uE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "persona": "nieder",
  "palette": "classic",
  "density": "spacious",
  "platform": "ios",
  "onboarding": false,
  "surface": "mobile",
  "style": "standard"
}/*EDITMODE-END*/;

// Rebuild MB derived tokens whenever palette changes.
function useThemedMB(palette, density) {
  return React.useMemo(() => {
    const p = MB_PALETTES[palette] || MB_PALETTES.classic;
    MB.vertretung = p.vertretung;
    MB.ausbildung = p.ausbildung;
    return MB;
  }, [palette, density]);
}

// ─────────────────────────────────────────────────────────────
// The interactive phone prototype — navigation + screen routing
// ─────────────────────────────────────────────────────────────
function Prototype({ persona, showOnboarding, onFinishOnboarding, liquid }) {
  const isHost = !!persona.canHost;
  const [tab, setTab] = uS('home');
  const [route, setRoute] = uS({ name: 'tab' });
  // Keep tab in sync with role — hosts have 'listings', searchers have 'discover'.
  uE(() => { setTab(isHost ? 'home' : 'home'); }, [isHost]);
  // Publish the current inner screen so the CommentLayer can scope pins to it.
  uE(() => {
    const inner = showOnboarding ? 'onboarding'
      : route.name !== 'tab'
        ? `${route.name}${route.listing ? '-' + route.listing.id : ''}${route.booking ? '-' + route.booking.id : ''}`
        : `tab-${tab}`;
    const screen = `mobile/${persona.key}/${inner}`;
    window.__mb_active_screen = screen;
    window.dispatchEvent(new CustomEvent('mb-active-screen', { detail: screen }));
  }, [persona.key, tab, route, showOnboarding]);
  if (showOnboarding) {
    return (
      <div style={{ position: 'absolute', inset: 0, background: MB.surface.canvas, overflow: 'hidden' }}>
        <Onboarding initialStage={persona.stage} onFinish={onFinishOnboarding} />
      </div>
    );
  }
  const allListings = [...SAMPLE.vertretungen, ...SAMPLE.ausbildungen];
  const unread = (SAMPLE.threads || []).reduce((s, t) => s + (t.unread || 0), 0);

  const openListing = (id, filterType) => {
    if (!id) {
      // From Home action tile — jump to Suchen with the type pre-filtered.
      setRoute({ name: 'tab' });
      setTab('discover');
      return;
    }
    const l = allListings.find(x => x.id === id);
    setRoute({ name: 'detail', listing: l });
  };
  const openApplicants = (id) => {
    const l = allListings.find(x => x.id === id);
    setRoute({ name: 'applicants', listing: l });
  };
  const openThread = (thread) => {
    // Map a thread to a listing context for the chat screen.
    const listing = allListings.find(x => x.title.startsWith(thread.listing.title.split(' · ')[0])) || allListings[0];
    setRoute({ name: 'chat', listing, partner: thread.partner });
  };

  const isKPJ = persona.stage === 'KPJ';
  const eligibleFor = (listing) => !(isKPJ && listing.type === 'Vertretung');

  let body;
  if (route.name === 'detail') {
    body = <ListingDetail listing={route.listing}
              eligible={eligibleFor(route.listing)}
              onBack={() => setRoute({ name: 'tab' })}
              onApply={() => setRoute({ name: 'applied', listing: route.listing })}
              onOpenPractice={() => setRoute({ name: 'practice', practice: { ...DEMO_PRACTICE, name: route.listing.hostPractice, host: route.listing.host, address: route.listing.location, specialty: route.listing.specialty || route.listing.sonderfach || 'Allgemeinmedizin', hasBefugnis: route.listing.type === 'Ausbildung' } })} />;
  } else if (route.name === 'applied') {
    body = <ApplySuccess listing={route.listing}
              onChat={() => setRoute({ name: 'chat', listing: route.listing })}
              onDone={() => { setRoute({ name: 'tab' }); setTab('discover'); }} />;
  } else if (route.name === 'chat') {
    body = <ChatScreen listing={route.listing} partner={route.partner}
            onBack={() => setRoute({ name: 'tab' })}
            onCall={() => setRoute({ name: 'call', listing: route.listing, partner: route.partner || { name: route.listing.host, context: route.listing.hostPractice } })} />;
  } else if (route.name === 'call') {
    body = <CallScreen doctor={route.partner} onHangup={() => setRoute({ name: 'chat', listing: route.listing, partner: route.partner })} />;
  } else if (route.name === 'new') {
    body = <NewListingFlow persona={persona}
              onClose={() => setRoute({ name: 'tab' })}
              onPublished={() => { setRoute({ name: 'tab' }); setTab(isHost ? 'listings' : 'home'); }} />;
  } else if (route.name === 'applicants') {
    body = <ApplicantsBoard listing={route.listing}
            onBack={() => setRoute({ name: 'tab' })}
            onChat={(a) => setRoute({ name: 'chat', listing: route.listing, partner: a })}
            onCall={(a) => setRoute({ name: 'call', listing: route.listing, partner: a })} />;
  } else if (route.name === 'practice') {
    body = <PracticeProfile practice={route.practice} onBack={() => setRoute({ name: 'tab' })} />;
  } else if (route.name === 'booking') {
    body = <BookingDetail booking={route.booking}
            onBack={() => setRoute({ name: 'tab' })}
            onChat={() => setTab('chats')}
            onCall={() => setRoute({ name: 'call', listing: route.booking, partner: { name: route.booking.partner } })}
            onCreateInvoice={() => setRoute({ name: 'honorar', booking: route.booking })}
            onCancel={() => setRoute({ name: 'tab' })} />;
  } else if (route.name === 'honorar') {
    body = <HonorarNoteBuilder booking={route.booking}
            onBack={() => setRoute({ name: 'tab' })}
            onSaveDraft={() => setRoute({ name: 'honorarList' })}
            onCreatePdf={() => setRoute({ name: 'honorarList' })} />;
  } else if (route.name === 'honorarList') {
    body = <HonorarNoteArchive
            onBack={() => setRoute({ name: 'tab' })}
            onOpen={() => setRoute({ name: 'honorar', booking: DEMO_BOOKING_FOR_INVOICE })}
            onNew={() => setRoute({ name: 'honorar', booking: DEMO_BOOKING_FOR_INVOICE })} />;
  } else if (route.name === 'paywall') {
    body = <SubscriptionPaywall persona={persona}
            onBack={() => setRoute({ name: 'tab' })}
            onSubscribe={() => setRoute({ name: 'tab' })} />;
  } else if (route.name === 'savedSearches') {
    body = <SavedSearches persona={persona}
            onBack={() => setRoute({ name: 'tab' })}
            onOpen={() => { setRoute({ name: 'tab' }); setTab('discover'); }}
            onNew={() => { setRoute({ name: 'tab' }); setTab('discover'); }} />;
  } else if (route.name === 'settings') {
    body = <SettingsScreen persona={persona}
            onBack={() => setRoute({ name: 'tab' })}
            onVerification={() => setRoute({ name: 'verification' })}
            onSubscription={() => setRoute({ name: 'paywall' })} />;
  } else if (route.name === 'verification') {
    body = <VerificationStatus persona={persona} onBack={() => setRoute({ name: 'tab' })} />;
  } else if (route.name === 'idAustria') {
    body = <IDAustriaLogin onLogin={() => setRoute({ name: 'tab' })} onInvite={() => setRoute({ name: 'tab' })} />;
  } else if (tab === 'home') {
    body = <>
      <ScreenHeader persona={persona} />
      <HomeUnified persona={persona}
        onOpenListing={openListing}
        onOpenApplicants={openApplicants}
        onOpenChats={() => setTab('chats')}
        onOpenCalendar={() => setTab('calendar')}
        onNewListing={() => setRoute({ name: 'new' })}
      />
    </>;
  } else if (tab === 'discover') {
    body = <DiscoverSearch persona={persona} onOpen={openListing} />;
  } else if (tab === 'listings') {
    body = <HostListings persona={persona}
              onOpenApplicants={openApplicants}
              onOpenListing={(id) => openListing(id)}
              onNewListing={() => setRoute({ name: 'new' })} />;
  } else if (tab === 'news') {
    body = <NewsFeed />;
  } else if (tab === 'calendar') {
    body = <MyCalendar persona={persona} onOpenBooking={(b) => setRoute({ name: 'booking', booking: b })} />;
  } else if (tab === 'chats') {
    body = <ChatList onOpenThread={openThread} />;
  } else if (tab === 'profile') {
    body = <ProfileScreen persona={persona} onOpen={(k) => {
      if (k === 'savedSearches') setRoute({ name: 'savedSearches' });
      else if (k === 'honorarList') setRoute({ name: 'honorarList' });
      else if (k === 'paywall') setRoute({ name: 'paywall' });
      else if (k === 'settings') setRoute({ name: 'settings' });
      else if (k === 'verification') setRoute({ name: 'verification' });
      else if (k === 'doctorProfile') setRoute({ name: 'practice', practice: { ...DEMO_PRACTICE, name: persona.name, host: persona.name, hostStage: MB.career[persona.stage]?.label || persona.stage, hasBefugnis: persona.hasBefugnis } });
    }} />;
  }

  const showTabs = route.name === 'tab';
  const fullBleed = route.name === 'call';

  const Inner = (
    <>
      <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: showTabs ? (liquid ? 100 : 90) : 0 }}>
        {body}
      </div>
      {showTabs && <TabBar active={tab} persona={persona} unread={unread} onChange={(t) => { setRoute({ name: 'tab' }); setTab(t); }} />}
    </>
  );

  if (liquid) return <LiquidScope>{Inner}</LiquidScope>;
  return (
    <div style={{ position: 'absolute', inset: 0, background: MB.surface.canvas, overflow: 'hidden' }}>
      {Inner}
    </div>
  );
}

// Static preview wrappers — used in the "Alle Screens" design-canvas sections
// so we can show variants of the same screen without wiring up routing.

// MyCalendar pre-toggled to month view. (MyCalendar owns its own view state, so
// we render with `key` reset and tweak its segmented via a thin proxy — simplest
// approach is a wrapper that injects the right initial view.)
function CalendarMonthPreview({ persona }) {
  // Inject a one-time effect via React.useLayoutEffect to flip the segmented;
  // but MyCalendar's view state is internal — easiest is duplicating the
  // segmented "Monat" choice through a parent state proxy. We use the public
  // MyCalendar with a key, then click "Monat" via a small CSS trick is brittle.
  // Cleanest: render MyCalendar inside a wrapper that uses initialView prop.
  // We support that by re-rendering MyCalendar with a synthetic key + the
  // existing data. For preview purposes the list view also conveys the idea,
  // but we want a month-view snapshot here.
  return <MyCalendarPreview persona={persona} view="month" />;
}

// Tiny re-implementation that just renders MonthGrid with the same data — gives
// us a deterministic static preview without touching MyCalendar internals.
function MyCalendarPreview({ persona, view = 'month' }) {
  const all = (window.SAMPLE.bookings && window.SAMPLE.bookings[persona.key]) || [];
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110, minHeight: '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 }}>Kalender</h1>
        <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary }}>{all.length} Buchungen · Monatsansicht</div>
      </div>
      <div style={{ padding: '0 20px 12px' }}>
        <Segmented value="month" onChange={() => {}} options={[
          { value: 'list',  label: 'Liste',  icon: 'sort' },
          { value: 'month', label: 'Monat',  icon: 'calendar' },
        ]} />
      </div>
      <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 }}>
          <MonthGrid bookings={all} anchor={new Date(2026, 7, 1)} onPrev={() => {}} onNext={() => {}} wide={false} />
        </div>
      </div>
    </div>
  );
}

// DesktopApp with a configurable starting tab. Used in the "Web Desktop"
// section so each artboard lands on a different screen.
function DesktopAppPreview({ persona, initialTab = 'home' }) {
  const [, setReady] = uS(0);
  uE(() => {
    // Once the DesktopApp's internal `tab` state is initialised we can't
    // reach it from outside. Easiest static-preview approach: render a stripped
    // DesktopApp wrapper that selects the tab on mount. The shipping DesktopApp
    // already accepts `initialTab` via a small extension — see desktop.jsx.
    setReady(1);
  }, []);
  return <DesktopApp persona={persona} showOnboarding={false} onFinishOnboarding={() => {}} initialTab={initialTab} />;
}

// Lightweight Profile screen — rows are wired to the extras flows where they exist.
function ProfileScreen({ persona, onOpen }) {
  const open = (k) => { if (onOpen) onOpen(k); };
  const rows = [
    { k: 'doctorProfile',  ic: 'user',     l: 'Doktor:in-Profil',     d: 'Ansicht für andere' },
    { k: 'verification',   ic: 'shield',   l: 'Verifizierung',         d: 'ÖÄK · ID Austria · MedUni' },
    { k: 'savedSearches',  ic: 'bookmark', l: 'Gespeicherte Suchen',   d: persona.canHost ? 'Für Suchen-Modus' : '3 Abos · 5 neue Treffer' },
    { k: 'honorarList',    ic: 'file',     l: 'Honorarnoten',          d: '4 archiviert · 1 Entwurf' },
    { k: 'paywall',        ic: 'sparkle',  l: 'MedBridge Pro',         d: persona.stage === 'KPJ' || persona.stage === 'AssistAM' || persona.stage === 'AssistSF' ? 'Kostenlos in Ausbildung' : 'Aktiv · €19/Monat' },
    { k: 'settings',       ic: 'settings', l: 'Einstellungen',         d: 'Konto · Benachrichtigungen · Datenschutz', last: true },
  ];
  return (
    <div style={{ background: MB.surface.canvas, paddingBottom: 110 }}>
      <div className="mb-header" style={{ padding: '52px 20px 20px', background: MB.surface.canvas }}>
        <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: 0 }}>Profil</h1>
      </div>
      <div style={{ padding: '0 20px' }}>
        <div style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, padding: 18, boxShadow: MB.shadow.card }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <Avatar name={persona.name} size={64} verified />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: MB.font, fontSize: 18, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.2 }}>{persona.name}</div>
              <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, marginTop: 2 }}>{persona.specialty} · {persona.city}</div>
              <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                <CareerChip stage={persona.stage} size="sm" />
                <Chip tone="success" size="sm" leading={<Icon name="badge-check" size={12} />}>ID Austria</Chip>
                {persona.university && <Chip tone="brand" size="sm">{persona.university}</Chip>}
                {persona.hasBefugnis && <Chip tone="ausbildung" size="sm" leading={<Icon name="graduation" size={12} />}>Ausbildungsbefugnis</Chip>}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 16, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, overflow: 'hidden' }}>
          {rows.map((r, i) => (
            <div key={r.k} onClick={() => open(r.k)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: r.last ? 'none' : `1px solid ${MB.line.hair}`, cursor: 'pointer' }}>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: MB.surface.canvas2, color: MB.ink.secondary, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={r.ic} size={18} />
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 600, color: MB.ink.primary }}>{r.l}</div>
                <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary }}>{r.d}</div>
              </div>
              <Icon name="chevron-r" size={16} color={MB.ink.tertiary} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// App — top level. Renders the canvas + a Tweaks panel.
// ─────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useThemedMB(t.palette, t.density);
  const [, force] = uS(0);
  uE(() => force(x => x + 1), [t.palette, t.density]);

  const persona = SAMPLE.personas[t.persona] || SAMPLE.personas.nieder;

  // URL ?mode=demo strips the design canvas chrome and renders only the
  // interactive prototype (mobile or desktop, decided by Surface tweak).
  // The Tweaks panel + comment system stay available.
  const params = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : new URLSearchParams();
  const isDemoMode = params.get('mode') === 'demo';

  if (isDemoMode) {
    return <DemoOnly t={t} setTweak={setTweak} persona={persona} />;
  }

  return (
    <>
      <DesignCanvas minScale={0.2} maxScale={2.5}>

        <DCSection id="proto" title="Interactive Prototype"
          subtitle={t.surface === 'desktop'
            ? 'Desktop-first web layout — sidebar nav, split panes for Suchen / Nachrichten. Switch surface in Tweaks ↗'
            : 'Mobile-first iOS layout — bottom tabs, single column. Switch surface in Tweaks ↗'}
          gap={56}>
          {t.surface === 'desktop' ? (
            <DCArtboard id="desktop" label={`${persona.name} · Desktop`} width={1280} height={820} screenAware>
              <BrowserFrame width={1280} height={820} url={`https://medbridge.at/app/${persona.canHost ? 'host' : 'searcher'}`}>
                <DesktopApp persona={persona}
                  showOnboarding={t.onboarding}
                  onFinishOnboarding={() => setTweak('onboarding', false)} />
              </BrowserFrame>
            </DCArtboard>
          ) : (
            <DCArtboard id="phone" label={`${persona.name}${t.style === 'liquid' ? ' · Liquid Glass' : ''}`} width={402} height={874} screenAware>
              <IOSDevice width={402} height={874}>
                <Prototype persona={persona}
                  showOnboarding={t.onboarding}
                  onFinishOnboarding={() => setTweak('onboarding', false)}
                  liquid={t.style === 'liquid'} />
              </IOSDevice>
            </DCArtboard>
          )}
        </DCSection>

        <DCSection id="cards" title="Angebotstyp · Card system"
          subtitle="Vertretung vs Ausbildungsstelle across densities. Color + icon + stripe always present."
          gap={32}>
          <DCArtboard id="v-comp" label="Vertretung · compact" width={360} height={210}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <ListingCardVertretung listing={SAMPLE.vertretungen[0]} density="compact" />
            </div>
          </DCArtboard>
          <DCArtboard id="v-exp" label="Vertretung · expanded" width={360} height={320}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <ListingCardVertretung listing={SAMPLE.vertretungen[1]} density="expanded" />
            </div>
          </DCArtboard>
          <DCArtboard id="a-comp" label="Ausbildung · compact" width={360} height={210}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <ListingCardAusbildung listing={SAMPLE.ausbildungen[0]} density="compact" />
            </div>
          </DCArtboard>
          <DCArtboard id="a-exp" label="Ausbildung · expanded" width={360} height={320}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <ListingCardAusbildung listing={SAMPLE.ausbildungen[2]} density="expanded" />
            </div>
          </DCArtboard>
          <DCArtboard id="grey" label="Eligibility · greyed" width={360} height={260}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <ListingCardVertretung listing={SAMPLE.vertretungen[0]} density="compact"
                greyed greyReason="Für Assistenzärzte und Niedergelassene — Ihr Status: KPJ-Studierende" />
            </div>
          </DCArtboard>
          <DCArtboard id="calevt" label="Calendar event variants" width={300} height={210}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <CalEvt tone="vertretung" label="Vertretung · Dr. Berger" sub="Mo 18. · 08:00 — 18:00" />
                <CalEvt tone="ausbildung" label="Lehrpraxis AM · Lena W." sub="ab Okt · 6 Monate" />
                <CalEvt tone="vertretung" outlined label="Entwurf · Salzburg" sub="Aug · noch nicht veröffentlicht" />
              </div>
            </div>
          </DCArtboard>
          <DCArtboard id="notif" label="Notification variants" width={300} height={210}>
            <div style={{ padding: 16, background: MB.surface.canvas, height: '100%', boxSizing: 'border-box' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <Notif tone="vertretung" title="Neue Vertretung · 1080 Wien" sub="Allgemeinmedizin · 2 Wochen · vor 3 Min" />
                <Notif tone="ausbildung" title="Neue Lehrpraxis · Steiermark" sub="Sonderfach Innere · ab Jän 2027" />
              </div>
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="dash" title="Home dashboard · by persona" subtitle="One unified Home — no mode toggle. Tab bar always shows Nachrichten." gap={40}>
          <DCArtboard id="dash-a" label="Niedergelassene Hostin" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', overflow: 'auto' }}>
              <ScreenHeader persona={SAMPLE.personas.nieder} />
              <HomeUnified persona={SAMPLE.personas.nieder} />
            </div>
          </DCArtboard>
          <DCArtboard id="dash-b" label="Vertretungsarzt" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', overflow: 'auto' }}>
              <ScreenHeader persona={SAMPLE.personas.locum} />
              <HomeUnified persona={SAMPLE.personas.locum} />
            </div>
          </DCArtboard>
          <DCArtboard id="dash-c" label="KPJ-Studierende" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', overflow: 'auto' }}>
              <ScreenHeader persona={SAMPLE.personas.kpj} />
              <HomeUnified persona={SAMPLE.personas.kpj} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-onboarding" title="Alle Screens · Onboarding"
          subtitle="ID-Austria-Login bis erste Suche. Schritte und ein KPJ-Sonderfall." gap={40}>
          <DCArtboard id="onb-step0" label="1 · ID-Austria-Login (Start)" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <Onboarding initialStage="Niedergelassen" startStep={0} onFinish={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="onb-step1" label="2 · Ärzteliste-Daten bestätigen" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <Onboarding initialStage="Niedergelassen" startStep={1} onFinish={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="onb-step2" label="3 · Karrierestufe wählen" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <Onboarding initialStage="KPJ" startStep={2} onFinish={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="onb-step3" label="4 · Benachrichtigungen" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <Onboarding initialStage="AssistAM" startStep={3} onFinish={() => {}} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-search" title="Alle Screens · Suchen & Inserate"
          subtitle="Discover, Filter, Inseratsdetails, Eligibility-Greying." gap={40}>
          <DCArtboard id="scr-discover" label="Suchen (Discover)" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <DiscoverSearch persona={SAMPLE.personas.locum} onOpen={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-detail-v" label="Inseratsdetail · Vertretung" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ListingDetail listing={SAMPLE.vertretungen[1]} eligible
                onBack={() => {}} onApply={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-detail-a" label="Inseratsdetail · Ausbildungsstelle" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ListingDetail listing={SAMPLE.ausbildungen[0]} eligible
                onBack={() => {}} onApply={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-detail-greyed" label="Inseratsdetail · nicht berechtigt" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ListingDetail listing={SAMPLE.vertretungen[0]} eligible={false}
                onBack={() => {}} onApply={() => {}} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-apply" title="Alle Screens · Bewerbung & Kommunikation"
          subtitle="Bewerbung absenden → Bestätigung → Chat → Anruf." gap={40}>
          <DCArtboard id="scr-applied" label="Bewerbung gesendet" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ApplySuccess listing={SAMPLE.vertretungen[0]}
                onChat={() => {}} onDone={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-chatlist" label="Nachrichten · Liste" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ChatList onOpenThread={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-chat" label="Chat · mit Offer-Karte" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ChatScreen listing={SAMPLE.vertretungen[0]} partner={SAMPLE.threads[0].partner}
                onBack={() => {}} onCall={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-call" label="Anruf · Native-Style" width={402} height={760}>
            <div style={{ background: '#0F1B2D', height: '100%', overflow: 'hidden' }}>
              <CallScreen doctor={{ name: 'Dr. Sabine Hofer', stage: 'Niedergelassen' }}
                onHangup={() => {}} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-host" title="Alle Screens · Host-Workflow"
          subtitle="Inserate verwalten, Bewerber:innen prüfen, neues Inserat erstellen." gap={40}>
          <DCArtboard id="scr-myinserate" label="Meine Inserate" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <HostListings persona={SAMPLE.personas.nieder}
                onOpenApplicants={() => {}} onOpenListing={() => {}} onNewListing={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-applicants" label="Bewerbungen · Freelance-Style" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ApplicantsBoard listing={SAMPLE.vertretungen[0]}
                onBack={() => {}} onChat={() => {}} onCall={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-applicants-a" label="Bewerbungen · Ausbildungsstelle" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ApplicantsBoard listing={SAMPLE.ausbildungen[0]}
                onBack={() => {}} onChat={() => {}} onCall={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-newlisting" label="Neues Inserat · Angebotstyp" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <NewListingFlow persona={SAMPLE.personas.nieder}
                onClose={() => {}} onPublished={() => {}} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-content" title="Alle Screens · Content & Konto"
          subtitle="News & Fortbildung, Kalender (Liste + Monat), Profil." gap={40}>
          <DCArtboard id="scr-news" label="News & Fortbildung" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <NewsFeed />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-cal-list" label="Kalender · Liste" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <MyCalendar persona={SAMPLE.personas.locum} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-cal-month" label="Kalender · Monatsansicht" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <CalendarMonthPreview persona={SAMPLE.personas.locum} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-profile" label="Profil" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <ProfileScreen persona={SAMPLE.personas.nieder} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-account" title="Alle Screens · Konto, Praxis & Honorar"
          subtitle="ID Austria-Login, Praxisprofil, Honorarnote-Flow, Verifizierung, Pro, gespeicherte Suchen, Einstellungen." gap={40}>
          <DCArtboard id="scr-idaustria" label="ID-Austria-Login (vor Onboarding)" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <IDAustriaLogin onLogin={() => {}} onInvite={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-practice" label="Praxisprofil (mit Ausbildungsbefugnis)" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <PracticeProfile practice={DEMO_PRACTICE} onBack={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-booking" label="Buchungsdetail (abgeschlossen)" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <BookingDetail booking={{ ...DEMO_BOOKING_FOR_INVOICE, totalEstimate: '7.147' }}
                onBack={() => {}} onChat={() => {}} onCall={() => {}} onCreateInvoice={() => {}} onCancel={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-honorar" label="Honorarnote · Builder + Live-PDF" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <HonorarNoteBuilder booking={DEMO_BOOKING_FOR_INVOICE}
                onBack={() => {}} onSaveDraft={() => {}} onCreatePdf={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-honorarlist" label="Honorarnoten · Archiv" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <HonorarNoteArchive onBack={() => {}} onOpen={() => {}} onNew={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-paywall" label="MedBridge Pro · Paywall" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <SubscriptionPaywall persona={SAMPLE.personas.nieder}
                onBack={() => {}} onSubscribe={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-paywall-kpj" label="Pro · Trainee-Free-Tier (KPJ)" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <SubscriptionPaywall persona={SAMPLE.personas.kpj}
                onBack={() => {}} onSubscribe={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-saved" label="Gespeicherte Suchen" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <SavedSearches persona={SAMPLE.personas.locum}
                onBack={() => {}} onOpen={() => {}} onNew={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-settings" label="Einstellungen" width={402} height={820}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <SettingsScreen persona={SAMPLE.personas.nieder} onBack={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-verification" label="Verifizierungsstatus" width={402} height={760}>
            <div style={{ background: MB.surface.canvas, height: '100%', overflow: 'auto' }}>
              <VerificationStatus persona={SAMPLE.personas.kpj} onBack={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="scr-empty" label="Empty States · Sammlung" width={680} height={680}>
            <EmptyStates />
          </DCArtboard>
        </DCSection>

        <DCSection id="dash-notifications" title="Dashboards · mit Benachrichtigung oben"
          subtitle="Wie das Home-Dashboard aussieht, wenn etwas Reaktion erfordert — Job bestätigt (Suchend) oder neue Bewerbung eingelangt (Anbietend)." gap={40}>
          <DCArtboard id="notif-jobgranted" label="Push · Sie haben den Job bekommen" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <div style={{ position: 'absolute', inset: 0, background: MB.surface.canvas, overflow: 'auto' }}>
                <ScreenHeader persona={SAMPLE.personas.locum} />
                <HomeUnified persona={SAMPLE.personas.locum} />
              </div>
              <IOSPushNotification
                time="jetzt"
                title="Sie wurden ausgewählt 🎉"
                body="Praxis Dr. Reiter · Vertretung 18.–29. Aug · 1080 Wien" />
              <TabBar active="home" persona={SAMPLE.personas.locum} onChange={() => {}} unread={1} />
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="notif-newapplicant" label="Push · Neue Bewerbung eingelangt" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <div style={{ position: 'absolute', inset: 0, background: MB.surface.canvas, overflow: 'auto' }}>
                <ScreenHeader persona={SAMPLE.personas.nieder} />
                <HomeUnified persona={SAMPLE.personas.nieder} />
              </div>
              <IOSPushNotification
                time="vor 2 Min."
                title="Neue Bewerbung"
                body="cand. med. Lena Weiss · KPJ-Tertial AM · ab Okt 2026" />
              <TabBar active="home" persona={SAMPLE.personas.nieder} onChange={() => {}} unread={3} />
            </IOSDevice>
          </DCArtboard>
        </DCSection>

        <DCSection id="liquid" title="iOS 26 · Liquid Glass"
          subtitle="Gleiche Inhalte, neues Material — schwebende Glas-Tabbar, frostige Header, farbiger Hintergrund. Im Tweaks-Panel via Stil → iOS 26 Liquid Glass aktivierbar." gap={48}>
          <DCArtboard id="lq-home" label="Liquid · Start (Hostin)" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 100 }}>
                  <ScreenHeader persona={SAMPLE.personas.nieder} />
                  <HomeUnified persona={SAMPLE.personas.nieder} />
                </div>
                <TabBar active="home" persona={SAMPLE.personas.nieder} onChange={() => {}} unread={2} />
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-home-kpj" label="Liquid · Start (KPJ)" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 100 }}>
                  <ScreenHeader persona={SAMPLE.personas.kpj} />
                  <HomeUnified persona={SAMPLE.personas.kpj} />
                </div>
                <TabBar active="home" persona={SAMPLE.personas.kpj} onChange={() => {}} unread={0} />
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-discover" label="Liquid · Suchen" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 100 }}>
                  <DiscoverSearch persona={SAMPLE.personas.locum} onOpen={() => {}} />
                </div>
                <TabBar active="discover" persona={SAMPLE.personas.locum} onChange={() => {}} unread={0} />
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-detail" label="Liquid · Inseratsdetail" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto' }}>
                  <ListingDetail listing={SAMPLE.vertretungen[1]} eligible onBack={() => {}} onApply={() => {}} />
                </div>
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-cal" label="Liquid · Kalender" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 100 }}>
                  <MyCalendar persona={SAMPLE.personas.locum} />
                </div>
                <TabBar active="calendar" persona={SAMPLE.personas.locum} onChange={() => {}} unread={0} />
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-chats" label="Liquid · Nachrichten" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 100 }}>
                  <ChatList onOpenThread={() => {}} />
                </div>
                <TabBar active="chats" persona={SAMPLE.personas.locum} onChange={() => {}} unread={2} />
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-news" label="Liquid · News" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 100 }}>
                  <NewsFeed />
                </div>
                <TabBar active="news" persona={SAMPLE.personas.nieder} onChange={() => {}} unread={0} />
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-honorar" label="Liquid · Honorarnote" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto' }}>
                  <HonorarNoteBuilder booking={DEMO_BOOKING_FOR_INVOICE}
                    onBack={() => {}} onSaveDraft={() => {}} onCreatePdf={() => {}} />
                </div>
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-paywall" label="Liquid · MedBridge Pro" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto' }}>
                  <SubscriptionPaywall persona={SAMPLE.personas.nieder} onBack={() => {}} onSubscribe={() => {}} />
                </div>
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
          <DCArtboard id="lq-idaustria" label="Liquid · ID-Austria-Login" width={402} height={874}>
            <IOSDevice width={402} height={874}>
              <LiquidScope>
                <div style={{ position: 'absolute', inset: 0, overflow: 'auto' }}>
                  <IDAustriaLogin onLogin={() => {}} onInvite={() => {}} />
                </div>
              </LiquidScope>
            </IOSDevice>
          </DCArtboard>
        </DCSection>

        <DCSection id="screens-desktop" title="Alle Screens · Web Desktop"
          subtitle="Sidebar-Navigation, Split-Pane Layouts. Persona im Tweaks-Panel umschalten." gap={48}>
          <DCArtboard id="scr-d-home" label="Web · Start (Host)" width={1280} height={780}>
            <BrowserFrame width={1280} height={780} url="https://medbridge.at/app/host">
              <DesktopApp persona={SAMPLE.personas.nieder} showOnboarding={false} onFinishOnboarding={() => {}} />
            </BrowserFrame>
          </DCArtboard>
          <DCArtboard id="scr-d-cal" label="Web · Kalender (Locum)" width={1280} height={780}>
            <BrowserFrame width={1280} height={780} url="https://medbridge.at/app/searcher">
              <DesktopAppPreview persona={SAMPLE.personas.locum} initialTab="calendar" />
            </BrowserFrame>
          </DCArtboard>
          <DCArtboard id="scr-d-discover" label="Web · Suchen (KPJ)" width={1280} height={780}>
            <BrowserFrame width={1280} height={780} url="https://medbridge.at/app/searcher">
              <DesktopAppPreview persona={SAMPLE.personas.kpj} initialTab="discover" />
            </BrowserFrame>
          </DCArtboard>
          <DCArtboard id="scr-d-chats" label="Web · Nachrichten" width={1280} height={780}>
            <BrowserFrame width={1280} height={780} url="https://medbridge.at/app/searcher">
              <DesktopAppPreview persona={SAMPLE.personas.locum} initialTab="chats" />
            </BrowserFrame>
          </DCArtboard>
        </DCSection>

        <DCSection id="filters" title="Filter sheet · variations" gap={40}>
          <DCArtboard id="fs-a" label="A · Sheet (default)" width={402} height={640}>
            <div style={{ position: 'relative', background: MB.surface.canvas2, height: '100%', overflow: 'hidden' }}>
              <FilterSheet onClose={() => {}} />
            </div>
          </DCArtboard>
          <DCArtboard id="fs-b" label="B · Inline chips" width={402} height={640}>
            <InlineFilterVariant />
          </DCArtboard>
        </DCSection>

        <DCSection id="foundations" title="Foundations" gap={32}>
          <DCArtboard id="f-color" label="Color" width={680} height={760}>
            <FoundationColors />
          </DCArtboard>
          <DCArtboard id="f-type" label="Typography" width={680} height={760}>
            <FoundationType />
          </DCArtboard>
          <DCArtboard id="f-shape" label="Shape · Elevation · Motion" width={680} height={500}>
            <FoundationShape />
          </DCArtboard>
          <DCArtboard id="f-comp" label="Components" width={680} height={760}>
            <FoundationComponents />
          </DCArtboard>
        </DCSection>

        <DCPostIt top={-20} left={20} rotate={-3} width={220}>
          MedBridge · Austrian doctor marketplace.
          Switch personas in Tweaks ↗
        </DCPostIt>

      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Who is using the app">
          <TweakRadio label="Persona" value={t.persona} onChange={(v) => setTweak('persona', v)}
            options={[
              { value: 'nieder', label: 'Hofer (Niederg.)' },
              { value: 'locum', label: 'Berger (Ass.)' },
              { value: 'kpj',   label: 'Weiss (KPJ)' },
            ]} />
        </TweakSection>
        <TweakSection title="Surface">
          <TweakRadio label="Plattform" value={t.surface || 'mobile'} onChange={(v) => setTweak('surface', v)}
            options={[
              { value: 'mobile',  label: 'iOS App' },
              { value: 'desktop', label: 'Web Desktop' },
            ]} />
          <TweakRadio label="Stil" value={t.style || 'standard'} onChange={(v) => setTweak('style', v)}
            options={[
              { value: 'standard', label: 'Standard' },
              { value: 'liquid',   label: 'iOS 26 Liquid Glass' },
            ]} />
        </TweakSection>
        <TweakSection title="Look & feel">
          <TweakSelect label="Angebotstyp palette" value={t.palette} onChange={(v) => setTweak('palette', v)}
            options={Object.keys(MB_PALETTES).map(k => ({ value: k, label: MB_PALETTES[k].name }))} />
          <TweakRadio label="Density" value={t.density} onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'compact',     label: 'Compact' },
              { value: 'comfortable', label: 'Comfort' },
              { value: 'spacious',    label: 'Spacious' },
            ]} />
          <TweakToggle label="Show onboarding flow" value={t.onboarding} onChange={(v) => setTweak('onboarding', v)} />
        </TweakSection>
        {typeof SB_READY === 'function' && (
          <TweakSection title="Kollaboration">
            <TweakToggle label="Kommentar-Modus" value={!!t.comments} onChange={(v) => { setTweak('comments', v); setCommentMode(v); }} />
            {!SB_READY() && (
              <div style={{ marginTop: 6, fontSize: 10.5, color: 'rgba(41,38,27,.55)', lineHeight: 1.5 }}>
                Supabase nicht konfiguriert — siehe <strong>SUPABASE_SETUP.md</strong>.
              </div>
            )}
          </TweakSection>
        )}
      </TweaksPanel>
    </>
  );
}

// Compact components used in the cards section
function CalEvt({ tone, label, sub, outlined }) {
  const c = tone === 'vertretung' ? MB.vertretung : MB.ausbildung;
  return (
    <div style={{
      background: outlined ? 'transparent' : c[50],
      border: outlined ? `1.5px dashed ${c[600]}` : `1px solid ${c[100]}`,
      borderLeft: outlined ? `1.5px dashed ${c[600]}` : `4px solid ${c[600]}`,
      borderRadius: 8, padding: '8px 10px',
    }}>
      <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, color: c[700] }}>{label}</div>
      <div style={{ fontFamily: MB.font, fontSize: 11, color: MB.ink.tertiary, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

function Notif({ tone, title, sub }) {
  const c = tone === 'vertretung' ? MB.vertretung : MB.ausbildung;
  return (
    <div style={{
      display: 'flex', gap: 10, alignItems: 'center', padding: '10px 12px',
      background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 10,
      boxShadow: MB.shadow.card,
    }}>
      <span style={{ width: 32, height: 32, borderRadius: 8, background: c[50], color: c[600], display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${c[100]}` }}>
        <Icon name={tone === 'vertretung' ? 'stethoscope' : 'graduation'} size={16} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: MB.font, fontSize: 13, fontWeight: 700, color: MB.ink.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        <div style={{ fontFamily: MB.font, fontSize: 11, color: MB.ink.tertiary }}>{sub}</div>
      </div>
    </div>
  );
}

function InlineFilterVariant() {
  return (
    <div style={{ background: MB.surface.canvas, height: '100%', boxSizing: 'border-box', padding: '20px 16px', overflow: 'auto' }}>
      <div style={{ fontFamily: MB.font, fontSize: 22, fontWeight: 700, color: MB.ink.primary, marginBottom: 14, letterSpacing: -0.3 }}>Filter</div>
      <Section2 title="Angebotstyp">
        <div style={{ display: 'flex', gap: 8 }}>
          <Chip tone="vertretung" strong size="lg" leading={<Icon name="stethoscope" size={16} />}>Vertretung</Chip>
          <Chip tone="ausbildung" size="lg" leading={<Icon name="graduation" size={16} />}>Ausbildung</Chip>
        </div>
      </Section2>
      <Section2 title="Region">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['Wien','NÖ','Burgenland','Stmk','Sbg','OÖ','Tirol','Kärnten'].map(r => <Chip key={r} size="md" tone={r==='Wien'?'brand':'neutral'} strong={r==='Wien'}>{r}</Chip>)}
        </div>
      </Section2>
      <Section2 title="Fach">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {Object.keys(MB.specialty).filter(k => k !== 'default').slice(0,6).map(s => <Chip key={s} size="md" tone="neutral">{s}</Chip>)}
        </div>
      </Section2>
      <Section2 title="Zeitraum">
        <div style={{ display: 'flex', gap: 8 }}>
          <Chip size="md" tone="brand" strong>Aug 2026</Chip>
          <Chip size="md" tone="neutral">Sep 2026</Chip>
          <Chip size="md" tone="neutral">Q4 2026</Chip>
        </div>
      </Section2>
      <Button kind="primary" full size="lg">142 Ergebnisse</Button>
    </div>
  );
}

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

// ─────────────────────────────────────────────────────────────
// DemoOnly — renders just the interactive prototype, centered.
// Reached via ?mode=demo. No design canvas, no foundations.
// Same Tweaks panel (persona / surface / style / comments).
// ─────────────────────────────────────────────────────────────
function DemoOnly({ t, setTweak, persona }) {
  const isDesktop = t.surface === 'desktop';
  return (
    <div style={{
      position: 'fixed', inset: 0, overflow: 'auto',
      background: '#1a1d24',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: isDesktop ? 16 : 32,
    }}>
      {/* Back link to the Explorer */}
      <a href="index.html" style={{
        position: 'fixed', top: 16, left: 16, zIndex: 10,
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '8px 14px', borderRadius: 999,
        background: 'rgba(255,255,255,0.08)',
        color: 'rgba(255,255,255,0.85)',
        fontFamily: '-apple-system, system-ui, sans-serif',
        fontSize: 13, fontWeight: 600, textDecoration: 'none',
        backdropFilter: 'blur(12px)',
        border: '0.5px solid rgba(255,255,255,0.12)',
      }}>← Zurück</a>

      <div style={{ position: 'relative' }}>
        {isDesktop ? (
          <BrowserFrame width={Math.min(1280, window.innerWidth - 64)} height={Math.min(820, window.innerHeight - 80)} url={`https://medbridge.at/app/${persona.canHost ? 'host' : 'searcher'}`}>
            <DesktopApp persona={persona}
              showOnboarding={t.onboarding}
              onFinishOnboarding={() => setTweak('onboarding', false)} />
            {typeof window.CommentLayer === 'function' && <window.CommentLayer screenId="demo/desktop" screenAware />}
          </BrowserFrame>
        ) : (
          <IOSDevice width={402} height={874}>
            <Prototype persona={persona}
              showOnboarding={t.onboarding}
              onFinishOnboarding={() => setTweak('onboarding', false)}
              liquid={t.style === 'liquid'} />
            {typeof window.CommentLayer === 'function' && <window.CommentLayer screenId="demo/mobile" screenAware />}
          </IOSDevice>
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Wer benutzt die App">
          <TweakRadio label="Persona" value={t.persona} onChange={(v) => setTweak('persona', v)}
            options={[
              { value: 'nieder', label: 'Hofer (Niederg.)' },
              { value: 'locum',  label: 'Berger (Ass.)' },
              { value: 'kpj',    label: 'Weiss (KPJ)' },
            ]} />
        </TweakSection>
        <TweakSection title="Surface">
          <TweakRadio label="Plattform" value={t.surface || 'mobile'} onChange={(v) => setTweak('surface', v)}
            options={[
              { value: 'mobile',  label: 'iOS App' },
              { value: 'desktop', label: 'Web Desktop' },
            ]} />
          <TweakRadio label="Stil" value={t.style || 'standard'} onChange={(v) => setTweak('style', v)}
            options={[
              { value: 'standard', label: 'Standard' },
              { value: 'liquid',   label: 'iOS 26 Liquid Glass' },
            ]} />
          <TweakToggle label="Onboarding zeigen" value={t.onboarding} onChange={(v) => setTweak('onboarding', v)} />
        </TweakSection>
        {typeof SB_READY === 'function' && (
          <TweakSection title="Kollaboration">
            <TweakToggle label="Kommentar-Modus" value={!!t.comments} onChange={(v) => { setTweak('comments', v); setCommentMode(v); }} />
            {!SB_READY() && (
              <div style={{ marginTop: 6, fontSize: 10.5, color: 'rgba(41,38,27,.55)', lineHeight: 1.5 }}>
                Supabase nicht konfiguriert — siehe <strong>SUPABASE_SETUP.md</strong>.
              </div>
            )}
          </TweakSection>
        )}
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);