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

{{if .Content}}
<article class="bg-white">
  <header class="bg-stone-100 border-b border-stone-200">
    <div class="max-w-3xl mx-auto px-4 lg:px-8 py-12">
      {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="text-xs tracking-[0.3em] text-accent uppercase hover:underline">{{.Content.ColumnName}}</a>{{end}}
      <h1 class="font-serif text-3xl md:text-5xl text-ink mt-3 leading-tight">{{.Content.Title}}</h1>
      <div class="flex flex-wrap gap-x-5 gap-y-2 text-sm text-stone-500 mt-5">
        <span>{{ParseTime .Content.CreatedAt "Jan 02, 2006"}}</span>
        {{if .Content.Author}}<span>By {{.Content.Author}}</span>{{end}}
        {{if .Content.Views}}<span>{{.Content.Views}} views</span>{{end}}
      </div>
    </div>
  </header>

  <div class="max-w-3xl mx-auto px-4 lg:px-8 py-12">
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-sm mb-10 aspect-[16/9] object-cover">{{end}}

    {{if .Content.Description}}
    <div class="border-l-2 border-accent pl-5 mb-8 text-lg text-stone-700 leading-relaxed italic">{{.Content.Description}}</div>
    {{end}}

    <div class="prose prose-stone prose-lg max-w-none article-body">{{.Content.Content|Str2Html}}</div>

    {{if .Content.Tags}}
    <div class="mt-10 pt-6 border-t border-stone-200 flex flex-wrap gap-2">
      <span class="text-xs text-stone-500 uppercase tracking-wider mr-2 self-center">Tags</span>
      {{range .Content.Tags}}<a href="{{.url}}" class="px-3 py-1 bg-stone-100 text-sm text-stone-700 hover:bg-accent hover:text-white transition rounded-sm">#{{.name}}</a>{{end}}
    </div>
    {{end}}

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-12 pt-8 border-t border-stone-200">
      {{if .Prev}}
      <a href="{{.Prev.URL}}" class="block p-5 bg-stone-50 hover:bg-accent hover:text-white transition rounded-sm group">
        <div class="text-xs text-stone-500 group-hover:text-white/80 uppercase tracking-wider mb-2">← Previous</div>
        <div class="font-serif text-base leading-snug">{{.Prev.Title}}</div>
      </a>
      {{else}}<span></span>{{end}}
      {{if .Next}}
      <a href="{{.Next.URL}}" class="block p-5 bg-stone-50 hover:bg-accent hover:text-white transition rounded-sm group md:text-right">
        <div class="text-xs text-stone-500 group-hover:text-white/80 uppercase tracking-wider mb-2">Next →</div>
        <div class="font-serif text-base leading-snug">{{.Next.Title}}</div>
      </a>
      {{else}}<span></span>{{end}}
    </div>

    {{$related := Related .Content.Id 3}}
    {{if $related}}
    <section class="mt-16">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Related Reading</div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        {{range $related}}
        <a href="{{.URL}}" class="group block bg-stone-50 hover:bg-white hover:shadow-md transition rounded-sm overflow-hidden">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full aspect-[4/3] object-cover">{{end}}
          <div class="p-4">
            <h4 class="font-serif text-sm text-ink group-hover:text-primary transition leading-snug">{{.Title}}</h4>
          </div>
        </a>
        {{end}}
      </div>
    </section>
    {{end}}

    <div class="mt-16 p-8 bg-ink text-white rounded-sm text-center">
      <h3 class="font-serif text-2xl mb-3">Sourcing for a similar project?</h3>
      <p class="text-stone-300 mb-5">Tell us your stone, finish, and target port — we will reply with availability and pricing.</p>
      <a href="/inquiry" class="inline-block px-6 py-2.5 bg-accent text-white hover:bg-amber-700 transition rounded-sm">Start your inquiry →</a>
    </div>
  </div>
</article>
{{end}}

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