{{define "content"}}
<div class="mx-auto max-w-3xl">
  {{if .Data.Thanks}}
  <div class="mb-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-xl font-bold text-green-800">Thanks for your order!</h2>
    <p class="mt-1 text-green-700">We've received your payment and will ship your tags soon. Watch your inbox for the email from <strong>hello@where-woof.com</strong> with activation details.</p>
  </div>
  {{end}}

  <h1 class="text-3xl font-extrabold tracking-tight">Order tags</h1>
  <p class="mt-2 text-stone-700">Stick a Where Woof tag on anything you don't want to lose — a dog collar, a school bag, ski gear, a toolbox. If it's found, whoever finds it scans the tag and you get an SMS with its location, instantly.</p>

  <div class="mt-8 grid gap-6 sm:grid-cols-2">
    <!-- Single tag -->
    <div class="flex flex-col rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
      <div class="text-4xl">🏷️</div>
      <h2 class="mt-3 text-xl font-bold">Single tag</h2>
      <p class="mt-1 text-sm text-stone-600">One tag for one item. Plastic laminate, QR + NFC.</p>
      <p class="mt-4 text-2xl font-extrabold">$5.00 <span class="text-sm font-normal text-stone-500">+ GST ($5.50)</span></p>
      <p class="mt-1 text-xs text-stone-500">+ $10/yr subscription (50 SMS alerts included)</p>
      <div class="mt-auto pt-5">
        <a href="{{.Data.SingleLink}}" class="block rounded-full bg-stone-900 px-5 py-3 text-center font-bold text-white hover:bg-stone-700">
          Order now
        </a>
        <p class="mt-2 text-center text-xs text-stone-500">Need 2, 3 … 7? Pick the quantity at checkout (up to 25).</p>
      </div>
    </div>

    <!-- 10-pack -->
    <div class="flex flex-col rounded-2xl border-2 border-red-600 bg-white p-6 shadow-sm">
      <div class="flex items-center justify-between">
        <div class="text-4xl">🎒🐾</div>
        <span class="rounded-full bg-red-600 px-2.5 py-1 text-xs font-extrabold text-white">BEST VALUE</span>
      </div>
      <h2 class="mt-3 text-xl font-bold">10-pack</h2>
      <p class="mt-1 text-sm text-stone-600">Tag the whole family — collars, bags, keys, skis.</p>
      <p class="mt-4 text-2xl font-extrabold">$20.00 <span class="text-sm font-normal text-stone-500">+ GST ($22.00)</span></p>
      <p class="mt-1 text-xs text-stone-500">$2 per tag · + $10/yr subscription (50 SMS alerts included)</p>
      <div class="mt-auto pt-5">
        <a href="{{.Data.PackLink}}" class="block rounded-full bg-red-600 px-5 py-3 text-center font-bold text-white hover:bg-red-500">
          Order the 10-pack
        </a>
        <p class="mt-2 text-center text-xs text-stone-500">Up to 2 packs per account (20 tags, fits the 25-tag limit).</p>
      </div>
    </div>
  </div>

  <div class="mt-8 rounded-xl border border-stone-200 bg-white p-6 text-sm shadow-sm">
    <h3 class="font-bold">How it works</h3>
    <ol class="mt-2 list-decimal space-y-1 pl-5 text-stone-700">
      <li>Order your tags — they arrive ready to scan (QR + NFC).</li>
      <li>When they arrive, create a free account and add each tag.</li>
      <li>Set the item's name and your phone number.</li>
      <li>If it's ever lost and found, you get an SMS with a map link — instantly.</li>
    </ol>
    <p class="mt-3 text-stone-500">Questions? <a href="/contact" class="text-amber-600 hover:underline">Get in touch</a> — hello@where-woof.com</p>
  </div>
</div>
{{end}}