---
import { getCollection } from 'astro:content'
import BaseLayout from '@/layouts/BaseLayout.astro'

export async function getStaticPaths() {
  const docs = await getCollection('legal')
  return docs.map((d) => ({ params: { slug: d.slug }, props: { doc: d } }))
}

const { doc } = Astro.props
const { Content } = await doc.render()
const updated = doc.data.last_updated.toLocaleDateString('ru-KZ', { day: '2-digit', month: 'long', year: 'numeric' })
---
<BaseLayout title={doc.data.title} description={`Юридический документ Food Market: ${doc.data.title}.`}>
  <article class="max-w-[720px] mx-auto px-4 sm:px-6 py-12">
    <p class="text-xs text-slate-500 mb-2">Обновлено: {updated}</p>
    <div class="prose-legal">
      <Content />
    </div>
    <p class="mt-12 pt-6 border-t border-slate-200 text-xs text-slate-500">
      По вопросам — <a href="/contacts" class="text-brand underline">контакты</a>.
    </p>
  </article>
</BaseLayout>

<style is:global>
  .prose-legal {
    font-size: 15px;
    line-height: 1.7;
    color: #1e293b;
  }
  .prose-legal h1 { font-size: 1.875rem; font-weight: 800; line-height: 1.2; margin-top: 1.5rem; margin-bottom: 1rem; }
  .prose-legal h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin-top: 2rem; margin-bottom: 0.75rem; }
  .prose-legal h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin-top: 1.5rem; margin-bottom: 0.5rem; }
  .prose-legal p { margin: 0.75rem 0; }
  .prose-legal ul, .prose-legal ol { margin: 0.75rem 0 0.75rem 1.5rem; }
  .prose-legal li { margin: 0.25rem 0; }
  .prose-legal blockquote {
    border-left: 3px solid #fbbf24;
    background: #fffbeb;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    color: #92400e;
    font-size: 0.9rem;
  }
  .prose-legal a { color: var(--color-brand, #00B207); text-decoration: underline; }
  .prose-legal hr { margin: 2rem 0; border: 0; border-top: 1px solid #e2e8f0; }
  .prose-legal code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
  .prose-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
  .prose-legal th, .prose-legal td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
  .prose-legal th { background: #f8fafc; font-weight: 600; }
  .prose-legal strong { font-weight: 600; }
</style>
