---
import Layout from "../layouts/Layout.astro";

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

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

<Layout title={`${title} — Executor`} description={description}>
  <nav class="fixed top-0 z-50 w-full bg-surface/80 backdrop-blur-lg">
    <div class="mx-auto flex h-14 max-w-[1200px] items-center justify-between border-b border-rule px-6 sm:px-10">
      <a href="/" class="font-mono text-xl tracking-tight text-ink transition-colors hover:text-ink">
        executor
      </a>
      <div class="flex items-center gap-5 sm:gap-8">
        <a href="/privacy" class="text-[13px] text-ink-muted transition-colors hover:text-ink">
          Privacy
        </a>
        <a href="/terms" class="text-[13px] text-ink-muted transition-colors hover:text-ink">
          Terms
        </a>
      </div>
    </div>
  </nav>

  <main class="relative overflow-hidden pt-14">
    <section class="relative px-6 pb-10 pt-18 sm:px-10 sm:pb-16 sm:pt-24">
      <div class="mx-auto max-w-[720px]">
        <div class="mb-12 sm:mb-16">
          <h1 class="font-display text-[clamp(2.4rem,5.2vw,4.2rem)] leading-[0.98] tracking-tight text-ink">
            {title}
          </h1>
          <p class="mt-5 text-[15px] leading-[1.75] text-ink-muted sm:text-[16px]">
            {description}
          </p>
          <p class="mt-6 text-[11px] font-mono uppercase tracking-[0.16em] text-ink-faint">
            Last updated {lastUpdated}
          </p>
        </div>

        <article class="legal-prose">
          <slot />
        </article>
      </div>
    </section>
  </main>

  <footer class="border-t border-rule py-10">
    <div class="mx-auto flex max-w-[1200px] items-center justify-between px-6 sm:px-10">
      <span class="font-mono text-sm text-ink-faint">executor</span>
      <div class="flex items-center gap-5 text-[13px]">
        <a href="/privacy" class="text-ink-faint transition-colors hover:text-ink">Privacy</a>
        <a href="/terms" class="text-ink-faint transition-colors hover:text-ink">Terms</a>
        <a
          href="https://github.com/UsefulSoftwareCo/executor"
          class="text-ink-faint transition-colors hover:text-ink"
        >
          GitHub
        </a>
      </div>
    </div>
  </footer>
</Layout>