/* Hayes Global Mobility — UI kit: About page */
(function () {
  const NS = window.HayesGlobalMobilityDesignSystem_489ece;
  const { SectionHeading, Button, Card } = 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 About({ onNavigate }) {
    const offices = [
      
      ['London', '8 Finsbury Circus, EC2M', 'European operations'],
      ['London', '8 Finsbury Circus, EC2M', 'European operations'],
      ['New York', '500 Fifth Ave, Manhattan', 'Americas desk'],
    ];
    const values = [
      ['shield-check', 'Trusted Expertise', 'Specialists who navigate complex cross-border requirements with accuracy and care.'],
      ['globe', 'Global Reach, Local Insight', 'Offices on three continents combine on-the-ground knowledge with worldwide coverage.'],
      ['route', 'End-to-End Support', 'One partner from first application to arrival, onboarding, and beyond.'],
    ];
    return (
      <div>
        {React.createElement(window.HayesPageHeader, {
          eyebrow: 'About Us',
          title: 'Your Trusted Partner in International Relocation',
          sub: 'We specialize in simplifying cross-border transitions — immigration, careers overseas, and international procurement and investment.',
        })}

        <section style={{ ...wrap, padding: '90px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionHeading eyebrow="Who We Are" title="Global Mobility Made Simple" />
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', marginTop: 22, maxWidth: 480 }}>
              At Hayes Global Mobility, our team delivers end-to-end support for immigration services, career opportunities overseas, and international procurement and investment strategies.
            </p>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', marginTop: 14, maxWidth: 480 }}>
              With offices in London, and New York, we combine local insight with global reach to help you succeed anywhere in the world.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <Button variant="primary" onClick={() => onNavigate('Apply')}>Start Your Application</Button>
              <Button variant="outline" onClick={() => onNavigate('Contact')}>Contact Us</Button>
            </div>
          </div>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '4 / 3', backgroundImage: "url('assets/skyline-night.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(7,26,64,0) 45%, rgba(7,26,64,0.6))' }} />
            <div style={{ position: 'absolute', left: 22, bottom: 20, color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, textShadow: '0 1px 8px rgba(0,0,0,0.4)' }}>London · New York</div>
          </div>
        </section>

        <section style={{ background: 'var(--color-navy-800)' }}>
          <div style={{ ...wrap, padding: '54px 40px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 28 }}>
            {[['12k+', 'Visas Approved'], ['40+', 'Countries Served'], ['98%', 'Success Rate'], ['15 yrs', 'Trusted Expertise']].map(([n, l]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, color: 'var(--color-gold-400)' }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(255,255,255,0.78)', marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ ...wrap, padding: '90px 40px' }}>
          <SectionHeading align="center" eyebrow="What Sets Us Apart" title="Why Choose Hayes" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginTop: 44 }}>
            {values.map(([ic, t, d]) => (
              <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: 20, color: 'var(--text-heading)', margin: '0 0 8px' }}>{t}</h3>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 }}>{d}</p>
              </Card>
            ))}
          </div>
        </section>

        <section style={{ background: 'var(--surface-page)' }}>
          <div style={{ ...wrap, padding: '80px 40px' }}>
            <SectionHeading align="center" eyebrow="Our Offices" title="Local Insight, Global Reach" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginTop: 44 }}>
              {offices.map(([city, addr, role]) => (
                <Card key={city} tone="navy">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                    <i data-lucide="map-pin" style={{ width: 20, height: 20, color: 'var(--color-gold-400)' }}></i>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: '#fff', margin: 0 }}>{city}</h3>
                  </div>
                  <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(255,255,255,0.82)' }}>{addr}</div>
                  <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--color-gold-300)', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{role}</div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {React.createElement(window.HayesCTABand, { title: 'Ready to begin your global journey?', sub: 'Tell us your goals and a Hayes advisor will be in touch within one business day.', onCta: () => onNavigate('Apply') })}
      </div>
    );
  }

  window.HayesAbout = About;
})();