@extends('layouts.app')

@section('title', 'Accueil — Artisanal')
@section('description', 'Découvrez nos créations artisanales faites à la main avec passion.')

@section('content')

{{-- ── Hero Section ── --}}
<section class="relative text-white overflow-hidden" style="min-height: 580px;">
    {{-- Image de fond --}}
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1606722590583-6951b5ea92ad?w=1600&q=80&fit=crop"
             alt="Artisanat marocain"
             class="w-full h-full object-cover object-center">
        {{-- Dégradé sombre pour la lisibilité --}}
        <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(107,66,38,0.88) 0%, rgba(139,94,60,0.72) 50%, rgba(0,0,0,0.40) 100%);"></div>
    </div>

    {{-- Contenu --}}
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-28 md:py-40">
        <div class="max-w-2xl">
            <span class="inline-block bg-white/20 text-white text-sm font-medium px-4 py-1.5 rounded-full mb-6 backdrop-blur-sm border border-white/30">
                <i class="fas fa-star mr-1 text-yellow-300"></i> 100% Fait main
            </span>
            <h1 class="font-serif text-4xl md:text-6xl font-bold leading-tight mb-6 drop-shadow-lg">
                L'Art de <span class="text-yellow-300">l'Artisanat</span><br>à portée de main
            </h1>
            <p class="text-lg md:text-xl text-white/90 leading-relaxed mb-8 drop-shadow">
                Des créations uniques, façonnées avec passion et savoir-faire traditionnel. Chaque pièce raconte une histoire, la vôtre.
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="{{ route('products') }}"
                   class="inline-flex items-center justify-center gap-2 bg-white text-primary font-semibold px-8 py-3.5 rounded-full hover:bg-yellow-100 transition-all shadow-xl hover:shadow-2xl">
                    <i class="fas fa-shopping-bag"></i> Découvrir nos produits
                </a>
                <a href="{{ route('about') }}"
                   class="inline-flex items-center justify-center gap-2 border-2 border-white/60 text-white font-semibold px-8 py-3.5 rounded-full hover:border-white hover:bg-white/15 backdrop-blur-sm transition-all">
                    <i class="fas fa-play-circle"></i> Notre histoire
                </a>
            </div>
        </div>
    </div>

    {{-- Wave divider --}}
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 60L1440 60L1440 20C1200 60 960 0 720 20C480 40 240 0 0 20L0 60Z" fill="#FDF6EC"/>
        </svg>
    </div>
</section>

{{-- ── Statistiques ── --}}
<section class="bg-cream py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            @foreach([['fas fa-box-open','100+','Produits artisanaux'],['fas fa-smile','500+','Clients satisfaits'],['fas fa-award','10+','Années d\'expérience'],['fas fa-map-marker-alt','15+','Wilayas livrées']] as [$icon, $number, $label])
            <div class="bg-white rounded-2xl p-6 text-center shadow-sm border border-orange-100">
                <div class="w-12 h-12 bg-cream rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="{{ $icon }} text-primary text-xl"></i>
                </div>
                <div class="font-serif text-3xl font-bold text-primary">{{ $number }}</div>
                <div class="text-gray-500 text-sm mt-1">{{ $label }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── Catégories ── --}}
@if($categories->count())
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-secondary font-medium text-sm uppercase tracking-wider">Collections</span>
            <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2">Nos Catégories</h2>
            <p class="text-gray-500 mt-3 max-w-xl mx-auto">Explorez notre gamme de créations artisanales organisées par univers.</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-{{ min($categories->count(), 4) }} gap-5">
            @foreach($categories as $category)
            <a href="{{ route('products', ['category' => $category->slug]) }}"
               class="group bg-cream-dark rounded-2xl p-6 text-center hover:bg-primary hover:text-white transition-all duration-300 card-hover border border-orange-100">
                <div class="w-14 h-14 bg-white rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-white/20 transition-colors">
                    <i class="{{ $category->icon ?? 'fas fa-star' }} text-primary text-2xl group-hover:text-white transition-colors"></i>
                </div>
                <h3 class="font-semibold text-gray-800 group-hover:text-white transition-colors">{{ $category->name }}</h3>
                <p class="text-sm text-gray-500 group-hover:text-white/70 transition-colors mt-1">{{ $category->active_products_count }} produit(s)</p>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── Produits récents ── --}}
@if($recentProducts->count())
<section class="py-16 bg-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12">
            <div>
                <span class="text-secondary font-medium text-sm uppercase tracking-wider">Nouveautés</span>
                <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2">Produits Récents</h2>
                <p class="text-gray-500 mt-2 text-sm">Les {{ $recentProducts->count() }} dernières créations ajoutées à notre catalogue.</p>
            </div>
            <a href="{{ route('products') }}"
               class="mt-4 md:mt-0 inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-primary-dark transition-all shadow-sm hover:shadow-md">
                Voir tous les produits <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($recentProducts as $product)
            @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── Pourquoi nous choisir ── --}}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-secondary font-medium text-sm uppercase tracking-wider">Nos valeurs</span>
            <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2">Pourquoi Nous Choisir ?</h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach([
                ['fas fa-hand-holding-heart','Fait avec Amour','Chaque produit est confectionné à la main avec soin et passion, garantissant une qualité exceptionnelle.'],
                ['fas fa-leaf','Matériaux Naturels','Nous utilisons uniquement des matériaux naturels et durables, respectueux de l\'environnement.'],
                ['fas fa-truck','Livraison Rapide','Livraison soignée dans tout le Maroc, votre commande arrive dans les meilleures conditions.']
            ] as [$icon, $title, $desc])
            <div class="text-center group">
                <div class="w-20 h-20 bg-cream rounded-full flex items-center justify-center mx-auto mb-5 group-hover:bg-primary transition-all duration-300">
                    <i class="{{ $icon }} text-primary text-3xl group-hover:text-white transition-colors"></i>
                </div>
                <h3 class="font-serif text-xl font-bold text-gray-800 mb-3">{{ $title }}</h3>
                <p class="text-gray-500 leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── CTA Section ── --}}
<section class="hero-gradient text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4">Prêt à commander ?</h2>
        <p class="text-white/80 text-lg mb-8 max-w-xl mx-auto">
            Parcourez notre catalogue et trouvez le produit artisanal qui vous correspond.
        </p>
        <a href="{{ route('products') }}"
           class="inline-flex items-center gap-2 bg-white text-primary font-semibold px-10 py-4 rounded-full hover:bg-secondary-light transition-all shadow-lg hover:shadow-xl text-lg">
            <i class="fas fa-shopping-bag"></i> Voir tous nos produits
        </a>
    </div>
</section>

@endsection