/* Hayes Global Mobility — UI kit: Home page body */
(function () {
  const NS = window.HayesGlobalMobilityDesignSystem_489ece;
  const { SectionHeading, ServiceCard, Testimonial, Button } = NS;
  const I = (n, s = 24) => <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 }) {
    return (
      <section style={{ ...wrap, padding: '96px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <SectionHeading eyebrow="About Hayes Global Mobility" title="Empowering Your Global Journey" />
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', marginTop: 22, maxWidth: 480 }}>
            We provide comprehensive visa support, overseas job placements, and strategic investment solutions. Hayes Global Mobility is your trusted partner in navigating your path to success — for professionals, students, and businesses alike.
          </p>
          <div style={{ marginTop: 28 }}>
            <Button variant="primary" onClick={() => onNavigate && onNavigate('About')}>Learn More</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) 40%, rgba(7,26,64,0.55))' }} />
          <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)' }}>
            Offices in 12 global cities
          </div>
        </div>
      </section>
    );
  }

  function Stats() {
    const stats = [['12k+', 'Visas Approved'], ['40+', 'Countries Served'], ['98%', 'Success Rate'], ['15 yrs', 'Trusted Expertise']];
    return (
      <section style={{ background: 'var(--color-navy-800)' }}>
        <div style={{ ...wrap, padding: '52px 40px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 28 }}>
          {stats.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, letterSpacing: '0.02em' }}>{l}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  function Testimonials() {
    const items = [
      { q: 'Secured my dream job in London thanks to Hayes Global Mobility.', n: 'Sarah Mitchell', r: 'Relocated to London' },
      { q: 'Smooth relocation to Singapore with expert guidance all the way.', n: 'James Anand', r: 'Software Engineer' },
      { q: 'Hayes helped us make the right investment decisions abroad.', n: 'Michael Reyes', r: 'Managing Director' },
    ];
    return (
      <section style={{ background: 'var(--surface-page)' }}>
        <div style={{ ...wrap, padding: '90px 40px' }}>
          <SectionHeading align="center" eyebrow="Client Success Stories" title="Achieving Global Dreams with Hayes" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginTop: 44 }}>
            {items.map(t => <Testimonial key={t.n} quote={t.q} name={t.n} role={t.r} />)}
          </div>
        </div>
      </section>
    );
  }

  function Services({ onNavigate }) {
    return (
      <section style={{ background: '#fff' }}>
        <div style={{ ...wrap, padding: '90px 40px' }}>
          <SectionHeading align="center" eyebrow="Our Services" title="Comprehensive Global Solutions" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginTop: 44 }}>
            <ServiceCard tone="light" icon={I('file-check')} title="Visa Services" subtitle="Work Permits | Student Visas | Business Visas" description="Expert immigration solutions tailored to your destination and goals." onCta={() => onNavigate('Visas')} />
            <ServiceCard tone="navy" icon={I('briefcase')} title="Job Placement" subtitle="International Employment Opportunities" description="Overseas roles matched to your skills, with end-to-end relocation support." onCta={() => onNavigate('Careers')} />
            <ServiceCard tone="gold" icon={I('handshake')} title="Investment & Procurement" subtitle="Medical Equipment & Business Solutions" description="Cross-border business deals and global procurement, handled with care." onCta={() => onNavigate('Investments')} />
          </div>
        </div>
      </section>
    );
  }

  function ContactBand({ onNavigate }) {
    return (
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--color-navy-900)' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.18, backgroundImage: "url('assets/skyline-hero.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' }} />
        <div style={{ position: 'relative', ...wrap, padding: '64px 40px', display: 'flex', alignItems: 'center', gap: 30, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 34, color: '#fff', margin: 0 }}>Get in Touch</h2>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 16, color: 'rgba(255,255,255,0.8)', marginTop: 8 }}>
              Contact Us to Begin Your Global Adventure
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#fff', fontFamily: 'var(--font-ui)', fontSize: 15 }}>
              <i data-lucide="mail" style={{ width: 18, height: 18, color: 'var(--color-gold-400)' }}></i> info@hayesglobalmobility.com
            </span>
            <Button variant="primary" iconRight={I('arrow-right', 18)} onClick={() => onNavigate('Contact')}>Send Message</Button>
          </div>
        </div>
      </section>
    );
  }

  function Home({ onNavigate }) {
    return (
      <div>
        {React.createElement(window.HayesHero, { onApply: () => onNavigate('Apply') })}
        {React.createElement(window.HayesServiceStrip, { onNavigate })}
        <About onNavigate={onNavigate} />
        <Stats />
        <Services onNavigate={onNavigate} />
        <Testimonials />
        <ContactBand onNavigate={onNavigate} />
      </div>
    );
  }

  window.HayesHome = Home;
})();