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

{{/* 1. Hero slider */}}
{{$slides := HomeSlides}}
{{if $slides}}
<section class="relative bg-ink" id="hero">
  <div class="relative h-[540px] md:h-[640px] overflow-hidden">
    {{range $i, $s := $slides}}
    <div class="hero-slide absolute inset-0 transition-opacity duration-700 {{if eq $i 0}}opacity-100{{else}}opacity-0{{end}}" data-idx="{{$i}}">
      <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-black/75 via-black/40 to-transparent"></div>
      <div class="absolute inset-0 flex items-center">
        <div class="max-w-7xl mx-auto px-6 lg:px-10 text-white w-full">
          <div class="max-w-2xl">
            <div class="text-xs tracking-[0.3em] text-accent uppercase mb-4">Natural Stone · Direct from Quarry</div>
            <h2 class="font-serif text-4xl md:text-6xl leading-tight mb-5">{{.Title}}</h2>
            <p class="text-lg md:text-xl text-stone-200 mb-8 leading-relaxed">{{.SubTitle}}</p>
            <div class="flex flex-wrap gap-4">
              <a href="{{.URL}}" class="inline-flex items-center gap-2 px-7 py-3.5 bg-accent text-white font-medium hover:bg-amber-700 transition rounded-sm">
                Explore
                <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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
              </a>
              <a href="/inquiry" class="inline-flex items-center gap-2 px-7 py-3.5 bg-white/10 backdrop-blur border border-white/30 text-white font-medium hover:bg-white hover:text-ink transition rounded-sm">
                Request a quote
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{end}}
  </div>
  <div class="absolute bottom-6 left-0 right-0 flex justify-center gap-2 z-10">
    {{range $i, $s := $slides}}
    <button type="button" class="hero-dot w-8 h-1 transition {{if eq $i 0}}bg-accent{{else}}bg-white/40{{end}}" data-idx="{{$i}}" aria-label="Slide {{Add $i 1}}"></button>
    {{end}}
  </div>
</section>
{{end}}

{{/* 2. Stats strip */}}
{{$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-10 grid grid-cols-2 md:grid-cols-4 gap-6">
    {{range $stats}}
    <div class="text-center">
      <div class="font-serif text-4xl md:text-5xl text-primary font-semibold">{{.value}}</div>
      <div class="text-xs md:text-sm text-stone-500 mt-2 uppercase tracking-wider">{{.label}}</div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{/* 3. About preview */}}
{{$about := Column "about"}}
{{if $about}}
<section class="py-20 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 lg:px-8 grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
    <div class="md:col-span-7 order-2 md:order-1">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">About StoneCraft Global</div>
      <h2 class="font-serif text-3xl md:text-4xl text-ink mb-5 leading-tight">A vertically integrated stone exporter — quarry to port, in one contact.</h2>
      <p class="text-stone-600 leading-relaxed mb-4">{{$about.Description}}</p>
      <p class="text-stone-600 leading-relaxed mb-8">We bridge raw blocks at origin to finished slabs, tiles, and CNC pieces delivered to any major port. Container-level QC photos before sealing, flexible MOQ from a single crate to a full 40HQ, bilingual project managers on every account.</p>
      <a href="{{$about.URL}}" class="inline-flex items-center gap-2 text-primary font-medium hover:gap-3 transition-all">
        Learn more about us
        <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>
    </div>
    <div class="md:col-span-5 order-1 md:order-2">
      <div class="relative">
        {{$banner := index $about.Ext "banner_img"}}
        {{if $banner}}<img src="{{$banner}}" alt="{{$about.Name}}" class="w-full h-[420px] object-cover rounded-sm">{{end}}
        <div class="absolute -bottom-6 -left-6 bg-accent text-white px-5 py-4 rounded-sm hidden md:block">
          <div class="font-serif text-3xl">2008</div>
          <div class="text-xs uppercase tracking-wider mt-1 opacity-90">Founded</div>
        </div>
      </div>
    </div>
  </div>
</section>
{{end}}

{{/* 4. Products grid */}}
{{$products := ColumnContents "products" 6}}
{{$productsCol := Column "products"}}
{{if $products}}
<section class="py-20 bg-white">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12 gap-4">
      <div>
        <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Featured Products</div>
        <h2 class="font-serif text-3xl md:text-4xl text-ink">Marble, granite & luxury surfaces</h2>
        <p class="text-stone-500 mt-3 max-w-xl">Hand-picked from our anchor quarries. Polished, honed, brushed and flamed finishes.</p>
      </div>
      {{if $productsCol}}
      <a href="{{$productsCol.URL}}" class="text-sm text-primary font-medium hover:text-accent inline-flex items-center gap-2">View all products
        <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>
      {{end}}
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {{range $products}}
      <a href="{{.URL}}" class="group bg-white border border-stone-200 hover:border-accent hover:shadow-lg transition rounded-sm overflow-hidden">
        <div class="relative aspect-[4/3] overflow-hidden bg-stone-100">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">{{end}}
          {{$badge := index .Ext "badge"}}
          {{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-accent text-white text-[11px] tracking-wider uppercase">{{$badge}}</span>{{end}}
        </div>
        <div class="p-6">
          <div class="flex items-center gap-3 text-[11px] text-stone-500 uppercase tracking-wider mb-3">
            {{$st := index .Ext "stone_type"}}{{if $st}}<span>{{$st}}</span>{{end}}
            {{$or := index .Ext "origin"}}{{if $or}}<span class="text-accent">·</span><span>{{$or}}</span>{{end}}
          </div>
          <h3 class="font-serif text-xl text-ink group-hover:text-primary transition mb-2">{{.Title}}</h3>
          <p class="text-sm text-stone-600 leading-relaxed">{{StrSub .Description 90}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 5. Quarries strip */}}
{{$quarries := ColumnContents "quarries" 4}}
{{$quarriesCol := Column "quarries"}}
{{if $quarries}}
<section class="py-20 bg-ink text-white relative overflow-hidden">
  <div class="absolute inset-0 opacity-10">
    <img src="https://images.unsplash.com/photo-1532635241-17e820acc59f?auto=format&fit=crop&w=1800&q=80" alt="" class="w-full h-full object-cover">
  </div>
  <div class="max-w-7xl mx-auto px-4 lg:px-8 relative">
    <div class="text-center max-w-2xl mx-auto mb-14">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Quarry Network</div>
      <h2 class="font-serif text-3xl md:text-4xl mb-4">Direct offtake at 12 anchor quarries across four continents.</h2>
      <p class="text-stone-300">We are present at the source — block selection, grade verification, and direct dispatch to our Xiamen processing facility.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {{range $quarries}}
      <a href="{{.URL}}" class="group block bg-white/5 backdrop-blur border border-white/10 hover:border-accent transition rounded-sm overflow-hidden">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full aspect-[4/3] object-cover">{{end}}
        <div class="p-5">
          <div class="text-xs tracking-wider text-accent uppercase mb-2">{{index .Ext "country"}}</div>
          <h3 class="font-serif text-lg leading-snug group-hover:text-accent transition mb-2">{{.Title}}</h3>
          <div class="text-xs text-stone-400">{{index .Ext "stone_kind"}}</div>
        </div>
      </a>
      {{end}}
    </div>

    {{if $quarriesCol}}
    <div class="text-center mt-12">
      <a href="{{$quarriesCol.URL}}" class="inline-flex items-center gap-2 px-7 py-3 border border-white/30 hover:bg-accent hover:border-accent transition text-sm rounded-sm">Browse all quarries
        <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>
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{/* 6. Advantages */}}
{{$adv := index .ThemesExt "advantages"}}
{{if $adv}}
<section class="py-20 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-14">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Why Buyers Choose Us</div>
      <h2 class="font-serif text-3xl md:text-4xl text-ink">A trade partner who controls the chain — not a broker.</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {{range $adv}}
      <div class="bg-white p-7 border-t-2 border-accent rounded-sm hover:shadow-md transition">
        <h3 class="font-serif text-xl text-ink mb-3">{{.title}}</h3>
        <p class="text-sm text-stone-600 leading-relaxed">{{.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 7. Projects */}}
{{$cases := ColumnContents "cases" 6}}
{{$casesCol := Column "cases"}}
{{if $cases}}
<section class="py-20 bg-white">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12 gap-4">
      <div>
        <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Project References</div>
        <h2 class="font-serif text-3xl md:text-4xl text-ink">Landmark hospitality, residential & public projects.</h2>
      </div>
      {{if $casesCol}}
      <a href="{{$casesCol.URL}}" class="text-sm text-primary font-medium hover:text-accent inline-flex items-center gap-2">All projects
        <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>
      {{end}}
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {{range $cases}}
      <a href="{{.URL}}" class="group block relative aspect-[4/5] overflow-hidden rounded-sm">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">{{end}}
        <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent"></div>
        <div class="absolute inset-x-0 bottom-0 p-6 text-white">
          <div class="text-xs tracking-wider text-accent uppercase mb-2">{{index .Ext "location"}} · {{index .Ext "year"}}</div>
          <h3 class="font-serif text-xl leading-snug mb-2">{{.Title}}</h3>
          <div class="text-xs text-stone-300 opacity-0 group-hover:opacity-100 transition">{{index .Ext "project_type"}} · {{index .Ext "area"}}</div>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 8. News */}}
{{$news := ColumnContents "news" 3}}
{{$newsCol := Column "news"}}
{{if $news}}
<section class="py-20 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12 gap-4">
      <div>
        <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Industry News</div>
        <h2 class="font-serif text-3xl md:text-4xl text-ink">Pricing, finishes, freight, sustainability.</h2>
      </div>
      {{if $newsCol}}
      <a href="{{$newsCol.URL}}" class="text-sm text-primary font-medium hover:text-accent inline-flex items-center gap-2">All news
        <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>
      {{end}}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {{range $news}}
      <a href="{{.URL}}" class="group block bg-white rounded-sm overflow-hidden hover:shadow-lg transition">
        {{if .Img}}<div class="aspect-[16/9] overflow-hidden"><img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"></div>{{end}}
        <div class="p-6">
          <div class="text-xs text-stone-500 mb-3">{{ParseTime .CreatedAt "Jan 02, 2006"}}</div>
          <h3 class="font-serif text-lg text-ink group-hover:text-primary transition mb-2 leading-snug">{{.Title}}</h3>
          <p class="text-sm text-stone-600 leading-relaxed">{{StrSub .Description 90}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 9. Partners + certificates */}}
{{$partners := index .ThemesExt "partners"}}
{{$certs := index .ThemesExt "certificates"}}
{{if or $partners $certs}}
<section class="py-20 bg-white border-t border-stone-100">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    {{if $partners}}
    <div class="mb-16">
      <div class="text-center mb-8">
        <div class="text-xs tracking-[0.3em] text-stone-500 uppercase mb-2">Distribution Partners</div>
        <h2 class="font-serif text-2xl text-ink">Trusted by regional distributors on four continents.</h2>
      </div>
      <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-6 items-center">
        {{range $partners}}<div class="aspect-[3/2] bg-stone-50 flex items-center justify-center p-3 rounded-sm grayscale hover:grayscale-0 transition"><img src="{{.logo}}" alt="{{.name}}" class="max-h-full max-w-full object-contain opacity-70 hover:opacity-100"></div>{{end}}
      </div>
    </div>
    {{end}}

    {{if $certs}}
    <div>
      <div class="text-center mb-8">
        <div class="text-xs tracking-[0.3em] text-stone-500 uppercase mb-2">Certifications</div>
        <h2 class="font-serif text-2xl text-ink">Documented quality at every consignment.</h2>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
        {{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>
    {{end}}
  </div>
</section>
{{end}}

{{/* 10. Final CTA */}}
<section class="py-20 bg-accent text-white">
  <div class="max-w-3xl mx-auto px-4 text-center">
    <div class="text-xs tracking-[0.3em] uppercase opacity-80 mb-3">Get Started</div>
    <h2 class="font-serif text-3xl md:text-4xl mb-4">Tell us your project — we reply within 24 hours.</h2>
    <p class="opacity-90 mb-8 leading-relaxed">Specs, end use, target lead time, port of destination. We will return a quoted offer with available block photos, finish samples, and freight indication.</p>
    <div class="flex flex-wrap gap-3 justify-center">
      <a href="/inquiry" class="inline-flex items-center gap-2 px-8 py-3.5 bg-white text-accent font-medium hover:bg-stone-100 transition rounded-sm">Send an inquiry
        <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="inline-flex items-center gap-2 px-8 py-3.5 border border-white/50 text-white hover:bg-white hover:text-accent transition rounded-sm">See contact details</a>
    </div>
  </div>
</section>

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