/* Hayes Global Mobility — UI kit: Hero + service quick-cards */
(function () {
  const { Button } = window.HayesGlobalMobilityDesignSystem_489ece;

  function Hero({ onApply }) {
    return (
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        {/* skyline photo */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: "url('assets/skyline-hero.jpg')",
          backgroundSize: 'cover', backgroundPosition: 'center',
        }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(7,26,64,0.62) 0%, rgba(7,26,64,0.78) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '110px 40px 150px', textAlign: 'center' }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-4xl)', lineHeight: 1.08, color: '#fff', margin: 0, textShadow: '0 2px 20px rgba(0,0,0,0.3)' }}>
            Your Gateway<br />to Global Opportunities
          </h1>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-lg)', color: 'var(--color-gold-300)', marginTop: 18, letterSpacing: '0.01em' }}>
            Visas&nbsp;&nbsp;|&nbsp;&nbsp;Careers&nbsp;&nbsp;|&nbsp;&nbsp;Investments
          </div>
          <div style={{ marginTop: 30 }}>
            <Button variant="primary" size="lg" onClick={onApply}>Start Your Application</Button>
          </div>
        </div>
      </section>
    );
  }

  function ServiceStrip({ onNavigate }) {
    const items = [
      { tone: 'light', icon: 'file-check', title: 'Visa Services', sub: 'Expert Immigration Solutions', route: 'Visas' },
      { tone: 'navy', icon: 'briefcase', title: 'Job Placement', sub: 'International Career Opportunities', route: 'Careers' },
      { tone: 'navy', icon: 'handshake', title: 'Investment & Procurement', sub: 'Global Business Solutions', route: 'Investments' },
    ];
    const tones = {
      light: { bg: '#fff', fg: 'var(--text-heading)', sub: 'var(--text-muted)', chip: 'var(--color-navy-50)', chipFg: 'var(--color-navy-600)' },
      navy: { bg: 'var(--color-navy-700)', fg: '#fff', sub: 'rgba(255,255,255,0.74)', chip: 'rgba(255,255,255,0.12)', chipFg: '#fff' },
    };
    return (
      <div style={{ maxWidth: 'var(--container-max)', margin: '-68px auto 0', padding: '0 40px', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        {items.map((it) => {
          const t = tones[it.tone];
          return (
            <div key={it.title} onClick={() => onNavigate && onNavigate(it.route)} style={{
              display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer',
              background: t.bg, borderRadius: 'var(--radius-lg)', padding: '22px 24px',
              boxShadow: 'var(--shadow-lg)', border: it.tone === 'light' ? '1px solid var(--border-subtle)' : 'none',
            }}>
              <div style={{ width: 48, height: 48, flexShrink: 0, borderRadius: 'var(--radius-md)', background: t.chip, color: t.chipFg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={it.icon} style={{ width: 24, height: 24 }}></i>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: t.fg }}>{it.title}</div>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: t.sub, marginTop: 2 }}>{it.sub}</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  window.HayesHero = Hero;
  window.HayesServiceStrip = ServiceStrip;
})();