{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View "pages.tours.title" "pages.tours.description" "/static/images/pages/tours.jpg")}}

  <div class="page-container py-10 pb-16">
    <div class="content-section reveal">
      <div class="grid gap-8 lg:grid-cols-12 lg:items-end">
        <div class="lg:col-span-8">
          <p class="section-kicker">{{t .View "pages.tours.title"}}</p>
          <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300 sm:text-base">{{t .View "toursContent.intro"}}</p>
          <p class="mt-4 text-sm leading-relaxed text-slate-600 dark:text-slate-300 sm:text-base">{{t .View "toursContent.capacity"}}</p>
        </div>
        <div class="flex flex-wrap gap-3 lg:col-span-4 lg:justify-end">
          <a href="/tours/request" class="btn-primary">{{t .View "toursContent.formCta"}}</a>
          <a href="#tour-contact" class="btn-secondary">{{t .View "toursContent.contactCta"}}</a>
        </div>
      </div>
    </div>

    <div class="reveal-stagger mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
      <div class="stat-card"><p class="stat-card__kicker">{{t .View "toursContent.facts.seasonLabel"}}</p><p class="stat-card__value">{{t .View "toursContent.facts.season"}}</p></div>
      <div class="stat-card"><p class="stat-card__kicker">{{t .View "toursContent.facts.scheduleLabel"}}</p><p class="stat-card__value">{{t .View "toursContent.facts.schedule"}}</p></div>
      <div class="stat-card"><p class="stat-card__kicker">{{t .View "toursContent.facts.durationLabel"}}</p><p class="stat-card__value">{{t .View "toursContent.facts.duration"}}</p></div>
      <div class="stat-card"><p class="stat-card__kicker">{{t .View "toursContent.facts.noticeLabel"}}</p><p class="stat-card__value">{{t .View "toursContent.facts.notice"}}</p></div>
    </div>

    <section class="content-section mt-8 reveal">
      {{template "section_heading" (sectionHeading .View "" "toursContent.requirementsTitle" "")}}
      <ul class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {{range .Requirements}}
        <li class="flex gap-3 rounded-xl border border-slate-100 bg-slate-50/80 p-4 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-950/50 dark:text-slate-300">
          <span class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-bold text-brand-700 dark:bg-brand-950 dark:text-brand-300">✓</span>
          <span>{{index . "text"}}</span>
        </li>
        {{end}}
      </ul>
    </section>

    <div class="reveal-stagger mt-6 grid gap-4 md:grid-cols-2">
      {{range .Sections}}
      <section class="content-section p-5 sm:p-6">
        <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{index . "title"}}</h2>
        <p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{index . "body"}}</p>
      </section>
      {{end}}
    </div>

    <div class="mt-6 grid gap-4 lg:grid-cols-2">
      <section class="content-section p-5 sm:p-6">
        <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{t .View "toursContent.giftsTitle"}}</h2>
        <ul class="mt-4 space-y-2">
          {{range .Gifts}}
          <li class="flex gap-3 text-sm text-slate-600 dark:text-slate-300">
            <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gold"></span>
            <span>{{index . "text"}}</span>
          </li>
          {{end}}
        </ul>
      </section>
      <section class="notice-banner p-5 sm:p-6">
        <h2 class="font-display text-lg font-bold">{{t .View "toursContent.importantTitle"}}</h2>
        <ul class="mt-4 space-y-2">
          {{range .Important}}
          <li class="flex gap-3 text-sm">
            <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-600 dark:bg-amber-400"></span>
            <span>{{index . "text"}}</span>
          </li>
          {{end}}
        </ul>
      </section>
    </div>

    <section class="content-section mt-6 p-5 sm:p-6 lg:p-8 reveal">
      <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{t .View "toursContent.recordingTitle"}}</h2>
      <p class="mt-2 max-w-5xl text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{t .View "toursContent.recordingBody"}}</p>
    </section>

    <p class="mt-8 text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{t .View "toursContent.closing"}}</p>

    <section id="tour-contact" class="cta-band mt-8 reveal">
      <div class="relative z-10">
        <h2 class="font-display text-xl font-bold text-white">{{t .View "toursContent.contactTitle"}}</h2>
        <p class="section-desc">{{t .View "toursContent.contactBody"}}</p>
        <div class="mt-5 flex flex-wrap gap-x-8 gap-y-2 text-sm text-brand-50">
          <p>
            <span class="font-semibold text-white">{{t .View "toursContent.contactPhoneLabel"}}:</span>
            <a href="tel:+12465361300" class="ml-1 hover:underline">{{t .View "toursContent.contactPhone"}}</a>
          </p>
          <p>
            <span class="font-semibold text-white">{{t .View "toursContent.contactEmailLabel"}}:</span>
            <a href="mailto:{{t .View "toursContent.contactEmail"}}" class="ml-1 hover:underline">{{t .View "toursContent.contactEmail"}}</a>
          </p>
        </div>
      </div>
      <a href="/tours/request" class="btn-primary relative z-10 shrink-0">{{t .View "toursContent.formCta"}} →</a>
    </section>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}