---
import { LOCALE_CODES } from '../../config/locales';
import { getContent } from '../../i18n/content';
import { amenitizUrl } from '../../lib/urls';

import Base from '../../layouts/Base.astro';
import BookingCta from '../../components/BookingCta.astro';
import SectionDivider from '../../components/SectionDivider.astro';
import ScrollReveal from '../../components/ScrollReveal.astro';

export function getStaticPaths() {
  return LOCALE_CODES.map((lang) => ({ params: { lang } }));
}

const { lang } = Astro.params as { lang: string };
const c = getContent(lang).cookie;
const home = getContent(lang);
const booking = amenitizUrl(lang);
---
<Base title={c.metaTitle} description={c.metaDesc} noindex>

  <!-- Page header -->
  <section class="section surface-travertine policy-hero" aria-labelledby="cookie-heading">
    <ScrollReveal>
      <div class="container">
        <p class="eyebrow">{c.eyebrow}</p>
        <h1 id="cookie-heading" class="policy-title">{c.title}</h1>
        <p class="policy-updated">{c.lastUpdated}</p>
      </div>
    </ScrollReveal>
  </section>

  <SectionDivider tone="gold" />

  <!-- Policy body -->
  <section class="section" aria-label={c.title}>
    <div class="container policy-body">
      {c.sections.map((sec) => (
        <ScrollReveal>
          <article class="policy-section">
            <h2 class="policy-section__heading">{sec.heading}</h2>
            <div class="policy-section__body">
              {sec.body.split('\n').map((line) =>
                line.trim() ? <p>{line}</p> : null
              )}
            </div>
          </article>
        </ScrollReveal>
      ))}
    </div>
  </section>

  <!-- Booking CTA -->
  <BookingCta
    eyebrow={home.home.ctaEyebrow}
    title={home.home.ctaTitle}
    body={home.home.ctaBody}
    button={home.home.ctaButton}
    href={booking}
  />
</Base>

<style>
  .surface-travertine { background: var(--c-travertine); }

  .policy-hero .container { max-inline-size: none; }

  .policy-title {
    font-weight: 360;
    margin-block: 0 var(--space-s);
    max-inline-size: 28ch;
  }

  .policy-updated {
    font-size: var(--step--1);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-brass);
    margin: 0;
    max-inline-size: none;
  }

  :lang(zh) .policy-updated, :lang(ja) .policy-updated,
  :lang(ko) .policy-updated, :lang(ar) .policy-updated,
  :lang(he) .policy-updated { letter-spacing: .04em; }

  .policy-body {
    max-inline-size: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .policy-section {
    max-inline-size: 80ch;
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--c-line);
  }

  .policy-section:first-child {
    border-block-start: none;
    padding-block-start: 0;
  }

  .policy-section__heading {
    font-size: var(--step-1);
    font-weight: 500;
    margin-block: 0 var(--space-s);
    max-inline-size: none;
    color: var(--c-ink);
  }

  .policy-section__body p {
    color: var(--c-muted);
    line-height: 1.8;
    margin-block: 0 .8em;
    max-inline-size: 72ch;
  }

  .policy-section__body p:last-child {
    margin-block-end: 0;
  }
</style>