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

const lang: Locale = "en";
const t = useTranslations(lang);
const items = faqEintraege(lang);
---
<Layout title="FAQ" description="Frequently asked questions about 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">
      {items.map((f) => (
        <details class="card faq-item">
          <summary>{f.q}</summary>
          <p class="small">{f.a}</p>
        </details>
      ))}
    </div>
  </section>
</Layout>
