/* Hayes Global Mobility — UI kit: App shell + router + portal modal */
(function () {
  const NS = window.HayesGlobalMobilityDesignSystem_489ece;
  const { Navbar, Input, Button, Checkbox } = NS;

  function PortalModal({ onClose }) {
    return (
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'var(--overlay-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
        <div onClick={(e) => e.stopPropagation()} style={{ width: 420, maxWidth: '100%', background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-xl)', padding: 36, position: 'relative' }}>
          <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 16, right: 16, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-muted)' }}>
            <i data-lucide="x" style={{ width: 20, height: 20 }}></i>
          </button>
          <img src="assets/logo-hayes-color.png" alt="Hayes Global Mobility" style={{ height: 40, marginBottom: 18 }} />
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, color: 'var(--text-heading)', margin: '0 0 6px' }}>Client Portal</h3>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--text-muted)', margin: '0 0 22px' }}>Sign in to track your application status.</p>
          <form onSubmit={(e) => { e.preventDefault(); onClose(); }} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Input label="Email" type="email" placeholder="you@email.com" iconLeft={<i data-lucide="mail" style={{ width: 16, height: 16 }}></i>} required />
            <Input label="Password" type="password" placeholder="••••••••" iconLeft={<i data-lucide="lock" style={{ width: 16, height: 16 }}></i>} required />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Checkbox label="Remember me" />
              <a href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--text-link)', fontWeight: 600 }}>Forgot password?</a>
            </div>
            <Button type="submit" variant="primary" size="lg" fullWidth>Sign In</Button>
          </form>
        </div>
      </div>
    );
  }

  const SLUGS = {
    Home: '/', About: '/about', Visas: '/visas', Careers: '/careers',
    Investments: '/investments', Apply: '/apply', Contact: '/contact',
  };
  const PAGE_BY_SLUG = Object.fromEntries(Object.entries(SLUGS).map(([p, s]) => [s, p]));

  function pageFromLocation() {
    let path = (window.location.pathname || '/').replace(/index\.html$/i, '').replace(/\.html$/i, '');
    if (path.length > 1) path = path.replace(/\/$/, '');
    // match trailing segment so it works from any hosting sub-path
    const seg = '/' + (path.split('/').pop() || '');
    return PAGE_BY_SLUG[path] || PAGE_BY_SLUG[seg] || 'Home';
  }

  function App() {
    const [page, setPage] = React.useState(pageFromLocation);
    const [portal, setPortal] = React.useState(false);

    React.useEffect(() => {
      const id = setTimeout(() => window.lucide && window.lucide.createIcons(), 60);
      window.scrollTo({ top: 0 });
      return () => clearTimeout(id);
    }, [page, portal]);

    React.useEffect(() => {
      const onPop = () => setPage(pageFromLocation());
      window.addEventListener('popstate', onPop);
      return () => window.removeEventListener('popstate', onPop);
    }, []);

    const EXTERNAL = {
      Apply: 'https://portals.hayesglobalmobility.com/visa-apply',
      Careers: 'https://portals.hayesglobalmobility.com/jobs',
    };
    const navigate = (link) => {
      if (EXTERNAL[link]) { window.open(EXTERNAL[link], '_blank', 'noopener'); return; }
      const routes = ['Home', 'About', 'Visas', 'Careers', 'Investments', 'Apply', 'Contact'];
      const next = routes.includes(link) ? link : 'Home';
      setPage(next);
      // clean URL, no .html — no-ops harmlessly on file:// (wrapped in try/catch)
      try { window.history.pushState({ page: next }, '', SLUGS[next]); } catch (e) { /* offline file */ }
    };

    const PAGES = {
      Home: window.HayesHome,
      About: window.HayesAbout,
      Visas: window.HayesVisa,
      Careers: window.HayesJobs,
      Investments: window.HayesInvestment,
      Apply: window.HayesApply,
      Contact: window.HayesContact,
    };
    const body = React.createElement(PAGES[page] || window.HayesHome, { onNavigate: navigate });

    return (
      <div>
        <Navbar
          logoSrc="assets/logo-hayes-white.png"
          links={['Home', 'About', 'Visas', 'Careers', 'Investments', 'Contact']}
          active={page}
          onNavigate={navigate}
          onCta={() => window.open('https://portals.hayesglobalmobility.com/', '_blank', 'noopener')}
        />
        {body}
        {React.createElement(window.HayesFooter, {})}
        {portal && <PortalModal onClose={() => setPortal(false)} />}
      </div>
    );
  }

  window.HayesApp = App;
})();