/* YeYe Expat Centre — Pages (all translated) */
const P = window.YEYE;

function PageHead({ title, sub, actions }) {
  return (
    <div className="phead">
      <div className="pt"><h1 className="h1">{title}</h1>{sub && <div className="muted">{sub}</div>}</div>
      {actions && <div className="flex gap-8 wrap">{actions}</div>}
    </div>
  );
}

/* ===== SERVICES — real catalog grouped by category ===== */
function ServiceCard({ s, openModal }) {
  const { t } = useT();
  const price = s.p + (s.u || '');
  return (
    <Card className="card-pad" style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div className="flex ac gap-10">
        <div className="hd-ic" style={{ width: 40, height: 40, borderRadius: 11, flexShrink: 0, background: s.owned ? 'var(--brand-50)' : 'var(--accent-50)', color: s.owned ? 'var(--brand-600)' : 'var(--accent-600)' }}><Icon name={P.catIcon[s.cat]} size={19} /></div>
        {s.owned && <Badge tone="ok" dot>{t('c.active')}</Badge>}
      </div>
      <div className="grow"><div className="strong" style={{ fontSize: 14, lineHeight: 1.3 }}>{t('svc.' + s.k)}</div></div>
      <div className="flex jb ac" style={{ paddingTop: 11, borderTop: '1px solid var(--line-2)' }}>
        <span className="strong tnum" style={{ fontSize: 14 }}>{price}</span>
        {s.owned
          ? <Btn variant="ghost" size="sm" iconR="arrow-right">{t('c.manage')}</Btn>
          : <Btn variant="primary" size="sm" icon="plus" onClick={() => openModal('service', s)}>{t('c.addService')}</Btn>}
      </div>
    </Card>
  );
}
function ServicesPage({ openModal }) {
  const { t } = useT();
  const owned = P.services.filter((s) => s.owned);
  return (
    <>
      <PageHead title={t('nav.services')} sub={t('sub.services')} />
      <div className="flex ac gap-8 mb-12"><div className="eyebrow">{t('c.myServices')}</div><Badge tone="ok">{owned.length}</Badge></div>
      <div className="grid g-12 mb-24" style={{ gap: 16 }}>
        {owned.map((s) => <div className="col-3" key={s.k}><ServiceCard s={s} openModal={openModal} /></div>)}
      </div>
      <div className="flex ac gap-8 mb-16"><div className="eyebrow">{t('c.availableServices')}</div><Badge tone="neut">{P.services.filter((s) => !s.owned).length}</Badge></div>
      {P.serviceCats.map((cat) => {
        const list = P.services.filter((s) => s.cat === cat && !s.owned);
        if (!list.length) return null;
        return (
          <div key={cat} className="mb-24">
            <div className="flex ac gap-10 mb-12">
              <div className="hd-ic" style={{ width: 30, height: 30, borderRadius: 8 }}><Icon name={P.catIcon[cat]} size={16} /></div>
              <div className="h3" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>{t('scat.' + cat)}</div>
              <span className="dim" style={{ fontSize: 12.5 }}>{list.length}</span>
            </div>
            <div className="grid g-12" style={{ gap: 16 }}>
              {list.map((s) => <div className="col-3" key={s.k}><ServiceCard s={s} openModal={openModal} /></div>)}
            </div>
          </div>
        );
      })}
    </>
  );
}

/* ===== DOCUMENTS ===== */
function DocumentsPage({ openModal }) {
  const { t } = useT();
  return (
    <>
      <PageHead title={t('nav.documents')} sub={t('sub.documents')}
        actions={<><Btn variant="ghost" icon="folder-plus">{t('c.newFolder')}</Btn><Btn variant="primary" icon="upload" onClick={() => openModal('upload')}>{t('c.upload')}</Btn></>} />
      <div className="eyebrow mb-12">{t('col.folders')}</div>
      <div className="grid g-12 mb-24" style={{ gap: 14 }}>
        {P.folders.map((f, i) => (
          <div className="col-3" key={i}>
            <Card className="card-pad pointer" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div className="hd-ic" style={{ width: 40, height: 40, background: 'var(--surface-3)', color: 'var(--ink-500)' }}><Icon name={f.ic} size={19} /></div>
              <div className="grow"><div className="strong" style={{ fontSize: 14 }}>{t(f.tk)}</div><div className="dim" style={{ fontSize: 12 }}>{f.n} {t('col.files')}</div></div>
              <Icon name="chevron-right" size={16} className="dim" />
            </Card>
          </div>
        ))}
      </div>
      <div className="eyebrow mb-12">{t('col.recent')}</div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>{t('col.name')}</th><th>{t('col.addedBy')}</th><th>{t('col.date')}</th><th>{t('col.status')}</th><th></th></tr></thead>
          <tbody>
            {P.files.map((f, i) => (
              <tr key={i} className="pointer">
                <td><div className="flex ac gap-10"><div className="l-ic" style={f.ok ? { width: 32, height: 32, background: 'var(--surface-3)', color: 'var(--ink-500)' } : { width: 32, height: 32, background: 'var(--bad-bg)', color: 'var(--bad)' }}><Icon name={f.ic} size={16} /></div><div><div className="nm">{t('doc.' + f.tk)}</div><div className="dim" style={{ fontSize: 11.5 }}>{f.meta || t('doc.awaiting')}</div></div></div></td>
                <td className="muted">{f.byK ? t('by.' + f.byK) : '—'}</td>
                <td className="muted mono" style={{ fontSize: 12.5 }}>{f.d}</td>
                <td>{f.ok ? <Badge tone="ok" dot>{t('c.verified')}</Badge> : <Badge tone="bad" dot>{t('c.missing')}</Badge>}</td>
                <td className="txt-r">{f.ok ? <IconBtn name="download" /> : <Btn variant="soft" size="sm" icon="upload" onClick={() => openModal('upload')}>{t('c.upload')}</Btn>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

/* ===== MESSAGES ===== */
function MessagesPage() {
  const { t } = useT();
  const threads = [
    { whoK: 'immigration', av: 'IM', c: 'brand', lastK: 'm.appt', tm: '2h', n: 2 },
    { whoK: 'support', av: 'SP', c: 'accent', lastK: 'm.doc', tm: '1d', n: 0 },
    { whoK: 'relocation', av: 'RL', c: 'neut', lastK: 'm.reloc', tm: '3d', n: 0 },
  ];
  const [active, setActive] = useState(0);
  const conv = [
    { me: false, k: 'msg.c1', t: '09:12' }, { me: true, k: 'msg.c2', t: '09:20' },
    { me: false, k: 'msg.c3', t: '09:24' }, { me: false, k: 'msg.c4', t: '2h' },
  ];
  const tone = (c) => c === 'brand' ? { bg: 'var(--brand-100)', fg: 'var(--brand-700)' } : c === 'accent' ? { bg: 'var(--accent-100)', fg: 'var(--accent-700)' } : { bg: 'var(--neut-bg)', fg: 'var(--neut)' };
  return (
    <div style={{ height: '100%' }}>
      <div className="card" style={{ display: 'flex', height: 'calc(100vh - 66px - 60px)', minHeight: 460, overflow: 'hidden' }}>
        <div style={{ width: 300, borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }} className="desktop-only">
          <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--line-2)' }} className="flex jb ac"><div className="h3">{t('msg.inbox')}</div><IconBtn name="square-pen" /></div>
          <div style={{ overflowY: 'auto', flex: 1 }}>
            {threads.map((th, i) => (
              <div key={i} onClick={() => setActive(i)} className="pointer" style={{ display: 'flex', gap: 11, padding: '13px 16px', borderBottom: '1px solid var(--line-2)', background: active === i ? 'var(--brand-50)' : 'transparent' }}>
                <Avatar size="md" tone={tone(th.c)}>{th.av}</Avatar>
                <div className="grow" style={{ minWidth: 0 }}><div className="flex jb"><span className="nm" style={{ fontSize: 13.5 }}>{t('who.' + th.whoK)}</span><span className="dim" style={{ fontSize: 11 }}>{th.tm}</span></div><div className="dim" style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t(th.lastK)}</div></div>
                {th.n > 0 && <span className="nav-badge">{th.n}</span>}
              </div>
            ))}
          </div>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div style={{ padding: '13px 20px', borderBottom: '1px solid var(--line-2)' }} className="flex ac gap-12">
            <Avatar size="md" tone={tone(threads[active].c)}>{threads[active].av}</Avatar>
            <div className="grow"><div className="strong">{t('who.' + threads[active].whoK)}</div><div className="dim flex ac gap-6" style={{ fontSize: 12 }}><i style={{ background: 'var(--ok)', width: 7, height: 7, borderRadius: 99, display: 'inline-block' }} />{t('m.reply')}</div></div>
            <IconBtn name="phone" /><IconBtn name="info" />
          </div>
          <div style={{ flex: 1, overflowY: 'auto', padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 12, background: 'var(--surface-2)' }}>
            {conv.map((m, i) => (
              <div key={i} style={{ alignSelf: m.me ? 'flex-end' : 'flex-start', maxWidth: '74%' }}>
                <div style={{ padding: '10px 14px', borderRadius: 14, fontSize: 13.5, lineHeight: 1.5, background: m.me ? 'var(--brand-500)' : '#fff', color: m.me ? '#fff' : 'var(--ink-800)', border: m.me ? 'none' : '1px solid var(--line)', borderBottomRightRadius: m.me ? 4 : 14, borderBottomLeftRadius: m.me ? 14 : 4 }}>{t(m.k)}</div>
                <div className="dim" style={{ fontSize: 10.5, marginTop: 4, textAlign: m.me ? 'right' : 'left' }}>{m.t}</div>
              </div>
            ))}
          </div>
          <div style={{ padding: '13px 16px', borderTop: '1px solid var(--line-2)' }} className="flex ac gap-10">
            <IconBtn name="paperclip" />
            <input className="input" placeholder={t('m.write')} style={{ flex: 1 }} />
            <Btn variant="primary" icon="send">{t('c.send')}</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===== INVOICES ===== */
function InvoicesPage({ openModal }) {
  const { t } = useT();
  return (
    <>
      <PageHead title={t('nav.invoices')} sub={t('sub.invoices')}
        actions={<><Btn variant="ghost" icon="download">{t('c.statement')}</Btn><Btn variant="primary" icon="credit-card">{t('c.paymentMethods')}</Btn></>} />
      <div className="grid g-12 mb-20" style={{ gap: 16 }}>
        <div className="col-3"><Stat icon="wallet" tone="amber" value="€290.00" label={t('iv.outBalance')} /></div>
        <div className="col-3"><Stat icon="check-check" value="€160.00" label={t('iv.paidYear')} /></div>
        <div className="col-3"><Stat icon="receipt" tone="blue" value="4" label={t('iv.totalInv')} /></div>
        <div className="col-3"><Stat icon="calendar-clock" value="14 Jun" label={t('iv.nextDue')} /></div>
      </div>
      <Alert tone="warn" icon="triangle-alert" title={t('iv.alert')} action={<Btn variant="primary" size="sm">{t('c.payNow')}</Btn>} />
      <div className="tbl-wrap mt-16">
        <table className="tbl">
          <thead><tr><th>{t('col.invoice')}</th><th>{t('nav.services')}</th><th>{t('col.amount')}</th><th>{t('col.date')}</th><th>{t('col.status')}</th><th></th></tr></thead>
          <tbody>
            {P.invoices.map((inv, i) => (
              <tr key={i}>
                <td className="mono nm" style={{ fontSize: 12.5 }}>{inv.id}</td>
                <td className="muted">{t('iv.' + inv.svcK)}</td>
                <td className="nm tnum">{inv.amt}</td>
                <td className="muted mono" style={{ fontSize: 12.5 }}>{inv.due}</td>
                <td><Badge tone={inv.stc} dot>{t('st.' + inv.st)}</Badge></td>
                <td className="txt-r">{inv.st === 'outstanding' ? <Btn variant="primary" size="sm">{t('c.pay')}</Btn> : <IconBtn name="download" />}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

/* ===== SUPPORT ===== */
function SupportPage({ openModal }) {
  const { t } = useT();
  const cards = [{ ic: 'book-open', k: 'kb' }, { ic: 'messages-square', k: 'chat' }, { ic: 'phone', k: 'call' }, { ic: 'calendar-plus', k: 'book' }];
  return (
    <>
      <PageHead title={t('nav.support')} sub={t('sub.support')}
        actions={<Btn variant="primary" icon="plus" onClick={() => openModal('ticket')}>{t('c.newTicket')}</Btn>} />
      <div className="grid g-12 mb-24" style={{ gap: 14 }}>
        {cards.map((c, i) => (
          <div className="col-3" key={i}><Card className="card-pad pointer" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div className="hd-ic" style={{ width: 40, height: 40 }}><Icon name={c.ic} size={19} /></div>
            <div><div className="strong" style={{ fontSize: 14 }}>{t('sup.' + c.k)}</div><div className="dim" style={{ fontSize: 12 }}>{t('sup.' + c.k + 'S')}</div></div>
          </Card></div>
        ))}
      </div>
      <Card>
        <CardHead icon="life-buoy" title={t('sup.yourTickets')} sub={t('sup.yourTicketsSub')} />
        <div className="tbl-wrap" style={{ border: 'none', borderRadius: 0 }}>
          <table className="tbl">
            <thead><tr><th>{t('col.ticket')}</th><th>{t('col.subject')}</th><th>{t('col.category')}</th><th>{t('col.status')}</th><th>{t('col.updated')}</th></tr></thead>
            <tbody>
              {P.tickets.map((tk, i) => (
                <tr key={i} className="pointer">
                  <td className="mono nm" style={{ fontSize: 12.5 }}>{tk.id}</td>
                  <td className="nm">{t('t.' + tk.tk)}</td>
                  <td className="muted">{t('cat.' + tk.catK)}</td>
                  <td><Badge tone={tk.stc} dot>{t('st.' + tk.st)}</Badge></td>
                  <td className="muted">{tk.upd} {t('col.ago')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </>
  );
}

/* ===== CASES ===== */
function CasesPage() {
  const { t } = useT();
  const cases = [
    { id: 'YE-CZ-2026-0142', tk: 'cases.c1', stK: 'cstat.ministry', stc: 'info', pct: 50 },
    { id: 'YE-CZ-2026-0119', tk: 'cases.c2', stK: 'cstat.completed', stc: 'ok', pct: 100 },
    { id: 'YE-CZ-2026-0156', tk: 'cases.c3', stK: 'cstat.documents', stc: 'warn', pct: 15 },
  ];
  return (
    <>
      <PageHead title={t('nav.cases')} sub={t('sub.cases')} actions={<Btn variant="primary" icon="plus">{t('c.open')}</Btn>} />
      <div className="flex col gap-14">
        {cases.map((c, i) => (
          <Card key={i} className="card-pad">
            <div className="flex jb ac wrap gap-12">
              <div className="flex ac gap-12"><div className="hd-ic" style={{ width: 40, height: 40 }}><Icon name="folder-kanban" size={19} /></div>
                <div><div className="strong">{t(c.tk)}</div><div className="dim mono" style={{ fontSize: 12 }}>{c.id}</div></div></div>
              <div className="flex ac gap-16"><div style={{ width: 160 }}><Progress value={c.pct} thin /></div><Badge tone={c.stc} dot>{t(c.stK)}</Badge><Btn variant="ghost" size="sm" iconR="arrow-right">{t('c.open')}</Btn></div>
            </div>
          </Card>
        ))}
      </div>
    </>
  );
}

/* ===== APPOINTMENTS — Calendar (June 2026) ===== */
const CAL_EVENTS = [
  { d: 9, key: 'police', time: '09:30', tone: 'ok', ic: 'shield' },
  { d: 14, key: 'deadline', time: '23:59', tone: 'bad', ic: 'file-warning' },
  { d: 19, key: 'biometrics', time: '11:00', tone: 'info', ic: 'fingerprint' },
  { d: 27, key: 'consult', time: '10:00', tone: 'brand', ic: 'video' },
];
const TODAY = 7, MONTH_IDX = 5, FIRST_DOW = 0, DAYS_IN = 30;
function evTone(tone) {
  const m = { ok: ['var(--ok-bg)', 'var(--ok)'], info: ['var(--info-bg)', 'var(--info)'], bad: ['var(--bad-bg)', 'var(--bad)'], brand: ['var(--brand-500)', '#fff'] };
  const [bg, fg] = m[tone] || m.ok; return { background: bg, color: fg };
}
function ApptDetail({ e, title, loc, dim }) {
  return (
    <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: 14 }}>
      <div className="flex ac gap-10 mb-12">
        <div className="l-ic" style={{ ...evTone(e.tone), width: 36, height: 36 }}><Icon name={e.ic} size={18} /></div>
        <div className="grow"><div className="strong" style={{ fontSize: 14 }}>{title}</div></div>
      </div>
      <div className="flex col gap-8">
        <div className="flex ac gap-8 muted" style={{ fontSize: 12.5 }}><Icon name="clock" size={14} /> {e.time}</div>
        <div className="flex ac gap-8 muted" style={{ fontSize: 12.5 }}><Icon name="map-pin" size={14} /> {loc}</div>
      </div>
      <Btn variant="ghost" size="sm" className="btn-block mt-12" iconR="arrow-right">{dim}</Btn>
    </div>
  );
}
function AppointmentsPage() {
  const { t, dict } = useT();
  const [view, setView] = useState('month');
  const [sel, setSel] = useState(9);
  const evByDay = {};
  CAL_EVENTS.forEach((e) => { (evByDay[e.d] = evByDay[e.d] || []).push(e); });
  const selEvents = evByDay[sel] || [];
  const cells = [];
  for (let i = 0; i < FIRST_DOW; i++) cells.push(null);
  for (let d = 1; d <= DAYS_IN; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);
  const dow = (d) => dict.weekdays[(FIRST_DOW + d - 1) % 7];

  return (
    <>
      <PageHead title={t('nav.appointments')} sub={t('sub.appointments')}
        actions={<><Seg items={[{ value: 'month', label: t('c.month') }, { value: 'list', label: t('c.list') }]} value={view} onChange={setView} /><Btn variant="primary" icon="calendar-plus">{t('c.schedule')}</Btn></>} />
      {view === 'month' ? (
        <div className="dash-grid">
          <div className="col-8">
            <Card>
              <div className="cal-head">
                <div className="flex ac gap-10"><IconBtn name="chevron-left" /><div className="h3" style={{ minWidth: 150 }}>{dict.months[MONTH_IDX]} 2026</div><IconBtn name="chevron-right" /></div>
                <div className="grow" />
                <Btn variant="ghost" size="sm" icon="dot" onClick={() => setSel(TODAY)}>{t('c.today')}</Btn>
              </div>
              <div className="cal-grid">{dict.weekdays.map((w, i) => <div className="cal-dow" key={i}>{w}</div>)}</div>
              <div className="cal-grid">
                {cells.map((d, i) => {
                  if (d === null) return <div className="cal-cell empty" key={i} />;
                  const evs = evByDay[d] || [];
                  return (
                    <div key={i} className={'cal-cell ' + (d === TODAY ? 'today ' : '') + (d === sel ? 'sel' : '')} onClick={() => setSel(d)}>
                      <div className="cal-num">{d}</div>
                      {evs.map((e, j) => <div key={j} className={'cal-ev ' + e.tone}><span className="ev-dot" /><span className="ev-time mono">{e.time}</span> {t('ev.' + e.key).split(' — ')[0]}</div>)}
                    </div>
                  );
                })}
              </div>
            </Card>
          </div>
          <div className="col-4">
            <Card style={{ height: '100%' }}>
              <CardHead icon="calendar-clock" title={dow(sel) + ' · ' + sel + ' ' + dict.months[MONTH_IDX]} sub={selEvents.length + ' ' + (selEvents.length === 1 ? t('appt.event') : t('appt.events'))} />
              <div className="card-bd">
                {selEvents.length === 0
                  ? <div className="flex col ac jc" style={{ padding: '34px 10px', textAlign: 'center', gap: 10 }}><div className="hd-ic" style={{ width: 44, height: 44, background: 'var(--surface-3)', color: 'var(--ink-400)' }}><Icon name="calendar-x" size={20} /></div><div className="muted" style={{ fontSize: 13 }}>{t('appt.noEvents')}</div></div>
                  : <div className="flex col gap-12">{selEvents.map((e, i) => <ApptDetail key={i} e={e} title={t('ev.' + e.key)} loc={t('ev.' + e.key + 'Loc')} dim={t('c.details')} />)}</div>}
              </div>
            </Card>
          </div>
          <div className="col-12">
            <Card>
              <CardHead icon="list" title={t('appt.upcoming')} sub={t('appt.thisMonth')} />
              <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
                <div className="rowlist">
                  {CAL_EVENTS.map((e, i) => (
                    <div className="lrow pointer" key={i} onClick={() => setSel(e.d)}>
                      <div className="l-ic" style={evTone(e.tone)}><Icon name={e.ic} size={18} /></div>
                      <div className="l-bd"><div className="l-t">{t('ev.' + e.key)}</div><div className="l-s">{dow(e.d)} {e.d} {dict.months[MONTH_IDX]} · {e.time} · {t('ev.' + e.key + 'Loc')}</div></div>
                      <Btn variant="ghost" size="sm">{t('c.details')}</Btn>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
          </div>
        </div>
      ) : (
        <Card><div className="card-bd"><div className="rowlist">
          {CAL_EVENTS.map((e, i) => (
            <div className="lrow" key={i}>
              <div className="l-ic" style={evTone(e.tone)}><Icon name={e.ic} size={18} /></div>
              <div className="l-bd"><div className="l-t">{t('ev.' + e.key)}</div><div className="l-s">{dow(e.d)} {e.d} {dict.months[MONTH_IDX]} · {e.time} · {t('ev.' + e.key + 'Loc')}</div></div>
              <Btn variant="ghost" size="sm">{t('c.details')}</Btn>
            </div>
          ))}
        </div></div></Card>
      )}
    </>
  );
}

/* ===== TASKS ===== */
function TasksPage() {
  const { t } = useT();
  const tasks = [
    { tk: 'task.t1', due: '14 Jun', done: false, tone: 'bad' },
    { tk: 'task.t2', due: '14 Jun', done: false, tone: 'bad' },
    { tk: 'task.t3', due: '17 Jun', done: false, tone: 'warn' },
    { tk: 'task.t4', due: '1 Jun', done: true, tone: 'ok' },
  ];
  return (
    <>
      <PageHead title={t('nav.tasks')} sub={t('sub.tasks')} actions={<Btn variant="ghost" icon="filter">{t('c.filter')}</Btn>} />
      <Card><div className="card-bd"><div className="rowlist">
        {tasks.map((tk, i) => (
          <div className="lrow" key={i}>
            <button className="icon-btn" 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={{ textDecoration: tk.done ? 'line-through' : 'none', color: tk.done ? 'var(--ink-400)' : 'var(--ink-900)' }}>{t(tk.tk)}</div></div>
            <Badge tone={tk.tone} dot>{(tk.done ? t('c.done') : t('c.due')) + ' ' + tk.due}</Badge>
          </div>
        ))}
      </div></div></Card>
    </>
  );
}

/* ===== REPORTS ===== */
function MiniBars() {
  const data = [40, 55, 48, 62, 70, 58, 75, 68, 82, 78, 90, 85];
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 96, padding: '0 2px' }}>
      {data.map((h, i) => (
        <div key={i} className="grow" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{ width: '100%', height: h + '%', borderRadius: 6, background: i === data.length - 1 ? 'var(--brand-500)' : 'var(--brand-100)' }} />
          <span className="dim" style={{ fontSize: 9.5 }}>{i + 1}</span>
        </div>
      ))}
    </div>
  );
}
function ReportsPage() {
  const { t } = useT();
  return (
    <>
      <PageHead title={t('nav.reports')} sub={t('sub.reports')} actions={<Btn variant="ghost" icon="download">{t('c.exportPdf')}</Btn>} />
      <div className="grid g-12 mb-20" style={{ gap: 16 }}>
        <div className="col-3"><Stat icon="folder-check" value="92%" label={t('rep.completion')} trend="+8%" /></div>
        <div className="col-3"><Stat icon="clock" tone="blue" value="34d" label={t('rep.processing')} /></div>
        <div className="col-3"><Stat icon="shield-check" value="100%" label={t('rep.compliance')} /></div>
        <div className="col-3"><Stat icon="file-check-2" value="18" label={t('rep.docs')} /></div>
      </div>
      <Card><CardHead icon="chart-line" title={t('rep.activity')} sub={t('rep.last12')} /><div className="card-bd"><MiniBars /></div></Card>
    </>
  );
}

function SimplePage({ icon, title, sub }) {
  return (
    <div style={{ maxWidth: 520, margin: '8vh auto', textAlign: 'center' }}>
      <div className="hd-ic" style={{ width: 60, height: 60, margin: '0 auto 18px', borderRadius: 16 }}><Icon name={icon} size={28} /></div>
      <h1 className="h1" style={{ marginBottom: 8 }}>{title}</h1>
      <p className="muted">{sub}</p>
    </div>
  );
}

Object.assign(window, {
  ServicesPage, DocumentsPage, MessagesPage, InvoicesPage, SupportPage,
  CasesPage, AppointmentsPage, TasksPage, ReportsPage, SimplePage,
});