</Field>
        <Field label={t('mod.priority')}><div className="flex gap-8"><span className="chip on">{t('mod.normal')}</span><span className="chip">{t('mod.high')}</span><span className="chip">{t('mod.urgent')}</span></div></Field>
      </div>
    </Modal>
  );
}

/* ---------- Notifications panel ---------- */
function NotifPanel({ onClose, go }) {
  const { t } = useT();
  const items = [
    { ic: 'file-warning', ty: 'bad', tk: 'n_criminal', s: '2h' },
    { ic: 'calendar-clock', ty: 'warn', tk: 'n_biometrics', s: '5h' },
    { ic: 'check', ty: 'ok', tk: 'n_verified', s: '1d' },
    { ic: 'megaphone', ty: 'info', tk: 'n_rules', s: '2d' },
    { ic: 'receipt', ty: 'warn', tk: 'n_invoice', s: '3d' },
  ];
  const col = { bad: 'var(--bad)', warn: 'var(--warn)', ok: 'var(--ok)', info: 'var(--info)' };
  const bg = { bad: 'var(--bad-bg)', warn: 'var(--warn-bg)', ok: 'var(--ok-bg)', info: 'var(--info-bg)' };
  return (
    <Panel title={t('sec.notifications')} onClose={onClose} footer={<Btn variant="ghost" className="btn-block" onClick={onClose}>{t('c.markRead')}</Btn>}>
      <div className="rowlist" style={{ margin: '-6px 0' }}>
        {items.map((n, i) => (
          <div key={i} className="lrow pointer" onClick={() => { onClose(); go('dashboard'); }}>
            <div className="l-ic" style={{ background: bg[n.ty], color: col[n.ty] }}><Icon name={n.ic} size={18} /></div>
            <div className="l-bd"><div className="l-t" style={{ fontSize: 13, fontWeight: 500 }}>{t(n.tk)}</div><div className="l-s">{n.s} {t('col.ago')}</div></div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

/* ============================================================
   APP ROOT
   ============================================================ */
const TITLES = {
  dashboard: ['Dashboard', null], services: ['Services Marketplace', 'Purchase & manage services'],
  cases: ['Cases', null], documents: ['Documents', null], appointments: ['Appointments', null],
  messages: ['Messages', null], tasks: ['Tasks', null], invoices: ['Invoices & Billing', null],
  reports: ['Reports', null], support: ['Support Center', null], profile: ['Profile', null], settings: ['Settings', null],
};

function App() {
  const [authState, setAuthState] = useState(() => window.YEYE_AUTH.getState());
  useEffect(() => window.YEYE_AUTH.subscribe(setAuthState), []);
  const [clientType, setClientType] = useState('employee_card');
  const [branding, setBranding] = useState('individual');
  const [page, setPage] = useState('dashboard');
  const [mini, setMini] = useState(false);
  const [drawer, setDrawer] = useState(false);
  const [modal, setModal] = useState(null);
  const [modalData, setModalData] = useState(null);
  const [notif, setNotif] = useState(false);
  const [lang, setLang] = useState(() => localStorage.getItem('yeye-lang') || 'en');
  const authed = !!(authState.user && authState.token && authState.contact);
  const checking = !!authState.gateChecking;

const t = React.useMemo(() => ((k) => (window.I18N[lang] && window.I18N[lang][k]) || window.I18N.en[k] || k), [lang]);
  const dict = window.I18N[lang] || window.I18N.en;
  const setLangP = (l) => { setLang(l); localStorage.setItem('yeye-lang', l); };

// Derive case type from GHL tags (falls back to employee_card)
  const deriveCaseType = (tags) => {
    const ts = (tags || []).map((x) => String(x).toLowerCase());
    if (ts.some((x) => x.startsWith('blue_card') || x.includes('bluecard'))) return 'blue_card';
    if (ts.some((x) => x.startsWith('family'))) return 'family_reunion';
    if (ts.some((x) => x.startsWith('business'))) return 'business_visa';
    if (ts.some((x) => x.startsWith('osvc'))) return 'osvc';
    if (ts.some((x) => x.startsWith('relocation'))) return 'relocation';
    if (ts.some((x) => x.startsWith('employee_card') || x.includes('employee_onboarding'))) return 'employee_card';
    return 'employee_card';
  };

// Build live case-type data from GHL contact + mock template
  const buildLiveCt = (mockCt, contact) => {
    if (!contact) return mockCt;
    const cap = (w) => w ? w.charAt(0).toUpperCase() + w.slice(1) : '';
    const full = [contact.firstName, contact.lastName].filter(Boolean).join(' ').split(' ').map(cap).join(' ').trim();
    const addrField = (contact.customFields || []).find((f) => /correspondence|address|adres/i.test(f.key || ''));
    let region = mockCt.region;
    if (addrField && typeof addrField.value === 'string') {
      const m = addrField.value.match(/([A-Za-zÀ-ž\s]+)\/([A-Za-zÀ-ž\s]+)\s*$/);
      if (m) region = cap(m[1].trim()) + ', ' + cap(m[2].trim());
    }
    const caseId = 'YE-' + String(contact.contactId || '').slice(0, 8).toUpperCase();
    return { ...mockCt, who: full || mockCt.who, region, caseId };
  };

// Live client-type derived from contact tags; user can still switch via the demo ClientTypeMenu
  const derivedKey = authState.contact ? deriveCaseType(authState.contact.tags) : clientType;
  const effectiveKey = clientType === 'employee_card' && authState.contact ? derivedKey : clientType;
  const mockCt = window.YEYE.clientTypes[effectiveKey] || window.YEYE.clientTypes.employee_card;
  const ctData = buildLiveCt(mockCt, authState.contact);

// when client type changes, jump to dashboard; employer-sponsored branding only valid for sponsored types
  useEffect(() => { setPage('dashboard'); if (!ctData.org && branding === 'corporate') setBranding('individual'); }, [clientType]);

// when contact loads, sync clientType to derived
  useEffect(() => {
    if (authState.contact) {
      const k = deriveCaseType(authState.contact.tags);
      if (k !== clientType) setClientType(k);
    }
  }, [authState.contact]);

if (!authed) {
    return (
      <LangCtx.Provider value={{ lang, t, dict }}>
        <LoginScreen error={authState.error} checking={checking} />
      </LangCtx.Provider>
    );
  }

return (
    <LangCtx.Provider value={{ lang, t, dict }}>
    <div className="app">
      <div className={'scrim ' + (drawer ? 'show' : '')} onClick={() => setDrawer(false)} />
      <Sidebar nav={window.YEYE.nav} active={page} onNav={go} mini={mini} open={drawer} onClose={() => setDrawer(false)} ct={ctData} />
      <div className="main">
        <Topbar
          title={page === 'dashboard' ? t('nav.dashboard') : t('nav.' + page)} sub={page === 'dashboard' ? t('ct.' + clientType) : null}
          ct={ctData} branding={branding} onBranding={setBranding}
          ctKey={clientType} onCt={setClientType} lang={lang} onLang={setLangP}
          onToggleSidebar={() => setMini((m) => !m)} onHamburger={() => setDrawer(true)}
          onNotif={() => setNotif(true)} onSearch={() => {}} />
        <div className="content">
          <div className="page">{renderPage()}</div>
          <MobileClientType ctKey={clientType} onCt={setClientType} />
        </div>
      </div>

{modal === 'service' && <ServiceModal service={modalData} onClose={() => setModal(null)} />}
      {modal === 'upload' && <UploadModal onClose={() => setModal(null)} />}
      {modal === 'ticket' && <TicketModal onClose={() => setModal(null)} />}
      {notif && <NotifPanel onClose={() => setNotif(false)} go={go} />}
    </div>
    </LangCtx.Provider>
  );
}

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