{{define "about.html"}}
{{template "public_shell_start" .}}
{{template "about_content" .}}
{{template "public_shell_end" .}}
{{end}}

{{define "about_partial.html"}}
{{template "public_nav_oob" .}}
{{template "about_content" .}}
{{end}}

{{define "about_content"}}
<main id="main-content" class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 md:grid-cols-[0.9fr_1.1fr] md:items-start">
    <div class="aspect-[4/5] overflow-hidden bg-neutral-200">
      <img src="{{.Content.AboutImage}}" alt="{{.Content.AboutName}}" class="h-full w-full object-cover">
    </div>
    <div>
      <p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">Studio</p>
      <h1 class="text-5xl font-semibold md:text-7xl">{{.Content.AboutName}}</h1>
      <p class="mt-3 text-xl text-neutral-500">{{.Content.AboutRole}}</p>
      <p class="mt-8 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
      <div class="mt-8 grid gap-4 border-t border-neutral-200 pt-6 text-sm text-neutral-600 md:grid-cols-3">
        <p><span class="block text-neutral-400">Base</span>{{.Content.Location}}</p>
        <p><span class="block text-neutral-400">Service area</span>{{.Content.ServiceArea}}</p>
        <p><span class="block text-neutral-400">Contact</span>{{.Content.Email}}</p>
      </div>
    </div>
  </section>

  <section class="mt-20 grid gap-10 border-t border-neutral-200 pt-12 md:grid-cols-[0.75fr_1.25fr]">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Philosophy</p>
      <h2 class="text-3xl font-semibold md:text-5xl">Quiet spaces shaped around real use</h2>
    </div>
    <div class="grid gap-8">
      <p class="max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Content.StudioPhilosophy}}</p>
      <div class="grid gap-6 md:grid-cols-2">
        <article class="border-t border-neutral-300 pt-5">
          <h3 class="mb-3 text-xl font-medium">Approach</h3>
          <p class="leading-relaxed text-neutral-600">{{.Content.StudioApproach}}</p>
        </article>
        <article class="border-t border-neutral-300 pt-5">
          <h3 class="mb-3 text-xl font-medium">Experience</h3>
          <p class="leading-relaxed text-neutral-600">{{.Content.StudioCredentials}}</p>
        </article>
      </div>
    </div>
  </section>

  <section class="mt-20 grid gap-8 bg-neutral-950 px-5 py-12 text-white md:grid-cols-3 md:px-8">
    <article>
      <p class="mb-4 text-sm text-white/45">01</p>
      <h3 class="mb-3 text-xl font-medium">{{.Content.ProcessOneTitle}}</h3>
      <p class="leading-relaxed text-white/65">{{.Content.ProcessOneText}}</p>
    </article>
    <article>
      <p class="mb-4 text-sm text-white/45">02</p>
      <h3 class="mb-3 text-xl font-medium">{{.Content.ProcessTwoTitle}}</h3>
      <p class="leading-relaxed text-white/65">{{.Content.ProcessTwoText}}</p>
    </article>
    <article>
      <p class="mb-4 text-sm text-white/45">03</p>
      <h3 class="mb-3 text-xl font-medium">{{.Content.ProcessThreeTitle}}</h3>
      <p class="leading-relaxed text-white/65">{{.Content.ProcessThreeText}}</p>
    </article>
  </section>

  <section class="mt-20 border-t border-neutral-200 pt-10">
    <div class="grid gap-6 md:grid-cols-[0.8fr_1.2fr] md:items-end">
      <h2 class="text-3xl font-semibold">Discuss a project</h2>
      <div class="max-w-2xl">
        <p class="text-lg leading-relaxed text-neutral-600">Share the project type, location, budget range, and timeline so the studio can assess whether the work is a good fit.</p>
        <a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Start an enquiry</a>
      </div>
    </div>
  </section>
</main>
{{end}}