@extends('layouts.app')
@section('title', 'À propos de nous')

@section('content')

{{-- ═══ ABOUT BANNER ═══ --}}
<div class="relative overflow-hidden min-h-[260px] md:min-h-[300px] flex items-center">
    {{-- Background image --}}
    <div class="absolute inset-0">
        <img src="{{ asset('images/about-banner.jpg') }}"
             alt="À propos d'AdamService"
             class="w-full h-full object-cover object-center"
             onerror="this.style.display='none'">
        <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-black/50"></div>
    </div>

    {{-- Decorative blobs --}}
    <div class="absolute right-0 top-0 w-72 h-72 bg-amber-400/10 rounded-full translate-x-1/3 -translate-y-1/3 blur-3xl pointer-events-none"></div>
    <div class="absolute left-0 bottom-0 w-56 h-56 bg-blue-300/10 rounded-full translate-y-1/3 blur-2xl pointer-events-none"></div>

    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 text-center">
        <nav class="flex items-center justify-center gap-2 text-blue-300 text-xs mb-4">
            <a href="{{ route('home') }}" class="hover:text-amber-400 transition-colors">Accueil</a>
            <i class="fas fa-chevron-right text-[10px]"></i>
            <span class="text-white font-medium">À propos</span>
        </nav>
        <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight drop-shadow-lg mb-3">
            À Propos de <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500">Nous</span>
        </h1>
        <p class="text-blue-100 text-lg drop-shadow max-w-xl mx-auto">
            Votre partenaire de confiance pour les accessoires mobiles
        </p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">

    {{-- Story --}}
    <div class="grid md:grid-cols-2 gap-12 items-center mb-20">
        <div>
            <span class="text-blue-600 font-semibold text-sm uppercase tracking-wide">Notre Histoire</span>
            <h2 class="text-3xl font-extrabold text-gray-900 mt-2 mb-4">Adam Service, Votre Boutique Mobile</h2>
            <p class="text-gray-600 leading-relaxed mb-4">
                Fondée avec la passion de rendre les accessoires mobiles de qualité accessibles à tous, Adam Service est devenue une référence incontournable dans le secteur des accessoires pour téléphones mobiles en Algérie.
            </p>
            <p class="text-gray-600 leading-relaxed mb-4">
                Notre équipe de passionnés sélectionne avec soin chaque produit pour vous garantir qualité, durabilité et rapport qualité-prix exceptionnel. Des coques protectrices aux chargeurs rapides, en passant par les batteries haute capacité et les écouteurs premium, nous avons tout ce dont vous avez besoin.
            </p>
            <p class="text-gray-600 leading-relaxed">
                Nous proposons des produits compatibles avec tous les modèles iPhone et Android, pour que chaque client trouve exactement ce qu'il cherche.
            </p>
        </div>
        <div class="relative rounded-3xl overflow-hidden shadow-xl group">
            <img src="{{ asset('images/about-store.jpg') }}"
                 alt="Notre boutique AdamService"
                 class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500"
                 style="min-height: 340px;"
                 onerror="this.src='{{ asset('images/about-store3.jpg') }}'">
            {{-- Overlay badge --}}
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-blue-950/80 to-transparent p-6">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-amber-400 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-store text-amber-900 text-base"></i>
                    </div>
                    <div>
                        <p class="text-white font-bold text-base leading-tight">Adam Service</p>
                        <p class="text-amber-300 text-xs font-medium">Accessoires Mobile Premium</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20">
        @foreach([
            ['value' => '500+', 'label' => 'Produits en stock', 'icon' => 'box', 'color' => 'blue'],
            ['value' => '1000+', 'label' => 'Clients satisfaits', 'icon' => 'users', 'color' => 'green'],
            ['value' => '5 ans', 'label' => 'D\'expérience', 'icon' => 'calendar', 'color' => 'amber'],
            ['value' => '48h', 'label' => 'Délai de livraison', 'icon' => 'truck', 'color' => 'purple'],
        ] as $stat)
        <div class="bg-white rounded-2xl p-6 text-center shadow-sm border border-gray-100">
            <div class="w-12 h-12 mx-auto mb-3 bg-{{ $stat['color'] }}-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-{{ $stat['icon'] }} text-{{ $stat['color'] }}-600 text-xl"></i>
            </div>
            <div class="text-3xl font-extrabold text-gray-900">{{ $stat['value'] }}</div>
            <div class="text-sm text-gray-500 mt-1">{{ $stat['label'] }}</div>
        </div>
        @endforeach
    </div>

    {{-- Values --}}
    <div class="mb-16">
        <div class="text-center mb-10">
            <h2 class="text-3xl font-extrabold text-gray-900">Nos <span class="text-blue-700">Valeurs</span></h2>
            <p class="text-gray-500 mt-2">Ce qui nous guide au quotidien</p>
        </div>
        <div class="grid sm:grid-cols-3 gap-6">
            @foreach([
                ['icon' => 'gem', 'color' => 'blue', 'title' => 'Qualité', 'text' => 'Nous ne proposons que des produits testés et certifiés, pour votre tranquillité d\'esprit.'],
                ['icon' => 'handshake', 'color' => 'amber', 'title' => 'Confiance', 'text' => 'La relation de confiance avec nos clients est au cœur de tout ce que nous faisons.'],
                ['icon' => 'leaf', 'color' => 'green', 'title' => 'Responsabilité', 'text' => 'Nous nous engageons à proposer des produits durables et respectueux de l\'environnement.'],
            ] as $val)
            <div class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 text-center">
                <div class="w-16 h-16 mx-auto mb-4 bg-{{ $val['color'] }}-100 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-{{ $val['icon'] }} text-3xl text-{{ $val['color'] }}-600"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-900 mb-3">{{ $val['title'] }}</h3>
                <p class="text-gray-500 text-sm leading-relaxed">{{ $val['text'] }}</p>
            </div>
            @endforeach
        </div>
    </div>

    {{-- CTA --}}
    <div class="bg-gradient-to-r from-blue-700 to-blue-900 rounded-3xl p-10 text-center text-white">
        <h2 class="text-2xl font-extrabold mb-3">Prêt à explorer notre catalogue ?</h2>
        <p class="text-blue-200 mb-6">Découvrez des centaines d'accessoires mobiles pour iPhone et Android</p>
        <a href="{{ route('products') }}" class="btn-accent px-8 py-3 rounded-full font-semibold text-white inline-flex items-center gap-2">
            <i class="fas fa-shopping-bag"></i> Voir nos produits
        </a>
    </div>
</div>

@endsection