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

  function VisaServices({ onNavigate }) {
    const types = [
      ['briefcase', 'Work Visa', 'For employment abroad', ['Skilled worker & sponsorship routes', 'Entrepreneur & start-up visas', 'Permit renewals & extensions']],
      ['graduation-cap', 'Student Visa', 'Study overseas', ['University & exchange programs', 'Tuition & financial documentation', 'Post-study work pathways']],
      ['building-2', 'Business / Investor Visa', 'Entrepreneur & investor visas', ['Investor & innovator visas', 'Multiple-entry business travel', 'Corporate relocation support']],
      ['plane', 'Tourist Visa', 'Travel & tourism', ['Short-stay & visitor visas', 'Itinerary & documentation support', 'Multiple-entry travel options']],
      ['users', 'Family / Dependent Visa', 'Join your loved ones', ['Spouse & partner visas', 'Dependent child applications', 'Family reunification support']],
      ['home', 'Permanent Residency', 'Settle abroad', ['Long-term settlement routes', 'Points-based & sponsored PR', 'Citizenship pathway guidance']],
      ['plane-takeoff', 'Transit Visa', 'Quick stopover visas', ['Airport & port transit visas', 'Fast turnaround processing', 'Connecting-flight compliance']],
      ['heart', 'Humanitarian Visa', 'Refugee & asylum', ['Refugee & asylum support', 'Humanitarian protection routes', 'Compassionate & emergency cases']],
    ];
    const steps = [
      ['Assess', 'We review your profile and recommend the right visa route.'],
      ['Prepare', 'Our specialists compile and check every document for compliance.'],
      ['Submit', 'We file your application and manage all correspondence.'],
      ['Arrive', 'Approval, travel guidance, and on-the-ground onboarding.'],
    ];
    return (
      <div>
        {React.createElement(window.HayesPageHeader, {
          eyebrow: 'Visa Services',
          title: 'Fast, Reliable Visa Assistance',
          sub: 'Securing the right visa is the first step toward your global journey. We ensure compliance, accuracy, and speed — so you can focus on your future.',
        })}

        <section style={{ ...wrap, padding: '90px 40px' }}>
          <SectionHeading align="center" eyebrow="Tailored Support" title="Visas for Every Goal" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginTop: 44 }}>
            {types.map(([ic, t, sub, items]) => (
              <Card key={t}>
                <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--color-navy-50)', color: 'var(--color-navy-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>{I(ic, 24)}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, color: 'var(--text-heading)', margin: '0 0 4px' }}>{t}</h3>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--text-muted)', marginBottom: 16 }}>{sub}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px', display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {items.map(p => (
                    <li key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--text-body)' }}>
                      <i data-lucide="check" style={{ width: 16, height: 16, color: 'var(--color-success)', marginTop: 3, flexShrink: 0 }}></i> {p}
                    </li>
                  ))}
                </ul>
                <Button variant="outline" size="sm" onClick={() => onNavigate('Apply')}>Apply Now</Button>
              </Card>
            ))}
          </div>
        </section>

        <section style={{ background: '#fff' }}>
          <div style={{ ...wrap, padding: '84px 40px' }}>
            <SectionHeading align="center" eyebrow="How It Works" title="A Clear Path to Approval" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 22, marginTop: 48 }}>
              {steps.map(([t, d], i) => (
                <div key={t} style={{ textAlign: 'center', position: 'relative' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--color-navy-600)', color: 'var(--color-gold-400)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>{i + 1}</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text-heading)', margin: '0 0 6px' }}>{t}</h3>
                  <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, lineHeight: 1.6, color: 'var(--text-muted)', margin: '0 auto', maxWidth: 200 }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {React.createElement(window.HayesCTABand, { title: 'Apply today and move forward with confidence.', sub: 'Our visa experts are ready to guide your application end to end.', ctaLabel: 'Apply Today', onCta: () => onNavigate('Apply') })}
      </div>
    );
  }

  window.HayesVisa = VisaServices;
})();