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

const lang: Locale = "en";
const t = useTranslations(lang);
---
<Layout title="Shipping & Payment" description="Shipping terms and payment methods at Van's DIY & Bastelbedarf." lang={lang} path="/versand-zahlung/">
  <section class="section-tight">
    <div class="container">
      <span class="eyebrow">{t.shipping.eyebrow}</span>
      <h1>{t.shipping.title}</h1>
    </div>
  </section>

  <section class="section-tight">
    <div class="container grid grid-2">
      <div class="card">
        <h3>{t.shipping.shippingTitle}</h3>
        <ul>
          {t.shipping.shippingItems.map((item) => <li>{item}</li>)}
        </ul>
      </div>
      <div class="card">
        <h3>{t.shipping.paymentTitle}</h3>
        <ul>
          {t.shipping.paymentItems.map((item) => <li>{item}</li>)}
        </ul>
        <p class="small">{t.common.vatNote}</p>
      </div>
    </div>
    <p class="todo-note">{t.shipping.todoNote}</p>
  </section>
</Layout>
