@extends('frontend.layout')

@section('content')
    <!-- Slider -->
    <div x-data="{ active: 0, slides: [
        { img: 'https://placehold.co/1200x400/1E3A8A/FFF?text=Promo+1', title: 'Promo Laundry 50%', desc: 'Nikmati diskon menarik minggu ini!' },
        { img: 'https://placehold.co/1200x400/2563EB/FFF?text=Promo+2', title: 'Express Service', desc: 'Cuci bersih selesai dalam 1 hari.' },
        { img: 'https://placehold.co/1200x400/4F46E5/FFF?text=Promo+3', title: 'Gratis Antar Jemput', desc: 'Untuk area tertentu.' }
    ] }" class="relative w-full h-96 overflow-hidden rounded-lg shadow-lg">

        <!-- Slides -->
        <template x-for="(slide, index) in slides" :key="index">
            <div x-show="active === index" class="absolute inset-0 transition-all">
                <img :src="slide.img" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center">
                    <div class="px-8 md:px-16 lg:px-24 text-white">
                        <h2 class="text-3xl md:text-4xl font-bold mb-2" x-text="slide.title"></h2>
                        <p class="text-lg mb-4" x-text="slide.desc"></p>
                        <a href="{{ route('produk') }}" 
                           class="bg-blue-600 px-6 py-3 rounded-lg shadow hover:bg-blue-700 transition">
                           Lihat Produk
                        </a>
                    </div>
                </div>
            </div>
        </template>

        <!-- Controls -->
        <div class="absolute inset-0 flex justify-between items-center px-4">
            <button @click="active = (active === 0 ? slides.length - 1 : active - 1)" 
                    class="bg-white bg-opacity-50 p-2 rounded-full hover:bg-opacity-80">
                ‹
            </button>
            <button @click="active = (active === slides.length - 1 ? 0 : active + 1)" 
                    class="bg-white bg-opacity-50 p-2 rounded-full hover:bg-opacity-80">
                ›
            </button>
        </div>

        <!-- Indicators -->
        <div class="absolute bottom-4 w-full flex justify-center space-x-2">
            <template x-for="(slide, index) in slides" :key="index">
                <button @click="active = index" 
                        class="w-3 h-3 rounded-full"
                        :class="active === index ? 'bg-white' : 'bg-gray-400'"></button>
            </template>
        </div>
    </div>

    <!-- Featured Products -->
    <div class="mt-12">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-2xl font-bold text-gray-800">Produk Unggulan</h3>
            <a href="{{ route('produk') }}" class="text-blue-600 hover:underline font-medium">Lihat Semua</a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                <img src="https://placehold.co/300x200" alt="Produk 1" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-bold text-lg">Laundry Reguler</h4>
                    <p class="text-gray-600">Estimasi 2 hari</p>
                    <p class="text-blue-600 font-semibold mt-2">Rp 20.000</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                <img src="https://placehold.co/300x200" alt="Produk 2" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-bold text-lg">Laundry Express</h4>
                    <p class="text-gray-600">Selesai 1 hari</p>
                    <p class="text-blue-600 font-semibold mt-2">Rp 30.000</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                <img src="https://placehold.co/300x200" alt="Produk 3" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-bold text-lg">Cuci Sepatu</h4>
                    <p class="text-gray-600">Perawatan khusus</p>
                    <p class="text-blue-600 font-semibold mt-2">Rp 25.000</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                <img src="https://placehold.co/300x200" alt="Produk 4" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-bold text-lg">Cuci Karpet</h4>
                    <p class="text-gray-600">Bersih & wangi</p>
                    <p class="text-blue-600 font-semibold mt-2">Rp 50.000</p>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-12">
        <h3 class="text-2xl font-bold text-gray-800 mb-6">Produk Kategori</h3>

        <!-- Grid per kategori -->
        <div class="space-y-10">
            
            <!-- Bahan Baku -->
            <div>
                <h4 class="text-xl font-semibold mb-4">Bahan Baku</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Parfum Konsentrat" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Parfum Konsentrat</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 150.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Bahan Kimia Laundry" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Bahan Kimia Laundry</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 75.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Parfum Konsentrat" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Parfum Konsentrat</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 150.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Bahan Kimia Laundry" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Bahan Kimia Laundry</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 75.000</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Produk Jadi -->
            <div>
                <h4 class="text-xl font-semibold mb-4">Produk Jadi</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Parfum Laundry Botol" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Parfum Laundry</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 25.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Sabun Cuci Piring" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Sabun Cuci Piring</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 20.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Parfum Laundry Botol" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Parfum Laundry</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 25.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Sabun Cuci Piring" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Sabun Cuci Piring</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 20.000</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Kemasan -->
            <div>
                <h4 class="text-xl font-semibold mb-4">Kemasan</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Botol 1L" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Botol 1 Liter</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 5.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Pouch" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Pouch 500ml</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 3.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Botol 1L" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Botol 1 Liter</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 5.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Pouch" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Pouch 500ml</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 3.000</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bahan Penolong -->
            <div>
                <h4 class="text-xl font-semibold mb-4">Bahan Penolong</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Soda Ash" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Soda Ash</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 50.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Softener" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Softener</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 45.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Soda Ash" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Soda Ash</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 50.000</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition overflow-hidden">
                        <img src="https://placehold.co/300x200" alt="Softener" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h5 class="font-bold text-lg">Softener</h5>
                            <p class="text-blue-600 font-semibold mt-2">Rp 45.000</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection