{{define "content"}}
<div class="mx-auto max-w-2xl">
  <h1 class="text-3xl font-extrabold tracking-tight">Get in touch</h1>
  <p class="mt-4 text-stone-700">Questions, lost-tag help, or bulk orders? We'd love to hear from you.</p>

  {{if .Data.Sent}}
  <div class="mt-6 rounded-xl border border-green-200 bg-green-50 p-6 text-center shadow-sm">
    <div class="text-4xl">📨</div>
    <h2 class="mt-2 text-lg font-bold text-green-800">Message sent!</h2>
    <p class="mt-1 text-green-700">Thanks for reaching out — we'll get back to you shortly (usually within a day).</p>
  </div>
  {{else}}
  <div class="mt-6 rounded-xl border border-stone-200 bg-white p-6 shadow-sm">
    {{if .Data.Error}}
    <p class="mb-4 rounded border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700">{{.Data.Error}}</p>
    {{end}}
    <form method="post" action="/contact" class="space-y-4">
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label class="block text-sm font-semibold text-stone-700" for="name">Your name</label>
          <input id="name" name="name" required class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-amber-500 focus:outline-none" placeholder="Jane Smith">
        </div>
        <div>
          <label class="block text-sm font-semibold text-stone-700" for="email">Your email</label>
          <input id="email" name="email" type="email" required class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-amber-500 focus:outline-none" placeholder="you@example.com">
        </div>
      </div>
      <div>
        <label class="block text-sm font-semibold text-stone-700" for="subject">Subject</label>
        <input id="subject" name="subject" class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-amber-500 focus:outline-none" placeholder="Bulk order for a park / trail">
      </div>
      <div>
        <label class="block text-sm font-semibold text-stone-700" for="message">Message</label>
        <textarea id="message" name="message" required rows="5" class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-amber-500 focus:outline-none" placeholder="Tell us what you need…"></textarea>
      </div>
      <button type="submit" class="rounded-full bg-stone-900 px-6 py-2.5 text-sm font-bold text-white hover:bg-stone-700">Send message</button>
    </form>
  </div>
  {{end}}

  <div class="mt-6 space-y-3 rounded-xl border border-stone-200 bg-white p-6 text-sm shadow-sm">
    <p><strong>Email:</strong> <a href="mailto:hello@where-woof.com" class="text-amber-600 hover:underline">hello@where-woof.com</a></p>
    <p><strong>Website:</strong> <a href="/" class="text-amber-600 hover:underline">where-woof.com</a></p>
    <p><strong>Order tags:</strong> <a href="/order" class="text-amber-600 hover:underline">yeah, take my money</a> — from $5 + GST.</p>
    <p class="text-stone-500">For bulk tags (parks, trails, campgrounds) mention your use case and volume.</p>
  </div>
</div>
{{end}}