/* Hayes Global Mobility — UI kit: Careers / Jobs listing page */
(function () {
  const NS = window.HayesGlobalMobilityDesignSystem_489ece;
  const { SectionHeading, Button, Badge, Input, Select, Card } = NS;
  const I = (n, s = 18) => <i data-lucide={n} style={{ width: s, height: s }}></i>;
  const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 40px' };

  const JOBS = [
    { title: 'Senior Software Engineer', region: 'United Kingdom', city: 'London', type: 'Full-time', cat: 'Technology', visa: true, salary: '£75k–£95k' },
    { title: 'Registered Nurse (ICU)', region: 'United States', city: 'New York', type: 'Full-time', cat: 'Healthcare', visa: true, salary: '$85k–$110k' },
    { title: 'Procurement Manager', region: 'Germany', city: 'New York', type: 'Full-time', cat: 'Operations', visa: false, salary: 'Competitive' },
    { title: 'Financial Analyst', region: 'United Kingdom', city: 'London', type: 'Contract', cat: 'Finance', visa: true, salary: '£55k–£70k' },
    { title: 'Mechanical Engineer', region: 'United States', city: 'Houston', type: 'Full-time', cat: 'Engineering', visa: true, salary: '$90k–$120k' },
    { title: 'Logistics Coordinator', region: 'Germany', city: 'New York', type: 'Full-time', cat: 'Operations', visa: false, salary: 'Competitive' },
  ];

  function Jobs({ onNavigate }) {
    const [q, setQ] = React.useState('');
    const [region, setRegion] = React.useState('');
    const filtered = JOBS.filter(j =>
      (!q || (j.title + ' ' + j.cat + ' ' + j.city).toLowerCase().includes(q.toLowerCase())) &&
      (!region || j.region === region)
    );

    return (
      <div>
        {React.createElement(window.HayesPageHeader, {
          eyebrow: 'Careers',
          title: 'International Careers, Tailored to You',
          sub: 'Hayes Global Mobility connects skilled talent with employers worldwide — matching, relocation, and onboarding support included.',
        })}

        <section style={{ ...wrap, padding: '64px 40px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20, marginBottom: 40 }}>
            {[['users', 'Matched to You', 'We pair candidates with global opportunities that fit their skills and ambitions.'],
              ['plane', 'Relocation Support', 'Visa coordination, travel, and onboarding handled end to end.'],
              ['handshake', 'Trusted Employers', 'We partner with organizations seeking diverse, world-class talent.']].map(([ic, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 14 }}>
                <div style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'var(--color-navy-50)', color: 'var(--color-navy-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{I(ic, 22)}</div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-heading)' }}>{t}</div>
                  <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--text-muted)', marginTop: 3, lineHeight: 1.5 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ ...wrap, padding: '0 40px 90px' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', marginBottom: 26 }}>
            <SectionHeading eyebrow="Open Roles" title="Discover Your Next Opportunity" />
            <div style={{ display: 'flex', gap: 12, minWidth: 360 }}>
              <Input placeholder="Search roles…" value={q} onChange={(e) => setQ(e.target.value)} iconLeft={I('search', 16)} style={{ flex: 1 }} />
              <Select placeholder="All regions" value={region} onChange={(e) => setRegion(e.target.value)} options={['United Kingdom', 'United States', 'Germany']} style={{ width: 180 }} />
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {filtered.map(j => (
              <div key={j.title} style={{ display: 'flex', alignItems: 'center', gap: 20, background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: '20px 24px', boxShadow: 'var(--shadow-xs)' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--text-heading)', margin: 0 }}>{j.title}</h3>
                    {j.visa && <Badge variant="gold" size="sm">Visa Sponsored</Badge>}
                  </div>
                  <div style={{ display: 'flex', gap: 16, marginTop: 8, fontFamily: 'var(--font-ui)', fontSize: 13.5, color: 'var(--text-muted)', flexWrap: 'wrap' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('map-pin', 15)} {j.city}, {j.region}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('clock', 15)} {j.type}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('layers', 15)} {j.cat}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('wallet', 15)} {j.salary}</span>
                  </div>
                </div>
                <Button variant="primary" size="sm" onClick={() => onNavigate('Apply')}>Apply</Button>
              </div>
            ))}
            {filtered.length === 0 && (
              <div style={{ textAlign: 'center', padding: '48px 0', fontFamily: 'var(--font-ui)', color: 'var(--text-muted)' }}>No roles match your search. Try a different term or region.</div>
            )}
          </div>
        </section>

        {React.createElement(window.HayesCTABand, { title: 'Whether advancing or starting fresh abroad — we help you land the right role.', sub: 'Submit your details and our placement team will match you to live opportunities.', ctaLabel: 'Discover Opportunities', onCta: () => onNavigate('Careers') })}
      </div>
    );
  }

  window.HayesJobs = Jobs;
})();