@extends('layouts.store')

@section('content')

<!-- Navbar -->
<nav x-data="{ open: false }" class="bg-white shadow sticky top-0 z-50">

    <div class="max-w-7xl mx-auto px-6 py-4">

        <div class="flex justify-between items-center">

            <h1 class="text-3xl font-bold text-blue-600">
                Kol7aga
            </h1>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center gap-6">

                <a href="#" class="hover:text-blue-600">Home</a>
                <a href="#" class="hover:text-blue-600">Products</a>
                <a href="#" class="hover:text-blue-600">Categories</a>
                <a href="#" class="hover:text-blue-600">Contact</a>

                @guest
                    <a href="{{ route('login') }}" class="text-blue-600">
                        Login
                    </a>

                    <a href="{{ route('register') }}"
                        class="bg-blue-600 text-white px-4 py-2 rounded-lg">
                        Register
                    </a>
                @endguest

                @auth
                    <a href="{{ route('dashboard') }}"
                        class="bg-blue-600 text-white px-4 py-2 rounded-lg">
                        Dashboard
                    </a>
                @endauth

            </div>

            <!-- Mobile Button -->
            <button
                @click="open = !open"
                class="md:hidden text-3xl">

                ☰

            </button>

        </div>

        <!-- Mobile Menu -->
        <div
            x-show="open"
            x-transition
            class="md:hidden mt-6 space-y-4">

            <a href="#" class="block hover:text-blue-600">Home</a>
            <a href="#" class="block hover:text-blue-600">Products</a>
            <a href="#" class="block hover:text-blue-600">Categories</a>
            <a href="#" class="block hover:text-blue-600">Contact</a>

            @guest
                <a href="{{ route('login') }}" class="block text-blue-600">
                    Login
                </a>

                <a href="{{ route('register') }}"
                    class="block bg-blue-600 text-white px-4 py-2 rounded-lg text-center">
                    Register
                </a>
            @endguest

            @auth
                <a href="{{ route('dashboard') }}"
                    class="block bg-blue-600 text-white px-4 py-2 rounded-lg text-center">
                    Dashboard
                </a>
            @endauth

        </div>

    </div>

</nav>

<!-- Hero -->
<section class="bg-gray-100 py-24">

    <div class="max-w-7xl mx-auto px-6 text-center">

        <h1 class="text-6xl font-extrabold">
            Welcome to <span class="text-blue-600">Kol7aga</span>
        </h1>

        <p class="mt-6 text-gray-600 text-xl">
            Discover thousands of amazing products from trusted vendors.
        </p>

        <div class="mt-10 flex justify-center gap-4">

            <a href="#"
                class="bg-blue-600 text-white px-8 py-3 rounded-lg">
                Shop Now
            </a>

            <a href="#"
                class="border px-8 py-3 rounded-lg">
                Become a Vendor
            </a>

        </div>

    </div>

</section>

<!-- Categories -->
<section class="max-w-7xl mx-auto py-20 px-6">

    <h2 class="text-4xl font-bold text-center mb-12">
        Categories
    </h2>

    <div class="grid md:grid-cols-3 lg:grid-cols-6 gap-6">

        @foreach(['Electronics','Fashion','Home','Sports','Beauty','Books'] as $category)

            <div class="bg-white rounded-xl shadow p-8 text-center hover:shadow-xl transition">

                <h3 class="font-bold text-lg">
                    {{ $category }}
                </h3>

            </div>

        @endforeach

    </div>

</section>

<!-- Featured Products -->
<section class="bg-gray-100 py-20">

    <div class="max-w-7xl mx-auto px-6">

        <h2 class="text-4xl font-bold text-center mb-12">
            Featured Products
        </h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">

            @for($i=1;$i<=4;$i++)

                <div class="bg-white rounded-xl shadow overflow-hidden">

                    <div class="h-56 bg-gray-200"></div>

                    <div class="p-6">

                        <h3 class="font-bold text-xl">
                            Product {{ $i }}
                        </h3>

                        <p class="mt-2 text-gray-500">
                            Product description
                        </p>

                        <p class="mt-4 font-bold text-blue-600">
                            100 EGP
                        </p>

                        <button
                            class="mt-5 w-full bg-blue-600 text-white py-2 rounded-lg">
                            Add To Cart
                        </button>

                    </div>

                </div>

            @endfor

        </div>

    </div>

</section>

<!-- Why Choose Us -->
<section class="py-20">

    <div class="max-w-7xl mx-auto px-6">

        <h2 class="text-4xl font-bold text-center mb-12">
            Why Choose Kol7aga?
        </h2>

        <div class="grid md:grid-cols-3 gap-8">

            <div class="bg-white shadow rounded-xl p-8 text-center">
                🚚
                <h3 class="font-bold text-xl mt-4">Fast Delivery</h3>
            </div>

            <div class="bg-white shadow rounded-xl p-8 text-center">
                🔒
                <h3 class="font-bold text-xl mt-4">Secure Payment</h3>
            </div>

            <div class="bg-white shadow rounded-xl p-8 text-center">
                ⭐
                <h3 class="font-bold text-xl mt-4">Trusted Vendors</h3>
            </div>

        </div>

    </div>

</section>

<!-- Vendors -->
<section class="bg-gray-100 py-20">

    <div class="max-w-7xl mx-auto px-6">

        <h2 class="text-4xl font-bold text-center mb-12">
            Top Vendors
        </h2>

        <div class="grid md:grid-cols-4 gap-8">

            @for($i=1;$i<=4;$i++)

                <div class="bg-white rounded-xl shadow p-8 text-center">

                    <div class="w-24 h-24 rounded-full bg-gray-300 mx-auto"></div>

                    <h3 class="mt-5 font-bold">
                        Vendor {{ $i }}
                    </h3>

                </div>

            @endfor

        </div>

    </div>

</section>

<!-- Testimonials -->
<section class="py-20">

    <div class="max-w-5xl mx-auto px-6 text-center">

        <h2 class="text-4xl font-bold mb-12">
            What Our Customers Say
        </h2>

        <div class="bg-white shadow rounded-xl p-10">

            <p class="text-gray-600 italic">
                "Amazing marketplace with excellent vendors and products."
            </p>

            <h3 class="mt-6 font-bold">
                John Doe
            </h3>

        </div>

    </div>

</section>

<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">

    <div class="max-w-7xl mx-auto px-6 text-center">

        <h2 class="text-3xl font-bold">
            Kol7aga
        </h2>

        <p class="mt-4 text-gray-400">
            Multi Vendor Marketplace built with Laravel
        </p>

        <div class="mt-8 flex justify-center gap-8">

            <a href="#">Home</a>
            <a href="#">Products</a>
            <a href="#">Categories</a>
            <a href="#">Contact</a>

        </div>

        <p class="mt-10 text-gray-500">
            © {{ date('Y') }} Kol7aga. All rights reserved.
        </p>

    </div>

</footer>

@endsection