<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AKABLA IMMOBILIER Sarl | Site Officiel</title>
    <meta name="description" content="AKABLA IMMOBILIER Sarl: gestion immobilière, achat, location, vente, expertise et intermédiation foncière. Transactions fiables et sécurisées.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink: #0f172a;
            --muted: #475569;
            --surface: #f8fafc;
            --line: rgba(15, 23, 42, 0.08);
            --brand-from: #0284c7;
            --brand-to: #4f46e5;
            --hero-veil: linear-gradient(115deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 27, 75, 0.72) 42%, rgba(8, 145, 178, 0.45) 100%);
        }

        body {
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
            color: var(--ink);
            background:
                radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.12), transparent),
                radial-gradient(900px 500px at 100% 20%, rgba(99, 102, 241, 0.1), transparent),
                linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 40%, #f8fafc 100%);
            background-attachment: fixed;
        }

        .font-display {
            font-family: 'Fraunces', Georgia, serif;
        }

        .hero-overlay {
            background: var(--hero-veil);
        }

        .hero-text-shadow {
            text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
        }

        .eyebrow {
            letter-spacing: 0.22em;
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #0369a1;
        }

        .card-elevated {
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 20px 50px -20px rgba(15, 23, 42, 0.12);
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            border-radius: 9999px;
            padding: 0.75rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
            box-shadow: 0 10px 30px -8px rgba(14, 116, 144, 0.55);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
            box-shadow: 0 16px 36px -10px rgba(79, 70, 229, 0.45);
        }

        .btn-primary:focus-visible {
            outline: 2px solid #38bdf8;
            outline-offset: 3px;
        }

        .btn-hero-ghost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            padding: 0.75rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, 0.55);
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .btn-hero-ghost:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.75);
        }

        .btn-hero-ghost:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }

        .pattern-dots {
            background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .img-ring {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 25px 50px -12px rgba(15, 23, 42, 0.25);
        }

        .whatsapp-float {
            position: fixed;
            right: 1.25rem;
            bottom: 1.25rem;
            z-index: 60;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 9999px;
            background: #25d366;
            color: #fff;
            box-shadow: 0 10px 28px -6px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(15, 23, 42, 0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        .whatsapp-float:hover {
            transform: scale(1.06);
            filter: brightness(1.05);
            box-shadow: 0 14px 36px -8px rgba(37, 211, 102, 0.6), 0 6px 16px rgba(15, 23, 42, 0.18);
        }

        .whatsapp-float:focus-visible {
            outline: 2px solid #0ea5e9;
            outline-offset: 3px;
        }

        @media (min-width: 768px) {
            .whatsapp-float {
                right: 1.5rem;
                bottom: 1.5rem;
                width: 3.75rem;
                height: 3.75rem;
            }
        }

    </style>
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @else
    <script src="https://cdn.tailwindcss.com"></script>
    @endif
</head>
<body class="antialiased text-slate-900">
    @php
    $logoPublicPath = 'images/logo1.png';
    $hasLogo = file_exists(public_path($logoPublicPath));
    $whatsappNumber = '2250160008000';
    $socialLinks = [
    'facebook' => 'https://www.facebook.com/akablaimmobilier',
    'instagram' => 'https://www.instagram.com/akablaimmobilier',
    'tiktok' => 'https://www.tiktok.com/@akablaimmobilier',
    ];
    $services = [
    ['name' => 'Gestion immobilière', 'icon' => 'M3 10.5l9-7 9 7M5.25 8.75V21h13.5V8.75'],
    ['name' => 'Achat, location et vente de maison', 'icon' => 'M2.25 12l9.75-8.25L21.75 12M4.5 10.5V21h15V10.5'],
    ['name' => 'Achat, location et vente de terrain', 'icon' => 'M3 18l4.5-6 4.5 3 4.5-6 4.5 9M3 18h18'],
    ['name' => 'Expertise immobilière', 'icon' => 'M11.25 4.5h6.75v6.75m-6.75 0l6.75-6.75M6 19.5h12a1.5 1.5 0 001.5-1.5V9'],
    ['name' => 'Intermédiation foncière', 'icon' => 'M7.5 12h9m-4.5-4.5v9M4.5 4.5h15v15h-15z'],
    ['name' => 'Prestation de suivi d\'ACD', 'icon' => 'M9 11.25l2.25 2.25L15 9.75M4.5 12a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z'],
    ['name' => 'Bail de construction', 'icon' => 'M3 21h18M6 21V7.5a1.5 1.5 0 011.5-1.5h9A1.5 1.5 0 0118 7.5V21M9 10.5h6M9 13.5h6'],
    ['name' => 'Bail emphytéotique', 'icon' => 'M12 3v18M3 12h18M5.25 5.25l13.5 13.5'],
    ['name' => 'Contrat d\'achat', 'icon' => 'M7.5 3.75h6l3 3V20.25H7.5V3.75zM10.5 12h3M10.5 15h3'],
    ['name' => 'Contrat de vente', 'icon' => 'M7.5 3.75h6l3 3V20.25H7.5V3.75zM9.75 12.75l1.5 1.5 3-3'],
    ['name' => 'Contrat de caution', 'icon' => 'M12 3l7.5 3v6c0 5.25-3.375 8.625-7.5 9.75C7.875 20.625 4.5 17.25 4.5 12V6L12 3z'],
    ['name' => 'Recouvrement gestion locative', 'icon' => 'M12 6v6l4 2.25M4.5 12a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z'],
    ['name' => 'Gestion de syndic', 'icon' => 'M4.5 19.5h15M6.75 19.5V9.75h10.5v9.75M9 13.5h1.5M13.5 13.5H15'],
    ['name' => 'Gestion de syndic de copropriété', 'icon' => 'M3.75 18.75h16.5M6 18.75V9h4.5v9.75M13.5 18.75V6.75H18v12'],
    ];
    @endphp

    <header class="sticky top-0 z-50 overflow-visible border-b border-slate-900/[0.06] bg-white/80 backdrop-blur-xl">
        <div class="mx-auto flex h-14 max-w-7xl items-center justify-between gap-3 px-5 md:h-14 md:gap-4 md:px-6">
            <a href="#accueil" class="group flex h-full min-w-0 flex-1 items-center gap-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 sm:gap-3 md:max-w-[min(100%,42rem)] md:flex-initial md:gap-4">
                @if ($hasLogo)
                <span class="relative h-9 w-[5.5rem] shrink-0 overflow-visible sm:h-10 sm:w-28 md:w-36" aria-hidden="true">
                    <img src="{{ asset($logoPublicPath) }}" alt="" class="pointer-events-none absolute left-0 top-1/2 h-[4.5rem] w-auto max-w-[min(72vw,22rem)] -translate-y-1/2 object-contain object-left select-none sm:h-[5.25rem] md:h-24 md:max-w-[26rem] lg:h-[6.25rem]" width="400" height="120" decoding="async">
                </span>
                @endif
                <span class="flex min-w-0 flex-col leading-tight">
                    <span class="font-display text-base font-semibold text-slate-900 md:text-lg">AKABLA IMMOBILIER</span>
                    <span class="text-[10px] font-medium uppercase tracking-[0.2em] text-slate-500">Sarl</span>
                </span>
            </a>

            <button id="mobile-menu-toggle" type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm md:hidden" aria-expanded="false" aria-controls="mobile-nav" aria-label="Ouvrir le menu">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16" />
                </svg>
            </button>

            <nav aria-label="Navigation principale" class="hidden items-center gap-1 md:flex">
                <a href="#accueil" class="rounded-full px-3.5 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">Accueil</a>
                <a href="#apropos" class="rounded-full px-3.5 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">À propos</a>
                <a href="#services" class="rounded-full px-3.5 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">Services</a>
                <a href="#biens" class="rounded-full px-3.5 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">Biens</a>
                <a href="#pourquoi-nous" class="rounded-full px-3.5 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">Pourquoi nous ?</a>
                <a href="#contact" class="btn-primary ml-2 !px-5 !py-2.5 !text-sm shadow-md">Contact</a>
            </nav>
        </div>

        <nav id="mobile-nav" aria-label="Navigation mobile" class="hidden border-t border-slate-100 bg-white px-5 py-4 md:hidden">
            <div class="flex flex-col gap-1 text-sm font-medium">
                <a href="#accueil" class="rounded-lg px-3 py-2.5 text-slate-700 hover:bg-slate-50">Accueil</a>
                <a href="#apropos" class="rounded-lg px-3 py-2.5 text-slate-700 hover:bg-slate-50">À propos</a>
                <a href="#services" class="rounded-lg px-3 py-2.5 text-slate-700 hover:bg-slate-50">Services</a>
                <a href="#biens" class="rounded-lg px-3 py-2.5 text-slate-700 hover:bg-slate-50">Biens</a>
                <a href="#pourquoi-nous" class="rounded-lg px-3 py-2.5 text-slate-700 hover:bg-slate-50">Pourquoi nous ?</a>
                <a href="#contact" class="btn-primary mt-2 w-full text-center">Contact</a>
            </div>
        </nav>
    </header>

    <main>
        <section id="accueil" class="relative">
            <div id="hero-slider" class="relative min-h-[72vh] overflow-hidden md:min-h-[78vh]">
                <article class="hero-slide absolute inset-0 transition-opacity duration-700 ease-out opacity-100">
                    <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1920&q=85" alt="Résidence moderne" width="1920" height="1080" class="h-full w-full object-cover" fetchpriority="high">
                    <div class="hero-overlay absolute inset-0"></div>
                    <div class="absolute inset-0 flex items-end pb-20 pt-28 md:items-center md:pb-0 md:pt-0">
                        <div class="mx-auto w-full max-w-7xl px-5 md:px-6">
                            <p class="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/95 backdrop-blur-md">Immobilier · Gestion · Expertise</p>
                            <h1 class="font-display hero-text-shadow mt-5 max-w-3xl text-[1.85rem] font-semibold leading-[1.15] text-white md:text-5xl lg:text-[3.25rem]">
                                Bien plus qu'une agence&nbsp;: un partenaire de confiance
                            </h1>
                            <p class="mt-4 max-w-xl text-sm leading-relaxed text-slate-200 md:text-base">
                                AKABLA IMMOBILIER Sarl structure vos projets avec rigueur, transparence et sécurité juridique — du conseil à la signature.
                            </p>
                            <div class="mt-8 flex flex-wrap gap-3">
                                <a href="#services" class="btn-primary">Découvrir nos services</a>
                                <a href="#contact" class="btn-hero-ghost">Demander un rendez-vous</a>
                            </div>
                        </div>
                    </div>
                </article>

                <article class="hero-slide pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-700 ease-out">
                    <img src="https://images.unsplash.com/photo-1560185007-c5ca9d2c014d?auto=format&fit=crop&w=1920&q=85" alt="Immeuble résidentiel" width="1920" height="1080" class="h-full w-full object-cover">
                    <div class="hero-overlay absolute inset-0"></div>
                    <div class="absolute inset-0 flex items-end pb-20 pt-28 md:items-center md:pb-0 md:pt-0">
                        <div class="mx-auto w-full max-w-7xl px-5 md:px-6">
                            <p class="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/95 backdrop-blur-md">Vente · Location · Achat</p>
                            <p class="font-display hero-text-shadow mt-5 max-w-3xl text-[1.85rem] font-semibold leading-[1.15] text-white md:text-5xl lg:text-[3.25rem]">
                                Les bonnes opportunités, au bon moment
                            </p>
                            <p class="mt-4 max-w-xl text-sm leading-relaxed text-slate-200 md:text-base">
                                Maison, terrain ou investissement : nous sécurisons votre décision avec une vision claire du marché et du juridique.
                            </p>
                            <div class="mt-8 flex flex-wrap gap-3">
                                <a href="#services" class="btn-primary">Voir l'offre</a>
                                <a href="#contact" class="btn-hero-ghost">Être rappelé</a>
                            </div>
                        </div>
                    </div>
                </article>

                <article class="hero-slide pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-700 ease-out">
                    <img src="https://images.unsplash.com/photo-1460317442991-0ec209397118?auto=format&fit=crop&w=1920&q=85" alt="Documents et projet immobilier" width="1920" height="1080" class="h-full w-full object-cover">
                    <div class="hero-overlay absolute inset-0"></div>
                    <div class="absolute inset-0 flex items-end pb-20 pt-28 md:items-center md:pb-0 md:pt-0">
                        <div class="mx-auto w-full max-w-7xl px-5 md:px-6">
                            <p class="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/95 backdrop-blur-md">Sécurité juridique</p>
                            <p class="font-display hero-text-shadow mt-5 max-w-3xl text-[1.85rem] font-semibold leading-[1.15] text-white md:text-5xl lg:text-[3.25rem]">
                                Des transactions encadrées, étape par étape
                            </p>
                            <p class="mt-4 max-w-xl text-sm leading-relaxed text-slate-200 md:text-base">
                                Contrats, baux, foncier : chaque dossier avance dans un cadre fiable, avec l'appui de professionnels habilités.
                            </p>
                            <div class="mt-8 flex flex-wrap gap-3">
                                <a href="#pourquoi-nous" class="btn-primary">Pourquoi nous?</a>
                                <a href="#contact" class="btn-hero-ghost">Nous écrire</a>
                            </div>
                        </div>
                    </div>
                </article>

                <div class="pointer-events-none absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-slate-900/50 to-transparent md:h-32"></div>

                <button id="hero-prev" type="button" class="absolute left-3 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-white/95 text-slate-800 shadow-lg backdrop-blur-sm transition hover:bg-white md:left-5" aria-label="Slide précédente">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
                </button>
                <button id="hero-next" type="button" class="absolute right-3 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-white/95 text-slate-800 shadow-lg backdrop-blur-sm transition hover:bg-white md:right-5" aria-label="Slide suivante">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                </button>

                <div class="absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 md:bottom-8">
                    <button class="hero-dot h-2 w-7 rounded-full bg-white shadow-sm transition-all duration-300" type="button" aria-label="Aller au slide 1"></button>
                    <button class="hero-dot h-2 w-2 rounded-full bg-white/45 transition-all duration-300 hover:bg-white/70" type="button" aria-label="Aller au slide 2"></button>
                    <button class="hero-dot h-2 w-2 rounded-full bg-white/45 transition-all duration-300 hover:bg-white/70" type="button" aria-label="Aller au slide 3"></button>
                </div>
            </div>

            <div class="relative z-10 mx-auto -mt-12 max-w-7xl px-5 pb-8 md:-mt-14 md:px-6">
                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ([
                    ['title' => 'Périmètre complet', 'desc' => 'Gestion, transaction et conseil dans une même structure.', 'icon' => 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['title' => 'Processus lisible', 'desc' => 'Étapes claires, sans jargon — vous gardez la maîtrise.', 'icon' => 'M12 3v17.25M5.25 12h13.5M5.25 5.25l13.5 13.5'],
                    ['title' => 'Cadre sécurisé', 'desc' => 'Contrats et dossiers structurés pour limiter les risques.', 'icon' => 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.025h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'],
                    ['title' => 'Écosystème pro', 'desc' => 'Notaires et huissiers mobilisés quand l’affaire l’exige.', 'icon' => 'M12 21v-8.25M15.75 21v-4.5M8.25 21v-2.25M3 9.75h18M3.75 6.75h16.5v12a1.5 1.5 0 01-1.5 1.5h-1.5m-9 0H5.25a1.5 1.5 0 01-1.5-1.5v-12z'],
                    ] as $item)
                    <div class="card-elevated flex gap-4 rounded-2xl border border-white/70 bg-white/90 p-4 backdrop-blur-md transition hover:border-sky-200/80">
                        <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-indigo-600 text-white shadow-md">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $item['icon'] }}" /></svg>
                        </span>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-slate-900">{{ $item['title'] }}</p>
                            <p class="mt-1 text-xs leading-relaxed text-slate-600">{{ $item['desc'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="apropos" class="mx-auto max-w-7xl px-5 py-16 md:px-6 md:py-24">
            <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
                <div>
                    <p class="eyebrow">À propos</p>
                    <h2 class="font-display mt-3 text-3xl font-semibold tracking-tight text-slate-900 md:text-4xl">Une maison pour vos projets immobiliers</h2>
                    <p class="mt-4 text-base leading-relaxed text-slate-600">
                        Nous intervenons sur la gestion, la transaction et l'accompagnement contractuel. Notre approche : relier le terrain, la stratégie et la sécurisation juridique pour des décisions durables.
                    </p>
                    <ul class="mt-8 space-y-3 text-slate-700">
                        <li class="flex gap-3">
                            <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500"></span>
                            <span>Accompagnement personnalisé selon vos objectifs patrimoniaux ou professionnels.</span>
                        </li>
                        <li class="flex gap-3">
                            <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500"></span>
                            <span>Méthode structurée : de la faisabilité à la signature, avec des jalons clairs.</span>
                        </li>
                        <li class="flex gap-3">
                            <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500"></span>
                            <span>Coordination avec des <strong class="font-semibold text-slate-900">Notaires</strong> et <strong class="font-semibold text-slate-900">Huissiers</strong> pour les actes sensibles.</span>
                        </li>
                    </ul>
                    <div class="mt-10 grid grid-cols-3 gap-4 border-t border-slate-200/80 pt-8">
                        <div>
                            <p class="font-display text-2xl font-semibold text-slate-900 md:text-3xl">14+</p>
                            <p class="mt-1 text-xs font-medium text-slate-500">prestations</p>
                        </div>
                        <div>
                            <p class="font-display text-2xl font-semibold text-slate-900 md:text-3xl">3</p>
                            <p class="mt-1 text-xs font-medium text-slate-500">piliers</p>
                        </div>
                        <div>
                            <p class="font-display text-2xl font-semibold text-slate-900 md:text-3xl">100%</p>
                            <p class="mt-1 text-xs font-medium text-slate-500">engagement</p>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute -right-4 -top-4 h-24 w-24 rounded-3xl bg-gradient-to-br from-sky-400/30 to-indigo-500/20 blur-2xl md:-right-8 md:h-32 md:w-32"></div>
                    <img src="https://images.unsplash.com/photo-1560520031-3a4dc4e9de0c?auto=format&fit=crop&w=1200&q=85" alt="Professionnel en visite immobilière" width="1200" height="900" class="img-ring relative z-[1] aspect-[4/3] w-full rounded-2xl object-cover">
                    <div class="relative z-[1] mt-4 flex items-center justify-between gap-4 rounded-xl border border-slate-200/80 bg-white/90 px-4 py-3 text-xs text-slate-600 shadow-sm backdrop-blur-sm md:absolute md:-bottom-5 md:left-6 md:right-6 md:mt-0">
                        <span class="font-medium text-slate-800">Conseil & terrain</span>
                        <span class="hidden sm:inline text-slate-400">|</span>
                        <span>Rigueur documentaire</span>
                    </div>
                </div>
            </div>
        </section>

        <section id="services" class="border-y border-slate-900/[0.06] bg-slate-100/80 pattern-dots">
            <div class="mx-auto max-w-7xl px-5 py-16 md:px-6 md:py-24">
                <div class="mx-auto max-w-2xl text-center">
                    <p class="eyebrow">Nos services</p>
                    <h2 class="font-display mt-3 text-3xl font-semibold tracking-tight text-slate-900 md:text-4xl">Une offre modulable, pensée pour chaque dossier</h2>
                    <p class="mt-4 text-slate-600">De la gestion courante aux montages juridiques complexes, nous adaptons notre intervention à votre contexte.</p>
                </div>

                <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($services as $service)
                    <article class="group relative overflow-hidden rounded-2xl border border-slate-200/90 bg-white p-6 card-elevated transition duration-300 hover:-translate-y-1 hover:border-sky-200/90">
                        <div class="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full bg-gradient-to-br from-sky-400/15 to-indigo-500/10 blur-2xl transition duration-500 group-hover:from-sky-400/25"></div>
                        <div class="relative flex items-start gap-3">
                            <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-sky-50 text-sky-700 ring-1 ring-sky-100/80 transition duration-300 group-hover:scale-105 group-hover:bg-sky-100">
                                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="{{ $service['icon'] }}" />
                                </svg>
                            </span>
                        </div>
                        <h3 class="relative mt-4 font-semibold leading-snug text-slate-900 transition group-hover:text-sky-900">{{ $service['name'] }}</h3>
                        <p class="relative mt-2 text-sm leading-relaxed text-slate-600">
                            Intervention cadrée, suivi régulier et solutions alignées sur vos contraintes réelles.
                        </p>
                        {{-- <a href="#contact" class="relative mt-4 inline-flex items-center text-sm font-semibold text-sky-700 transition hover:text-indigo-700">
                            Discuter de ce besoin
                            <svg class="ml-1 h-4 w-4 transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                        </a>  --}}
                    </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="biens" class="mx-auto max-w-7xl px-5 py-16 md:px-6 md:py-24">
            <div class="mx-auto max-w-2xl text-center">
                <p class="eyebrow">Catalogue</p>
                <h2 class="font-display mt-3 text-3xl font-semibold tracking-tight text-slate-900 md:text-4xl">Nos biens</h2>
                <p class="mt-4 text-slate-600">Découvrez une sélection de biens disponibles. Contactez-nous pour une visite ou plus d’informations.</p>
            </div>

            @if ($biens->isEmpty())
            <p class="mt-12 text-center text-sm text-slate-600">Aucun bien n’est affiché pour le moment. Passez par la rubrique contact pour nous faire part de votre recherche.</p>
            @else
            <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($biens as $bien)
                <article class="card-elevated flex flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white transition duration-300 hover:-translate-y-1 hover:border-sky-200/90">
                    <div class="relative aspect-[4/3] overflow-hidden bg-slate-100">
                        <img src="{{ $bien->imageUrl() }}" alt="{{ $bien->nom }}" class="h-full w-full object-cover" loading="lazy" width="600" height="450">
                    </div>
                    <div class="flex flex-1 flex-col p-5">
                        <h3 class="font-display text-lg font-semibold text-slate-900">{{ $bien->nom }}</h3>
                        <p class="mt-2 flex items-start gap-2 text-sm text-slate-600">
                            <svg class="mt-0.5 h-4 w-4 shrink-0 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
                            <span>{{ $bien->lieu }}</span>
                        </p>
                        <p class="mt-2 text-sm text-slate-600"><span class="font-medium text-slate-800">Superficie :</span> {{ number_format((float) $bien->superficie, 0, ',', ' ') }}&nbsp;m²</p>
                        @if ($bien->prix !== null && $bien->prix !== '')
                        <p class="mt-2 text-sm font-semibold text-sky-800">{{ number_format((float) $bien->prix, 0, ',', ' ') }}&nbsp;F&nbsp;CFA</p>
                        @else
                        <p class="mt-2 text-sm font-semibold text-slate-700">Prix sur demande</p>
                        @endif
                        <div class="mt-4 flex flex-wrap gap-2 border-t border-slate-100 pt-4">
                            <a href="{{ $bien->telephoneHref() }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 sm:flex-none">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                                {{ $bien->telephone }}
                            </a>
                            <a href="#contact" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 sm:flex-none">Message</a>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
            @endif
        </section>

        <section id="pourquoi-nous" class="mx-auto max-w-7xl px-5 py-16 md:px-6 md:py-24">
            <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
                <div class="max-w-xl">
                    <p class="eyebrow">Pourquoi nous choisir</p>
                    <h2 class="font-display mt-3 text-3xl font-semibold tracking-tight text-slate-900 md:text-4xl">Un parcours fluide, sans angles morts</h2>
                </div>
                <p class="max-w-md text-sm leading-relaxed text-slate-600 md:text-right">Diagnostic clair, exécution soignée, validation juridique — trois temps forts pour avancer sereinement.</p>
            </div>

            <div class="mt-12 grid gap-6 lg:grid-cols-3">
                <article class="group flex flex-col rounded-2xl border border-slate-200/90 bg-white p-8 card-elevated transition hover:border-slate-300">
                    <div class="flex items-center justify-between">
                        <span class="font-display text-4xl font-semibold text-slate-200 transition group-hover:text-sky-200">01</span>
                        <span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-slate-900 text-white shadow-lg">
                            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M11.25 4.5a6.75 6.75 0 105.118 11.148L21 20.25" />
                            </svg>
                        </span>
                    </div>
                    <h3 class="mt-6 font-display text-xl font-semibold text-slate-900">Diagnostic précis</h3>
                    <p class="mt-3 text-sm leading-relaxed text-slate-600">
                        Analyse détaillée du besoin, du contexte et des contraintes pour dessiner la trajectoire la plus pertinente.
                    </p>
                    <p class="mt-auto pt-6 text-sm font-semibold text-sky-700 opacity-80 transition group-hover:opacity-100">Étude & cadrage →</p>
                </article>

                <article class="group flex flex-col rounded-2xl border border-slate-200/90 bg-white p-8 card-elevated transition hover:border-slate-300 lg:-translate-y-2 lg:shadow-xl">
                    <div class="flex items-center justify-between">
                        <span class="font-display text-4xl font-semibold text-slate-200 transition group-hover:text-sky-200">02</span>
                        <span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-indigo-600 text-white shadow-lg">
                            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M3.75 12h16.5M12 3.75v16.5M5.25 5.25l13.5 13.5" />
                            </svg>
                        </span>
                    </div>
                    <h3 class="mt-6 font-display text-xl font-semibold text-slate-900">Exécution maîtrisée</h3>
                    <p class="mt-3 text-sm leading-relaxed text-slate-600">
                        Mise en œuvre terrain, coordination des acteurs et pilotage continu jusqu'à l'aboutissement du dossier.
                    </p>
                    <p class="mt-auto pt-6 text-sm font-semibold text-sky-700 opacity-80 transition group-hover:opacity-100">Opérations & suivi →</p>
                </article>

                <article class="group flex flex-col rounded-2xl border border-slate-200/90 bg-white p-8 card-elevated transition hover:border-slate-300">
                    <div class="flex items-center justify-between">
                        <span class="font-display text-4xl font-semibold text-slate-200 transition group-hover:text-sky-200">03</span>
                        <span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-slate-900 text-white shadow-lg">
                            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M12 3l7.5 3v6c0 5.25-3.375 8.625-7.5 9.75C7.875 20.625 4.5 17.25 4.5 12V6L12 3z" />
                                <path d="M9.75 12.75l1.5 1.5 3-3" />
                            </svg>
                        </span>
                    </div>
                    <h3 class="mt-6 font-display text-xl font-semibold text-slate-900">Validation sécurisée</h3>
                    <p class="mt-3 text-sm leading-relaxed text-slate-600">
                        Finalisation dans un cadre juridique fiable, avec contrôle des engagements et protection de vos intérêts.
                    </p>
                    <p class="mt-auto pt-6 text-sm font-semibold text-sky-700 opacity-80 transition group-hover:opacity-100">Clôture & conformité →</p>
                </article>
            </div>
        </section>

        <section id="contact" class="mx-auto max-w-7xl px-5 pb-20 md:px-6 md:pb-28">
            <div class="overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-sky-900 to-indigo-900 p-8 text-white shadow-[0_28px_60px_-15px_rgba(30,58,138,0.5)] md:grid md:grid-cols-5 md:items-stretch md:p-0">
                <div class="md:col-span-3 md:p-12 md:pr-8">
                    <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-sky-300">Contact</p>
                    <h2 class="font-display mt-4 text-3xl font-semibold leading-tight md:text-4xl">Parlons de votre prochaine étape</h2>
                    <p class="mt-4 max-w-lg text-sm leading-relaxed text-slate-300 md:text-base">
                        Une question sur un bien, un bail ou un dossier foncier&nbsp;? Écrivez-nous ou appelez — nous revenons vers vous rapidement.
                    </p>
                </div>
                <div class="mt-8 flex flex-col justify-center gap-4 border-t border-white/10 pt-8 md:col-span-2 md:mt-0 md:border-l md:border-t-0 md:bg-white/[0.04] md:p-12 md:backdrop-blur-sm">
                    <a href="tel:+2250160008000" class="flex items-center gap-4 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 transition hover:border-white/30 hover:bg-white/10">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-white text-sky-700">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                        </span>
                        <div class="min-w-0 text-left">
                            <p class="text-xs font-medium text-slate-400">Téléphone</p>
                            <p class="truncate text-sm font-semibold">+225 07 89 97 42 42</p>
                        </div>
                    </a>
                    <a href="mailto:akablaimmobilier@gmail.com" class="flex items-center gap-4 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 transition hover:border-white/30 hover:bg-white/10">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-white text-indigo-700">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                        </span>
                        <div class="min-w-0 text-left">
                            <p class="text-xs font-medium text-slate-400">Email</p>
                            <p class="truncate text-sm font-semibold">akablaimmobilier@gmail.com</p>
                        </div>
                    </a>
                    <div class="flex flex-wrap gap-3 pt-2">
                        <a href="tel:+2250789974242" class="btn-primary !bg-white !text-slate-900 !shadow-none hover:!filter-none">Appeler</a>
                        <a href="mailto:akablaimmobilier@gmail.com" class="rounded-full border border-white/40 px-5 py-2.5 text-sm font-semibold transition hover:bg-white/10">Écrire un message</a>
                    </div>
                    <div class="flex flex-col gap-2 pt-4" aria-label="Réseaux sociaux">
                        <span class="text-[11px] font-semibold uppercase tracking-wider text-sky-200/90">Suivez-nous</span>
                        <div class="flex flex-wrap gap-3">
                            <a href="{{ $socialLinks['facebook'] }}" target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-xl border border-[#1877F2]/50 bg-[#1877F2] text-white shadow-md transition hover:border-[#166FE5] hover:bg-[#166FE5]" aria-label="Facebook">
                                <svg class="h-[18px] w-[18px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
                            </a>
                            <a href="{{ $socialLinks['instagram'] }}" target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888] text-white shadow-md transition hover:brightness-110" aria-label="Instagram">
                                <svg class="h-[18px] w-[18px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" /></svg>
                            </a>
                            <a href="{{ $socialLinks['tiktok'] }}" target="_blank" rel="noopener noreferrer" class="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border border-cyan-400/40 bg-[#010101] text-white shadow-md transition hover:border-[#FE2C55]/50" aria-label="TikTok">
                                <span class="absolute inset-0 bg-gradient-to-br from-cyan-400/25 via-transparent to-[#FE2C55]/30" aria-hidden="true"></span>
                                <svg class="relative h-[18px] w-[18px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64v-3.5a6.33 6.33 0 00-1-.05A6.34 6.34 0 005 20.1a6.34 6.34 0 0010.14-5.1v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z" /></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="border-t border-slate-200/80 bg-white/70 backdrop-blur-md">
        <div class="mx-auto max-w-7xl px-5 py-12 md:px-6">
            <div class="grid gap-10 md:grid-cols-4">
                <div class="md:col-span-2">
                    <div class="flex flex-wrap items-center gap-3">
                        @if ($hasLogo)
                        <img src="{{ asset($logoPublicPath) }}" alt="AKABLA IMMOBILIER" class="h-20 w-auto max-w-[min(92vw,32rem)] shrink-0 object-contain object-left sm:h-24 md:h-28 lg:h-32" width="480" height="140" decoding="async">
                        @endif
                        <span class="font-display text-lg font-semibold text-slate-900">AKABLA IMMOBILIER</span>
                    </div>
                    <p class="mt-4 max-w-sm text-sm leading-relaxed text-slate-600">Cabinets et particuliers : nous structurons vos opérations immobilières avec une exigence de clarté et de conformité.</p>
                </div>
                <div>
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Navigation</p>
                    <ul class="mt-4 space-y-2 text-sm text-slate-600">
                        <li><a href="#apropos" class="hover:text-sky-700">À propos</a></li>
                        <li><a href="#services" class="hover:text-sky-700">Services</a></li>
                        <li><a href="#biens" class="hover:text-sky-700">Biens</a></li>
                        <li><a href="#pourquoi-nous" class="hover:text-sky-700">Pourquoi nous ?</a></li>
                        <li><a href="#contact" class="hover:text-sky-700">Contact</a></li>
                        <li><a href="#agrements" class="hover:text-sky-700">Agréments</a></li>
                    </ul>
                </div>
                <div>
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Activités</p>
                    <ul class="mt-4 space-y-2 text-sm text-slate-600">
                        <li>Gestion & syndic</li>
                        <li>Transaction</li>
                        <li>Expertise & foncier</li>
                    </ul>
                </div>
            </div>

            <div class="mt-10 border-t border-slate-200/80 pt-10" id="agrements">
                <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Agréments &amp; certifications</p>
                <p class="mt-2 max-w-2xl text-sm text-slate-600">Notre activité est encadrée par les autorisations et références officielles ci-dessous.</p>
                @if (! empty($agrements))
                <div class="mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-6 sm:justify-start">
                    @foreach ($agrements as $agrement)
                    <img src="{{ asset($agrement['src']) }}" alt="Agrément : {{ $agrement['label'] }}" class="h-24 w-auto max-h-40 max-w-[min(100%,28rem)] object-contain object-left opacity-95 transition hover:opacity-100 sm:h-28 sm:max-h-44 md:h-32 md:max-h-48" loading="lazy" decoding="async">
                    @endforeach
                </div>

                @endif
            </div>

            <div class="mt-12 flex flex-col gap-4 border-t border-slate-200/80 pt-8 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
                    <p class="text-xs text-slate-500">© {{ date('Y') }} AKABLA IMMOBILIER Sarl. Tous droits réservés.</p>
                    <div class="flex items-center gap-2" aria-label="Réseaux sociaux">
                        <a href="{{ $socialLinks['facebook'] }}" target="_blank" rel="noopener noreferrer" class="flex h-9 w-9 items-center justify-center rounded-full border border-[#1877F2]/35 bg-[#1877F2] text-white shadow-sm transition hover:bg-[#166FE5]" aria-label="Facebook">
                            <svg class="h-[16px] w-[16px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
                        </a>
                        <a href="{{ $socialLinks['instagram'] }}" target="_blank" rel="noopener noreferrer" class="flex h-9 w-9 items-center justify-center rounded-full border border-white/20 bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888] text-white shadow-sm transition hover:brightness-105" aria-label="Instagram">
                            <svg class="h-[16px] w-[16px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" /></svg>
                        </a>
                        <a href="{{ $socialLinks['tiktok'] }}" target="_blank" rel="noopener noreferrer" class="relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-full border border-cyan-400/35 bg-[#010101] text-white shadow-sm transition hover:border-[#FE2C55]/40" aria-label="TikTok">
                            <span class="absolute inset-0 bg-gradient-to-br from-cyan-400/20 via-transparent to-[#FE2C55]/25" aria-hidden="true"></span>
                            <svg class="relative h-[16px] w-[16px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64v-3.5a6.33 6.33 0 00-1-.05A6.34 6.34 0 005 20.1a6.34 6.34 0 0010.14-5.1v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z" /></svg>
                        </a>
                    </div>
                </div>
                <p class="text-xs text-slate-500">Designed by <a href="https://softsys.ci" class="font-medium text-sky-700 hover:text-sky-600">Softsys</a></p>
            </div>
        </div>
    </footer>

    <a href="https://wa.me/{{ $whatsappNumber }}" class="whatsapp-float" target="_blank" rel="noopener noreferrer" aria-label="Discuter sur WhatsApp">
        <svg class="h-8 w-8 md:h-9 md:w-9" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.881 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
    </a>

    <script>
        (function() {
            const mobileNav = document.getElementById('mobile-nav');
            const mobileToggle = document.getElementById('mobile-menu-toggle');
            const mobileLinks = mobileNav ? Array.from(mobileNav.querySelectorAll('a[href^="#"]')) : [];

            function closeMobileMenu() {
                if (!mobileNav || !mobileToggle) return;
                mobileNav.classList.add('hidden');
                mobileToggle.setAttribute('aria-expanded', 'false');
            }

            if (mobileToggle && mobileNav) {
                mobileToggle.addEventListener('click', () => {
                    const nowHidden = mobileNav.classList.toggle('hidden');
                    mobileToggle.setAttribute('aria-expanded', String(!nowHidden));
                });
            }

            mobileLinks.forEach((link) => {
                link.addEventListener('click', closeMobileMenu);
            });

            const slides = Array.from(document.querySelectorAll('.hero-slide'));
            const dots = Array.from(document.querySelectorAll('.hero-dot'));
            const prev = document.getElementById('hero-prev');
            const next = document.getElementById('hero-next');
            let index = 0;
            let timer;

            function render() {
                slides.forEach((slide, i) => {
                    const active = i === index;
                    slide.classList.toggle('opacity-100', active);
                    slide.classList.toggle('opacity-0', !active);
                    slide.classList.toggle('pointer-events-none', !active);
                });
                dots.forEach((dot, i) => {
                    const active = i === index;
                    dot.classList.toggle('w-7', active);
                    dot.classList.toggle('w-2', !active);
                    dot.classList.toggle('bg-white', active);
                    dot.classList.toggle('bg-white/45', !active);
                    dot.classList.toggle('opacity-100', active);
                    dot.classList.toggle('opacity-70', !active);
                });
            }

            function goTo(i) {
                index = (i + slides.length) % slides.length;
                render();
            }

            function startAuto() {
                timer = setInterval(() => goTo(index + 1), 6000);
            }

            function resetAuto() {
                clearInterval(timer);
                startAuto();
            }

            if (prev && next) {
                prev.addEventListener('click', () => {
                    goTo(index - 1);
                    resetAuto();
                });
                next.addEventListener('click', () => {
                    goTo(index + 1);
                    resetAuto();
                });
            }

            dots.forEach((dot, i) => {
                dot.addEventListener('click', () => {
                    goTo(i);
                    resetAuto();
                });
            });

            render();
            startAuto();
        })();

    </script>
</body>
</html>
