/* YeYe Expat Centre — Expat dashboard (driven by client type) */
const D = window.YEYE;

const STAGE_ICONS = {
  gd_folder_opened: 'file-plus',
  hlasenka_posted: 'megaphone',
  documents_requested: 'mail',
  application_form_filled: 'clipboard-check',
  employment_docs_prepared: 'briefcase',
  embassy_appointment_requested: 'landmark',
  accommodation_arranged: 'house',
  translations_verified: 'languages',
  documents_delivered: 'package-check',
  application_submitted: 'send',
  oamp_received: 'stamp',
  result_received: 'trophy',
  insurance_arranged: 'shield-check',
  residence_card_collected: 'id-card',
};

function WelcomeBar({ ct }) {
  const { t } = useT();
  return (
    <div className="phead">
      <div className="pt">
        <div className="eyebrow">{ct.region} · {t('ct.' + ct.key)}</div>
        <h1 className="h1">{t('c.welcome')} {(() => {
          const s = window.YEYE_AUTH && window.YEYE_AUTH.getState && window.YEYE_AUTH.getState();
          const first = (s && s.contact && s.contact.firstName) || (s && s.user && s.user.name) || ct.who;
          const cap = first ? first.split(' ')[0] : ct.who.split(' ')[0];
          return cap ? cap.charAt(0).toUpperCase() + cap.slice(1) : '';
        })()} 👋</h1>
        <div className="muted">{t('tag.' + ct.key)}</div>
      </div>
      <div className="flex gap-8 wrap">
        <Btn variant="ghost" icon="download">{t('c.export')}</Btn>
        <Btn variant="primary" icon="plus">{t('c.newRequest')}</Btn>
      </div>
    </div>
  );
}

function ProcessTrackerCard({ ct, go, processOptions, selectedProcessKey, onSelectProcess }) {
  const { t, lang } = useT();
  const tracker = window.PROCESS_TRACKER;
  const authState = window.YEYE_AUTH && window.YEYE_AUTH.getState ? window.YEYE_AUTH.getState() : {};
  const contact = authState.contact || null;
  const formType = tracker && ct && (ct.key === 'blue_card' || ct.key === 'employee_card') ? ct.key : null;
  const [showSteps, setShowSteps] = React.useState(false);
  const [showDocs, setShowDocs] = React.useState(false);
  const copy = {
    tr: {
      current: 'Şu an',
      empty: 'Süreç henüz başlatılmadı',
      unavailable: 'Süreç bilgisi henüz bağlanmadı.',
      stepsBtn: 'Tüm adımları gör',
      stepsBtnClose: 'Adımları kapat',
      docsBtn: 'Belgelerim',
      docsBtnClose: 'Belgeleri kapat',
      view: 'Görüntüle',
      pending: 'Bekleniyor',
      complete: 'tamamlandı',
    },
    en: {
      current: 'Current',
      empty: 'Process not started yet',
      unavailable: 'Process information is not connected yet.',
      stepsBtn: 'View all steps',
      stepsBtnClose: 'Hide steps',
      docsBtn: 'My documents',
      docsBtnClose: 'Hide documents',
      view: 'View',
      pending: 'Pending',
      complete: 'completed',
    },
    cs: {
      current: 'Aktuální',
      empty: 'Proces zatím nezačal',
      unavailable: 'Informace o procesu zatím nejsou připojeny.',
      stepsBtn: 'Zobrazit všechny kroky',
      stepsBtnClose: 'Skrýt kroky',
      docsBtn: 'Moje dokumenty',
      docsBtnClose: 'Skrýt dokumenty',
      view: 'Zobrazit',
      pending: 'Čeká',
      complete: 'dokončeno',
    },
  }[lang] || {};

  if (!tracker || !formType) return null;
  const title = tracker.PROCESS_TYPES?.[formType]?.title?.[lang] || tracker.PROCESS_TYPES?.[formType]?.title?.en || 'Application Process';
  const fallbackTabs = tracker.detectProcessTypes
    ? tracker.detectProcessTypes(contact).map((key) => ({
      key,
      label: key === 'blue_card' ? t('svc.blue_card') : t('svc.emp_card'),
    }))
    : [];
  const processTabs = (processOptions && processOptions.length ? processOptions : fallbackTabs)
    .filter((option) => option && (option.key === 'blue_card' || option.key === 'employee_card'));
  if (!contact) {
    return (
      <Card className="mb-20">
        <CardHead icon="list-checks" title={title} sub={copy.unavailable} />
      </Card>
    );
  }

  const effectiveDoc = tracker.processDocFromContact(contact, formType, { completedStages: {}, currentStage: tracker.PROCESS_STAGES[0] });
  const rows = tracker.getProcessStatus(effectiveDoc, null, lang) || [];
  const progress = tracker.calculateProgress(effectiveDoc);
  const doneCount = rows.filter((row) => row.completed).length;
  const totalCount = rows.length;
  const current = rows.find((row) => row.isCurrent) || rows.find((row) => !row.completed) || rows[rows.length - 1];
  const docStatusRaw = tracker.documentStatusFromContact ? tracker.documentStatusFromContact(contact, formType) : { items: [], total: 0, doneCount: 0 };
  const docItems = (docStatusRaw.items || []).filter((doc) => doc.key !== 'application_fee');
  const docStatus = {
    ...docStatusRaw,
    items: docItems,
    total: docItems.length,
    doneCount: docItems.filter((doc) => doc.completed).length,
  };

  return (
    <Card className="mb-20">
      <div className="card-bd">
        <div className="flex jb ac mb-14 wrap gap-12">
          <div>
            <div className="flex ac gap-8 wrap">
              <div className="h3">{title}</div>
              {processTabs.length > 1 && (
                <div className="flex gap-6 wrap">
                  {processTabs.map((option) => (
                    <Btn
                      key={option.key}
                      type="button"
                      variant={(selectedProcessKey || formType) === option.key ? 'primary' : 'ghost'}
                      size="sm"
                      icon={option.key === 'blue_card' ? 'badge-check' : 'briefcase-business'}
                      onClick={() => onSelectProcess && onSelectProcess(option.key)}
                    >
                      {option.label || (option.key === 'blue_card' ? t('svc.blue_card') : t('svc.emp_card'))}
                    </Btn>
                  ))}
                </div>
              )}
            </div>
            <div className="muted" style={{ fontSize: 12.5 }}>{doneCount}/{totalCount} {copy.complete}</div>
          </div>
          <div className="txt-r"><div className="strong tnum" style={{ fontSize: 18 }}>{progress}%</div><div className="dim" style={{ fontSize: 11.5 }}>{t('sec.complete')}</div></div>
        </div>

        <div style={{ height: 8, background: 'var(--surface-3)', borderRadius: 99, overflow: 'hidden', marginBottom: 18 }}>
          <span style={{ display: 'block', height: '100%', width: progress + '%', background: 'var(--brand-500)', borderRadius: 99 }} />
        </div>

        {/* Big active step */}
        {current ? (
          <div style={{ background: 'var(--brand-50)', border: '1px solid var(--brand-200)', borderRadius: 'var(--r-md)', padding: '16px 18px', marginBottom: 16 }}>
            <div className="flex ac gap-12">
              <div className="l-ic" style={{ background: 'var(--brand-500)', color: 'white', width: 44, height: 44, flexShrink: 0 }}>
                <Icon name={STAGE_ICONS[current.key] || (current.completed ? 'check' : 'hourglass')} size={22} />
              </div>
              <div style={{ minWidth: 0, flex: '1 1 auto' }}>
                <div className="eyebrow" style={{ color: 'var(--brand-600)', marginBottom: 4 }}>{copy.current}</div>
                <div className="h3" style={{ margin: 0 }}>{current.label}</div>
              </div>
            </div>
          </div>
        ) : (
          <div className="muted mb-14">{copy.empty}</div>
        )}

        {/* Toggle buttons */}
        <div className="flex gap-8 wrap">
          <Btn variant="ghost" icon={showSteps ? 'chevron-up' : 'list-checks'} onClick={() => setShowSteps((v) => !v)}>
            {showSteps ? copy.stepsBtnClose : copy.stepsBtn}
          </Btn>
          <Btn variant="ghost" icon={showDocs ? 'chevron-up' : 'folder'} onClick={() => setShowDocs((v) => !v)}>
            {showDocs ? copy.docsBtnClose : copy.docsBtn} ({docStatus.doneCount}/{docStatus.total})
          </Btn>
        </div>

        {/* Steps expand */}
        {showSteps && (
          <div className="rowlist" style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--line-2)' }}>
            {rows.map((row) => (
              <div className="lrow" key={row.key}>
                <div className="l-ic" style={row.completed ? { background: 'var(--ok-bg)', color: 'var(--ok)' } : row.isCurrent ? { background: 'var(--brand-50)', color: 'var(--brand-600)' } : { background: 'var(--surface-3)', color: 'var(--ink-300)' }}>
                  <Icon name={STAGE_ICONS[row.key] || (row.completed ? 'check' : row.isCurrent ? 'hourglass' : 'circle')} size={17} />
                </div>
                <div className="l-bd"><div className="l-t">{row.label}</div></div>
                {row.completed ? <Badge tone="ok" dot>{t('c.done')}</Badge> : row.isCurrent ? <Badge tone="info" dot>{copy.current}</Badge> : <Badge tone="neut">{copy.pending}</Badge>}
              </div>
            ))}
          </div>
        )}

        {/* Docs expand */}
        {showDocs && (
          <div className="rowlist" style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--line-2)' }}>
            {docStatus.items.map((doc) => (
              <div className="lrow" key={doc.key}>
                <div className="l-ic" style={doc.completed ? { background: 'var(--ok-bg)', color: 'var(--ok)' } : { background: 'var(--surface-3)', color: 'var(--ink-300)' }}>
                  <Icon name={doc.completed ? 'file-check-2' : 'file'} size={17} />
                </div>
                <div className="l-bd"><div className="l-t">{doc.label}</div></div>
                {doc.url ? (
                  <a href={doc.url} target="_blank" rel="noopener noreferrer" className="btn btn-quiet btn-sm">
                    <Icon name="external-link" size={14} /> {copy.view}
                  </a>
                ) : doc.completed ? <Badge tone="ok" dot>{t('c.done')}</Badge> : <Badge tone="neut">{copy.pending}</Badge>}
              </div>
            ))}
          </div>
        )}

        {/* Actions row */}
        {go && (
          <div className="flex gap-10 wrap" style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line-2)' }}>
            <Btn variant="ghost" size="sm" icon="folder-open" onClick={() => go('cases')}>{t('d.viewCase')}</Btn>
          </div>
        )}
      </div>
    </Card>
  );
}

function ExpatDashboard({ ct, go, openModal, calendarEvents, tasks, purchasedServices, blankProfile, calendarSync, onConnectGoogleCalendar, onSyncGoogleCalendar, onToggleTask }) {
  const { t, dict } = useT();
  const [selectedProcessKey, setSelectedProcessKey] = React.useState(ct?.key || 'employee_card');
  const steps = D.stepFlows[ct.steps].map((s) => {
    if (ct.managerApproved && (s.k === 'ministry' || s.k === 'approved')) return { label: t('step.' + s.k), state: 'done' };
    return { label: t('step.' + s.k), state: s.state };
  });
  const apptDate = (a) => `${dict.weekdays[a.dowi]} ${a.d} ${dict.months[a.moi]} · ${a.time}`;
  const eventTitle = (e) => e.title || t('ev.' + e.key);
  const eventLoc = (e) => e.loc || t('ev.' + e.key + 'Loc');
  const eventDow = (d) => dict.weekdays[(FIRST_DOW + d - 1) % 7];
  const customAppts = (calendarEvents || []).filter((e) => e.key === 'custom' || e.key === 'google').map((e) => ({
    tk: e.key,
    title: eventTitle(e),
    loc: eventLoc(e),
    dowi: (FIRST_DOW + e.d - 1) % 7,
    d: e.d,
    moi: MONTH_IDX,
    dateLabel: e.dateLabel,
    time: e.time,
    tag: e.tag || (e.key === 'custom' ? 'confirmed' : (e.key === 'deadline' ? 'pending' : 'upcoming')),
    tagc: e.tagc || (e.key === 'deadline' ? 'warn' : (e.tone === 'ok' ? 'ok' : 'info')),
    ic: e.ic,
  }));
  const dashboardAppts = customAppts.concat(blankProfile ? [] : D.appts).slice(0, 4).map((a) => {
    if (ct.managerApproved && a.tk === 'ministry') return { ...a, tag: 'confirmed', tagc: 'ok' };
    return a;
  });
  const dashboardTasks = (tasks || D.tasks).slice(0, 4);
  const dashboardDocs = blankProfile ? [] : D.docs;
  const dashboardMsgs = blankProfile ? [] : D.msgs;
  const purchasedMap = new Map();
  if (!blankProfile) {
    (D.services || []).filter((s) => s.owned).forEach((service) => {
      purchasedMap.set(service.k, { service, purchase: { k: service.k, status: 'active', source: 'profile' } });
    });
  }
  (purchasedServices || []).forEach((purchase) => {
    const service = (D.services || []).find((s) => s.k === purchase.k);
    if (service) purchasedMap.set(service.k, { service, purchase });
  });
  const dashboardPurchased = Array.from(purchasedMap.values()).slice(0, 5);
  const processSeen = new Set();
  const dashboardProcessOptions = dashboardPurchased
    .map((row) => {
      const key = row.service.k === 'blue_card' ? 'blue_card' : (row.service.k === 'emp_card' ? 'employee_card' : '');
      if (!key || processSeen.has(key)) return null;
      processSeen.add(key);
      return { key, serviceKey: row.service.k, label: t('svc.' + row.service.k) };
    })
    .filter(Boolean);
  const tracker = window.PROCESS_TRACKER;
  const authState = window.YEYE_AUTH && window.YEYE_AUTH.getState ? window.YEYE_AUTH.getState() : {};
  const contactProcessOptions = tracker && tracker.detectProcessTypes
    ? tracker.detectProcessTypes(authState.contact).map((key) => ({
      key,
      serviceKey: key === 'blue_card' ? 'blue_card' : 'emp_card',
      label: key === 'blue_card' ? t('svc.blue_card') : t('svc.emp_card'),
    }))
    : [];
  contactProcessOptions.forEach((option) => {
    if (!processSeen.has(option.key)) {
      processSeen.add(option.key);
      dashboardProcessOptions.push(option);
    }
  });
  React.useEffect(() => {
    if (!dashboardProcessOptions.length) {
      setSelectedProcessKey(ct?.key || 'employee_card');
      return;
    }
    if (!dashboardProcessOptions.some((option) => option.key === selectedProcessKey)) {
      setSelectedProcessKey(dashboardProcessOptions[0].key);
    }
  }, [ct?.key, dashboardProcessOptions.map((option) => option.key).join('|'), selectedProcessKey]);
  const activeProcessKey = dashboardProcessOptions.some((option) => option.key === selectedProcessKey)
    ? selectedProcessKey
    : (dashboardProcessOptions[0]?.key || ct.key);
  const activeCt = { ...ct, key: activeProcessKey };
  const apptLine = (a) => a.title ? `${a.dateLabel || `${eventDow(a.d)} ${a.d} ${dict.months[a.moi]}`} · ${a.time}` : apptDate(a);
  const emptyRow = (icon, text) => (
    <div className="lrow" style={{ borderBottom: 'none' }}>
      <div className="l-ic" style={{ background: 'var(--surface-3)', color: 'var(--ink-300)' }}><Icon name={icon} size={18} /></div>
      <div className="l-bd"><div className="l-s">{text}</div></div>
    </div>
  );

  return (
    <>
      <WelcomeBar ct={ct} />

      {dashboardPurchased.length > 0 && (
        <Card className="mb-20">
          <CardHead icon="package-check" title={t('svc.purchasedTitle')} sub={dashboardPurchased.length + ' ' + t('svc.itemsWord')}
            action={<Btn variant="quiet" size="sm" iconR="arrow-right" onClick={() => go('services')}>{t('c.open')}</Btn>} />
          <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
            <div className="rowlist">
              {dashboardPurchased.map((row) => {
                const rowProcessKey = row.service.k === 'blue_card' ? 'blue_card' : (row.service.k === 'emp_card' ? 'employee_card' : '');
                const canSelectProcess = !!rowProcessKey;
                const isActiveProcess = rowProcessKey && rowProcessKey === activeProcessKey;
                return (
                <div
                  className="lrow"
                  key={row.service.k}
                  onClick={canSelectProcess ? () => setSelectedProcessKey(rowProcessKey) : undefined}
                  style={canSelectProcess ? { cursor: 'pointer', background: isActiveProcess ? 'var(--brand-50)' : undefined } : undefined}
                >
                  <div className="l-ic"><Icon name={D.catIcon[row.service.cat]} size={18} /></div>
                  <div className="l-bd"><div className="l-t">{t('svc.' + row.service.k)}</div><div className="l-s">{t('scat.' + row.service.cat)} · {row.service.p}{row.service.u || ''}</div></div>
                  {isActiveProcess ? <Badge tone="info" dot>Process</Badge> : <Badge tone={row.purchase.status === 'cancelled' ? 'bad' : row.purchase.status === 'paused' ? 'warn' : 'ok'} dot>{t('st.' + (row.purchase.status || 'active'))}</Badge>}
                  <Btn variant="quiet" size="sm" icon="settings" onClick={(event) => { event.stopPropagation(); openModal('manageService', row); }}>{t('c.manage')}</Btn>
                </div>
              );})}
            </div>
          </div>
        </Card>
      )}

      <ProcessTrackerCard
        ct={activeCt}
        go={go}
        processOptions={dashboardProcessOptions}
        selectedProcessKey={activeProcessKey}
        onSelectProcess={setSelectedProcessKey}
      />

      {/* stat row */}
      <div className="grid g-12 mb-20" style={{ gap: 16 }}>
        <div className="col-3"><Stat icon="file-check-2" value={blankProfile ? '0 / 0' : '3 / 5'} label={t('stt.docs')} /></div>
        <div className="col-3"><Stat icon="calendar-clock" tone="blue" value={blankProfile ? '—' : '9 Jun'} label={t('stt.nextAppt')} /></div>
        <div className="col-3"><Stat icon="receipt" tone="amber" value={blankProfile ? '€0' : '€290'} label={t('stt.outstanding')} /></div>
        <div className="col-3"><Stat icon="message-square" value={blankProfile ? '0' : '2'} label={t('stt.unread')} /></div>
      </div>

      <div className="dash-grid">
        {/* appointments */}
        <div className="col-12">
          <Card>
            <CardHead icon="calendar-days" title={t('sec.appointments')} sub={t('sec.apptSub')}
              action={<div className="flex gap-8 wrap">
                <Btn variant="quiet" size="sm" icon={calendarSync && calendarSync.connected ? 'refresh-cw' : 'calendar-check'} onClick={calendarSync && calendarSync.connected ? onSyncGoogleCalendar : onConnectGoogleCalendar}>
                  {calendarSync && calendarSync.syncing ? t('cal.syncing') : (calendarSync && calendarSync.connected ? t('cal.sync') : t('cal.connect'))}
                </Btn>
                <Btn variant="quiet" size="sm" icon="calendar-plus" onClick={() => openModal('calendarEvent')}>{t('c.add')}</Btn>
              </div>} />
            <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="rowlist">
                {dashboardAppts.length === 0 ? emptyRow('calendar-x', t('appt.noEvents')) : dashboardAppts.map((a, i) => (
                  <div className="lrow" key={i}>
                    <div className="l-ic"><Icon name={a.ic} size={18} /></div>
                    <div className="l-bd"><div className="l-t">{a.title || t(a.titleK)}</div><div className="l-s">{apptLine(a)} · {a.loc || t(a.locK)}</div></div>
                    <Badge tone={a.tagc} dot>{t('st.' + a.tag)}</Badge>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        {/* document center */}
        <div className="col-6">
          <Card>
            <CardHead icon="folder" title={t('sec.docCenter')} sub={t('sec.docCenterSub')}
              action={<Btn variant="soft" size="sm" icon="upload" onClick={() => openModal('upload')}>{t('c.upload')}</Btn>} />
            <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="rowlist">
                {dashboardDocs.length === 0 ? emptyRow('folder-open', t('doc.awaiting')) : dashboardDocs.map((d, i) => (
                  <div className="lrow" key={i}>
                    <div className="l-ic" style={d.ok ? { background: 'var(--ok-bg)', color: 'var(--ok)' } : { background: 'var(--bad-bg)', color: 'var(--bad)' }}>
                      <Icon name={d.ok ? 'file-check-2' : 'file-warning'} size={18} />
                    </div>
                    <div className="l-bd"><div className="l-t">{t('doc.' + d.tk)}</div><div className="l-s">{d.ok ? t('c.verified') : (d.tk === 'criminal' ? t('doc.criminalSub') : t('doc.missingSub'))}</div></div>
                    {d.ok ? <Badge tone="ok" dot>{t('c.verified')}</Badge> : <Btn variant="soft" size="sm" icon="upload" onClick={() => openModal('upload')}>{t('c.upload')}</Btn>}
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        {/* tasks */}
        <div className="col-6">
          <Card>
            <CardHead icon="circle-check-big" title={t('nav.tasks')} sub={t('sub.tasks')}
              action={<Btn variant="quiet" size="sm" iconR="arrow-right" onClick={() => go('tasks')}>{t('c.all')}</Btn>} />
            <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="rowlist">
                {dashboardTasks.length === 0 ? emptyRow('circle-check-big', '—') : dashboardTasks.map((tk, i) => (
                  <div className="lrow" key={i}>
                    <button className="icon-btn" onClick={() => onToggleTask && onToggleTask(tk)} style={{ width: 28, height: 28, color: tk.done ? 'var(--brand-500)' : 'var(--ink-300)' }}><Icon name={tk.done ? 'circle-check-big' : 'circle'} size={20} /></button>
                    <div className="l-bd">
                      <div className="l-t" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', color: tk.done ? 'var(--ink-400)' : 'var(--ink-900)' }}>
                        {tk.taskType && <Badge tone={tk.taskTypeTone}>{t(tk.taskTypeLabelKey)}</Badge>}
                        <span style={{ textDecoration: tk.done ? 'line-through' : 'none' }}>{tk.title || t(tk.tk)}</span>
                      </div>
                    </div>
                    <Badge tone={tk.tone} dot>{(tk.done ? t('c.done') : t('c.due')) + ' ' + tk.due}</Badge>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        {/* invoices */}
        <div className="col-12">
          <Card>
            <CardHead icon="receipt" title={t('sec.invoices')} action={<div className="flex gap-8 wrap"><Btn variant="quiet" size="sm" icon="life-buoy" onClick={() => openModal('ticket', { catK: 'it', subject: t('ticket.itInvoiceSubject') })}>{t('c.openItTicket')}</Btn><Btn variant="quiet" size="sm" iconR="arrow-right" onClick={() => go('invoices')}>{t('c.all')}</Btn></div>} />
            <div className="card-bd">
              <div className="flex gap-12 mb-16">
                <div className="grow" style={{ background: 'var(--ok-bg)', border: '1px solid var(--ok-line)', borderRadius: 'var(--r-md)', padding: '12px 14px' }}>
                  <div className="dim" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ok)' }}>{t('st.paid')}</div><div className="strong tnum" style={{ fontSize: 19 }}>{blankProfile ? '€0.00' : '€160.00'}</div>
                </div>
                <div className="grow" style={{ background: 'var(--warn-bg)', border: '1px solid var(--warn-line)', borderRadius: 'var(--r-md)', padding: '12px 14px' }}>
                  <div className="dim" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--warn)' }}>{t('st.outstanding')}</div><div className="strong tnum" style={{ fontSize: 19 }}>{blankProfile ? '€0.00' : '€290.00'}</div>
                </div>
              </div>
              {blankProfile ? emptyRow('receipt', '—') : <div className="lrow" style={{ borderBottom: 'none', padding: '4px 0' }}>
                <div className="l-bd"><div className="l-t mono" style={{ fontSize: 12.5 }}>YE-2026-0142</div><div className="l-s">{t('c.due')} 14 Jun 2026</div></div>
                <Btn variant="primary" size="sm" onClick={() => go('invoices')}>{t('c.pay')} €290</Btn>
              </div>}
            </div>
          </Card>
        </div>

      </div>
    </>
  );
}

Object.assign(window, { ExpatDashboard });