---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import ServiceCard from '../../components/ServiceCard.astro';
import { getDictionary } from '../../i18n';
import { services } from '../../i18n/services';

const locale = 'fr';
const t = getDictionary(locale);
---
<BaseLayout locale={locale}>
  <Header locale={locale} />
  <main>
    <section class="hero">
      <h1>{t.hero.title}</h1>
      <p>{t.hero.subtitle}</p>
    </section>
    <section class="services">
      <h2>{t.services.heading}</h2>
      <div class="services-grid">
        {services.map((service) => <ServiceCard service={service} locale={locale} />)}
      </div>
    </section>
  </main>
  <Footer locale={locale} />
</BaseLayout>