@extends('layouts.app')

@section('title', 'À propos — Artisanal')

@section('content')

{{-- ── Hero ── --}}
<section class="relative text-white overflow-hidden" style="min-height: 420px;">
    {{-- Image de fond --}}
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80&fit=crop&crop=center"
             alt="Artisan au travail"
             class="w-full h-full object-cover object-center">
        <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(107,66,38,0.90) 0%, rgba(107,66,38,0.65) 60%, rgba(0,0,0,0.30) 100%);"></div>
    </div>
    {{-- Contenu --}}
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 text-center">
        <span class="inline-block bg-white/15 border border-white/30 text-white text-sm font-medium px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm">
            <i class="fas fa-heart mr-1 text-red-300"></i> Notre histoire
        </span>
        <h1 class="font-serif text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Notre Histoire</h1>
        <p class="text-white/90 text-lg max-w-xl mx-auto drop-shadow">
            Une passion transmise de génération en génération.
        </p>
    </div>
    {{-- Wave divider --}}
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 50" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 50L1440 50L1440 15C1200 50 960 0 720 15C480 30 240 0 0 15L0 50Z" fill="#FDF6EC"/>
        </svg>
    </div>
</section>

{{-- ── Notre histoire ── --}}
<section class="py-16 bg-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <span class="text-secondary font-medium text-sm uppercase tracking-wider">Qui sommes-nous ?</span>
                <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">
                    L'Artisanat au cœur de notre identité
                </h2>
                <div class="space-y-4 text-gray-600 leading-relaxed">
                    <p>
                        Fondée avec amour et passion, notre maison artisanale est née d'un désir profond de préserver et valoriser le savoir-faire traditionnel marocain. Chaque création est le fruit de longues heures de travail minutieux.
                    </p>
                    <p>
                        Nos artisans, héritiers de techniques ancestrales, perpétuent des gestes millénaires pour vous offrir des pièces uniques alliant esthétique et authenticité. Nous croyons que l'artisanat est une forme d'art vivant.
                    </p>
                    <p>
                        Nous travaillons en étroite collaboration avec des producteurs locaux pour sélectionner les meilleurs matériaux naturels : laine, cuir, bois, poterie… tout est pensé pour durer et s'embellir avec le temps.
                    </p>
                </div>
                <div class="flex gap-6 mt-8">
                    <div class="text-center">
                        <div class="font-serif text-4xl font-bold text-primary">10+</div>
                        <div class="text-sm text-gray-500 mt-1">Ans d'expérience</div>
                    </div>
                    <div class="text-center">
                        <div class="font-serif text-4xl font-bold text-primary">500+</div>
                        <div class="text-sm text-gray-500 mt-1">Clients fidèles</div>
                    </div>
                    <div class="text-center">
                        <div class="font-serif text-4xl font-bold text-primary">100%</div>
                        <div class="text-sm text-gray-500 mt-1">Fait main</div>
                    </div>
                </div>
            </div>
            <div class="relative">
                <div class="bg-white rounded-3xl shadow-xl overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&h=450&fit=crop"
                         alt="Atelier artisanal" class="w-full h-80 object-cover">
                    <div class="p-6">
                        <p class="font-serif text-xl font-semibold text-gray-800 mb-2">"La perfection dans chaque détail"</p>
                        <p class="text-gray-500 text-sm">Notre atelier, où naissent vos créations préférées.</p>
                    </div>
                </div>
                <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-secondary rounded-2xl opacity-20"></div>
                <div class="absolute -top-4 -right-4 w-16 h-16 bg-primary rounded-full opacity-20"></div>
            </div>
        </div>
    </div>
</section>

{{-- ── Nos valeurs ── --}}
<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">
            <h2 class="font-serif text-3xl font-bold text-gray-800">Nos Valeurs</h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach([
                ['fas fa-heart','Passion','Notre amour de l\'artisanat guide chaque geste et chaque création.'],
                ['fas fa-gem','Qualité','Des matériaux soigneusement sélectionnés pour des pièces qui durent.'],
                ['fas fa-seedling','Durabilité','Respect de l\'environnement et des ressources naturelles.'],
                ['fas fa-users','Communauté','Soutien aux artisans locaux et valorisation du talent marocain.']
            ] as [$icon, $title, $desc])
            <div class="bg-cream rounded-2xl p-6 text-center border border-orange-100">
                <div class="w-14 h-14 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm">
                    <i class="{{ $icon }} text-primary text-2xl"></i>
                </div>
                <h3 class="font-serif text-lg font-bold text-gray-800 mb-2">{{ $title }}</h3>
                <p class="text-gray-500 text-sm leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── Réseaux sociaux ── --}}
@if($socialLinks->count())
<section class="py-16 bg-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-serif text-3xl font-bold text-gray-800 mb-4">Suivez notre aventure</h2>
        <p class="text-gray-500 mb-8">Rejoignez notre communauté sur les réseaux sociaux.</p>
        <div class="flex flex-wrap justify-center gap-4">
            @foreach($socialLinks as $link)
            <a href="{{ $link->url }}" target="_blank" rel="noopener"
               class="flex items-center gap-3 bg-white px-6 py-3 rounded-full shadow-sm hover:shadow-md border border-gray-100 hover:border-primary transition-all group">
                <i class="{{ $link->icon }} text-primary text-xl group-hover:scale-110 transition-transform"></i>
                <span class="font-medium text-gray-700">{{ $link->platform }}</span>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── CTA ── --}}
<section class="py-12 bg-primary text-white text-center">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="font-serif text-2xl md:text-3xl font-bold mb-4">Découvrez nos créations</h2>
        <a href="{{ route('products') }}"
           class="inline-flex items-center gap-2 bg-white text-primary font-semibold px-8 py-3 rounded-full hover:bg-secondary-light transition-all">
            <i class="fas fa-shopping-bag"></i> Voir les produits
        </a>
    </div>
</section>

@endsection