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

{{if .Content}}
<article class="bg-white">
  <section class="max-w-7xl mx-auto px-4 lg:px-8 py-10">
    <nav class="text-xs text-stone-500 mb-6 flex flex-wrap items-center gap-2">
      <a href="/" class="hover:text-accent">Home</a>
      <span>/</span>
      {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:text-accent">{{.Content.ColumnName}}</a><span>/</span>{{end}}
      <span class="text-stone-700">{{.Content.Title}}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
      <div class="lg:col-span-7">
        {{if .Content.Img}}
        <div class="aspect-[4/3] overflow-hidden bg-stone-100 rounded-sm mb-4">
          <img id="mainProductImg" src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover">
        </div>
        {{end}}
        {{if .Content.Albums}}
        <div class="grid grid-cols-4 gap-3">
          {{if .Content.Img}}<button type="button" class="aspect-square overflow-hidden bg-stone-100 rounded-sm border-2 border-accent product-thumb" data-src="{{.Content.Img}}"><img src="{{.Content.Img}}" alt="" class="w-full h-full object-cover"></button>{{end}}
          {{range .Content.Albums}}
          <button type="button" class="aspect-square overflow-hidden bg-stone-100 rounded-sm border border-stone-200 hover:border-accent product-thumb" data-src="{{.}}"><img src="{{.}}" alt="" class="w-full h-full object-cover"></button>
          {{end}}
        </div>
        {{end}}
      </div>

      <div class="lg:col-span-5">
        {{$badge := index .Content.Ext "badge"}}
        {{if $badge}}<span class="inline-block px-2.5 py-1 bg-accent text-white text-[11px] tracking-wider uppercase mb-4">{{$badge}}</span>{{end}}
        <h1 class="font-serif text-3xl md:text-4xl text-ink leading-tight mb-3">{{.Content.Title}}</h1>
        <p class="text-stone-600 leading-relaxed mb-6">{{.Content.Description}}</p>

        <div class="border-y border-stone-200 divide-y divide-stone-200 my-6">
          {{$st := index .Content.Ext "stone_type"}}{{if $st}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Stone type</div><div class="flex-1 text-ink">{{$st}}</div></div>{{end}}
          {{$or := index .Content.Ext "origin"}}{{if $or}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Origin</div><div class="flex-1 text-ink">{{$or}}</div></div>{{end}}
          {{$fin := index .Content.Ext "finish"}}{{if $fin}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Finish</div><div class="flex-1 text-ink">{{$fin}}</div></div>{{end}}
          {{$sz := index .Content.Ext "size"}}{{if $sz}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Standard size</div><div class="flex-1 text-ink">{{$sz}}</div></div>{{end}}
          {{$d := index .Content.Ext "density"}}{{if $d}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Density</div><div class="flex-1 text-ink">{{$d}}</div></div>{{end}}
          {{$wa := index .Content.Ext "water_absorption"}}{{if $wa}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Water absorption</div><div class="flex-1 text-ink">{{$wa}}</div></div>{{end}}
          {{$moq := index .Content.Ext "moq"}}{{if $moq}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">MOQ</div><div class="flex-1 text-ink">{{$moq}}</div></div>{{end}}
          {{$pk := index .Content.Ext "packing"}}{{if $pk}}<div class="flex py-3 text-sm"><div class="w-40 text-stone-500 uppercase text-xs tracking-wider self-center">Packing</div><div class="flex-1 text-ink">{{$pk}}</div></div>{{end}}
        </div>

        {{if .Content.Price}}
        <div class="mb-6">
          <div class="text-xs text-stone-500 uppercase tracking-wider mb-1">Reference price</div>
          <div class="font-serif text-3xl text-primary">USD {{.Content.Price}}</div>
        </div>
        {{end}}

        <div class="flex flex-wrap gap-3">
          <a href="/inquiry" class="px-7 py-3.5 bg-accent text-white text-sm font-medium hover:bg-amber-700 transition rounded-sm inline-flex items-center gap-2">
            Inquire about this product
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
          </a>
          <a href="/contact" class="px-7 py-3.5 border border-stone-300 text-stone-700 hover:bg-ink hover:text-white hover:border-ink transition text-sm rounded-sm inline-flex items-center">Contact sales</a>
        </div>

        {{$c := index .ThemesExt "contact"}}
        {{if $c}}
        <div class="mt-6 p-4 bg-stone-50 rounded-sm text-sm text-stone-600">
          <div class="font-medium text-ink mb-1">Direct sales line</div>
          <div>{{$c.phone}} · {{$c.email}}</div>
        </div>
        {{end}}
      </div>
    </div>
  </section>

  <section class="bg-stone-50 py-14 border-t border-stone-200">
    <div class="max-w-4xl mx-auto px-4 lg:px-8">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Product Details</div>
      <h2 class="font-serif text-2xl text-ink mb-6">About this stone</h2>
      <div class="prose prose-stone max-w-none article-body">{{.Content.Content|Str2Html}}</div>

      {{if .Content.Tags}}
      <div class="mt-8 flex flex-wrap gap-2">
        {{range .Content.Tags}}<a href="{{.url}}" class="px-3 py-1 bg-white border border-stone-200 text-sm text-stone-700 hover:border-accent hover:text-accent transition rounded-sm">#{{.name}}</a>{{end}}
      </div>
      {{end}}
    </div>
  </section>

  {{$related := Related .Content.Id 4}}
  {{if $related}}
  <section class="max-w-7xl mx-auto px-4 lg:px-8 py-14">
    <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">You may also like</div>
    <h2 class="font-serif text-2xl text-ink mb-8">Related products</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
      {{range $related}}
      <a href="{{.URL}}" class="group block bg-white border border-stone-200 hover:border-accent transition rounded-sm overflow-hidden">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full aspect-square object-cover group-hover:scale-105 transition duration-500">{{end}}
        <div class="p-4">
          <h3 class="font-serif text-sm text-ink group-hover:text-primary transition leading-snug">{{.Title}}</h3>
        </div>
      </a>
      {{end}}
    </div>
  </section>
  {{end}}

  <section class="flex flex-col md:flex-row gap-3 max-w-7xl mx-auto px-4 lg:px-8 pb-14">
    {{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"}}

<script>
$(function(){
  $('.product-thumb').on('click', function(){
    var src = $(this).data('src');
    $('#mainProductImg').attr('src', src);
    $('.product-thumb').removeClass('border-accent border-2').addClass('border border-stone-200');
    $(this).removeClass('border-stone-200').addClass('border-accent border-2');
  });
});
</script>