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

@section('content')

    <nav class="py-5">
        <div class="container mx-auto px-4">
            <ol class="flex items-center space-x-2 text-md text-gray-500">
                <li>
                    <a href="/" class="hover:text-emerald-600">Home</a>
                </li>
                <li>
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <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>
                </li>
                <li>
                    <a href="/products" class="hover:text-emerald-600">Products</a>
                </li>
                <li>
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <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>
                </li>
                <li class="text-emerald-600">Essential Oils Bundle</li>
            </ol>
        </div>
    </nav>

    <div class="container mx-auto px-4 py-10 lg:py-12">
        <div class="grid grid-cols-12 gap-8">
            <!-- Product Details (Left Side) -->
            <div class="lg:col-span-6 col-span-12 order-2 lg:order-1">
                <div class="sticky top-24">
                    <span class="text-emerald-600 text-sm font-medium tracking-wider uppercase mb-2 block">Premium
                        Collection</span>
                    <h1 class="text-4xl font-bold mb-4 leading-tight">Essential Oils Bundle</h1>

                    <div class="mb-6">
                        <p class="text-gray-600 mb-4">
                            Pure therapeutic-grade essential oils carefully selected and blended for maximum benefits.
                            Perfect for aromatherapy and natural wellness practices.
                        </p>
                        <p class="text-gray-600 mb-4">
                            น้ำมันหอมระเหยบริสุทธิ์เกรดบำบัด คัดสรรและผสมผสานอย่างพิถีพิถันเพื่อประโยชน์สูงสุด 
                            เหมาะสำหรับการบำบัดด้วยกลิ่นและการดูแลสุขภาพแบบธรรมชาติ
                        </p>
                        <div class="space-y-4 mb-6">
                            <h3 class="font-semibold text-lg">ส่วนประกอบหลัก / Key Ingredients:</h3>
                            <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                <li>Lavender Oil (น้ำมันลาเวนเดอร์) - ช่วยผ่อนคลาย ลดความเครียด</li>
                                <li>Eucalyptus Oil (น้ำมันยูคาลิปตัส) - บรรเทาการอักเสบ ช่วยระบบทางเดินหายใจ</li>
                                <li>Peppermint Oil (น้ำมันเปปเปอร์มินต์) - แก้ปวดเมื่อย ให้ความรู้สึกสดชื่น</li>
                                <li>Tea Tree Oil (น้ำมันทีทรี) - ฆ่าเชื้อแบคทีเรีย ดูแลผิวพรรณ</li>
                            </ul>
                        </div>
                        <div class="mt-4 grid grid-cols-2 gap-3">
                            <div class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd" />
                                </svg>
                                100% Pure & Natural
                            </div>
                            <div class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd" />
                                </svg>
                                Therapeutic Grade
                            </div>
                            <div class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd" />
                                </svg>
                                Sustainably Sourced
                            </div>
                            <div class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd" />
                                </svg>
                                Third-party Tested
                            </div>
                        </div>
                    </div>

                    {{-- <div class="flex items-center gap-4 mb-8">
                        <span class="text-4xl font-bold text-emerald-600">฿49.99</span>
                        <span class="text-gray-400 line-through">฿69.99</span>
                        <span class="bg-emerald-50 text-emerald-600 px-3 py-1 rounded-full text-sm">-28%</span>
                    </div> --}}

                    <button
                        class="w-full bg-emerald-600 text-white py-4 px-6 rounded-lg hover:bg-emerald-500 transition-colors duration-300 flex items-center justify-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                        Order Now
                    </button>
                </div>
            </div>

            <!-- Product Images (Right Side) -->
            <div class="lg:col-span-6 col-span-12 relative order-1 lg:order-2">
                <div class="absolute w-[100%] h-full -right-[50%] bg-emerald-500 rounded-l-[100px] -z-10 overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/ripples.svg') }}" class="w-full h-full object-cover opacity-5">
                </div>
                <x-frontend::plugin.splidecarousel slideName='splide-product'>
                    <x-slot:slideList>
                        <x-frontend::plugin.splidecarousel.image slideSource='modules/frontend/img/p-1.png' slideUrl=''
                            slideDescription='' class='w-full rounded-lg shadow-xl'>
                        </x-frontend::plugin.splidecarousel.image>
                        <x-frontend::plugin.splidecarousel.image slideSource='modules/frontend/img/p-2.png' slideUrl=''
                            slideDescription='' class='w-full rounded-lg shadow-xl'>
                        </x-frontend::plugin.splidecarousel.image>
                    </x-slot:slideList>
                </x-frontend::plugin.splidecarousel>
            </div>
        </div>
    </div>
@endsection