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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
<section class="relative h-80 md:h-[460px] overflow-hidden bg-ink">
  {{if $banner}}<img src="{{$banner}}" alt="{{.Single.Name}}" 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">About StoneCraft Global</div>
      <h1 class="font-serif text-4xl md:text-6xl leading-tight max-w-3xl">Quarry to port. One contact, four continents.</h1>
      <p class="text-stone-200 mt-5 max-w-2xl text-lg">{{.Single.Description}}</p>
    </div>
  </div>
</section>

{{$stats := index .ThemesExt "stats_cards"}}
{{if $stats}}
<section class="bg-white border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 lg:px-8 py-12 grid grid-cols-2 md:grid-cols-4 gap-6">
    {{range $stats}}
    <div>
      <div class="font-serif text-4xl text-primary font-semibold">{{.value}}</div>
      <div class="text-xs text-stone-500 mt-2 uppercase tracking-wider">{{.label}}</div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

<section class="max-w-5xl mx-auto px-4 lg:px-8 py-16">
  <div class="prose prose-stone prose-lg max-w-none article-body">{{.Single.Content|Str2Html}}</div>
</section>

{{$steps := index .ThemesExt "service_steps"}}
{{if $steps}}
<section class="bg-stone-50 py-20">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="text-center mb-14">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Service Process</div>
      <h2 class="font-serif text-3xl md:text-4xl text-ink">From inquiry to on-site installation.</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
      {{range $steps}}
      <div class="bg-white p-6 rounded-sm border-t-2 border-accent">
        <div class="font-serif text-3xl text-accent mb-3">{{.step}}</div>
        <h3 class="font-serif text-lg text-ink mb-2">{{.title}}</h3>
        <p class="text-xs text-stone-600 leading-relaxed">{{.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{$certs := index .ThemesExt "certificates"}}
{{if $certs}}
<section class="py-20 bg-white">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="text-center mb-12">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Certifications</div>
      <h2 class="font-serif text-3xl text-ink">Documented quality, every consignment.</h2>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      {{range $certs}}
      <div class="bg-stone-50 p-5 rounded-sm text-center">
        {{if .img}}<img src="{{.img}}" alt="{{.name}}" class="w-full aspect-[4/3] object-cover mb-3 rounded-sm">{{end}}
        <div class="text-sm text-stone-700 font-medium">{{.name}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-20 bg-accent text-white">
  <div class="max-w-3xl mx-auto px-4 text-center">
    <h2 class="font-serif text-3xl md:text-4xl mb-4">Visit our factory, meet our team.</h2>
    <p class="opacity-90 mb-8">We host buyers at our Xiamen facility year-round. Inspect blocks, watch slabs being processed, and sit down with the project manager who will run your account.</p>
    <a href="/inquiry" class="inline-block px-8 py-3.5 bg-white text-accent font-medium hover:bg-stone-100 transition rounded-sm">Plan a visit →</a>
  </div>
</section>
{{end}}

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