// dthas landing — services grid. Development leads, consultancy follows.
function Services() {
  const { ServiceCard } = window.DesignSystem_aa2f04;
  const { Section, SectionHead } = window;

  const services = [
    { index: '01', lead: true, title: 'Full-stack software development',
      description: 'The headline offering. Architecture, back-end, front-end and deployment, delivered end to end by an engineer, not a template.' },
    { index: '02', title: 'Web development & design',
      description: 'Fast, accessible, precisely-built web applications and interfaces.' },
    { index: '03', title: 'Software & digital consultancy',
      description: 'Technical direction, architecture review and pragmatic strategy.' },
    { index: '04', title: 'Tailored digital services',
      description: 'Bespoke tools, integrations and automation shaped to the brief.' },
  ];

  return (
    <Section id="services">
      <SectionHead
        eyebrow="Services"
        title="Development first. Everything else in support."
        intro="An independent studio with a clear order of priorities: engineering leads, consultancy and design strengthen it."
      />
      <div className="dthas-services-grid stagger" style={{
        display: 'grid',
        gridTemplateColumns: '1.4fr 1fr 1fr',
        gridTemplateRows: 'auto auto',
        gap: 0,
        marginTop: 'clamp(24px, 4vh, 48px)',
        borderLeft: '1px solid var(--border-hairline)',
        borderTop: '1px solid var(--border-hairline)',
      }}>
        {/* Lead spans two rows on the left */}
        <div style={{ gridRow: 'span 2' }}>
          <ServiceCard {...services[0]} style={{ height: '100%', borderTop: 0, borderLeft: 0 }} />
        </div>
        <div><ServiceCard {...services[1]} style={{ height: '100%', borderTop: 0, borderLeft: 0 }} /></div>
        <div><ServiceCard {...services[2]} style={{ height: '100%', borderTop: 0, borderLeft: 0 }} /></div>
        <div style={{ gridColumn: '2 / 4' }}>
          <ServiceCard {...services[3]} style={{ height: '100%', borderTop: 0, borderLeft: 0 }} />
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Services });