@extends('frontend.layout')

@section('content')
   

    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-blue-800 to-blue-900 text-white py-16 md:py-24">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Supplier Kimia Laundry</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Semua Bahan Kimia Laundry, Langsung dari Pusatnya. Hemat, terpercaya, dan siap kirim ke seluruh Indonesia.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#produk" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-lg text-lg flex items-center justify-center">
                    Lihat Produk <i class="fas fa-arrow-down ml-2"></i>
                </a>
                <a href="{{ route('hubung-kami') }}" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-800 text-white font-bold py-3 px-8 rounded-lg text-lg">
                    Hubungi Admin
                </a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Kenapa Memilih Dazry Harapan untuk Bisnis Anda?</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Kami menawarkan solusi terbaik untuk kebutuhan bahan kimia laundry Anda dengan pelayanan terpercaya sejak 2015.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift text-center">
                    <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-box-open text-blue-800 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-blue-800 mb-3">Tanpa Minimal Order</h3>
                    <p class="text-gray-600">Bebas order berapapun sesuai kebutuhan usaha Anda tanpa minimum pembelian.</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift text-center">
                    <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-tags text-blue-800 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-blue-800 mb-3">Harga Terjangkau & Transparan</h3>
                    <p class="text-gray-600">Harga langsung dari pabrik tanpa perantara, memberikan harga terbaik untuk Anda.</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift text-center">
                    <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-industry text-blue-800 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-blue-800 mb-3">Supplier Tangan Pertama</h3>
                    <p class="text-gray-600">Langsung dari pusat produksi, menjamin kualitas dan ketersediaan stok produk.</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift text-center">
                    <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-shipping-fast text-blue-800 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-blue-800 mb-3">Pengiriman Cepat & Bergaransi</h3>
                    <p class="text-gray-600">Pengiriman ke seluruh Indonesia dengan garansi produk sampai dengan aman.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Preview Section -->
    <section id="produk" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Produk Unggulan</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Kami menyediakan berbagai varian produk berkualitas tinggi untuk membantu usaha Anda cuan maksimal!</p>
            </div>
            
            @if($featuredProducts->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach($featuredProducts as $product)
                        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover-lift">
                            <div class="h-48 bg-blue-100 flex items-center justify-center relative">
                                @if($product->gambar)
                                    <img src="{{ asset('images/') }}/{{ $product->gambar }}" alt="{{ $product->nama_produk }}" class="w-full h-full object-cover">
                                @else
                                    <i class="fas fa-{{ $product->is_bahan_baku ? 'flask' : 'spray-can' }} text-blue-800 text-6xl"></i>
                                @endif
                                @if($product->is_discounted)
                                    <div class="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
                                        -{{ $product->persen_diskon }}%
                                    </div>
                                @endif
                                @if($product->rating >= 4.5)
                                    <div class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded text-xs font-bold">
                                        <i class="fas fa-star mr-1"></i> {{ number_format($product->rating, 1) }}
                                    </div>
                                @endif
                            </div>
                            <div class="p-6">
                                <span class="text-sm text-gray-500">{{ $product->kategori_nama ?? $product->jenis_produk }}</span>
                                <h3 class="text-xl font-bold text-blue-800 my-2">{{ $product->nama_produk }}</h3>
                                <p class="text-gray-600 mb-4 line-clamp-2">{{ $product->deskripsi_pendek ?: Str::limit($product->deskripsi, 100) }}</p>
                                
                                <div class="flex justify-between items-center mb-4">
                                    <div>
                                        @if($product->is_discounted)
                                            <span class="text-lg font-bold text-blue-800">Rp {{ number_format($product->harga, 0, ',', '.') }}</span>
                                            <span class="text-sm text-gray-500 line-through ml-2">Rp {{ number_format($product->harga_diskon, 0, ',', '.') }}</span>
                                        @else
                                            <span class="text-lg font-bold text-blue-800">Rp {{ number_format($product->harga, 0, ',', '.') }}</span>
                                        @endif
                                        <p class="text-sm text-gray-500">{{ $product->satuan }}</p>
                                    </div>
                                    
                                    <span class="text-xs px-2 py-1 rounded-full {{ $product->is_in_stock ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $product->is_in_stock ? 'Stok Tersedia' : 'Stok Habis' }}
                                    </span>
                                </div>
                                
                                <a href="" class="inline-block w-full bg-blue-800 hover:bg-blue-900 text-white font-medium py-2 px-6 rounded-lg text-center">
                                    Detail Produk
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <div class="text-center mt-12">
                    <a href="" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-lg text-lg">
                        Lihat Semua Produk <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            @else
                <div class="text-center py-12">
                    <i class="fas fa-box-open text-gray-400 text-6xl mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-700 mb-2">Belum Ada Produk Unggulan</h3>
                    <p class="text-gray-600">Produk unggulan akan segera tersedia.</p>
                </div>
            @endif
        </div>
    </section>

    <!-- Best Seller Products -->
    @if($bestSellers->count() > 0)
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Produk Terlaris</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Produk pilihan pelanggan dengan kualitas terbaik dan harga kompetitif.</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($bestSellers as $product)
                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="relative">
                            @if($product->gambar)
                                <img src="{{ asset('images/') }}/{{ $product->gambar }}" alt="{{ $product->nama_produk }}" class="w-full h-48 object-cover">
                            @else
                                <div class="w-full h-48 bg-blue-100 flex items-center justify-center">
                                    <i class="fas fa-{{ $product->is_bahan_baku ? 'flask' : 'spray-can' }} text-blue-800 text-5xl"></i>
                                </div>
                            @endif
                            <div class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded text-xs font-bold">
                                <i class="fas fa-fire mr-1"></i> Terlaris
                            </div>
                        </div>
                        
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                                    {{ $product->kategori_nama ?? $product->jenis_produk }}
                                </span>
                                <span class="text-xs text-green-600 font-medium">
                                    Terjual {{ number_format($product->jumlah_terjual) }}
                                </span>
                            </div>
                            
                            <h3 class="font-bold text-gray-800 mb-2 line-clamp-1">{{ $product->nama_produk }}</h3>
                            <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $product->deskripsi_pendek ?: Str::limit($product->deskripsi, 80) }}</p>
                            
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-lg font-bold text-blue-800">Rp {{ number_format($product->harga, 0, ',', '.') }}</span>
                                    <p class="text-xs text-gray-500">{{ $product->satuan }}</p>
                                </div>
                                
                                <a href="" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                    Detail <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Discounted Products -->
    @if($discountedProducts->count() > 0)
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Produk Diskon</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Raih kesempatan hemat dengan produk diskon spesial dari Jujura.</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($discountedProducts as $product)
                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow border border-red-100">
                        <div class="relative">
                            @if($product->gambar)
                                <img src="{{ asset('images/') }}/{{ $product->gambar }}" alt="{{ $product->nama_produk }}" class="w-full h-48 object-cover">
                            @else
                                <div class="w-full h-48 bg-red-50 flex items-center justify-center">
                                    <i class="fas fa-{{ $product->is_bahan_baku ? 'flask' : 'spray-can' }} text-red-800 text-5xl"></i>
                                </div>
                            @endif
                            <div class="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
                                -{{ $product->persen_diskon }}%
                            </div>
                        </div>
                        
                        <div class="p-4">
                            <h3 class="font-bold text-gray-800 mb-2 line-clamp-1">{{ $product->nama_produk }}</h3>
                            
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm mr-2">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span class="text-gray-600 text-sm">{{ number_format($product->rating, 1) }}</span>
                            </div>
                            
                            <div class="mb-3">
                                <span class="text-lg font-bold text-red-600">Rp {{ number_format($product->harga, 0, ',', '.') }}</span>
                                <span class="text-sm text-gray-500 line-through ml-2">Rp {{ number_format($product->harga_diskon, 0, ',', '.') }}</span>
                                <p class="text-xs text-gray-500 mt-1">Hemat Rp {{ number_format($product->harga_diskon - $product->harga, 0, ',', '.') }}</p>
                            </div>
                            
                            <a href="" class="block w-full bg-red-600 hover:bg-red-700 text-white text-center py-2 px-4 rounded-lg text-sm font-medium">
                                Beli Sekarang
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Testimonials Section -->
    <section class="py-16 bg-gradient-to-br from-blue-50 to-gray-100">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Testimoni Pelanggan</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Sudah dipercaya lebih dari 1000 pengusaha laundry sejak 2015. Sekarang giliran Anda membuktikan kualitas Dazry Harapan !</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($testimonials as $testimonial)
                    <div class="bg-white p-8 rounded-xl shadow-lg">
                        <div class="text-yellow-400 text-2xl mb-4">
                            <i class="fas fa-quote-left"></i>
                        </div>
                        <p class="text-gray-700 italic mb-6">"{{ $testimonial['text'] }}"</p>
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-user text-blue-800"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-blue-800">{{ $testimonial['author'] }}</h4>
                                <p class="text-gray-500 text-sm">{{ $testimonial['role'] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-blue-800 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Siap Memulai Bisnis Laundry Anda?</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">Bergabunglah dengan lebih dari 1000 pengusaha laundry yang telah mempercayakan kebutuhan bahan kimia mereka pada Jujura.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('hubung-kami') }}" class="bg-white hover:bg-gray-100 text-blue-800 font-bold py-3 px-8 rounded-lg text-lg">
                    Konsultasi Gratis
                </a>
                <a href="https://wa.me/6285260973410" target="_blank" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-lg flex items-center justify-center">
                    <i class="fab fa-whatsapp mr-2"></i> WhatsApp Sekarang
                </a>
            </div>
        </div>
    </section>

    
@endsection