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

{{if .Content}}
<article>
  <section class="relative h-80 md:h-[440px] overflow-hidden bg-ink">
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover opacity-50">{{end}}
    <div class="absolute inset-0 bg-gradient-to-r from-ink via-ink/60 to-transparent 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">
          {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:underline">{{.Content.ColumnName}}</a> · {{end}}{{index .Content.Ext "country"}}
        </div>
        <h1 class="font-serif text-4xl md:text-5xl leading-tight max-w-3xl">{{.Content.Title}}</h1>
        {{if .Content.Description}}<p class="text-stone-200 mt-4 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">
      {{$country := index .Content.Ext "country"}}{{if $country}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Country</div><div class="font-serif text-xl text-ink mt-1">{{$country}}</div></div>{{end}}
      {{$kind := index .Content.Ext "stone_kind"}}{{if $kind}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Stone family</div><div class="font-serif text-base text-ink mt-1 leading-snug">{{$kind}}</div></div>{{end}}
      {{$cap := index .Content.Ext "capacity"}}{{if $cap}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Capacity</div><div class="font-serif text-base text-ink mt-1">{{$cap}}</div></div>{{end}}
      {{$res := index .Content.Ext "reserve"}}{{if $res}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Reserve</div><div class="font-serif text-base text-ink mt-1">{{$res}}</div></div>{{end}}
      {{$since := index .Content.Ext "since"}}{{if $since}}<div><div class="text-[11px] text-stone-500 uppercase tracking-wider">Partnered since</div><div class="font-serif text-xl text-ink mt-1">{{$since}}</div></div>{{end}}
    </div>
  </section>

  <section class="max-w-3xl mx-auto px-4 lg:px-8 py-14">
    {{$tone := index .Content.Ext "color_tone"}}
    {{if $tone}}<div class="border-l-2 border-accent pl-5 mb-8 text-lg text-stone-700 leading-relaxed italic">{{$tone}}</div>{{end}}
    <div class="prose prose-stone prose-lg max-w-none article-body">{{.Content.Content|Str2Html}}</div>
  </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">Source stone from this quarry?</h2>
      <p class="text-stone-300 mb-6">We dispatch directly to our Xiamen yard — short the broker layer.</p>
      <a href="/inquiry" class="inline-block px-7 py-3 bg-accent hover:bg-amber-700 transition rounded-sm">Request availability →</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"}}