@extends('layouts.frontend')

@section('content')
    <!-- Hero / Slider -->
    <div class="relative bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-20 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Selamat Datang di DazryApp</h1>
            <p class="text-lg md:text-xl mb-6">Produksi Parfum Laundry, Sabun, dan Bahan Baku Berkualitas</p>
            <a href="{{ route('produk') }}"
               class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold shadow hover:bg-gray-100">
                Lihat Produk
            </a>
        </div>
    </div>

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

        <!-- Grid Produk -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            @foreach($produkUnggulan as $produk)
                <div class="bg-white shadow rounded-lg overflow-hidden hover:shadow-lg transition">
                    <img src="{{ $produk->gambar_url ?? 'https://placehold.co/300x200' }}" 
                         alt="{{ $produk->nama }}" 
                         class="w-full h-40 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-semibold text-gray-800">{{ $produk->nama }}</h3>
                        <p class="text-sm text-gray-500">{{ ucfirst($produk->kategori) }}</p>
                        <p class="text-blue-600 font-bold mt-2">Rp {{ number_format($produk->harga, 0, ',', '.') }}</p>
                        <a href="{{ route('produk.detail', $produk->id) }}" 
                           class="mt-3 inline-block text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded">
                            Detail
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Per kategori -->
    <div class="mt-16">
        <h2 class="text-2xl font-bold mb-6 text-gray-800">Produk Berdasarkan Kategori</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            @foreach($kategori as $namaKategori => $produks)
                <div class="bg-white shadow rounded-lg p-6">
                    <h3 class="text-xl font-semibold mb-4">{{ ucfirst($namaKategori) }}</h3>
                    <div class="grid grid-cols-2 gap-4">
                        @foreach($produks as $produk)
                            <div class="border rounded-lg p-3 hover:shadow transition">
                                <h4 class="font-medium text-gray-700">{{ $produk->nama }}</h4>
                                <p class="text-sm text-gray-500">Rp {{ number_format($produk->harga, 0, ',', '.') }}</p>
                            </div>
                        @endforeach
                    </div>
                    <a href="{{ route('produk.kategori', $namaKategori) }}" 
                       class="mt-4 inline-block text-blue-600 hover:underline">
                        Lihat semua {{ ucfirst($namaKategori) }}
                    </a>
                </div>
            @endforeach
        </div>
    </div>
@endsection