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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
<section class="relative h-72 md:h-96 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/80 to-ink/40 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">Contact</div>
      <h1 class="font-serif text-4xl md:text-5xl">Talk to our trade desk</h1>
      <p class="text-stone-200 mt-3 max-w-2xl">{{.Single.Description}}</p>
    </div>
  </div>
</section>

<section class="max-w-7xl mx-auto px-4 lg:px-8 py-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
  {{$c := index .ThemesExt "contact"}}
  {{$ext := .Single.Ext}}
  <div class="bg-white border border-stone-200 p-7 rounded-sm">
    <div class="text-xs tracking-wider text-accent uppercase mb-3">Phone</div>
    <div class="font-serif text-xl text-ink">{{if $ext.phone}}{{$ext.phone}}{{else}}{{$c.phone}}{{end}}</div>
    <div class="text-sm text-stone-500 mt-3">Reachable Mon–Sat 9:00–18:00 (GMT+8)</div>
  </div>
  <div class="bg-white border border-stone-200 p-7 rounded-sm">
    <div class="text-xs tracking-wider text-accent uppercase mb-3">Email</div>
    <div class="font-serif text-xl text-ink break-all">{{if $ext.email}}{{$ext.email}}{{else}}{{$c.email}}{{end}}</div>
    <div class="text-sm text-stone-500 mt-3">Replies within one business day.</div>
  </div>
  <div class="bg-white border border-stone-200 p-7 rounded-sm">
    <div class="text-xs tracking-wider text-accent uppercase mb-3">WhatsApp</div>
    <div class="font-serif text-xl text-ink">{{if $ext.whatsapp}}{{$ext.whatsapp}}{{else}}{{$c.whatsapp}}{{end}}</div>
    <div class="text-sm text-stone-500 mt-3">Same number on WeChat. English & Mandarin.</div>
  </div>
</section>

{{$offices := index .ThemesExt "offices"}}
{{if $offices}}
<section class="bg-stone-50 py-16">
  <div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="mb-12">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Our Offices</div>
      <h2 class="font-serif text-3xl text-ink">Three offices on three continents.</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {{range $offices}}
      <div class="bg-white p-7 rounded-sm border-t-2 border-accent">
        <div class="font-serif text-xl text-ink mb-2">{{.city}}</div>
        <div class="text-xs text-stone-500 uppercase tracking-wider mb-4">{{.role}}</div>
        <div class="text-sm text-stone-700 leading-relaxed mb-3">{{.address}}</div>
        <div class="text-sm text-primary font-medium">{{.phone}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

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

<section class="py-16 bg-ink text-white">
  <div class="max-w-3xl mx-auto px-4 text-center">
    <h2 class="font-serif text-3xl mb-3">Already know what you need?</h2>
    <p class="text-stone-300 mb-6">Jump straight to the inquiry form and we will quote within a business day.</p>
    <a href="/inquiry" class="inline-block px-7 py-3 bg-accent text-white hover:bg-amber-700 transition rounded-sm">Send an inquiry →</a>
  </div>
</section>
{{end}}

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