---
import Layout from "../../../layouts/Layout.astro";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";

const lang: Locale = "fr";
const t = useTranslations(lang);
---
<Layout title="FAQ" description="Questions fréquentes sur Van's DIY & Bastelbedarf." lang={lang} path="/faq/">
  <section class="section-tight">
    <div class="container">
      <span class="eyebrow">FAQ</span>
      <h1>{t.faq.title}</h1>
    </div>
  </section>
  <section class="section-tight">
    <div class="container faq-list">
      {t.faq.items.map((f) => (
        <details class="card faq-item">
          <summary>{f.q}</summary>
          <p class="small">{f.a}</p>
        </details>
      ))}
    </div>
  </section>
</Layout>