/* Hayes Global Mobility — UI kit: Investment & Procurement 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 Investment({ onNavigate }) {
    const offerings = [
      ['stethoscope', 'Medical Equipment Sourcing', 'Strategic sourcing of medical equipment and essential supplies from vetted global manufacturers.'],
      ['trending-up', 'Investment Advisory', 'Guidance on international investment opportunities, structured around your risk profile and goals.'],
      ['package-check', 'Procurement Solutions', 'End-to-end procurement that reduces costs and increases operational efficiency across borders.'],
    ];
    const points = [
      'Strategic sourcing of medical equipment and essential supplies',
      'Guidance on international investment opportunities',
      'Procurement solutions that reduce costs and increase efficiency',
      'Due diligence, compliance, and cross-border logistics',
    ];
    return (
      <div>
        {React.createElement(window.HayesPageHeader, {
          eyebrow: 'Investment & Procurement',
          title: 'Expand Your Business Globally',
          sub: 'Our investment and procurement division empowers businesses to grow across borders — confidently and sustainably.',
        })}

        <section style={{ ...wrap, padding: '90px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionHeading eyebrow="What We Provide" title="Solutions That Scale Across Borders" />
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {points.map(p => (
                <li key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, fontFamily: 'var(--font-ui)', fontSize: 16, lineHeight: 1.5, color: 'var(--text-body)' }}>
                  <i data-lucide="check" style={{ width: 19, height: 19, color: 'var(--color-success)', marginTop: 3, flexShrink: 0 }}></i> {p}
                </li>
              ))}
            </ul>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--text-heading)', marginBottom: 24 }}>
              Invest smart. Operate globally. Prosper confidently.
            </div>
            <Button variant="primary" onClick={() => onNavigate('Contact')}>Partner With Us</Button>
          </div>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '4 / 3', 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.1) 40%, rgba(7,26,64,0.6))' }} />
          </div>
        </section>

        <section style={{ background: '#fff' }}>
          <div style={{ ...wrap, padding: '84px 40px' }}>
            <SectionHeading align="center" eyebrow="Our Capabilities" title="Built for Global Operators" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginTop: 44 }}>
              {offerings.map(([ic, t, d], idx) => (
                <Card key={t} tone={idx === 2 ? 'gold' : 'light'}>
                  <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: idx === 2 ? 'rgba(7,26,64,0.10)' : 'var(--color-navy-50)', color: idx === 2 ? 'var(--color-navy-900)' : '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: idx === 2 ? 'var(--color-navy-900)' : 'var(--text-heading)', margin: '0 0 8px' }}>{t}</h3>
                  <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, lineHeight: 1.6, color: idx === 2 ? 'rgba(7,26,64,0.78)' : 'var(--text-muted)', margin: 0 }}>{d}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section style={{ background: 'var(--color-navy-800)' }}>
          <div style={{ ...wrap, padding: '56px 40px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28 }}>
            {[['$120M+', 'Deals Facilitated'], ['30+', 'Supplier Partners'], ['18%', 'Avg. Cost Reduction']].map(([n, l]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, 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>

        {React.createElement(window.HayesCTABand, { title: 'Partner with Hayes to unlock sustainable global success.', sub: 'Talk to our investment and procurement specialists today.', ctaLabel: 'Partner With Us', onCta: () => onNavigate('Contact') })}
      </div>
    );
  }

  window.HayesInvestment = Investment;
})();