---
import BaseLayout from '@/layouts/BaseLayout.astro';

// 404 — noindex, friendly UI with category shortcuts.
const popularLinks = [
  { name: 'ท่อ PPR ไทยพีพีอาร์', slug: '/ท่อ-ppr-thai-ppr' },
  { name: 'ท่อ HDPE', slug: '/ท่อ-hdpe' },
  { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
  { name: 'วาล์ว', slug: '/วาล์ว-valve' },
  { name: 'ปั๊มน้ำ', slug: '/water-pump' },
  { name: 'กริลแอร์', slug: '/grilles' },
  { name: 'ตู้ดับเพลิง', slug: '/ตู้ดับเพลิง' },
  { name: 'Armaflex', slug: '/armflex' },
];
---

<BaseLayout
  title="404 - ไม่พบหน้าที่ค้นหา"
  description="ขออภัย ไม่พบหน้าที่คุณกำลังมองหา กรุณาตรวจสอบ URL หรือเลือกเมนูที่ต้องการจากด้านล่าง"
  robots="noindex, nofollow"
>
  <main class="bg-white min-h-screen flex items-center justify-center px-4 py-16">
    <div class="max-w-2xl w-full text-center">
      <!-- 404 graphic -->
      <div class="relative mb-8">
        <h1 class="text-9xl lg:text-[12rem] font-bold text-primary-600 leading-none">404</h1>
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
          <div class="w-64 h-64 bg-primary-200 rounded-full blur-3xl opacity-30"></div>
        </div>
      </div>

      <h2 class="text-2xl lg:text-3xl font-bold text-slate-900 mb-4">ไม่พบหน้าที่ค้นหา</h2>
      <p class="text-lg text-slate-600 mb-8">
        ขออภัย หน้าที่คุณกำลังมองหาอาจถูกย้าย ลบ หรือ URL ผิดพลาด
      </p>

      <!-- Primary CTAs -->
      <div class="flex flex-wrap justify-center gap-4 mb-12">
        <a
          href="/"
          class="inline-flex items-center gap-2 bg-accent-500 hover:bg-accent-600 text-white py-3 px-6 rounded-xl font-semibold transition-all hover:shadow-xl"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          กลับหน้าแรก
        </a>
        <a
          href="/all-products"
          class="inline-flex items-center gap-2 bg-white border-2 border-primary-600 text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold transition-all"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
          </svg>
          ดูสินค้าทั้งหมด
        </a>
      </div>

      <!-- Popular links -->
      <div class="bg-neutral-50 rounded-2xl p-8 text-left">
        <h3 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4 text-center">
          หรือเลือกหมวดหมู่ยอดนิยม
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
          {popularLinks.map((link) => (
            <a
              href={link.slug}
              class="block bg-white px-4 py-3 rounded-lg text-sm text-slate-700 hover:text-primary-700 hover:shadow-md transition-all text-center"
            >
              {link.name}
            </a>
          ))}
        </div>
      </div>

      <!-- Contact hint -->
      <p class="mt-8 text-sm text-slate-500">
        ต้องการความช่วยเหลือ?
        <a href="/contact-us" class="text-primary-600 hover:underline font-medium">ติดต่อเรา</a>
        หรือโทร 090-555-1415
      </p>
    </div>
  </main>
</BaseLayout>