{{include "header.html"}}
{{include "nav.html"}}

<section class="bg-stone-100 border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 lg:px-8 py-12">
    <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Project References</div>
    <h1 class="font-serif text-3xl md:text-4xl text-ink">{{if .Single}}{{.Single.Name}}{{end}}</h1>
    {{if .Single}}{{if .Single.Description}}<p class="text-stone-600 mt-3 max-w-3xl">{{.Single.Description}}</p>{{end}}{{end}}
  </div>
</section>

<section class="max-w-7xl mx-auto px-4 lg:px-8 py-14">
  {{if .List}}
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {{range .List}}
    <a href="{{.URL}}" class="group block relative aspect-[4/5] overflow-hidden rounded-sm">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">{{end}}
      <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent"></div>
      <div class="absolute inset-x-0 bottom-0 p-6 text-white">
        {{$badge := index .Ext "badge"}}
        {{if $badge}}<span class="inline-block px-2.5 py-1 bg-accent text-white text-[11px] tracking-wider uppercase mb-3">{{$badge}}</span>{{end}}
        <div class="text-xs tracking-wider text-accent uppercase mb-2">{{index .Ext "location"}} · {{index .Ext "year"}}</div>
        <h3 class="font-serif text-2xl leading-snug mb-2">{{.Title}}</h3>
        <div class="text-xs text-stone-300 opacity-80">{{index .Ext "project_type"}}{{$a := index .Ext "area"}}{{if $a}} · {{$a}}{{end}}</div>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="text-center py-16 text-stone-400">No projects yet.</div>
  {{end}}

  {{if .Pager.Enabled}}
  <nav class="flex justify-center items-center gap-2 mt-12 flex-wrap">
    {{range .Pager.Items}}
      {{if eq .Kind "gap"}}<span class="px-3 py-2 text-stone-400">…</span>
      {{else if .Disabled}}<span class="px-3 py-2 text-stone-300 border border-stone-200">{{.Label}}</span>
      {{else if .Active}}<span class="px-3 py-2 bg-primary text-white border border-primary">{{.Label}}</span>
      {{else}}<a href="{{.URL}}" class="px-3 py-2 text-stone-600 hover:text-accent border border-stone-200 hover:border-accent transition">{{.Label}}</a>
      {{end}}
    {{end}}
  </nav>
  {{end}}
</section>

{{include "footer.html"}}
{{include "js.html"}}