{{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">Products</div>
    <h1 class="font-serif text-3xl md:text-4xl text-ink">{{if .Single}}{{.Single.Name}}{{else}}Products{{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-12">
  {{if .List}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
    {{range .List}}
    <a href="{{.URL}}" class="group block bg-white border border-stone-200 hover:border-accent hover:shadow-lg transition rounded-sm overflow-hidden">
      <div class="relative aspect-[4/3] 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}}
        {{$badge := index .Ext "badge"}}
        {{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-accent text-white text-[11px] tracking-wider uppercase">{{$badge}}</span>{{end}}
      </div>
      <div class="p-6">
        <div class="flex items-center gap-3 text-[11px] text-stone-500 uppercase tracking-wider mb-3">
          {{$st := index .Ext "stone_type"}}{{if $st}}<span>{{$st}}</span>{{end}}
          {{$or := index .Ext "origin"}}{{if $or}}<span class="text-accent">·</span><span>{{$or}}</span>{{end}}
        </div>
        <h3 class="font-serif text-xl text-ink group-hover:text-primary transition mb-2 leading-snug">{{.Title}}</h3>
        <p class="text-sm text-stone-600 leading-relaxed mb-4">{{StrSub .Description 100}}</p>
        <div class="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-stone-500">
          {{$finish := index .Ext "finish"}}{{if $finish}}<span><span class="text-stone-400 uppercase tracking-wider">Finish</span> · {{$finish}}</span>{{end}}
          {{$moq := index .Ext "moq"}}{{if $moq}}<span><span class="text-stone-400 uppercase tracking-wider">MOQ</span> · {{$moq}}</span>{{end}}
        </div>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="text-center py-16 text-stone-400">No products 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>

<section class="bg-ink text-white py-14">
  <div class="max-w-5xl mx-auto px-4 text-center">
    <h2 class="font-serif text-2xl md:text-3xl mb-3">Need a specific colour or size?</h2>
    <p class="text-stone-300 mb-6">We cut to your spec. Send us a reference photo and target dimensions.</p>
    <a href="/inquiry" class="inline-block px-7 py-3 bg-accent hover:bg-amber-700 transition rounded-sm">Request a custom quote →</a>
  </div>
</section>

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