{{template "site_start" .}}
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 border-b border-neutral-200 pb-14 md:grid-cols-[0.85fr_1.15fr] md:items-end">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Project enquiry</p>
      <h1 class="text-5xl font-semibold md:text-7xl">Contact</h1>
    </div>
    <p class="max-w-2xl text-xl leading-relaxed text-neutral-600">Share a few details about the site, scope, budget, and timing. The studio will review the enquiry and respond if the project is a suitable fit.</p>
  </section>

  <section class="grid gap-12 pt-14 lg:grid-cols-[0.72fr_1.28fr]">
    <aside class="grid content-start gap-8">
      <div>
        <h2 class="mb-4 text-2xl font-semibold">Studio details</h2>
        <div class="grid gap-3 text-neutral-600">
          <p><span class="block text-sm uppercase tracking-[0.18em] text-neutral-400">Email</span>{{.Content.Email}}</p>
          <p><span class="block text-sm uppercase tracking-[0.18em] text-neutral-400">Phone</span>{{.Content.Phone}}</p>
          <p><span class="block text-sm uppercase tracking-[0.18em] text-neutral-400">Location</span>{{.Content.Location}}</p>
        </div>
      </div>
      <div class="border-t border-neutral-200 pt-8">
        <h2 class="mb-3 text-2xl font-semibold">Useful to include</h2>
        <p class="leading-relaxed text-neutral-600">Approximate property location, whether the project is new build or renovation, target budget, and any planning or timing constraints.</p>
      </div>
    </aside>

    <form hx-post="/contact" hx-target="#contact-result" hx-swap="innerHTML" class="grid gap-5 bg-white p-5 shadow-sm md:p-8">
      <div class="grid gap-4 md:grid-cols-2">
        <label class="block text-sm">
          <span class="mb-2 block text-neutral-500">Name</span>
          <input name="name" required autocomplete="name" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
        </label>
        <label class="block text-sm">
          <span class="mb-2 block text-neutral-500">Email</span>
          <input name="email" type="email" required autocomplete="email" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
        </label>
        <label class="block text-sm">
          <span class="mb-2 block text-neutral-500">Phone, optional</span>
          <input name="phone" autocomplete="tel" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
        </label>
        <label class="block text-sm">
          <span class="mb-2 block text-neutral-500">Project type</span>
          <select name="project_type" required class="form-select w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
            <option value="">Select one</option>
            <option>Residential architecture</option>
            <option>Renovation or extension</option>
            <option>Interior architecture</option>
            <option>Early-stage consultation</option>
            <option>Other</option>
          </select>
        </label>
        <label class="block text-sm">
          <span class="mb-2 block text-neutral-500">Project location</span>
          <input name="project_location" required class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
        </label>
        <label class="block text-sm">
          <span class="mb-2 block text-neutral-500">Budget range</span>
          <select name="budget_range" required class="form-select w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
            <option value="">Select one</option>
            <option>Under GBP 100k</option>
            <option>GBP 100k-250k</option>
            <option>GBP 250k-500k</option>
            <option>GBP 500k+</option>
            <option>Not sure yet</option>
          </select>
        </label>
        <label class="block text-sm md:col-span-2">
          <span class="mb-2 block text-neutral-500">Timeline</span>
          <select name="timeline" required class="form-select w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
            <option value="">Select one</option>
            <option>As soon as possible</option>
            <option>Within 3 months</option>
            <option>3-6 months</option>
            <option>6-12 months</option>
            <option>Still exploring</option>
          </select>
        </label>
      </div>
      <label class="block text-sm">
        <span class="mb-2 block text-neutral-500">Project notes</span>
        <textarea name="message" required rows="7" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950"></textarea>
      </label>
      <div class="flex flex-col gap-4 md:flex-row md:items-center">
        <button class="w-fit bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700">Submit enquiry</button>
        <div id="contact-result" class="text-sm"></div>
      </div>
    </form>
  </section>
</main>
{{template "site_end" .}}