---
import Layout from '../layouts/Layout.astro'
import Breadcrumbs from '../components/Breadcrumbs.astro'

const services = [
  { href: '/web-development', icon: '🌐', title: 'AI-Enhanced Website', desc: 'ออกแบบและพัฒนาเว็บไซต์ที่ทันสมัย ผสาน AI Chatbot และ SEO' },
  { href: '/marketing-automation', icon: '🔄', title: 'Marketing Automation', desc: 'ตั้งค่าระบบการตลาดอัตโนมัติ รวม SEO, Social Media, Ads และ Email' },
  { href: '/tech-consult', icon: '🖥️', title: 'Tech Infrastructure Consult', desc: 'ให้คำปรึกษาระบบ Server, Data Pipeline และเลือกเครื่องมือ Tech' },
  { href: '/ai-automation', icon: '⚙️', title: 'AI Automation', desc: 'นำ Chatbot และ Workflow Automation มาใช้ ตอบลูกค้า 24/7' },
]

const pages = [
  { href: '/', title: 'หน้าแรก' },
  { href: '/about-us', title: 'เกี่ยวกับเรา' },
  { href: '/contact-us', title: 'ติดต่อเรา' },
  { href: '/faq', title: 'คำถามที่พบบ่อย' },
  { href: '/blog', title: 'บทความ' },
]
---

<Layout title="แผนผังเว็บไซต์ | MoreminiMore">
  <Breadcrumbs currentPage={{ href: '/sitemap', title: 'แผนผังเว็บไซต์' }} />
  
  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
        แผนผังเว็บไซต์
      </h1>
      <p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
        รวบรวมทุกหน้าของเว็บไซต์ MoreminiMore เพื่อการเข้าถึงข้อมูลที่สะดวก
      </p>

      <!-- Main Pages -->
      <div class="max-w-4xl mx-auto mb-12">
        <h2 class="text-2xl font-bold mb-6 text-secondary">หน้าหลัก</h2>
        <div class="grid md:grid-cols-2 gap-4">
          {pages.map((page) => (
            <a href={page.href} class="bg-white p-4 rounded-lg shadow-md hover:shadow-xl transition border-l-4 border-primary">
              <div class="font-bold text-lg text-secondary">{page.title}</div>
              <div class="text-sm text-gray-500">{page.href}</div>
            </a>
          ))}
        </div>
      </div>

      <!-- Services -->
      <div class="max-w-6xl mx-auto mb-12">
        <h2 class="text-2xl font-bold mb-6 text-secondary">บริการของเรา</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service) => (
            <a href={service.href} class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition border-l-4 border-brand-blue">
              <div class="text-4xl mb-3">{service.icon}</div>
              <div class="font-bold text-lg text-secondary mb-2">{service.title}</div>
              <div class="text-sm text-gray-600">{service.desc}</div>
            </a>
          ))}
        </div>
      </div>

      <!-- Blog Posts -->
      <div class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-bold mb-6 text-secondary">บทความล่าสุด</h2>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <a href="/blog" class="block p-4 hover:bg-gray-50 transition border-b">
            <div class="font-bold text-lg text-secondary">ดูบทความทั้งหมด →</div>
            <div class="text-sm text-gray-500">/blog</div>
          </a>
        </div>
      </div>
    </div>
  </section>
</Layout>