<script setup lang="ts">
/**
 * @file index.vue
 * @description หน้า Landing Page (หน้าแรกของเว็บสำหรับ Guest)
 * ใช้ Layout: 'landing' (ไม่มี Sidebar / Navbar แบบ Dashboard)
 */
definePageMeta({
  layout: 'landing',
  middleware: 'auth'
})

useHead({
  title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
})

const { fetchCategories } = useCategory()
const { fetchCourses, getLocalizedText } = useCourse()

const categories = ref<any[]>([])
const topCourses = ref<any[]>([])
const selectedCategory = ref('all')
const isLoading = ref(false)
const currentSlide = ref(0)
const courseChunks = computed(() => {
  const chunkSize = 4
  const chunks = []
  if (!topCourses.value) return []
  for (let i = 0; i < topCourses.value.length; i += chunkSize) {
    chunks.push(topCourses.value.slice(i, i + chunkSize))
  }
  return chunks
})

const loadData = async () => {
    isLoading.value = true
    try {
        const [catRes, courseRes] = await Promise.all([
            fetchCategories(),
            fetchCourses({ limit: 8, forceRefresh: true })
        ])
        
        if (catRes.success) categories.value = catRes.data || []
        if (courseRes.success) topCourses.value = courseRes.data || []
    } catch (err) {
        console.error('Failed to load landing page data:', err)
    } finally {
        isLoading.value = false
    }
}

const goBrowse = (slug: string) => {
    navigateTo({ path: '/browse', query: { category: slug } })
}

watch(selectedCategory, async (newVal) => {
    isLoading.value = true
    try {
        const params: any = { limit: 8 }
        if (newVal !== 'all') {
            const category = categories.value.find(c => c.slug === newVal)
            if (category) {
                params.category_id = category.id
            }
        }
        const res = await fetchCourses(params)
        if (res.success) {
            topCourses.value = res.data || []
            currentSlide.value = 0 // Reset carousel on filter change
        }
    } catch (err) {
        console.error('Error filtering courses:', err)
    } finally {
        isLoading.value = false
    }
})

onMounted(() => {
    loadData()
})
</script>

<template>
  <div class="landing-page bg-white min-h-screen">
    <!-- Hero Section -->
    <header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
      <!-- Decorative Background -->
      <div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
      
      <div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
        <div class="hero-left slide-up">
          <div class="flex items-center gap-3 mb-8 text-blue-600">
            <q-icon name="stars" size="28px" />
            <span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
          </div>
          <h1 class="text-4xl md:text-5xl lg:text-7xl font-black text-slate-900 leading-[1.15] mb-8">
            คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
          </h1>
          <p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
            แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
          </p>

          <!-- Search Bar Pill -->
          <div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
            <q-btn 
              unelevated 
              rounded 
              color="primary" 
              label="ดูคอร์สเรียนทั้งหมด" 
              class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
              no-caps
              to="/browse"
            />
            <q-btn 
              outline
              rounded 
              color="primary" 
              label="สมัครสมาชิกฟรี" 
              class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
              no-caps
              to="/auth/register"
              v-if="!user"
            />
          </div>
        </div>

        <!-- Hero Visual Showcase -->
        <div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
          <div class="relative w-full max-w-xl">
            <!-- Main Illustration -->
            <div class="relative z-10 animate-float">
              <img 
                src="/img/elearning.png" 
                alt="E-Learning Illustration"
                class="w-full h-auto drop-shadow-2xl"
              />
            </div>

            <!-- Decorative shapes behind the image -->
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
            <div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
            <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
          </div>
        </div>
      </div>
    </header>

    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
      <div class="container mx-auto px-6 lg:px-12">
        <div class="text-center mb-16 slide-up">
          <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6 px-4">
            เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
          </h2>
          <p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
            เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
          </p>
        </div>

        <!-- Horizontal Scrollable Container -->
        <div class="relative">
          <div class="flex justify-center gap-6 overflow-x-auto pb-12 px-4 no-scrollbar scroll-smooth snap-x flex-wrap">
            <div v-for="(card, i) in stepOneCards" :key="i" 
                 class="flex-none w-[280px] snap-start group cursor-pointer p-8 rounded-[2.5rem] aspect-[3/4.5] flex flex-col justify-between transition-all hover:-translate-y-3 shadow-xl overflow-hidden relative"
                 :class="card.bgClass"
                 @click="goBrowse(card.categorySlug)"
            >
              <!-- Background Accent -->
              <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
              
              <div>
                <span class="text-xs font-black uppercase tracking-[0.2em] opacity-80 mb-3 block text-white/80">ก้าวแรกของ</span>
                <h3 class="text-3xl font-black leading-none tracking-tight text-white mb-2" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1)">{{ card.title }}</h3>
              </div>
              
              <div class="space-y-6 relative z-10">
                <p class="text-lg font-bold leading-snug text-white/95" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1)">{{ card.desc }}</p>
                <div class="flex justify-end">
                  <div class="w-14 h-14 rounded-full border-2 border-white/30 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-110 backdrop-blur-md shadow-lg">
                     <q-icon name="arrow_forward" size="28px" class="text-white" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 2: "Value Proposition" - Why Online Learning here? -->
    <section class="pt-12 pb-12 md:pt-20 md:pb-20 bg-white relative overflow-hidden">
      <!-- Decorative background blur -->
      <div class="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-blue-100/50 rounded-full blur-[100px] -z-10" />
      
      <div class="container mx-auto px-6 lg:px-12">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
          <!-- Left side: Visual representation -->
          <div class="relative slide-up">
            <div class="relative z-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[4rem] p-12 md:p-20 shadow-3xl overflow-hidden group">
              <!-- Animated background shapes -->
              <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-110 transition-transform duration-1000" />
              <div class="absolute bottom-0 left-0 w-48 h-48 bg-amber-400/20 rounded-full translate-y-1/2 -translate-x-1/2" />
              
              <div class="relative z-20 flex flex-col items-center text-center text-white">
                <div class="w-24 h-24 md:w-32 md:h-32 bg-white/20 backdrop-blur-md rounded-[2.5rem] flex items-center justify-center mb-8 shadow-inner">
                  <q-icon name="laptop_mac" size="64px" class="text-white" />
                </div>
                <h3 class="text-3xl md:text-5xl font-black leading-[1.2] md:leading-[1.15] tracking-tight mb-0 pt-1 overflow-visible">
                  คอร์สออนไลน์<br class="hidden md:block" />
                  ที่ออกแบบมาสำหรับคุณ
                </h3>
                <p class="mt-5 text-blue-100/90 text-base md:text-lg font-medium leading-relaxed max-w-md">
                  เรียนรู้ทักษะใหม่จากผู้เชี่ยวชาญตัวจริง พร้อมเนื้อหาที่เข้มข้นและใช้งานได้จริง
                </p>
              </div>
            </div>
            
            <!-- Floating Stats pill -->
            <div class="absolute -bottom-10 -right-6 md:right-10 z-30 bg-white p-6 rounded-3xl shadow-2xl animate-float">
              <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
                  <q-icon name="query_builder" size="28px" />
                </div>
                <div>
                  <div class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Access Status</div>
                  <div class="text-xl font-black text-slate-900">เข้าถึงได้ตลอดชีพ</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Right side: Content & Benefits -->
          <div class="slide-up" style="animation-delay: 0.2s;">
            <div class="mb-12">
              <span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
                Premium Learning Experience
              </span>
              <h2 class="text-4xl md:text-6xl font-black text-slate-900 leading-[1.15] md:leading-[1.12] tracking-tight mb-0 pt-1 overflow-visible">
                ก้าวข้ามทุกขีดจำกัด<br />
                ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
              </h2>
              <p class="mt-6 text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
                เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
              </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
              <div v-for="(feature, f) in learningStyles[0].features" :key="f" 
                   class="flex items-center gap-4 p-5 rounded-3xl bg-slate-50 border border-slate-100 group hover:border-blue-200 hover:bg-white hover:shadow-xl transition-all duration-300"
              >
                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-500 shadow-sm group-hover:bg-green-500 group-hover:text-white transition-colors">
                  <q-icon name="check" size="20px" />
                </div>
                <span class="text-base font-black text-slate-700 leading-snug">{{ feature }}</span>
              </div>
            </div>

            <q-btn 
              unelevated 
              rounded 
              color="primary"
              label="เริ่มต้นบทเรียนแรกของคุณ"
              class="px-12 h-20 font-black text-xl md:text-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-1"
              no-caps
              :to="user ? '/browse' : '/auth/login'"
            />
          </div>
        </div>
      </div>
    </section>



    <!-- Section 4: "คอร์สออนไลน์" -->
    <section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
      <div class="container mx-auto px-6 lg:px-12">
        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
          <div class="slide-up">
            <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-4">คอร์สออนไลน์</h2>
            <p class="text-slate-500 font-black text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
          </div>
          <NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
            คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
          </NuxtLink>
        </div>

        <!-- Filter Tabs / Pills -->
        <div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
          <button 
            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
            :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
            @click="selectedCategory = 'all'"
          >
            All
          </button>
          <button 
            v-for="category in categories" 
            :key="category.id"
            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
            :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
            @click="selectedCategory = category.slug"
          >
            {{ getLocalizedText(category.name) }}
          </button>
        </div>

        <!-- Courses Carousel -->
        <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          <div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
        </div>
        
        <div v-else class="relative group/carousel slide-up">
          <q-carousel
            v-model="currentSlide"
            transition-prev="slide-right"
            transition-next="slide-left"
            swipeable
            animated
            control-color="primary"
            padding
            height="auto"
            class="bg-transparent rounded-none"
          >
            <q-carousel-slide 
              v-for="(chunk, pageIndex) in courseChunks" 
              :key="pageIndex" 
              :name="pageIndex" 
              class="p-4"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                <CourseCard 
                  v-for="course in chunk" 
                  :key="course.id" 
                  v-bind="{ ...course, image: course.thumbnail_url }"
                />
              </div>
            </q-carousel-slide>
          </q-carousel>

           <!-- Custom Carousel Navigation -->
            <button 
              v-if="courseChunks.length > 1"
              class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
              @click="currentSlide = Math.max(0, currentSlide - 1)"
              :disabled="currentSlide === 0"
              :class="{ 'opacity-50 cursor-not-allowed': currentSlide === 0 }"
            >
              <q-icon name="chevron_left" size="32px" />
            </button>
            <button 
              v-if="courseChunks.length > 1"
              class="absolute -right-4 md:-right-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
              @click="currentSlide = Math.min(courseChunks.length - 1, currentSlide + 1)"
              :disabled="currentSlide === courseChunks.length - 1"
              :class="{ 'opacity-50 cursor-not-allowed': currentSlide === courseChunks.length - 1 }"
            >
              <q-icon name="chevron_right" size="32px" />
            </button>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
// Supplementary static data for the sections
export default {
  setup() {
    const { user } = useAuth()
    return { user }
  },
  data() {
    return {
      stepOneCards: [
        { title: 'AI Foundations', desc: 'เข้าใจพื้นฐาน AI ใช้งานจริงได้ทุกสายงาน', bgClass: 'bg-slate-900', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-900', categorySlug: 'programming' },
        { title: 'Data Analyst', desc: 'เรียนจนทำ Dashboard วิเคราะห์ Data ได้เลย', bgClass: 'bg-amber-500', textClass: 'text-slate-900', arrowClass: 'text-slate-900/40 border-slate-900/10 group-hover:text-amber-500', categorySlug: 'business' },
        { title: 'Front-End Web Developer', desc: 'เขียนเว็บสวย ใช้งานได้จริงตั้งแต่หน้าแรก', bgClass: 'bg-orange-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-orange-500', categorySlug: 'programming' },
        { title: 'UX/UI Designer', desc: 'ต่อยอดทำ Portfolio ไม่มีประสบการณ์ก็เรียนได้', bgClass: 'bg-pink-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-pink-600', categorySlug: 'design' },
        { title: 'Product Manager', desc: 'เก็บทุกทักษะ ปั้น Product วางแผนแบบมือโปร', bgClass: 'bg-teal-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-teal-500', categorySlug: 'business' },
        { title: 'Back-End Developer', desc: 'เข้าใจโครงสร้างระบบและฐานข้อมูลหลังบ้าน', bgClass: 'bg-blue-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-blue-600', categorySlug: 'programming' },
        { title: 'Supply Chain & Logistics', desc: 'ใช้ Data วางแผนโลจิสติกส์ได้อย่างมีประสิทธิภาพ', bgClass: 'bg-slate-700', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-700', categorySlug: 'business' }
      ],
      learningStyles: [
        { 
          title: 'คอร์สออนไลน์', icon: 'desktop_windows', type: 'ONLINE',
          subtitle: 'เรียนได้ทุกที่ ทุกเวลา', desc: 'คัดสรรเนื้อหาคุณภาพจากผู้เชี่ยวชาญ\nพร้อมให้คุณเริ่มต้นเรียนรู้ได้ทันที', 
          time: 'เข้าถึงได้ตลอดชีพ',
          features: ['เนื้อหาครบทุกประเด็นสำคัญ', 'โจทย์ตัวอย่างและแบบฝึกหัด', 'เรียนซ้ำได้ไม่จำกัด', 'ใบเซอร์ทิฟิเคตหลังเรียนจบ'],
          iconBg: 'bg-blue-50', iconColor: 'text-blue-600', titleClass: 'text-blue-700',
          btnClass: 'bg-indigo-900 text-white hover:bg-indigo-800'
        }
      ],
      promoCategories: [
        { title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
        { title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
        { title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
        { title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
      ]
    }
  }
}
</script>

<style scoped>
.landing-page {
  font-family: var(--font-main);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
}

/* Typography Overrides */
h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* Hover effects */
.hero-right:hover .animate-float {
  animation-play-state: paused;
}

/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
  .career-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .career-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
