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

{{if .Content}}
<article>
  <section class="relative h-[460px] md:h-[560px] overflow-hidden bg-ink">
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover opacity-60">{{end}}
    <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent flex items-end">
      <div class="max-w-7xl mx-auto px-4 lg:px-8 w-full text-white pb-14">
        {{$badge := index .Content.Ext "badge"}}
        {{if $badge}}<span class="inline-block px-2.5 py-1 bg-accent text-[11px] tracking-wider uppercase mb-4">{{$badge}}</span>{{end}}
        <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">
          {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:underline">{{.Content.ColumnName}}</a> · {{end}}{{index .Content.Ext "location"}} · {{index .Content.Ext "year"}}
        </div>
        <h1 class="font-serif text-4xl md:text-6xl leading-tight max-w-3xl">{{.Content.Title}}</h1>
        {{if .Content.Description}}<p class="text-stone-200 mt-5 max-w-2xl text-lg">{{.Content.Description}}</p>{{end}}
      </div>
    </div>
  </section>

  <section class="bg-white border-b border-stone-200">
    <div class="max-w-7xl mx-auto px-4 lg:px-8 py-10 grid grid-cols-2 md:grid-cols-5 gap-6">
      {{$loc := index .Content.Ext "location"}}{{if $loc}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Location</div><div class="font-serif text-base text-ink mt-1">{{$loc}}</div></div>{{end}}
      {{$type := index .Content.Ext "project_type"}}{{if $type}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Project type</div><div class="font-serif text-base text-ink mt-1">{{$type}}</div></div>{{end}}
      {{$year := index .Content.Ext "year"}}{{if $year}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Year</div><div class="font-serif text-base text-ink mt-1">{{$year}}</div></div>{{end}}
      {{$area := index .Content.Ext "area"}}{{if $area}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Stone area</div><div class="font-serif text-base text-ink mt-1">{{$area}}</div></div>{{end}}
      {{$client := index .Content.Ext "client"}}{{if $client}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Client</div><div class="font-serif text-base text-ink mt-1">{{$client}}</div></div>{{end}}
    </div>
  </section>

  <section class="max-w-3xl mx-auto px-4 lg:px-8 py-14">
    {{$mat := index .Content.Ext "material"}}
    {{if $mat}}
    <div class="mb-10 p-6 bg-stone-50 border-l-2 border-accent rounded-sm">
      <div class="text-xs text-stone-500 uppercase tracking-wider mb-2">Materials used</div>
      <div class="font-serif text-xl text-ink">{{$mat}}</div>
    </div>
    {{end}}
    <div class="prose prose-stone prose-lg max-w-none article-body">{{.Content.Content|Str2Html}}</div>
  </section>

  {{if .Content.Albums}}
  <section class="bg-stone-50 py-14">
    <div class="max-w-7xl mx-auto px-4 lg:px-8">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Project Gallery</div>
      <h2 class="font-serif text-2xl text-ink mb-6">More images</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {{range .Content.Albums}}
        <div class="aspect-[4/3] overflow-hidden bg-stone-100 rounded-sm"><img src="{{.}}" alt="" class="w-full h-full object-cover hover:scale-105 transition duration-500"></div>
        {{end}}
      </div>
    </div>
  </section>
  {{end}}

  <section class="py-16 bg-accent text-white">
    <div class="max-w-3xl mx-auto px-4 text-center">
      <h2 class="font-serif text-3xl mb-3">A similar project on your desk?</h2>
      <p class="opacity-90 mb-6">Share the brief — we will return a quote with material, finish, and freight breakdown.</p>
      <a href="/inquiry" class="inline-block px-7 py-3 bg-white text-accent font-medium hover:bg-stone-100 transition rounded-sm">Start your inquiry →</a>
    </div>
  </section>

  <section class="flex flex-col md:flex-row gap-3 max-w-7xl mx-auto px-4 lg:px-8 py-10">
    {{if .Prev}}<a href="{{.Prev.URL}}" class="flex-1 p-4 bg-stone-50 hover:bg-accent hover:text-white transition rounded-sm"><div class="text-xs text-stone-500 mb-1">← Previous</div><div class="font-serif text-base">{{.Prev.Title}}</div></a>{{end}}
    {{if .Next}}<a href="{{.Next.URL}}" class="flex-1 p-4 bg-stone-50 hover:bg-accent hover:text-white transition rounded-sm md:text-right"><div class="text-xs text-stone-500 mb-1">Next →</div><div class="font-serif text-base">{{.Next.Title}}</div></a>{{end}}
  </section>
</article>
{{end}}

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