---
import SubpageLayout from '../layouts/SubpageLayout.astro';
import type { SupportedLocale } from '../data/home/navigation';
import { getGdpr } from '../data/gdpr';

const path = Astro.url.pathname;
const localeMatch = path.match(/^\/(en|th)(\/|$)/);
const currentLocale = (localeMatch?.[1] ?? 'it') as SupportedLocale;
const gdpr = getGdpr(currentLocale);
const { document: gdprDocument, riferimenti, sections, page } = gdpr;

const localize = (href: string) => {
  if (currentLocale === 'it') return href;
  if (href.startsWith(`/${currentLocale}`)) return href;
  if (href.startsWith('/#')) return `/${currentLocale}${href}`;
  if (href.startsWith('/')) return `/${currentLocale}${href}`;
  return href;
};

const link = 'text-sky-400/90 underline-offset-2 hover:text-sky-300 hover:underline';
---

<SubpageLayout
  title={page.title}
  description={page.description}
  heading={page.heading}
  lead={page.lead}
>
  <div>
    <p class="border-l-2 border-sky-500/35 pl-4 text-sm leading-relaxed text-nx-muted">
      <span class="font-medium text-nx-fg">{page.versionLabel}</span> {gdprDocument.version}
      <span class="text-nx-muted/80"> · </span>
      <span class="font-medium text-nx-fg">{page.inForceFromLabel}</span> {gdprDocument.inVigoreDal}
      <span class="text-nx-muted/80"> · </span>
      <span class="font-medium text-nx-fg">{page.lastUpdateLabel}</span> {gdprDocument.ultimoAggiornamento}
    </p>

    <p class="!mt-5 text-sm text-nx-muted sm:text-base">
      {page.relatedDocsLabel}:{' '}
      {
        riferimenti.map((r, i) => (
          <span>
            {i > 0 && <span class="text-nx-muted/80"> · </span>}
            <a class={link} href={localize(r.href)}>{r.label}</a>
          </span>
        ))
      }
    </p>

    <h2 id="indice" class="!mt-8">{page.indexLabel}</h2>
    <ol class="!mt-3 list-decimal space-y-1.5 pl-5 text-sm leading-relaxed sm:text-base">
      {
        sections.map((s) => (
          <li>
            <a class={link} href={`#${s.id}`}>{s.title}</a>
          </li>
        ))
      }
    </ol>

    {
      sections.map((s) => (
        <section class="mt-10" id={s.id}>
          <h2 class="scroll-mt-8 text-lg font-semibold text-nx-fg sm:text-xl">
            {s.title}
          </h2>
          {s.paragraphs.map((p) => (
            <p class="mt-3 text-sm leading-relaxed text-nx-muted sm:text-base">{p}</p>
          ))}
          {s.bullets && s.bullets.length > 0 ? (
            <ul class="mt-3 list-disc space-y-2 pl-5 text-sm sm:text-base">
              {s.bullets.map((b) => (
                <li class="text-nx-muted">{b}</li>
              ))}
            </ul>
          ) : null}
          {s.paragraphsAfterBullets?.map((p) => (
            <p class="mt-3 text-sm leading-relaxed text-nx-muted sm:text-base">{p}</p>
          ))}
        </section>
      ))
    }
  </div>
</SubpageLayout>