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

@section('content')
    <div class="full-carousel-wrapper ">
        <div class="full-carousel-banner group">
            <x-frontend::plugin.splidecarousel slideName='splide-demo'>
                <x-slot:slideList>
                    <x-frontend::plugin.splidecarousel.image
                        slideSource='https://images.unsplash.com/photo-1600618528240-fb9fc964b853?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
                        slideUrl='' slideDescription='' class='full-screen-slide'>
                        </x-frontend>
                        <x-frontend::plugin.splidecarousel.video
                            slideSource='https://videos.pexels.com/video-files/3209148/3209148-uhd_2560_1440_25fps.mp4'
                            slideCover='https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8d2VsbG5lc3N8ZW58MHwwfDB8fHwy'
                            slideDescription='' class='full-screen-slide'>
                            </x-frontend>
                </x-slot>
                </x-frontend>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="relative overflow-hidden">
        <div class="">
            <div class="grid grid-cols-12 items-center">
                <!-- Image Side (60% on desktop) -->
                <div class="lg:col-span-8 col-span-12">
                    <div class="relative overflow-hidden z-10">
                        <img src="{{ Module::asset('frontend:img/service-1.png') }}" class="sm:h-[500px] h-[300px] w-full block object-cover transition-transform duration-700 hover:scale-110"
                        alt="Hero Image">
                    </div>
                </div>

                <!-- Content Side (40% on desktop) -->
                <div class="lg:col-span-4 col-span-12 px-10 py-6 relative">
                    <div class="absolute inset-0 flex items-center justify-center opacity-5 z-0">
                        <div class="w-[800px] h-[800px] rotate-45 border-[100px] border-teal-600 rounded-full"></div>
                    </div>
                    <h1 class="text-4xl lg:text-5xl font-bold mb-6">
                        Discover Your Path to<br><span class="text-teal-600">Wellness</span>
                    </h1>
                    <p class="text-gray-600 text-lg mb-8 max-w-xl">
                        Experience transformative healing and rejuvenation through our holistic wellness approaches.
                        Begin your journey to a balanced life today.
                    </p>
                    <a href="/about"
                        class="inline-flex justify-center gap-2 items-center mx-auto text-lg text-white backdrop-blur-md lg:font-semibold isolation-auto border-emerald-500 before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full before:-left-full before:hover:left-0 before:rounded-full before:bg-white hover:text-emerald-500 before:-z-10 before:aspect-square before:hover:scale-150 before:hover:duration-700 relative z-10 px-4 py-2 overflow-hidden border-2 rounded-full group bg-emerald-500">
                        About Us
                        <svg class="w-8 h-8 justify-end group-hover:rotate-90 group-hover:bg-white text-white ease-linear duration-300 rounded-full group-hover:border-none p-2 rotate-45"
                            viewBox="0 0 16 19" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M7 18C7 18.5523 7.44772 19 8 19C8.55228 19 9 18.5523 9 18H7ZM8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM9 18L9 1H7L7 18H9Z"
                                class="fill-white group-hover:fill-emerald-500"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Three Column Section -->
    <section class="relative overflow-hidden ">
        <div class="">
            <div class="grid grid-cols-12 items-center">
                <!-- Left Image -->
                <div class="relative lg:col-span-4 col-span-12">
                    <div class="overflow-hidden">
                        <img src="{{ Module::asset('frontend:img/about-1.png') }}" class="sm:h-[500px] h-[300px] w-full block object-cover duration-700 hover:scale-110"
                        alt="Wellness Left">
                    </div>
                </div>

                <!-- Center Content -->
                <div class="lg:col-span-4 col-span-12 px-10 py-6 space-y-4">
                    <h2 class="text-3xl lg:text-4xl font-bold">
                        Embrace Natural <br><span class="text-teal-600">Healing</span>
                    </h2>
                    <p class="text-gray-600 leading-relaxed">
                        We believe in the power of natural healing and holistic wellness.
                        Our approach combines ancient wisdom with modern techniques to
                        provide you with the best care possible.
                    </p>

                    <a href="/about"
                        class="inline-flex justify-center gap-2 items-center mx-auto text-lg text-white backdrop-blur-md lg:font-semibold isolation-auto border-emerald-500 before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full before:-left-full before:hover:left-0 before:rounded-full before:bg-white hover:text-emerald-500 before:-z-10 before:aspect-square before:hover:scale-150 before:hover:duration-700 relative z-10 px-4 py-2 overflow-hidden border-2 rounded-full group bg-emerald-500">
                        About Us
                        <svg class="w-8 h-8 justify-end group-hover:rotate-90 group-hover:bg-white text-white ease-linear duration-300 rounded-full group-hover:border-none p-2 rotate-45"
                            viewBox="0 0 16 19" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M7 18C7 18.5523 7.44772 19 8 19C8.55228 19 9 18.5523 9 18H7ZM8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM9 18L9 1H7L7 18H9Z"
                                class="fill-white group-hover:fill-emerald-500"></path>
                        </svg>
                    </a>

                </div>

                <!-- Right Image -->
                <div class="relative lg:col-span-4 col-span-12">
                    <div class="overflow-hidden">
                        <img src="{{ Module::asset('frontend:img/about-2.png') }}" class="sm:h-[500px] h-[300px] w-full block object-cover duration-700 hover:scale-110"
                        alt="Wellness Left">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modern Product Showcase Section -->
    <section class="py-10 lg:py-16 bg-gradient-to-b from-gray-50/30 to-white relative">
        <div class="bottom-0 left-0 absolute overflow-hidden">
            <img src="{{ Module::asset('frontend:img/s-down.png') }}" class="w-full h-full object-contain">
        </div>
        <div class="top-0 right-0 absolute overflow-hidden">
            <img src="{{ Module::asset('frontend:img/s-up.png') }}" class="w-full h-full object-contain">
        </div>
        <div class="container mx-auto px-4 relative z-10 ">
            <h2 class="text-4xl font-bold text-center mb-5 relative">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-500">
                    Trending Products
                </span>
                <div
                    class="absolute w-24 h-1 bg-gradient-to-r from-emerald-500 to-teal-400 bottom-0 left-1/2 transform -translate-x-1/2 mt-4">
                </div>
            </h2>
            <div class="text-center mb-10">
                <a href="/products"
                    class="inline-flex items-center gap-2 text-emerald-600 hover:text-emerald-700 transition-colors duration-300 group">
                    See more
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 transform transition-transform duration-300 group-hover:translate-x-1"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
            </div>


            <div class="grid grid-cols-12 gap-4 lg:gap-8">
                <div class="lg:col-span-3 tn:col-span-6 col-span-12">
                    <a href="/products" class="block h-full">
                        <div class="h-full rounded-3xl overflow-hidden relative group">
                            <img src="{{ Module::asset('frontend:img/product.png') }}" alt="Just in products"
                                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                            <div class="absolute bottom-4 right-4 flex items-center gap-2">
                                <span class="text-white text-xl font-bold px-4 py-2 rounded-full underline">
                                    Shop Now
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="lg:col-span-9 tn:col-span-6 col-span-12">
                    <x-frontend::plugin.splidecarousel slideName='splide-item'>
                        <x-slot:slideList>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.product_card
                                        img="https://images.unsplash.com/photo-1608248597279-f99d160bfcbc"
                                        title="Essential Oils Bundle"
                                        detail="Pure therapeutic-grade essential oils for aromatherapy" price="฿49.99"
                                        url="/product-detail">
                                    </x-frontend::card.product_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.product_card
                                        img="https://images.unsplash.com/photo-1598452963314-b09f397a5c48"
                                        title="Herbal Tea Collection"
                                        detail="Organic herbal tea blend for relaxation and wellness" price="฿39.99"
                                        url="/product-detail">
                                    </x-frontend::card.product_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.product_card
                                        img="https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19"
                                        title="Natural Face Mask" detail="Clay-based facial mask with natural ingredients"
                                        price="฿29.99" url="/product-detail">
                                    </x-frontend::card.product_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.product_card
                                        img="https://images.unsplash.com/photo-1620916566398-39f1143ab7be"
                                        title="Wellness Starter Kit" detail="Complete wellness package for beginners"
                                        price="฿89.99" url="/product-detail">
                                    </x-frontend::card.product_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel>
                </div>
            </div>
        </div>
    </section>

    <!-- Parallax Section -->
    <section class="relative h-[300px] bg-fixed bg-center bg-cover"
        style="background-image: url('https://images.unsplash.com/photo-1500904156668-758cff89dcff?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
        <div class="absolute inset-0 bg-black/40"></div>
        <div class="container mx-auto px-4 h-full relative">
            <div class="flex items-center justify-center h-full">
                <div class="text-center text-white">
                    <h2 class="text-4xl md:text-5xl font-bold mb-4">Begin Your Wellness Journey</h2>
                    <p class="text-xl mb-8">Discover natural healing and inner peace</p>
                    <a href="/contact"
                        class="inline-block px-8 py-3 bg-white text-emerald-600 rounded-full hover:bg-emerald-50 transition-colors duration-300">
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </section>


    <!-- Blog Section -->
    <section class="py-10 lg:py-16 bg-gray-50/30">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-5">
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-start relative">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-500">
                        Latest BLOGS
                    </span>
                    <div class="flex items-center gap-2 mt-2">
                        <div class="h-[2px] w-4 bg-emerald-500"></div>
                        <span class="text-base text-emerald-600">Get Updated</span>
                        <div class="h-[2px] w-4 bg-emerald-500"></div>
                    </div>
                </h2>

                <a href="/blogs"
                    class="inline-flex items-center gap-2 text-emerald-600 hover:text-emerald-700 transition-colors duration-300 group">
                    See more
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 transform transition-transform duration-300 group-hover:translate-x-1"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
            </div>


            <div class="grid grid-cols-12 gap-6 mb-10">
                <!-- Featured Blog Post 1 -->
                <div class="lg:col-span-4 col-span-12 group">
                    <a href="/blog-detail" class="block">
                        <div class="relative overflow-hidden rounded-2xl">
                            <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b" 
                                 class="w-full h-56 object-cover transform group-hover:scale-110 transition-transform duration-500"
                                 alt="Featured Blog">
                            <div class="absolute top-4 left-4 bg-emerald-500 text-white px-3 py-1 rounded-full text-sm">
                                Featured
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="bg-white rounded-lg px-3 py-2">
                                    <span class="block text-emerald-600 text-lg font-bold">15</span>
                                    <span class="block text-gray-600 text-sm">APR</span>
                                </div>
                                <h3 class="text-xl font-semibold group-hover:text-emerald-600 transition-colors line-clamp-2">The Power of Natural Healing</h3>
                            </div>
                            <p class="text-gray-600 text-base line-clamp-3">Discover how traditional healing methods can complement modern wellness practices for optimal health results.</p>
                        </div>
                    </a>
                </div>

                <!-- Featured Blog Post 2 -->
                <div class="lg:col-span-4 col-span-12 group">
                    <a href="/blog-detail" class="block">
                        <div class="relative overflow-hidden rounded-2xl">
                            <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597" 
                                 class="w-full h-56 object-cover transform group-hover:scale-110 transition-transform duration-500"
                                 alt="Featured Blog">
                            <div class="absolute top-4 left-4 bg-emerald-500 text-white px-3 py-1 rounded-full text-sm">
                                Featured
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="bg-white rounded-lg px-3 py-2">
                                    <span class="block text-emerald-600 text-lg font-bold">10</span>
                                    <span class="block text-gray-600 text-sm">APR</span>
                                </div>
                                <h3 class="text-xl font-semibold group-hover:text-emerald-600 transition-colors line-clamp-2">Mindfulness in Daily Life</h3>
                            </div>
                            <p class="text-gray-600 text-base line-clamp-3">Learn practical techniques to incorporate mindfulness into your everyday routine for better mental clarity.</p>
                        </div>
                    </a>
                </div>

                <!-- Featured Blog Post 3 -->
                <div class="lg:col-span-4 col-span-12 group">
                    <a href="/blog-detail" class="block">
                        <div class="relative overflow-hidden rounded-2xl">
                            <img src="https://images.unsplash.com/photo-1599447421416-3414500d18a5" 
                                 class="w-full h-56 object-cover transform group-hover:scale-110 transition-transform duration-500"
                                 alt="Featured Blog">
                            <div class="absolute top-4 left-4 bg-emerald-500 text-white px-3 py-1 rounded-full text-sm">
                                Featured
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="bg-white rounded-lg px-3 py-2">
                                    <span class="block text-emerald-600 text-lg font-bold">05</span>
                                    <span class="block text-gray-600 text-sm">APR</span>
                                </div>
                                <h3 class="text-xl font-semibold group-hover:text-emerald-600 transition-colors line-clamp-2">Holistic Health Guide</h3>
                            </div>
                            <p class="text-gray-600 text-base line-clamp-3">A comprehensive approach to wellness that addresses physical, mental, and spiritual well-being.</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-12 gap-4 lg:gap-8">
                <div class="lg:col-span-3 tn:col-span-6 col-span-12">
                    <a href="/blog" class="block h-full">
                        <div class="h-full rounded-3xl overflow-hidden relative group">
                            <img src="{{ Module::asset('frontend:img/blog.png') }}" alt="Latest Blogs"
                                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                        </div>
                    </a>
                </div>
                <div class="lg:col-span-9 tn:col-span-6 col-span-12">
                    <x-frontend::plugin.splidecarousel slideName='splide-blog'>
                        <x-slot:slideList>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.blog_card
                                        img="https://images.unsplash.com/photo-1482100199117-a4a38a64e7e3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d2VsbG5lc3N8ZW58MHwwfDB8fHwy"
                                        title="Modern Meditation Techniques"
                                        details="Explore contemporary meditation practices that fit 
                            seamlessly into your busy lifestyle."
                                        day="15" month="APR" url="/blog-detail">
                                    </x-frontend::card.blog_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.blog_card
                                        img="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHdlbGxuZXNzfGVufDB8MHwwfHx8Mg%3D%3D"
                                        title="Holistic Healing Guide"
                                        details="Learn about comprehensive approaches to wellness 
                            that treat mind, body, and spirit as one."
                                        day="28" month="MAR" url="/blog-detail">
                                    </x-frontend::card.blog_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.blog_card
                                        img="https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                        title="Natural Supplements 101"
                                        details="Understanding the essential vitamins and minerals 
                            for optimal health and vitality."
                                        day="10" month="MAR" url="/blog-detail">
                                    </x-frontend::card.blog_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                            <x-frontend::plugin.splidecarousel.item>
                                <x-slot:slideItem>
                                    <x-frontend::card.blog_card
                                        img="https://images.unsplash.com/photo-1600618528240-fb9fc964b853?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                        title="Mindful Living Practice"
                                        details="Discover daily habits and routines that promote 
                            mental clarity and emotional balance."
                                        day="25" month="FEB" url="/blog-detail">
                                    </x-frontend::card.blog_card>
                                </x-slot>
                            </x-frontend::plugin.splidecarousel.item>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel>
                </div>
            </div>
        </div>
    </section>
@endsection