// Hadid Group — services
const { SectionLabel, ServiceCard } = window.HadidGroupDesignSystem_9f7d08;

function Services() {
  const S = window.SITE;
  return (
    <section id="services" style={{ background: 'var(--cream)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div className="hg-section-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 30, flexWrap: 'wrap', marginBottom: 'clamp(40px, 5vw, 64px)' }}>
          <div>
            <Reveal><SectionLabel rule="before" variant="light">Our Services</SectionLabel></Reveal>
            <Reveal delay={90} as="h2" style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', lineHeight: 1.08, color: 'var(--navy-850)' }}>
              What We Do
            </Reveal>
          </div>
          <Reveal delay={140} as="p" style={{ maxWidth: 420, margin: 0, fontFamily: 'var(--font-sans)', fontSize: '1.02rem', lineHeight: 1.7, color: 'var(--text-body)' }}>
            A full-service contractor delivering every stage of the build — from engineering and
            construction management to finishing and handover.
          </Reveal>
        </div>

        <div className="hg-services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {S.services.map((s, i) => (
            <Reveal key={s.title} delay={(i % 4) * 70} style={{ display: 'flex' }}>
              <ServiceCard icon={s.icon} index={String(i + 1).padStart(2, '0')} title={s.title} description={s.desc} style={{ width: '100%' }} />
            </Reveal>
          ))}
          {/* trailing CTA tile fills the 8th cell */}
          <Reveal delay={210} style={{ display: 'flex' }}>
            <a href="#contact" onClick={(e) => { e.preventDefault(); window.scrollToId('contact'); }} style={{
              width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              padding: '38px 34px', borderRadius: 'var(--radius-sm)', textDecoration: 'none',
              background: 'var(--navy-850)', color: '#fff', minHeight: 220,
              boxShadow: 'var(--shadow-md)',
            }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.55rem', lineHeight: 1.18 }}>
                Have a project in mind?
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--gold-400)', fontWeight: 600, fontSize: '0.82rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                Let's talk
                <span style={{ display: 'inline-flex', width: 38, height: 38, alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-sm)', background: 'var(--gold-500)' }}>
                  <window.HadidGroupDesignSystem_9f7d08.Icon name="arrow-up-right" size={18} strokeWidth={2.2} color="var(--navy-850)" />
                </span>
              </span>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;