---
import Perforation from "../components/Perforation.astro";
import SiteFooter from "../components/SiteFooter.astro";
import SiteHeader from "../components/SiteHeader.astro";
import BaseLayout from "./base.astro";

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

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

<BaseLayout title={`${title} // Архив ДНТ-7`} description={description}>
  <div class="min-h-screen">
    <SiteHeader />

    <div class="banner-classified border-y border-foreground/30">
      <div
        class="mx-auto flex max-w-4xl items-center justify-between gap-4 px-4 py-1.5 text-[0.65rem] font-700 uppercase tracking-[0.2em] sm:px-6"
      >
        <span>Для служебного пользования</span>
        <span class="hidden sm:inline">{code || "МДС"}</span>
        <span>Экз. № 1</span>
      </div>
    </div>

    <main class="mx-auto max-w-4xl px-4 py-8 sm:px-6">
      <a
        href="/"
        class="font-heading text-xs font-600 uppercase tracking-wider text-muted-foreground hover:text-primary"
      >
        ← Вернуться в реестр
      </a>

      <article class="paper relative mt-4 -rotate-[0.3deg] p-6 sm:p-10">
        <span class="tape -top-3 left-1/2 hidden -translate-x-1/2 rotate-1 sm:block" aria-hidden="true"></span>

        <div class="pointer-events-none absolute right-4 top-4 sm:right-8 sm:top-10">
          <img
            src="/emblem.png"
            alt=""
            width="90"
            height="90"
            class="h-16 w-16 opacity-80 mix-blend-multiply sm:h-20 sm:w-20"
          />
        </div>

        <header class="pb-5">
          <h1
            class="max-w-2xl text-balance font-heading text-3xl font-700 uppercase leading-[0.95] tracking-tight sm:text-5xl"
          >
            {title}
          </h1>
          <hr class="rule rule-red mt-5" />
        </header>

        <div class="doc-content">
          <slot />
        </div>
      </article>

      <div class="mt-12">
        <Perforation />
      </div>
    </main>

    <SiteFooter />
  </div>
</BaseLayout>

<style>
  .doc-content {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: oklch(0.28 0.03 52 / 0.9);
  }
  .doc-content h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.25rem;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid oklch(0.45 0.04 56 / 0.3);
  }
  .doc-content h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary);
  }
  .doc-content h2:first-child {
    margin-top: 0;
  }
  .doc-content h2 + *,
  .doc-content h3 + * {
    margin-top: 0;
  }
  .doc-content p {
    margin-bottom: 1.25rem;
  }
  .doc-content strong {
    font-weight: 700;
    color: oklch(0.25 0.04 52 / 1);
  }
  .doc-content ol,
  .doc-content ul {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .doc-content ol {
    list-style: decimal;
  }
  .doc-content ul {
    list-style: disc;
  }
  .doc-content li {
    margin-bottom: 0.5rem;
  }
  .doc-content ol ::marker,
  .doc-content ul ::marker {
    color: var(--primary);
    font-weight: 700;
  }
  .doc-content hr {
    border: 0;
    border-top: 1px solid oklch(0.45 0.04 56 / 0.5);
    box-shadow: 0 3px 0 -2px oklch(0.45 0.04 56 / 0.5);
    margin: 2.5rem 0;
  }
  .doc-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
  }
  .doc-content th,
  .doc-content td {
    border: 1px solid oklch(0.5 0.04 56 / 0.35);
    padding: 0.625rem 0.875rem;
    text-align: left;
    vertical-align: top;
  }
  .doc-content th {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    background: oklch(0.5 0.04 56 / 0.08);
  }
</style>