{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-5xl px-4 py-10 lg:px-8">
  {{if .Single}}
  <article class="rounded-[2rem] border border-[var(--border)] bg-white p-6 shadow-sm md:p-10">
    {{if index .Single.Ext "banner_img"}}<img src="{{index .Single.Ext "banner_img"}}" alt="{{.Single.Name}}" class="mb-8 h-64 w-full rounded-3xl object-cover">{{end}}
    <h1 class="text-3xl font-semibold">{{.Single.Name}}</h1>
    {{if .Single.Description}}<p class="mt-4 text-sm leading-7 text-[var(--muted)]">{{.Single.Description}}</p>{{end}}
    <div class="prose prose-slate mt-8 max-w-none rounded-3xl bg-[var(--surface-soft)] p-6 leading-8">{{.Single.Content|Str2Html}}</div>
    {{if index .Single.Ext "timeline"}}
    <div class="mt-10 grid gap-4 md:grid-cols-2">
      {{range index .Single.Ext "timeline"}}
      <div class="rounded-3xl bg-[var(--surface-soft)] p-5">
        <div class="text-sm font-semibold text-[var(--primary)]">{{index . "year"}}</div>
        <div class="mt-1 font-medium">{{index . "title"}}</div>
        <div class="mt-2 text-sm leading-7 text-[var(--muted)]">{{index . "text"}}</div>
      </div>
      {{end}}
    </div>
    {{end}}
    {{if index .Single.Ext "proofs"}}
    <div class="mt-10 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {{range index .Single.Ext "proofs"}}
      <div class="rounded-3xl border border-[var(--border)] bg-white p-5">
        <div class="text-2xl font-semibold text-[var(--primary)]">{{index . "value"}}</div>
        <div class="mt-1 text-sm text-[var(--muted)]">{{index . "label"}}</div>
      </div>
      {{end}}
    </div>
    {{end}}
    {{if index .Single.Ext "contact_cards"}}
    <div class="mt-10 grid gap-4 md:grid-cols-2">
      {{range index .Single.Ext "contact_cards"}}
      <div class="rounded-3xl bg-[var(--surface-soft)] p-5">
        <div class="font-semibold">{{index . "title"}}</div>
        <div class="mt-2 text-[var(--primary)]">{{index . "value"}}</div>
        <div class="mt-2 text-sm leading-7 text-[var(--muted)]">{{index . "desc"}}</div>
      </div>
      {{end}}
    </div>
    {{end}}
    {{if index .Single.Ext "faq"}}
    <div class="mt-10 space-y-4">
      {{range index .Single.Ext "faq"}}
      <details class="rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] p-4">
        <summary class="cursor-pointer font-medium">{{index . "q"}}</summary>
        <div class="mt-3 text-sm leading-7 text-[var(--muted)]">{{index . "a"}}</div>
      </details>
      {{end}}
    </div>
    {{end}}
  </article>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}