---
import Base from './Base.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE } from '../data/site';

interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
---

<Base title={`${title} · ${SITE.name}`} description={description}>
  <Header />

  <main class="mx-auto max-w-3xl px-5 pt-32 pb-24 sm:px-8 sm:pt-40 sm:pb-32">
    <a href="/" class="text-sm text-white/50 transition-colors hover:text-gold-400">&larr; Zurück zur Startseite</a>

    <h1 class="mt-6 font-display text-[clamp(2rem,5vw,3rem)] leading-tight tracking-[-0.02em] text-white">
      {title}
    </h1>

    <div
      class="mt-10 space-y-6 leading-relaxed text-white/65 [&_a]:text-gold-400 [&_a:hover]:text-gold-300 [&_h2]:mt-12 [&_h2]:font-display [&_h2]:text-xl [&_h2]:text-white [&_li]:marker:text-white/30 [&_p+p]:mt-4 [&_strong]:text-white/90 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-5"
    >
      <slot />
    </div>
  </main>

  <Footer />
</Base>
