---
import MainLayout from '@/layouts/MainLayout.astro';
import MainSection from '@components/ui/blocks/MainSection.astro';
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
import SecondaryCTA from '@components/ui/buttons/SecondaryCTA.astro';
import { siteCopy } from '@data/site-copy';
import { localizeHref, type Locale } from '@/i18n';

const { locale } = Astro.props;

interface Props {
  locale: Locale;
}

const copy = siteCopy[locale].legal;
---

<MainLayout
  lang={locale}
  title={copy.pageTitle}
  customDescription={copy.metaDescription}
  customOgTitle={copy.pageTitle}
>
  <MainSection title={copy.heading} subTitle={copy.subtitle} />
  <section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8">
    <div class="flex flex-wrap gap-3">
      <PrimaryCTA title={copy.privacy} url={localizeHref('/privacy', locale)} />
      <SecondaryCTA title={copy.terms} url={localizeHref('/terms', locale)} />
      <SecondaryCTA
        title={copy.imprint}
        url={localizeHref('/imprint', locale)}
      />
    </div>
  </section>
</MainLayout>