<script setup lang="ts">
/**
 * @file LandingFooter.vue
 * @description ส่วนท้ายของหน้าแรก (Footer component for the landing page)
 */
</script>

<template>
  <footer class="bg-white pt-16 pb-8 border-t border-slate-200">
    <div class="container mx-auto px-6 md:px-12">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
        <!-- โลโก้และชื่อแบรนด์ (Brand) -->
        <div class="space-y-6">
           <NuxtLink to="/" class="flex items-center gap-3 group">
              <div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
                <q-icon name="o_school" size="24px" />
              </div>
              <div class="flex flex-col">
                <span class="font-bold text-lg leading-none tracking-tight transition-colors text-slate-900">
                  EduLearn
                </span>
                <span class="text-[10px] text-slate-500 font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors">
                  Platform
                </span>
              </div>
            </NuxtLink>
            <p class="text-slate-500 text-sm leading-relaxed max-w-xs">
              แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
            </p>
        </div>

        <!-- ลิงก์ต่างๆ (Links) -->
        <div class="lg:pl-8">
          <h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
          <ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
            <li class=""><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">โปรโมชั่น</a></li>
            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">สำหรับองค์กร</a></li>
          </ul>
        </div>

        <!-- การสนับสนุนผู้ใช้ (Support) -->
        <div>
          <h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
          <ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">คำถามที่พบบ่อย (FAQ)</a></li>
            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">วิธีการใช้งาน</a></li>
            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">เงื่อนไขการใช้งาน</a></li>
            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">นโยบายความเป็นส่วนตัว</a></li>
          </ul>
        </div>

        <!-- ข้อมูลการติดต่อ (Contact) -->
        <div class="space-y-6">
          <h4 class="font-bold text-slate-900 text-base">ติดต่อเรา</h4>
          <div class="flex flex-col gap-5">
            <!-- สถานที่ตั้ง (Location) -->
            <div class="flex flex-row items-start gap-4 flex-nowrap">
              <q-icon name="o_location_on" size="20px" color="slate-800" />
              <div class="flex flex-col gap-1 min-w-0">
                <span class="font-semibold text-slate-800 text-sm leading-tight">Bronco Hourse</span>
                <p class="text-slate-500 text-[11px] leading-relaxed">
                  74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200
                </p>
              </div>
            </div>

            <!-- เบอร์โทรศัพท์ (Phone) -->
            <div class="flex flex-row items-center gap-4 flex-nowrap">
              <q-icon name="o_phone" size="18px" color="slate-800" />
              <a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm hover:text-blue-600 transition-colors truncate">
                052-076-025
              </a>
            </div>

            <!-- อีเมล (Email) -->
            <div class="flex flex-row items-center gap-4 flex-nowrap">
              <q-icon name="o_email" size="18px" color="slate-800" />
              <a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 transition-colors truncate">
                info@chamomind.com
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- แถบด้านล่างสำหรับสงวนลิขสิทธิ์ (Bottom Bar - Centered Copyright) -->
      <div class="pt-8 border-t border-slate-200 text-center">
        <p class="text-sm text-slate-400 font-medium tracking-wide">
          Copyright © CHAMOMIND CO., LTD. 2023
        </p>
      </div>
    </div>
  </footer>
</template>
