@extends('frontend::layouts.master')

@section('content')
    <div class="full-carousel-wrapper relative h-screen">
        <div class="full-carousel-banner h-full">
            <video autoplay="true" loop="true" muted="true" class="w-full h-screen object-cover">
                <source src="https://videos.pexels.com/video-files/4818164/4818164-uhd_2560_1440_30fps.mp4" type="video/mp4">
            </video>
        </div>
    </div>
    {{-- <div class="full-carousel-wrapper relative h-screen">
        <div class="full-carousel-banner h-full">
            <x-frontend::plugin.splidecarousel slideName='splide-banner'>
                <x-slot:slideList>
                    <x-frontend::plugin.splidecarousel.video
                        slideSource=''
                        slideCover='https://images.pexels.com/photos/9800009/pexels-photo-9800009.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' 
                        slideDescription='' 
                        class='h-screen w-full object-cover'>
                    </x-frontend::plugin.splidecarousel.video>
                </x-slot:slideList>
            </x-frontend::plugin.splidecarousel>
        </div>
    </div> --}}

    <section id="about-age"
        class="about-section py-12 lg:py-24 text-gray-900 bg-[url('https://img.freepik.com/free-vector/gradient-white-monochrome-background_23-2149001594.jpg?t=st=1740738991~exp=1740742591~hmac=47357490dbfc67cdb8b84d156bbe29d9b3c2a624560cde188a282183e0679ec1&w=1060')] bg-opacity-10 bg-cover bg-center bg-fixed">
        <div class="container mx-auto px-8">
            <!-- Company Info -->
            <div class="text-center max-w-4xl mx-auto mb-12 lg:mb-24">
                <div class="flex flex-col items-center relative">

                    <h1 class="font-black tracking-tight relative">
                        <span
                            class="block text-transparent bg-clip-text bg-primary/80 transition-all duration-500 uppercase">
                            AGE Ventures
                        </span>
                    </h1>

                    <div class="flex items-center space-x-2 mb-8">
                        <div class="h-1 w-12 bg-primary rounded-full"></div>
                        <div class="h-1 w-24 bg-teal-500 rounded-full animate-pulse"></div>
                        <div class="h-1 w-12 bg-emerald-500 rounded-full"></div>
                    </div>
                </div>
                <div class="size-detail leading-relaxed text-gray-600">
                    <p
                        class="text-primary font-medium text-22 block mb-4 animate-text bg-gradient-to-r from-primary via-teal-500 to-emerald-500 bg-clip-text text-transparent">
                        Who we are
                    </p>
                    AGE Ventures คือบริษัทลงทุนที่ขับเคลื่อนธุรกิจแห่งอนาคต
                    ด้วยเป้าหมายในการสร้างระบบนิเวศที่แข็งแกร่งในอุตสาหกรรม EV Mobility, Energy Infrastructure และ Smart
                    Investment เรามุงมั่นสร้างธุรกิจที่สร้างผลตอบแทนที่มั่นคงและยั่งยืน
                    พร้อมเปิดโอกาสให้กับนักลงทุนและผู้ที่ต้องการร่วมงานกับเราในการพัฒนาอุตสาหกรรมที่มีศักยภาพสูงสุดในอนาคต
                </div>
            </div>



        </div>
        <x-frontend::plugin.splidecarousel slideName='splide-item'>
            <x-slot:slideList>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Company History</p>
                                <p class="text-gray-600 size-detail">ประวัติความเป็นมาของบริษัท</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">AGE Journey</p>
                                <p class="text-gray-600 size-detail">การเดินทางของ AGE</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Awards & Certificates</p>
                                <p class="text-gray-600 size-detail">รางวัลและใบรับรอง</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Vision, Mission and Core
                                    Value</p>
                                <p class="text-gray-600 size-detail">วิสัยทัศน์ พันธกิจ และค่านิยม</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Business Goals</p>
                                <p class="text-gray-600 size-detail">เป้าหมายในการดำเนินธุรกิจ</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>

                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Group Structure</p>
                                <p class="text-gray-600 size-detail">โครงสร้างกลุ่มบริษัท</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Organization Chart</p>
                                <p class="text-gray-600 size-detail">แผนผังองค์กร</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <a href="#" class="group">
                            <div class="bg-white p-8 rounded-none border border-gray-100">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <p class="size-title-detail font-semibold text-gray-900 mb-2 min-h-[58px]">Contact Corporate
                                    Secretary</p>
                                <p class="text-gray-600 size-detail">ติดต่อเลขานุการบริษัท</p>
                            </div>
                        </a>
                    </x-slot:slideItem>
                </x-frontend::plugin.splidecarousel.item>

            </x-slot:slideList>
        </x-frontend::plugin.splidecarousel>
    </section>

    <section id="why-age" class="py-16 lg:py-24 bg-white relative overflow-hidden">
        <!-- Decorative background elements -->
        <div class="absolute inset-0 bg-gradient-to-br from-slate-50 to-gray-50 z-0"></div>
        <div class="absolute top-0 left-0 w-full h-full opacity-20">
            <div class="absolute top-20 -right-40 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
            <div class="absolute bottom-40 -left-20 w-80 h-80 bg-teal-500/10 rounded-full blur-3xl"></div>
        </div>

        <div class="container mx-auto px-8 relative z-10">
            <!-- Section Header -->
            <div class="text-center max-w-4xl mx-auto mb-10 lg:mb-20">
                <div class="flex flex-col items-center relative">
                    <div class="size-title font-black tracking-tight relative">
                        <p
                            class="block text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500 transition-all duration-500 uppercase">
                            Why choose AGE Ventures
                        </p>
                    </div>

                    <div class="flex items-center space-x-2 mb-8">
                        <div class="h-1 w-12 bg-primary rounded-full"></div>
                        <div class="h-1 w-24 bg-teal-500 rounded-full animate-pulse"></div>
                        <div class="h-1 w-12 bg-emerald-500 rounded-full"></div>
                    </div>

                    <p class="size-detail leading-relaxed text-gray-600 max-w-3xl">
                        AGE Ventures มุ่งมั่นสร้างมูลค่าที่ยั่งยืนผ่านการลงทุนในอุตสาหกรรมแห่งอนาคต
                        <span class="whitespace-nowrap">
                            ด้วยโมเดลธุรกิจที่หลากหลายและพันธมิตรที่แข็งแกร่ง
                        </span>
                    </p>
                </div>
            </div>

            <!-- Why Choose Us Cards with Modern Luxury Design - Horizontal Scroll Version -->
            <div class="mt-10 -mx-8 pb-4">
                <div id="carousel-container" class="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar"
                    style="scroll-padding: 2rem;">
                    <!-- Card 1: โอกาสสร้างผลตอบแทนสูง -->
                    <div class="min-w-[90vw] md:min-w-[45vw] lg:min-w-[30vw] snap-start pl-8 pr-4 first:pl-8 last:pr-8">
                        <div class="group relative overflow-hidden border border-gray-100 h-[450px]">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://images.unsplash.com/photo-1618044733300-9472054094ee?q=80&w=1000"
                                    alt="Investment"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-10 flex flex-col h-full justify-end text-white">
                                <div class="mb-auto">
                                    <div
                                        class="w-16 h-16 border border-white/30 rounded-none flex items-center justify-center transition-all duration-500 mb-8 backdrop-blur-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                                            <path
                                                d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1" />
                                            <path d="M12 7v10" />
                                        </svg>
                                    </div>
                                </div>

                                <p class="size-title-detail font-bold text-white mb-4">โอกาสสร้างผลตอบแทนสูง</p>

                                <p class="text-white/80 mb-4 size-detail">
                                    ด้วยโมเดลธุรกิจที่ครอบคลุมทั้งการให้บริการ EV Mobility, Energy Infrastructure
                                    และการลงทุนในโครงการที่มีศักยภาพ
                                </p>

                                <a href="#"
                                    class="size-detail size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>เรียนรู้เพิ่มเติม</span>
                                    <svg class="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2: พันธมิตรที่แข็งแกร่ง -->
                    <div class="min-w-[90vw] md:min-w-[45vw] lg:min-w-[30vw] snap-start px-4">
                        <div class="group relative overflow-hidden border border-gray-100 h-[450px]">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=1000"
                                    alt="Partnership"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-10 flex flex-col h-full justify-end text-white">
                                <div class="mb-auto">
                                    <div
                                        class="w-16 h-16 border border-white/30 rounded-none flex items-center justify-center transition-all duration-500 mb-8 backdrop-blur-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                                        </svg>
                                    </div>
                                </div>

                                <h3 class="size-title-detail font-bold text-white mb-4">พันธมิตรที่แข็งแกร่ง</h3>

                                <p class="text-white/80 mb-4 size-detail">
                                    เราร่วมมือกับแบรนด์ชั้นนำ เช่น Grab, QTC, และผู้ผลิต EV ชั้นนำ
                                    เพื่อสร้างเครือข่ายธุรกิจที่ครบวงจร
                                </p>

                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>เรียนรู้เพิ่มเติม</span>
                                    <svg class="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3: เติบโตไปกับอุตสาหกรรมแห่งอนาคต -->
                    <div class="min-w-[90vw] md:min-w-[45vw] lg:min-w-[30vw] snap-start px-4">
                        <div class="group relative overflow-hidden border border-gray-100 h-[450px]">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=1000"
                                    alt="Future Industry"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-10 flex flex-col h-full justify-end text-white">
                                <div class="mb-auto">
                                    <div
                                        class="w-16 h-16 border border-white/30 rounded-none flex items-center justify-center transition-all duration-500 mb-8 backdrop-blur-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                d="M13 10V3L4 14h7v7l9-11h-7z" />
                                        </svg>
                                    </div>
                                </div>

                                <h3 class="size-title-detail font-bold text-white mb-4">เติบโตไปกับอุตสาหกรรมแห่งอนาคต</h3>

                                <p class="text-white/80 mb-4 size-detail">
                                    เราลงทุนในธุรกิจที่มีแนวโน้มขยายตัวสูงและเป็นที่ต้องการของตลาดโลก
                                </p>

                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>เรียนรู้เพิ่มเติม</span>
                                    <svg class="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 4: สภาพแวดล้อมที่น่าทำงาน -->
                    <div class="min-w-[90vw] md:min-w-[45vw] lg:min-w-[30vw] snap-start pl-4 pr-8 last:pr-8">
                        <div class="group relative overflow-hidden border border-gray-100 h-[450px]">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1000"
                                    alt="Work Environment"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-10 flex flex-col h-full justify-end text-white">
                                <div class="mb-auto">
                                    <div
                                        class="w-16 h-16 border border-white/30 rounded-none flex items-center justify-center transition-all duration-500 mb-8 backdrop-blur-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                d="M14.121 15.536c-1.171 1.952-3.07 1.952-4.242 0-1.172-1.953-1.172-5.119 0-7.072 1.171-1.952 3.07-1.952 4.242 0M8 10.5h4m-4 3h4m9-1.5a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </div>
                                </div>

                                <h3 class="size-title-detail font-bold text-white mb-4">สภาพแวดล้อมที่น่าทำงาน</h3>

                                <p class="text-white/80 mb-4 size-detail">
                                    เราคือบริษัทที่เต็มไปด้วยโอกาสสำหรับมืออาชีพที่ต้องการเติบโตในอุตสาหกรรมอนาคต
                                </p>

                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>เรียนรู้เพิ่มเติม</span>
                                    <svg class="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add navigation arrows for better UX -->
                <div class="flex justify-between items-center mt-4 px-8">
                    <button id="prev-btn"
                        class="p-2 rounded-full bg-white/10 backdrop-blur-sm border border-gray-200 text-primary hover:bg-primary/10 transition-all">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <button id="next-btn"
                        class="p-2 rounded-full bg-white/10 backdrop-blur-sm border border-gray-200 text-primary hover:bg-primary/10 transition-all">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Elegant CTA -->
            <div class="text-center">
                <a href="#"
                    class="size-detail inline-flex items-center py-4 px-10 bg-transparent border border-primary text-primary hover:bg-primary hover:text-white transition-colors duration-500 text-lg font-medium">
                    <span>ร่วมงานกับเรา</span>
                    <svg class="w-5 h-5 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <section id="age-business" class="business-section py-6 lg:py-12 relative overflow-hidden -mt-12">
        <!-- Creative background elements -->
        <div class="absolute inset-0 bg-gradient-to-br from-slate-50 to-white z-0"></div>
        <div class="absolute top-0 left-0 w-full h-full">
            <div class="absolute top-40 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
            <div class="absolute bottom-20 right-1/4 w-80 h-80 bg-teal-500/10 rounded-full blur-3xl"></div>
            <!-- Honeycomb pattern -->
            <div class="absolute inset-0 opacity-5">
                <div class="honeycomb-pattern"></div>
            </div>
        </div>

        <div class="container mx-auto px-8 relative z-10">
            <!-- Section Header with animated elements -->
            <div class="mb-8 lg:mb-16 relative">
                <div class="flex flex-col items-center relative">

                    <div class="size-title font-black tracking-tight relative">
                        <p class="block text-transparent bg-clip-text bg-primary/80 transition-all duration-500">
                            OUR BUSINESS
                        </p>
                    </div>

                    <div class="flex items-center space-x-2 mb-8">
                        <div class="h-1 w-12 bg-primary rounded-full"></div>
                        <div class="h-1 w-24 bg-teal-500 rounded-full animate-pulse"></div>
                        <div class="h-1 w-12 bg-emerald-500 rounded-full"></div>
                    </div>

                    <p class="size-detail leading-relaxed text-gray-600 max-w-3xl text-center">
                        ลงทุนในธุรกิจทีมีศักยภาพสูงและเป็นปัจจัยสำคัญต่ออนาคต โดยมุ้งเน้น 4 กลุ่มธุรกิจหลัก คือ
                    </p>
                </div>
            </div>

            <div class="my-8">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <!-- Card 1: ธุรกิจรถยนต์ไฟฟ้าส่วนบุคคล -->
                    <div class="group relative overflow-hidden">
                        <div class="relative h-[300px] md:h-[400px] overflow-hidden border border-gray-100">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://www.scb.co.th/content/media/personal-banking/stories-tips/ev-trend/ev2.jpg"
                                    alt="ธุรกิจรถยนต์ไฟฟ้า"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-6 flex flex-col h-full justify-end text-white">
                                <h3 class="text-xl font-bold text-white mb-3">ธุรกิจรถยนต์ไฟฟ้าส่วนบุคคล</h3>
                                <p class="text-white/80 mb-4 size-detail text-base">
                                    ดำเนินการโดย <span class="font-semibold text-primary">บริษัท เออีเจ ออโต้ แกลเลอรี่ จำกัด</span>
                                    มีประสบการณ์ <span class="font-semibold text-primary">มากกว่า 20 ปี</span>
                                </p>
                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>รายละเอียดเพิ่มเติม</span>
                                    <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2: ธุรกิจแท็กซี่ไฟฟ้าให้เช่า -->
                    <div class="group relative overflow-hidden">
                        <div class="relative h-[300px] md:h-[400px] overflow-hidden border border-gray-100">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://image.makewebcdn.com/makeweb/m_1920x0/DGSEWiuYm/DefaultData/1_523.jpg"
                                    alt="ธุรกิจแท็กซี่ไฟฟ้าให้เช่า"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-6 flex flex-col h-full justify-end text-white">
                                <h3 class="text-xl font-bold text-white mb-3">ธุรกิจแท็กซี่ไฟฟ้าให้เช่า</h3>
                                <p class="text-white/80 mb-4 size-detail text-base">
                                    ดำเนินการโดย <span class="font-semibold text-primary">บริษัท เออีเจ อีวี พลัส จำกัด</span>
                                    ร่วมกับพันธมิตรหลัก <span class="font-semibold uppercase text-primary">Grab</span>
                                </p>
                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>รายละเอียดเพิ่มเติม</span>
                                    <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3: ธุรกิจ Energy Infrastructure -->
                    <div class="group relative overflow-hidden">
                        <div class="relative h-[300px] md:h-[400px] overflow-hidden border border-gray-100">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://www.pbctoday.co.uk/news/wp-content/uploads/2023/12/iStock-584487610-scaled.jpg"
                                    alt="ธุรกิจ Energy Infrastructure"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-6 flex flex-col h-full justify-end text-white">
                                <h3 class="text-xl font-bold text-white mb-3">ธุรกิจ Energy Infrastructure</h3>
                                <p class="text-white/80 mb-4 size-detail text-base">
                                    ร่วมมือกับ <span class="font-semibold text-primary">QTC</span>
                                    ในการผลิต <span class="font-semibold text-primary">หม้อแปลงไฟฟ้า, สถานีชาร์จ EV, โซลาร์รูฟท็อป</span>
                                </p>
                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>รายละเอียดเพิ่มเติม</span>
                                    <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 4: ทุนทำดี leasing รถบรรทุก -->
                    <div class="group relative overflow-hidden">
                        <div class="relative h-[300px] md:h-[400px] overflow-hidden border border-gray-100">
                            <!-- Background Image with Overlay -->
                            <div class="absolute inset-0 z-0">
                                <img src="https://www.age.co.th/wp-content/uploads/2023/07/167823945508.jpg"
                                    alt="ทุนทำดี leasing รถบรรทุก"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-all duration-700">
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="relative z-10 p-6 flex flex-col h-full justify-end text-white">
                                <h3 class="text-xl font-bold text-white mb-3">ทุนทำดี leasing รถบรรทุก</h3>
                                <p class="text-white/80 mb-4 size-detail text-base">
                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                </p>
                                <a href="#"
                                    class="size-detail inline-flex items-center text-white border-b border-white/30 hover:border-white pb-1 self-start group">
                                    <span>รายละเอียดเพิ่มเติม</span>
                                    <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section
        class="goals-section py-12 lg:py-20 relative bg-gradient-to-b from-gray-900 to-gray-800 text-white overflow-hidden">
        <!-- Abstract shapes and decorations -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-20">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/30 rounded-full blur-3xl"></div>
            <div class="absolute bottom-1/3 right-1/3 w-80 h-80 bg-teal-500/30 rounded-full blur-3xl"></div>
            <div class="absolute top-1/2 right-1/4 w-72 h-72 bg-emerald-500/20 rounded-full blur-3xl"></div>
        </div>

        <div class="container mx-auto px-8 relative z-10">
            <div class="text-center max-w-4xl mx-auto mb-10">
                <div class="size-title font-black tracking-[0.8rem] mb-2 relative">
                    <p class="text-white uppercase mt-2 text-shadow-lg relative inline-block"
                        style="text-shadow: 0 0 30px rgba(20, 184, 166, 0.5)">
                        OUR
                    </p>
                    <p class="text-white uppercase mt-2 text-shadow-lg relative inline-block"
                        style="text-shadow: 0 0 30px rgba(20, 184, 166, 0.5)">
                        GOALS
                    </p>
                </div>
                <p class="size-detail text-gray-300 max-w-2xl mx-auto animate-fade-in">
                    <span class="bg-gradient-to-r from-primary to-teal-400 bg-clip-text text-transparent font-medium">
                        เป้าหมายของ AGE Ventures
                    </span>
                    คือการสร้างธุรกิจที่ยั่งยืนและสร้างผลตอบแทน<span class="whitespace-nowrap">ที่มั่นคงในระยะยาว</span>
                </p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-10">
                <!-- Goal 1 -->
                <div class="group relative overflow-hidden bg-white/5 backdrop-blur-sm border border-white/10 hover:border-emerald-400/40 transition-colors duration-500">
                    <div class="relative p-8 flex flex-col h-full">
                        <div class="absolute top-0 right-0 bg-emerald-500/20 w-24 h-24 rounded-full blur-3xl"></div>
                        
                        <div class="text-9xl font-black opacity-10 absolute -top-5 -left-2 text-white">01</div>
                        
                        <div class="flex items-center mb-6 relative">
                            <div class="w-16 h-16 rounded-none flex items-center justify-center bg-emerald-500/20 backdrop-blur-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                                </svg>
                            </div>
                        </div>
                        
                        <p class="size-title-detail font-bold text-white mb-4 min-h-[46px]">ผู้นำด้าน EV และพลังงานสะอาด</p>
                        
                        <p class="text-gray-300 mb-4 size-detail min-h-0 sm:min-h-[46px] xl:min-h-[71px]">มุ่งสู่การเป็นผู้นำด้านการลงทุนในยานยนต์ไฟฟ้าและพลังงานสะอาดในประเทศไทย</p>
                        
                        <div class="h-px w-full bg-gradient-to-r from-emerald-500/50 to-transparent my-4"></div>
                        
                        <span class="text-emerald-400 font-medium text-sm uppercase tracking-wider size-detail">เป้าหมาย</span>
                    </div>
                </div>

                <!-- Goal 2 -->
                <div class="group relative overflow-hidden bg-white/5 backdrop-blur-sm border border-white/10 hover:border-emerald-400/40 transition-colors duration-500">
                    <div class="relative p-8 flex flex-col h-full">
                        <div class="absolute top-0 right-0 bg-emerald-500/20 w-24 h-24 rounded-full blur-3xl"></div>
                        
                        <div class="text-9xl font-black opacity-10 absolute -top-5 -left-2 text-white">02</div>
                        
                        <div class="flex items-center mb-6 relative">
                            <div class="w-16 h-16 rounded-none flex items-center justify-center bg-emerald-500/20 backdrop-blur-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                            </div>
                        </div>
                        
                        <h3 class="size-title-detail font-bold text-white mb-4 min-h-[46px]">โอกาสสำหรับนักลงทุนและพันธมิตร</h3>
                        
                        <p class="text-gray-300 mb-4 size-detail min-h-0 sm:min-h-[46px] xl:min-h-[71px]">เปิดโอกาสให้นักลงทุนและพันธมิตรทางธุรกิจได้เติบโตไปพร้อมกัน</p>
                        
                        <div class="h-px w-full bg-gradient-to-r from-emerald-500/50 to-transparent my-4"></div>
                        
                        <span class="text-emerald-400 font-medium text-sm uppercase tracking-wider size-detail">เป้าหมาย</span>
                    </div>
                </div>

                <!-- Goal 3 -->
                <div class="group relative overflow-hidden bg-white/5 backdrop-blur-sm border border-white/10 hover:border-emerald-400/40 transition-colors duration-500">
                    <div class="relative p-8 flex flex-col h-full">
                        <div class="absolute top-0 right-0 bg-emerald-500/20 w-24 h-24 rounded-full blur-3xl"></div>
                        
                        <div class="text-9xl font-black opacity-10 absolute -top-5 -left-2 text-white">03</div>
                        
                        <div class="flex items-center mb-6 relative">
                            <div class="w-16 h-16 rounded-none flex items-center justify-center bg-emerald-500/20 backdrop-blur-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
                                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
                                    <line x1="6" y1="1" x2="6" y2="4"></line>
                                    <line x1="10" y1="1" x2="10" y2="4"></line>
                                    <line x1="14" y1="1" x2="14" y2="4"></line>
                                </svg>
                            </div>
                        </div>
                        
                        <h3 class="size-title-detail font-bold text-white mb-4 min-h-[46px]">ขยายเครือข่าย Energy Infrastructure</h3>
                        
                        <p class="text-gray-300 mb-4 size-detail min-h-0 sm:min-h-[46px] xl:min-h-[71px]">พัฒนาและขยายโครงสร้างพื้นฐานด้านพลังงานเพื่อรองรับยานยนต์ไฟฟ้า</p>
                        
                        <div class="h-px w-full bg-gradient-to-r from-emerald-500/50 to-transparent my-4"></div>
                        
                        <span class="text-emerald-400 font-medium text-sm uppercase tracking-wider size-detail">เป้าหมาย</span>
                    </div>
                </div>

                <!-- Goal 4 -->
                <div class="group relative overflow-hidden bg-white/5 backdrop-blur-sm border border-white/10 hover:border-emerald-400/40 transition-colors duration-500">
                    <div class="relative p-8 flex flex-col h-full">
                        <div class="absolute top-0 right-0 bg-emerald-500/20 w-24 h-24 rounded-full blur-3xl"></div>
                        
                        <div class="text-9xl font-black opacity-10 absolute -top-5 -left-2 text-white">04</div>
                        
                        <div class="flex items-center mb-6 relative">
                            <div class="w-16 h-16 rounded-none flex items-center justify-center bg-emerald-500/20 backdrop-blur-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"></path>
                                    <circle cx="12" cy="10" r="3"></circle>
                                    <circle cx="12" cy="12" r="10"></circle>
                                </svg>
                            </div>
                        </div>
                        
                        <h3 class="size-title-detail font-bold text-white mb-4 min-h-[46px]">องค์กรที่น่าร่วมงานสำหรับมืออาชีพ</h3>
                        
                        <p class="text-gray-300 mb-4 size-detail min-h-0 sm:min-h-[46px] xl:min-h-[71px]">สร้างวัฒนธรรมองค์กรที่ส่งเสริมนวัตกรรมและความยั่งยืน</p>
                        
                        <div class="h-px w-full bg-gradient-to-r from-emerald-500/50 to-transparent my-4"></div>
                        
                        <span class="text-emerald-400 font-medium text-sm uppercase tracking-wider size-detail">เป้าหมาย</span>
                    </div>
                </div>
            </div>
            
            <!-- Vision footer -->
            <div class="mt-12 lg:mt-16 flex justify-center">
                <div class="inline-flex items-center px-10 py-6 bg-white/5 backdrop-blur-sm border border-white/10">
                    <p
                        class="size-detail font-extrabold bg-gradient-to-r from-primary to-teal-400 bg-clip-text text-transparent">
                        AGE Ventures
                    </p>
                    <span class="mx-4 h-10 w-px bg-white/20"></span>
                    <p class="size-detail text-white font-light">สร้างอนาคตที่ยั่งยืน</p>
                </div>
            </div>
        </div>
    </section>

    <section id="news-activities"
        class="news-activities-section py-12 lg:py-24 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden">
        <!-- Background decorative elements -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-xl -translate-y-1/2"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-teal-500/5 rounded-full blur-3xl translate-y-1/3"></div>

        <div class="container mx-auto px-8 relative z-10">
            <div class="flex flex-col gap-y-5 md:flex-row justify-between items-center mb-8">
                <div class="relative">
                    <div class="size-title font-black tracking-tight relative z-10">
                        <p class="block text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500">
                            NEWS & ACTIVITIES
                        </p>
                    </div>
                    <p class="size-detail leading-relaxed text-gray-600 max-w-xl lg:max-w-2xl mt-4">
                        ติดตามข่าวสารและกิจกรรมล่าสุดของ <span class="font-medium text-primary">AGE Ventures</span>
                        เพื่อก้าวทันความเคลื่อนไหวและการพัฒนาของเรา
                    </p>
                </div>

                <!-- Added See More Button with Tabler Arrow Icon -->
                <a href="#"
                    class="inline-flex justify-center items-center gap-2 text-primary hover:text-primary/80 transition-colors group">
                    <p class="size-detail font-medium">ดูเพิ่มเติม</p>
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="w-6 h-6 transition-transform duration-300 group-hover:translate-x-1" width="24"
                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M5 12l14 0"></path>
                        <path d="M15 16l4 -4"></path>
                        <path d="M15 8l4 4"></path>
                    </svg>
                </a>
            </div>

            <x-frontend::plugin.splidecarousel slideName='news-slide'>
                <x-slot:slideList>
                    <!-- News Card 1 -->
                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden bg-white rounded-none" data-aos-delay="100">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                        alt="News 1"
                                        class="w-full h-full object-cover transition-all duration-700 group-hover:scale-110">
                                </div>

                                <div class="p-8 transition-all duration-500 relative">
                                    <div class="flex items-center text-gray-400 text-sm mb-3">
                                        <p class="size-detail">18 มิถุนายน 2024</p>
                                    </div>

                                    <h3
                                        class="size-title-detail font-bold text-gray-900 mb-3 group-hover:text-primary transition-colors line-clamp-2">
                                        AGE ประกาศความร่วมมือกับพันธมิตรเพื่อขยายธุรกิจพลังงานทดแทน
                                    </h3>
                                </div>

                                <!-- Hover Details Panel -->
                                <div
                                    class="absolute top-0 -right-2 w-2/3 h-full bg-white/95 p-8 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500 flex flex-col justify-center">
                                    <span class="text-primary font-semibold mb-3 text-sm">18 มิถุนายน 2024</span>
                                    <h4 class="text-xl font-bold mb-4 line-clamp-3">AGE
                                        ประกาศความร่วมมือกับพันธมิตรเพื่อขยายธุรกิจพลังงานทดแทน</h4>
                                    <p class="text-gray-600 mb-6 line-clamp-6">
                                        บริษัท เอเชีย กรีน เอนเนอจี จำกัด (มหาชน) หรือ AGE
                                        ประกาศความร่วมมือกับพันธมิตรทางธุรกิจในการขยายการลงทุนด้านพลังงานทดแทน
                                        มุ่งเน้นการพัฒนาโครงการพลังงานสะอาดเพื่อความยั่งยืนในอนาคต
                                    </p>
                                    <a href="#"
                                        class="inline-flex items-center text-primary hover:text-primary/80 font-medium mt-auto group">
                                        อ่านเพิ่มเติม
                                        <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-2"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </x-slot:slideItem>
                    </x-frontend::plugin.splidecarousel.item>

                    <!-- News Card 2 -->
                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden bg-white rounded-none">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1578574577315-3fbeb0cecdc2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                        alt="News 2"
                                        class="w-full h-full object-cover transition-all duration-700 group-hover:scale-110">
                                </div>

                                <div class="p-8 transition-all duration-500 relative">
                                    <div class="flex items-center text-gray-400 text-sm mb-3">
                                        <p class="size-detail">5 มิถุนายน 2024</p>
                                    </div>

                                    <h3
                                        class="size-title-detail font-bold text-gray-900 mb-3 group-hover:text-emerald-500 transition-colors line-clamp-2">
                                        กิจกรรม "AGE รักษ์โลก" ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน
                                    </h3>
                                </div>

                                <!-- Hover Details Panel -->
                                <div
                                    class="absolute top-0 -right-2 w-2/3 h-full bg-white/95 p-8 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500 flex flex-col justify-center">
                                    <span class="text-emerald-500 font-semibold mb-3 text-sm">5 มิถุนายน 2024</span>
                                    <h4 class="text-xl font-bold mb-4 line-clamp-3">กิจกรรม "AGE รักษ์โลก"
                                        ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน</h4>
                                    <p class="text-gray-600 mb-6 line-clamp-6">
                                        AGE นำทีมพนักงานและอาสาสมัครร่วมกิจกรรมปลูกป่าชายเลน ณ อำเภอคลองเขื่อน
                                        จังหวัดฉะเชิงเทรา
                                        เพื่อฟื้นฟูระบบนิเวศและดูดซับคาร์บอนไดออกไซด์ สร้างสมดุลให้สิ่งแวดล้อมอย่างยั่งยืน
                                        ภายใต้โครงการ
                                        "AGE รักษ์โลก" ที่จัดขึ้นเนื่องในวันสิ่งแวดล้อมโลก
                                    </p>
                                    <a href="#"
                                        class="inline-flex items-center text-emerald-500 hover:text-emerald-600 font-medium mt-auto group">
                                        อ่านเพิ่มเติม
                                        <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-2"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </x-slot:slideItem>
                    </x-frontend::plugin.splidecarousel.item>

                    <!-- News Card 3 -->
                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden bg-white rounded-none">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1578574577315-3fbeb0cecdc2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                        alt="News 3"
                                        class="w-full h-full object-cover transition-all duration-700 group-hover:scale-110">
                                </div>

                                <div class="p-8 transition-all duration-500 relative">
                                    <div class="flex items-center text-gray-400 text-sm mb-3">
                                        <p class="size-detail">5 มิถุนายน 2024</p>
                                    </div>

                                    <h3
                                        class="size-title-detail font-bold text-gray-900 mb-3 group-hover:text-emerald-500 transition-colors line-clamp-2">
                                        กิจกรรม "AGE รักษ์โลก" ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน
                                    </h3>
                                </div>

                                <!-- Hover Details Panel -->
                                <div
                                    class="absolute top-0 -right-2 w-2/3 h-full bg-white/95 p-8 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500 flex flex-col justify-center">
                                    <span class="text-emerald-500 font-semibold mb-3 text-sm">5 มิถุนายน 2024</span>
                                    <h4 class="text-xl font-bold mb-4 line-clamp-3">กิจกรรม "AGE รักษ์โลก"
                                        ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน</h4>
                                    <p class="text-gray-600 mb-6 line-clamp-6">
                                        AGE นำทีมพนักงานและอาสาสมัครร่วมกิจกรรมปลูกป่าชายเลน ณ อำเภอคลองเขื่อน
                                        จังหวัดฉะเชิงเทรา
                                        เพื่อฟื้นฟูระบบนิเวศและดูดซับคาร์บอนไดออกไซด์ สร้างสมดุลให้สิ่งแวดล้อมอย่างยั่งยืน
                                        ภายใต้โครงการ
                                        "AGE รักษ์โลก" ที่จัดขึ้นเนื่องในวันสิ่งแวดล้อมโลก
                                    </p>
                                    <a href="#"
                                        class="inline-flex items-center text-emerald-500 hover:text-emerald-600 font-medium mt-auto group">
                                        อ่านเพิ่มเติม
                                        <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-2"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </x-slot:slideItem>
                    </x-frontend::plugin.splidecarousel.item>

                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden bg-white rounded-none">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1578574577315-3fbeb0cecdc2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                        alt="News 3"
                                        class="w-full h-full object-cover transition-all duration-700 group-hover:scale-110">
                                </div>

                                <div class="p-8 transition-all duration-500 relative">
                                    <div class="flex items-center text-gray-400 text-sm mb-3">
                                        <p class="size-detail">5 มิถุนายน 2024</p>
                                    </div>

                                    <h3
                                        class="size-title-detail font-bold text-gray-900 mb-3 group-hover:text-emerald-500 transition-colors line-clamp-2">
                                        กิจกรรม "AGE รักษ์โลก" ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน
                                    </h3>
                                </div>

                                <!-- Hover Details Panel -->
                                <div
                                    class="absolute top-0 -right-2 w-2/3 h-full bg-white/95 p-8 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500 flex flex-col justify-center">
                                    <span class="text-emerald-500 font-semibold mb-3 text-sm">5 มิถุนายน 2024</span>
                                    <h4 class="text-xl font-bold mb-4 line-clamp-3">กิจกรรม "AGE รักษ์โลก"
                                        ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน</h4>
                                    <p class="text-gray-600 mb-6 line-clamp-6">
                                        AGE นำทีมพนักงานและอาสาสมัครร่วมกิจกรรมปลูกป่าชายเลน ณ อำเภอคลองเขื่อน
                                        จังหวัดฉะเชิงเทรา
                                        เพื่อฟื้นฟูระบบนิเวศและดูดซับคาร์บอนไดออกไซด์ สร้างสมดุลให้สิ่งแวดล้อมอย่างยั่งยืน
                                        ภายใต้โครงการ
                                        "AGE รักษ์โลก" ที่จัดขึ้นเนื่องในวันสิ่งแวดล้อมโลก
                                    </p>
                                    <a href="#"
                                        class="inline-flex items-center text-emerald-500 hover:text-emerald-600 font-medium mt-auto group">
                                        อ่านเพิ่มเติม
                                        <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-2"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </x-slot:slideItem>
                    </x-frontend::plugin.splidecarousel.item>
                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden bg-white rounded-none">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1578574577315-3fbeb0cecdc2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                        alt="News 3"
                                        class="w-full h-full object-cover transition-all duration-700 group-hover:scale-110">
                                </div>

                                <div class="p-8 transition-all duration-500 relative">
                                    <div class="flex items-center text-gray-400 text-sm mb-3">
                                        <p class="size-detail">5 มิถุนายน 2024</p>
                                    </div>

                                    <h3
                                        class="size-title-detail font-bold text-gray-900 mb-3 group-hover:text-emerald-500 transition-colors line-clamp-2">
                                        กิจกรรม "AGE รักษ์โลก" ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน
                                    </h3>
                                </div>

                                <!-- Hover Details Panel -->
                                <div
                                    class="absolute top-0 -right-2 w-2/3 h-full bg-white/95 p-8 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500 flex flex-col justify-center">
                                    <span class="text-emerald-500 font-semibold mb-3 text-sm">5 มิถุนายน 2024</span>
                                    <h4 class="text-xl font-bold mb-4 line-clamp-3">กิจกรรม "AGE รักษ์โลก"
                                        ปลูกป่าชายเลนเพื่อระบบนิเวศที่ยั่งยืน</h4>
                                    <p class="text-gray-600 mb-6 line-clamp-6">
                                        AGE นำทีมพนักงานและอาสาสมัครร่วมกิจกรรมปลูกป่าชายเลน ณ อำเภอคลองเขื่อน
                                        จังหวัดฉะเชิงเทรา
                                        เพื่อฟื้นฟูระบบนิเวศและดูดซับคาร์บอนไดออกไซด์ สร้างสมดุลให้สิ่งแวดล้อมอย่างยั่งยืน
                                        ภายใต้โครงการ
                                        "AGE รักษ์โลก" ที่จัดขึ้นเนื่องในวันสิ่งแวดล้อมโลก
                                    </p>
                                    <a href="#"
                                        class="inline-flex items-center text-emerald-500 hover:text-emerald-600 font-medium mt-auto group">
                                        อ่านเพิ่มเติม
                                        <svg class="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-2"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </x-slot:slideItem>
                    </x-frontend::plugin.splidecarousel.item>
                </x-slot:slideList>
            </x-frontend::plugin.splidecarousel>
        </div>
    </section>

    <section id="careers" class="py-16 lg:py-32 relative overflow-hidden">
        <!-- Background image with overlay -->
        <div class="absolute inset-0 z-0">
            <img src="https://newcastlephysiorehab.ca/wp-content/uploads/2021/06/join-our-team-a-1280x500-1.jpg" 
                 alt="Career Background" 
                 class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-gray-900/90 via-gray-900/80 to-gray-900/70"></div>
        </div>
        
        <div class="container mx-auto px-8 relative z-10">
            <!-- Section header -->
            <div class="max-w-3xl mb-16">
                <div class="size-title font-black tracking-tight relative z-10">
                    <p class="block text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500">
                        JOIN OUR TEAM
                    </p>
                </div>
                <div class="flex items-center space-x-2 mb-8">
                    <div class="h-1 w-12 bg-primary rounded-full"></div>
                    <div class="h-1 w-24 bg-teal-500 rounded-full animate-pulse"></div>
                    <div class="h-1 w-12 bg-emerald-500 rounded-full"></div>
                </div>
                <p class="size-detail text-gray-300 leading-relaxed">
                    เป็นส่วนหนึ่งของทีมที่ขับเคลื่อนอนาคตของพลังงานยั่งยืนและยานยนต์ไฟฟ้า
                    ที่ AGE Ventures เรากำลังมองหาบุคลากรที่มีความสามารถพิเศษเพื่อช่วยเราสร้างอนาคต
                </p>
            </div>
            
           

            <!-- ส่วนติดต่อเรา -->
            <div class="relative p-12 lg:p-16 bg-black/30 backdrop-blur-md border border-white/10 overflow-hidden">
                <!-- องค์ประกอบตกแต่ง -->
                <div class="absolute top-0 right-0 w-32 h-32 bg-primary/20 blur-3xl rounded-full"></div>
                <div class="absolute bottom-0 left-1/4 w-40 h-40 bg-teal-500/10 blur-3xl rounded-full"></div>
                
                <div class="relative z-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 lg:gap-16">
                    <div class="w-full lg:w-2/3">
                        <h3 class="size-title-detail font-bold text-white mb-4 lg:mb-6">
                            <span class="">
                                ติดต่อเรา
                            </span>
                        </h3>
                        <p class="size-detail text-gray-300 mb-6 leading-relaxed">
                            สนใจร่วมลงทุนหรือเป็นพันธมิตรทางธุรกิจกับ AGE Ventures? หรือมีคำถามเพิ่มเติมเกี่ยวกับบริการของเรา ติดต่อทีมงานได้ที่
                        </p>
                    </div>
                    
                    <div class="w-full lg:w-auto">
                        <a href="#" class="group relative inline-flex items-center justify-center w-full lg:w-auto">
                            <!-- Button Background -->
                            <div class="absolute inset-0 bg-white/5 backdrop-blur-sm border border-white/10 transition-all duration-300 group-hover:border-primary/30"></div>
                            
                            <!-- Button Content -->
                            <div class="relative px-8 lg:px-12 py-4 lg:py-5">
                                <span class="inline-flex items-center size-detail font-medium">
                                    <span class="text-white group-hover:text-primary transition-colors">ติดต่อสอบถามข้อมูล</span>
                                </span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection