@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <!-- Hero Section -->
    <div class="relative bg-white dark:bg-gray-800 overflow-hidden">
        <div class="max-w-7xl mx-auto">
            <div class="relative z-10 pb-8 bg-white dark:bg-gray-800 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
                <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
                    <div class="sm:text-center lg:text-left">
                        <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
                            <span class="block">Welcome to</span>
                            <span class="block text-blue-600 dark:text-blue-400">Little Loop</span>
                        </h1>
                        <p class="mt-3 text-base text-gray-500 dark:text-gray-400 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                            Discover amazing products and categories in our store. Shop with confidence and enjoy the best shopping experience.
                        </p>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Categories Section -->
    <div class="py-12 bg-white dark:bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                    Our Categories
                </h2>
                <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                    Browse through our wide range of categories and find what you're looking for.
                </p>
            </div>

            <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                @foreach($categories as $category)
                    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105">
                        @if($category->image)
                            <div class="relative h-48">
                                <img class="w-full h-full object-cover" src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name_en }}">
                                @if($category->is_featured)
                                    <div class="absolute top-2 right-2">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                                            Featured
                                        </span>
                                    </div>
                                @endif
                            </div>
                        @endif
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $category->name_en }}</h3>
                            <p class="mt-2 text-gray-500 dark:text-gray-400">{{ $category->name_ar }}</p>
                            @if($category->description_en)
                                <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">{{ Str::limit($category->description_en, 100) }}</p>
                            @endif

                            @if($category->children->isNotEmpty())
                                <div class="mt-4">
                                    <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Subcategories</h4>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($category->children as $subcategory)
                                            <a href="{{ route('categories.show', $subcategory) }}" 
                                               class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors duration-200">
                                                {{ $subcategory->name_en }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="mt-6">
                                <a href="{{ route('categories.show', $category) }}" 
                                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
                                    View Category
                                    <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Featured Products Section -->
    <div class="py-12 bg-gray-50 dark:bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                    Featured Products
                </h2>
                <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                    Check out our featured products and find the best deals.
                </p>
            </div>

            <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
                @foreach($featuredProducts as $product)
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105">
                        @if($product->images->isNotEmpty())
                            <div class="relative h-48">
                                <img class="w-full h-full object-cover" src="{{ asset('storage/' . $product->images->first()->path) }}" alt="{{ $product->name_en }}">
                                @if($product->is_featured)
                                    <div class="absolute top-2 right-2">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                                            Featured
                                        </span>
                                    </div>
                                @endif
                            </div>
                        @endif
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $product->name_en }}</h3>
                            <p class="mt-2 text-gray-500 dark:text-gray-400">{{ $product->name_ar }}</p>
                            <div class="mt-4 flex items-center justify-between">
                                <span class="text-2xl font-bold text-gray-900 dark:text-white">${{ number_format($product->price, 2) }}</span>
                                @if($product->compare_price)
                                    <span class="text-lg text-gray-500 dark:text-gray-400 line-through">${{ number_format($product->compare_price, 2) }}</span>
                                @endif
                            </div>
                            <div class="mt-6">
                                <a href="{{ route('products.show', $product) }}" 
                                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
                                    View Product
                                    <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection