@extends('layouts.dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Hero Section -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-[#2C7A7B] mb-4">Selamat Datang di ElektroStore</h1>
        <p class="text-lg text-gray-600 mb-8">Temukan berbagai produk elektronik berkualitas dengan harga terbaik</p>
        
        @guest
        <div class="flex justify-center space-x-4">
            <a href="{{ route('login') }}" class="btn-primary">
                <i class="fas fa-sign-in-alt mr-2"></i>
                Masuk
            </a>
            <a href="{{ route('register') }}" class="btn-secondary">
                <i class="fas fa-user-plus mr-2"></i>
                Daftar
            </a>
        </div>
        @endguest
    </div>

    <!-- Features Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
        <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-[#2C7A7B]/10 rounded-full">
                <i class="fas fa-shopping-cart text-2xl text-[#2C7A7B]"></i>
            </div>
            <h3 class="text-xl font-semibold text-center mb-2">Belanja Mudah</h3>
            <p class="text-gray-600 text-center">Nikmati pengalaman belanja yang mudah dan aman dengan berbagai metode pembayaran</p>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-[#2C7A7B]/10 rounded-full">
                <i class="fas fa-truck text-2xl text-[#2C7A7B]"></i>
            </div>
            <h3 class="text-xl font-semibold text-center mb-2">Pengiriman Cepat</h3>
            <p class="text-gray-600 text-center">Pengiriman ke seluruh Indonesia dengan berbagai pilihan kurir terpercaya</p>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-[#2C7A7B]/10 rounded-full">
                <i class="fas fa-headset text-2xl text-[#2C7A7B]"></i>
            </div>
            <h3 class="text-xl font-semibold text-center mb-2">Layanan 24/7</h3>
            <p class="text-gray-600 text-center">Customer service kami siap membantu Anda kapan saja</p>
        </div>
    </div>

    <!-- Categories Preview -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold text-[#2C7A7B] mb-6">Kategori Produk</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ route('barang.index', ['kategori' => 'Lampu']) }}" class="bg-white p-4 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-lightbulb text-3xl text-[#2C7A7B] mb-2"></i>
                <h3 class="font-semibold">Lampu</h3>
            </a>
            <a href="{{ route('barang.index', ['kategori' => 'Kipas']) }}" class="bg-white p-4 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-fan text-3xl text-[#2C7A7B] mb-2"></i>
                <h3 class="font-semibold">Kipas</h3>
            </a>
            <a href="{{ route('barang.index', ['kategori' => 'Kulkas']) }}" class="bg-white p-4 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-snowflake text-3xl text-[#2C7A7B] mb-2"></i>
                <h3 class="font-semibold">Kulkas</h3>
            </a>
            <a href="{{ route('barang.index', ['kategori' => 'TV']) }}" class="bg-white p-4 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-tv text-3xl text-[#2C7A7B] mb-2"></i>
                <h3 class="font-semibold">TV</h3>
            </a>
        </div>
    </div>

    <!-- Why Choose Us -->
    <div class="bg-white p-8 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold text-[#2C7A7B] mb-6">Mengapa Memilih Kami?</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="flex items-start space-x-4">
                <i class="fas fa-check-circle text-[#2C7A7B] text-xl mt-1"></i>
                <div>
                    <h3 class="font-semibold mb-2">Produk Original</h3>
                    <p class="text-gray-600">Semua produk kami dijamin 100% original dengan garansi resmi</p>
                </div>
            </div>
            <div class="flex items-start space-x-4">
                <i class="fas fa-check-circle text-[#2C7A7B] text-xl mt-1"></i>
                <div>
                    <h3 class="font-semibold mb-2">Harga Bersaing</h3>
                    <p class="text-gray-600">Dapatkan harga terbaik dengan berbagai promo menarik</p>
                </div>
            </div>
            <div class="flex items-start space-x-4">
                <i class="fas fa-check-circle text-[#2C7A7B] text-xl mt-1"></i>
                <div>
                    <h3 class="font-semibold mb-2">Pembayaran Aman</h3>
                    <p class="text-gray-600">Berbagai metode pembayaran yang aman dan terpercaya</p>
                </div>
            </div>
            <div class="flex items-start space-x-4">
                <i class="fas fa-check-circle text-[#2C7A7B] text-xl mt-1"></i>
                <div>
                    <h3 class="font-semibold mb-2">Layanan Pelanggan</h3>
                    <p class="text-gray-600">Customer service kami siap membantu Anda 24/7</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection