import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import CTA from '../../components/CTA.astro';
import { SERVICES } from '@config';
import { t } from '../../utils/i18n';

const getServiceDetails = (serviceId) => {
  // Copy the same logic as in the original services.astro
  // ... (omitted for brevity, copy from original)
};

<BaseLayout 
  title={`${t('nav.services', 'nl')} | ${t('meta.title', 'nl')}`}
  description="Uitgebreide IT-diensten voor kleine bedrijven: Microsoft 365-ondersteuning, netwerkoplossingen, webhosting en maatwerk IT-projecten."
>
  <Header />
  <main>
    <!-- Services Hero -->
    <section class="py-20 bg-gradient-to-br from-background via-background to-muted">
      <div class="container-custom">
        <div class="text-center max-w-4xl mx-auto animate-on-scroll">
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6">
            {t('services.title', 'nl')}
          </h1>
          <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
            {t('services.subtitle', 'nl')}
          </p>
        </div>
      </div>
    </section>
    <!-- Copy the rest of the original file, updating all t() calls to use 'nl' as the locale -->
  </main>
  <Footer />
</BaseLayout>