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

<section class="relative h-72 md:h-96 overflow-hidden bg-ink">
  <img src="https://images.unsplash.com/photo-1532635241-17e820acc59f?auto=format&fit=crop&w=1800&q=80" alt="Quarries" class="w-full h-full object-cover opacity-40">
  <div class="absolute inset-0 bg-gradient-to-r from-ink to-ink/40 flex items-center">
    <div class="max-w-7xl mx-auto px-4 lg:px-8 w-full text-white">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Quarry Network</div>
      <h1 class="font-serif text-4xl md:text-5xl">{{if .Single}}{{.Single.Name}}{{end}}</h1>
      {{if .Single}}{{if .Single.Description}}<p class="text-stone-200 mt-4 max-w-2xl">{{.Single.Description}}</p>{{end}}{{end}}
    </div>
  </div>
</section>

<section class="max-w-7xl mx-auto px-4 lg:px-8 py-14">
  {{if .List}}
  <div class="space-y-8">
    {{range .List}}
    <a href="{{.URL}}" class="group grid grid-cols-1 md:grid-cols-12 gap-6 bg-white border border-stone-200 hover:border-accent hover:shadow-md transition rounded-sm overflow-hidden">
      <div class="md:col-span-5 aspect-[4/3] md:aspect-auto overflow-hidden bg-stone-100">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">{{end}}
      </div>
      <div class="md:col-span-7 p-6 md:p-8">
        <div class="flex items-center gap-3 text-[11px] text-stone-500 uppercase tracking-wider mb-3">
          {{$country := index .Ext "country"}}{{if $country}}<span class="text-accent">{{$country}}</span>{{end}}
          {{$since := index .Ext "since"}}{{if $since}}<span>·</span><span>Partner since {{$since}}</span>{{end}}
        </div>
        <h3 class="font-serif text-2xl text-ink group-hover:text-primary transition mb-3 leading-snug">{{.Title}}</h3>
        <p class="text-sm text-stone-600 leading-relaxed mb-5">{{StrSub .Description 160}}</p>

        <div class="grid grid-cols-2 gap-4 text-sm">
          {{$kind := index .Ext "stone_kind"}}{{if $kind}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Stone family</div><div class="text-ink mt-1">{{$kind}}</div></div>{{end}}
          {{$cap := index .Ext "capacity"}}{{if $cap}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Capacity</div><div class="text-ink mt-1">{{$cap}}</div></div>{{end}}
          {{$res := index .Ext "reserve"}}{{if $res}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Reserve</div><div class="text-ink mt-1">{{$res}}</div></div>{{end}}
          {{$tone := index .Ext "color_tone"}}{{if $tone}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Colour tone</div><div class="text-ink mt-1">{{$tone}}</div></div>{{end}}
        </div>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="text-center py-16 text-stone-400">No quarries 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"}}