@extends('layouts.app')

@section('preload_hero')
<link rel="preload" href="{{ asset('images/og-image.png') }}" as="image" type="image/png" fetchpriority="high">
@endsection

@section('title', 'TaPrestation - Prestations, location, vente et food au même endroit')
@section('meta_description', 'TaPrestation vous permet de trouver un prestataire, réserver un service, louer du matériel, vendre des produits et gérer votre activité depuis une seule plateforme.')
@section('meta_keywords', 'prestataire, prestation, réservation, location matériel, vente en ligne, food, devis, paiement sécurisé, services à domicile, TaPrestation')
@section('canonical', config('app.url', 'https://taprestation.com'))

@section('og_title', 'TaPrestation - Une plateforme claire pour réserver, louer, vendre et gérer')
@section('og_description', 'Trouvez un prestataire, réservez un service, louez du matériel, vendez vos produits et pilotez votre activité depuis une seule plateforme.')
@section('og_type', 'website')

@section('twitter_title', 'TaPrestation - Réserver, louer, vendre, gérer')
@section('twitter_description', 'Une plateforme plus simple pour les clients et les prestataires.')

@section('json_ld')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@@graph": [
        {
            "@@type": "WebSite",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#website",
            "name": "TaPrestation",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "inLanguage": "fr-FR",
            "potentialAction": {
                "@@type": "SearchAction",
                "target": {
                    "@@type": "EntryPoint",
                    "urlTemplate": "{{ url('/services') }}?search={search_term_string}"
                },
                "query-input": "required name=search_term_string"
            }
        },
        {
            "@@type": "Organization",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#organization",
            "name": "TaPrestation",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "logo": {
                "@@type": "ImageObject",
                "url": "{{ asset('images/logo.png') }}"
            }
        },
        {
            "@@type": "WebPage",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#homepage",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "name": "Accueil TaPrestation",
            "description": "Plateforme pour trouver un prestataire, réserver un service, louer du matériel, vendre des produits et gérer son activité.",
            "isPartOf": {
                "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#website"
            },
            "about": {
                "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#organization"
            },
            "inLanguage": "fr-FR"
        },
        {
            "@@type": "FAQPage",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#faq",
            "mainEntity": [
                {
                    "@@type": "Question",
                    "name": "Comment trouver un prestataire sur TaPrestation ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "Parcourez les catégories, consultez les profils et contactez directement le prestataire qui correspond à votre besoin."
                    }
                },
                {
                    "@@type": "Question",
                    "name": "Puis-je payer en ligne ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "Oui, TaPrestation permet un paiement en ligne sécurisé selon les modules disponibles."
                    }
                },
                {
                    "@@type": "Question",
                    "name": "Comment devenir prestataire ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "Créez votre espace, ajoutez vos services, vos disponibilités et commencez à recevoir des demandes."
                    }
                }
            ]
        },
        {
            "@@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@@type": "ListItem",
                    "position": 1,
                    "name": "Accueil",
                    "item": "{{ config('app.url', 'https://taprestation.com') }}"
                }
            ]
        },
        {
            "@@type": "SoftwareApplication",
            "name": "TaPrestation",
            "operatingSystem": "Android, iOS",
            "applicationCategory": "BusinessApplication",
            "offers": {
                "@@type": "Offer",
                "price": "0",
                "priceCurrency": "EUR"
            }
        }
    ]
}
</script>
@endsection

@push('styles')
<style>
    :root {
        --tp-ink: #0f172a;
        --tp-ink-soft: #334155;
        --tp-muted: #64748b;
        --tp-blue: #1748b5;
        --tp-blue-dark: #0f1f54;
        --tp-green: #0f9c84;
        --tp-orange: #e97832;
        --tp-cream: #faf6ee;
        --tp-cream-strong: #f3e8d7;
        --tp-cream-soft: #fffdf9;
        --tp-border: rgba(167, 139, 98, 0.16);
        --tp-border-strong: rgba(167, 139, 98, 0.26);
        --tp-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
        --tp-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
        --tp-radius: 1.5rem;
    }

    .tp-home {
        background: linear-gradient(180deg, #f8f1e4 0%, #fbf7ef 35%, #f8fafc 100%);
        color: var(--tp-ink);
        overflow-x: clip;
    }

    .tp-container {
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    @media (min-width: 640px) {
        .tp-container {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }

    @media (min-width: 1024px) {
        .tp-container {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    .tp-section {
        padding: 5rem 0;
    }

    .tp-kicker {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--tp-blue);
        margin-bottom: 1rem;
    }

    .tp-kicker::before {
        content: '';
        width: 2.25rem;
        height: 1px;
        background: linear-gradient(90deg, var(--tp-blue), transparent);
    }

    .tp-title {
        font-size: clamp(2.1rem, 5vw, 4.6rem);
        line-height: .95;
        letter-spacing: -.04em;
        font-weight: 900;
        color: var(--tp-blue-dark);
        max-width: 11ch;
    }

    .tp-title-accent {
        color: var(--tp-green);
    }

    .tp-copy {
        font-size: 1.02rem;
        line-height: 1.8;
        color: var(--tp-ink-soft);
        max-width: 58ch;
    }

    .tp-brand {
        font-size: clamp(3rem, 6vw, 5.5rem);
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.05em;
        background: linear-gradient(135deg, var(--tp-blue-dark) 0%, var(--tp-blue) 55%, var(--tp-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
        margin-bottom: 1rem;
    }

    .tp-grid-hero {
        display: grid;
        gap: 1.5rem;
        align-items: start;
    }

    @media (min-width: 1100px) {
        .tp-grid-hero {
            grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
            gap: 2rem;
        }
    }

    .tp-panel {
        background: rgba(255,255,255,.82);
        border: 1px solid var(--tp-border);
        border-radius: var(--tp-radius);
        box-shadow: var(--tp-shadow-soft);
        backdrop-filter: blur(14px);
    }

    .tp-panel-padding {
        padding: 1.35rem;
    }

    @media (min-width: 640px) {
        .tp-panel-padding {
            padding: 1.6rem;
        }
    }

    .tp-install-panel {
        background: linear-gradient(135deg, #0f172a 0%, #162449 100%);
        color: #fff;
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    }

    .tp-badges {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .tp-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 2.7rem;
        padding: .7rem 1rem;
        border-radius: 9999px;
        background: rgba(255,255,255,.74);
        border: 1px solid var(--tp-border);
        color: var(--tp-ink);
        font-size: .93rem;
        font-weight: 700;
    }

    .tp-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .9rem;
        margin-top: 1.75rem;
        margin-bottom: 1.5rem;
    }

    .tp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .7rem;
        min-height: 3.2rem;
        padding: .95rem 1.2rem;
        border-radius: 1rem;
        font-weight: 800;
        text-decoration: none;
        transition: .22s ease;
    }

    .tp-btn:hover {
        transform: translateY(-2px);
    }

    .tp-btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--tp-blue-dark), var(--tp-blue));
        box-shadow: 0 12px 28px rgba(23, 72, 181, .22);
    }

    .tp-btn-secondary {
        color: var(--tp-blue-dark);
        background: rgba(255,255,255,.85);
        border: 1px solid var(--tp-border-strong);
    }

    .tp-btn-light {
        color: #fff;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.16);
    }

    .tp-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem 1rem;
        color: var(--tp-muted);
        font-size: .94rem;
    }

    .tp-metric strong {
        color: var(--tp-ink);
        font-weight: 900;
        margin-right: .28rem;
    }

    .tp-card-title {
        font-size: 1.22rem;
        font-weight: 900;
        color: var(--tp-ink);
        margin-bottom: .95rem;
    }

    .tp-list {
        display: grid;
        gap: .7rem;
    }

    .tp-list-item {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        padding: .85rem .95rem;
        border-radius: 1rem;
        background: rgba(251, 247, 239, .95);
        border: 1px solid var(--tp-border);
        color: var(--tp-ink-soft);
    }

    .tp-list-item i {
        margin-top: .1rem;
        color: var(--tp-blue);
    }

    .tp-features-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    @media (max-width: 640px) {
        .tp-features-grid {
            grid-template-columns: 1fr;
        }
    }

    .tp-feature {
        display: flex;
        align-items: center;
        gap: .7rem;
        min-height: 3.1rem;
        padding: .85rem .95rem;
        border-radius: 1rem;
        background: rgba(250, 244, 232, .92);
        border: 1px solid var(--tp-border);
        font-weight: 700;
        color: var(--tp-ink);
    }

    .tp-feature i {
        color: var(--tp-blue);
    }

    .tp-three-col {
        display: grid;
        gap: 1rem;
        margin-top: 1.25rem;
    }

    @media (min-width: 1024px) {
        .tp-three-col {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .tp-link-list {
        display: grid;
        gap: .8rem;
    }

    .tp-link-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .95rem 1rem;
        border-radius: 1rem;
        background: rgba(251, 247, 239, .95);
        border: 1px solid var(--tp-border);
        text-decoration: none;
        transition: .22s ease;
    }

    .tp-link-row:hover {
        transform: translateY(-2px);
        box-shadow: var(--tp-shadow-soft);
        border-color: rgba(23,72,181,.18);
    }

    .tp-link-row strong {
        display: block;
        color: var(--tp-ink);
        font-size: .98rem;
        margin-bottom: .15rem;
    }

    .tp-link-row span {
        color: var(--tp-muted);
        font-size: .9rem;
    }

    .tp-link-row i {
        color: var(--tp-blue);
    }

    .tp-chip-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .tp-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .75rem 1rem;
        min-height: 2.7rem;
        border-radius: 9999px;
        background: rgba(255,255,255,.86);
        border: 1px solid var(--tp-border);
        color: var(--tp-ink);
        text-decoration: none;
        font-weight: 700;
        transition: .22s ease;
    }

    .tp-chip:hover {
        color: var(--tp-blue);
        transform: translateY(-2px);
        box-shadow: var(--tp-shadow-soft);
    }

    .tp-alt-section {
        background: linear-gradient(180deg, #f8f1e3 0%, #fffaf3 100%);
    }

    .tp-dark-section {
        background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .tp-dark-section::before,
    .tp-dark-section::after {
        content: '';
        position: absolute;
        border-radius: 9999px;
        filter: blur(70px);
        pointer-events: none;
        opacity: .3;
    }

    .tp-dark-section::before {
        width: 18rem;
        height: 18rem;
        top: -4rem;
        right: -4rem;
        background: rgba(59,130,246,.35);
    }

    .tp-dark-section::after {
        width: 16rem;
        height: 16rem;
        bottom: -4rem;
        left: -4rem;
        background: rgba(16,185,129,.2);
    }

    .tp-section-head {
        text-align: center;
        max-width: 52rem;
        margin: 0 auto 3rem;
    }

    .tp-section-head.tp-left {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .tp-section-title {
        font-size: clamp(1.9rem, 4vw, 3.25rem);
        line-height: 1.05;
        font-weight: 900;
        letter-spacing: -.03em;
        margin-bottom: 1rem;
        color: var(--tp-ink);
    }

    .tp-dark-section .tp-section-title {
        color: #fff;
    }

    .tp-section-copy {
        font-size: 1rem;
        line-height: 1.8;
        color: var(--tp-ink-soft);
    }

    .tp-dark-section .tp-section-copy {
        color: #cbd5e1;
    }

    .tp-cards-3,
    .tp-cards-4 {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .tp-cards-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .tp-cards-4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1200px) {
        .tp-cards-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .tp-service-card,
    .tp-benefit-card,
    .tp-provider-card,
    .tp-seo-box {
        border-radius: 1.6rem;
        overflow: hidden;
    }

    .tp-service-card {
        height: 100%;
        padding: 1.6rem;
        background: rgba(255,255,255,.88);
        border: 1px solid var(--tp-border);
        box-shadow: var(--tp-shadow-soft);
        transition: .22s ease;
        text-decoration: none;
        display: block;
    }

    .tp-service-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--tp-shadow);
    }

    .tp-service-icon {
        width: 3rem;
        height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        margin-bottom: 1rem;
        font-size: 1.05rem;
    }

    .tp-service-icon.blue { background: #dbeafe; color: #1d4ed8; }
    .tp-service-icon.green { background: #d1fae5; color: #047857; }
    .tp-service-icon.orange { background: #ffedd5; color: #c2410c; }

    .tp-service-card h3 {
        font-size: 1.25rem;
        font-weight: 900;
        color: var(--tp-ink);
        margin-bottom: .65rem;
    }

    .tp-service-card p {
        color: var(--tp-muted);
        line-height: 1.75;
        margin-bottom: 1rem;
    }

    .tp-mini-list {
        display: grid;
        gap: .6rem;
        color: var(--tp-ink-soft);
        font-size: .93rem;
    }

    .tp-mini-list div {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
    }

    .tp-mini-list i {
        margin-top: .15rem;
    }

    .tp-card-link {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        margin-top: 1rem;
        font-weight: 800;
    }

    .tp-benefit-card {
        position: relative;
        height: 100%;
        padding: 1.6rem;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(148,163,184,.16);
        box-shadow: 0 16px 36px rgba(2, 6, 23, .18);
    }

    .tp-benefit-index {
        display: inline-block;
        margin-bottom: .9rem;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .16em;
        color: #94a3b8;
    }

    .tp-benefit-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        color: #fff;
        font-size: 1rem;
    }

    .tp-benefit-icon.blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
    .tp-benefit-icon.green { background: linear-gradient(135deg, #059669, #10b981); }
    .tp-benefit-icon.orange { background: linear-gradient(135deg, #d97706, #f59e0b); }
    .tp-benefit-icon.violet { background: linear-gradient(135deg, #7c3aed, #a855f7); }

    .tp-benefit-card h3 {
        font-size: 1.15rem;
        font-weight: 900;
        color: #fff;
        margin-bottom: .65rem;
    }

    .tp-benefit-card p {
        color: #cbd5e1;
        line-height: 1.75;
    }

    .tp-provider-card {
        height: 100%;
        background: rgba(255,255,255,.88);
        border: 1px solid var(--tp-border);
        box-shadow: var(--tp-shadow-soft);
        transition: .22s ease;
    }

    .tp-provider-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--tp-shadow);
    }

    .tp-provider-top {
        height: 5.8rem;
        background: linear-gradient(135deg, var(--tp-blue-dark) 0%, var(--tp-blue) 60%, #5fa7ff 100%);
    }

    .tp-provider-body {
        padding: 0 1.35rem 1.35rem;
        margin-top: -2rem;
        text-align: center;
    }

    .tp-avatar {
        width: 4.6rem;
        height: 4.6rem;
        border-radius: 1.25rem;
        margin: 0 auto 1rem;
        overflow: hidden;
        border: 4px solid #fff;
        background: #fff;
        box-shadow: 0 10px 24px rgba(15,23,42,.12);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tp-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        background: linear-gradient(135deg, var(--tp-blue-dark), var(--tp-blue));
    }

    .tp-provider-name {
        font-size: 1.1rem;
        font-weight: 900;
        color: var(--tp-ink);
    }

    .tp-provider-sub {
        color: var(--tp-muted);
        font-size: .92rem;
        margin-top: .15rem;
    }

    .tp-verified {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: .55rem;
        padding: .35rem .65rem;
        border-radius: 9999px;
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
        font-size: .72rem;
        font-weight: 800;
    }

    .tp-provider-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .55rem;
        margin: 1rem 0 1.15rem;
    }

    .tp-provider-pill {
        display: inline-flex;
        align-items: center;
        padding: .45rem .75rem;
        border-radius: 9999px;
        background: rgba(251,247,239,.95);
        border: 1px solid var(--tp-border);
        color: var(--tp-ink);
        font-size: .78rem;
        font-weight: 700;
    }

    .tp-rating {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: .8rem;
        color: var(--tp-ink-soft);
        font-size: .88rem;
        font-weight: 700;
    }

    .tp-provider-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 3rem;
        border-radius: 1rem;
        background: linear-gradient(135deg, var(--tp-blue-dark), var(--tp-blue));
        color: #fff;
        font-weight: 800;
        text-decoration: none;
        margin-top: .2rem;
        transition: .22s ease;
    }

    .tp-provider-btn:hover {
        transform: translateY(-2px);
    }

    .tp-seo-wrap {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 1024px) {
        .tp-seo-wrap {
            grid-template-columns: 1.1fr .9fr;
        }
    }

    .tp-seo-box {
        padding: 1.6rem;
        background: #fff;
        border: 1px solid rgba(226,232,240,.9);
        box-shadow: var(--tp-shadow-soft);
    }

    .tp-seo-box p {
        color: var(--tp-ink-soft);
        line-height: 1.85;
    }

    .tp-faq {
        display: grid;
        gap: .85rem;
    }

    .tp-faq details {
        background: #fff;
        border-radius: 1.1rem;
        border: 1px solid rgba(226,232,240,.95);
        overflow: hidden;
    }

    .tp-faq summary {
        list-style: none;
        cursor: pointer;
        padding: 1.1rem 1.2rem;
        font-weight: 800;
        color: var(--tp-ink);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .tp-faq summary::-webkit-details-marker {
        display: none;
    }

    .tp-faq-content {
        padding: 0 1.2rem 1.2rem;
        color: var(--tp-ink-soft);
        line-height: 1.75;
    }

    .tp-cta-final {
        background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-green) 100%);
        color: #fff;
        border-radius: 1.8rem;
        padding: 2rem 1.4rem;
        text-align: center;
        box-shadow: 0 20px 52px rgba(23,72,181,.20);
    }

    @media (min-width: 768px) {
        .tp-cta-final {
            padding: 2.8rem;
        }
    }

    .tp-footer {
        background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
        color: #e2e8f0;
    }

    .tp-footer-top {
        padding: 4rem 0 2.5rem;
    }

    .tp-footer-grid {
        display: grid;
        gap: 2rem;
    }

    @media (min-width: 768px) {
        .tp-footer-grid {
            grid-template-columns: 1.2fr .8fr .8fr .9fr;
        }
    }

    .tp-footer h3,
    .tp-footer h4 {
        color: #fff;
    }

    .tp-footer h3 {
        font-size: 1.5rem;
        font-weight: 900;
    }

    .tp-footer h4 {
        font-size: 1rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }

    .tp-footer p,
    .tp-footer a,
    .tp-footer li {
        color: #cbd5e1;
        font-size: .94rem;
        line-height: 1.8;
    }

    .tp-footer a {
        text-decoration: none;
        transition: .2s ease;
    }

    .tp-footer a:hover {
        color: #93c5fd;
    }

    .tp-footer ul {
        display: grid;
        gap: .45rem;
    }

    .tp-footer-bottom {
        border-top: 1px solid rgba(148,163,184,.14);
        padding: 1rem 0 1.4rem;
    }

    .tp-install-modal {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: none;
    }

    .tp-install-modal.is-open {
        display: block;
    }

    .tp-install-overlay {
        position: absolute;
        inset: 0;
        background: rgba(15,23,42,.64);
        backdrop-filter: blur(6px);
    }

    .tp-install-dialog-wrap {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .tp-install-dialog {
        width: min(34rem, 100%);
        max-height: 88vh;
        overflow: hidden;
        border-radius: 1.5rem;
        background: #fff;
        box-shadow: 0 24px 70px rgba(2,6,23,.28);
        position: relative;
    }

    .tp-install-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.2rem;
        background: linear-gradient(135deg, var(--tp-orange), #f59e0b);
        color: #fff;
    }

    .tp-install-head h4 {
        font-size: 1.05rem;
        font-weight: 900;
    }

    .tp-install-close {
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .tp-install-body {
        padding: 1.2rem;
        overflow: auto;
        max-height: calc(88vh - 64px);
        color: var(--tp-ink-soft);
    }

    .tp-step-list {
        display: grid;
        gap: .9rem;
    }

    .tp-step {
        display: flex;
        align-items: flex-start;
        gap: .8rem;
        padding: .95rem 1rem;
        border-radius: 1rem;
        background: #f8fafc;
        border: 1px solid rgba(226,232,240,.95);
    }

    .tp-step-num {
        width: 2rem;
        height: 2rem;
        flex: 0 0 2rem;
        border-radius: .8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        color: #fff;
        background: linear-gradient(135deg, var(--tp-blue), var(--tp-green));
    }

    .tp-note {
        margin-bottom: 1rem;
        padding: .95rem 1rem;
        border-radius: 1rem;
        background: #fff7ed;
        border: 1px solid #fed7aa;
        color: #9a3412;
        font-size: .94rem;
        line-height: 1.7;
    }

    body.tp-app-mode .tp-section,
    body.tp-app-mode .tp-home-hero {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    @media (max-width: 640px) {
        .tp-title {
            max-width: none;
            font-size: 2.15rem;
            line-height: .98;
        }

        .tp-brand {
            font-size: 2.8rem;
        }

        .tp-copy {
            font-size: .98rem;
        }

        .tp-panel-padding,
        .tp-service-card,
        .tp-benefit-card,
        .tp-seo-box {
            padding: 1.15rem;
        }

        .tp-btn {
            width: 100%;
        }

        .tp-cta-final .tp-btn {
            width: 100%;
        }
    }
</style>
@endpush

@section('content')
@php
    $homeFeatures = [
        ['icon' => 'fa-credit-card', 'label' => 'Paiement sécurisé'],
        ['icon' => 'fa-comments', 'label' => 'Messagerie intégrée'],
        ['icon' => 'fa-calendar-check', 'label' => 'Réservation rapide'],
        ['icon' => 'fa-file-invoice', 'label' => 'Devis & suivi'],
        ['icon' => 'fa-boxes-stacked', 'label' => 'Stock & location'],
        ['icon' => 'fa-truck', 'label' => 'Livraison'],
    ];

    $clientTools = [
        'Chercher un prestataire autour de moi',
        'Comparer profils, avis et disponibilités',
        'Réserver ou demander un devis',
        'Payer et suivre mes échanges au même endroit',
    ];

    $prestataireTools = [
        'Créer mes prestations, produits ou locations',
        'Gérer mon agenda et mes horaires',
        'Recevoir demandes, réservations et commandes',
        'Suivre mon activité depuis un seul espace',
    ];

    $activityIdeas = collect($categories ?? [])
        ->pluck('name')
        ->filter()
        ->merge([
            'Coiffure',
            'Ménage',
            'Bricolage',
            'Traiteur',
            'Photographe',
            'DJ',
            'Décoration',
            'Coach sportif',
            'Cours particuliers',
            'Livraison',
            'Jardinage',
            'Chauffeur'
        ])
        ->unique()
        ->take(12);

    $popularCities = [
        'Paris',
        'Lyon',
        'Marseille',
        'Toulouse',
        'Bordeaux',
        'Nantes',
        'Nice',
        'Lille',
        'Strasbourg',
        'Montpellier',
        'Rennes',
        'Grenoble',
    ];
@endphp

<div class="tp-home">
    {{-- HERO --}}
    <section class="tp-home-hero tp-section">
        <div class="tp-container">
            <div class="tp-grid-hero">
                <div>
                    <div class="tp-brand">TaPrestation</div>

                    <div class="tp-kicker">Plateforme tout-en-un</div>

                    <h1 class="tp-title">
                        Réserver, louer, vendre,
                        <span class="tp-title-accent">gérer simplement.</span>
                    </h1>

                    <p class="tp-copy mt-6">
                        TaPrestation réunit en un seul endroit les services, la location, la vente, le food,
                        la messagerie et le suivi d’activité. Une expérience plus claire pour le client,
                        plus fluide pour le prestataire.
                    </p>

                    <div class="tp-badges">
                        <span class="tp-badge"><i class="fas fa-check-circle"></i> Parcours plus simple</span>
                        <span class="tp-badge"><i class="fas fa-shield-alt"></i> Paiement sécurisé</span>
                        <span class="tp-badge"><i class="fas fa-store"></i> Vente, location, food</span>
                    </div>

                    <div class="tp-actions">
                        <a href="{{ route('prestataires.index') }}" class="tp-btn tp-btn-primary" aria-label="Trouver un prestataire">
                            <i class="fas fa-search"></i>
                            Trouver un prestataire
                        </a>

                        <a href="{{ route('prestataire.register') }}" class="tp-btn tp-btn-secondary" aria-label="Créer mon espace prestataire">
                            <i class="fas fa-user-plus"></i>
                            Devenir prestataire
                        </a>
                    </div>

                    <div class="tp-metrics" aria-label="Chiffres clés">
                        <span class="tp-metric"><strong>{{ number_format($stats['total_prestataires'] ?? 0, 0, ',', ' ') }}</strong> prestataires</span>
                        <span class="tp-metric"><strong>{{ number_format($stats['total_services'] ?? 0, 0, ',', ' ') }}</strong> services</span>
                        <span class="tp-metric"><strong>{{ number_format((float) ($stats['avg_rating'] ?? 0), 1, ',', ' ') }}</strong> note moyenne</span>
                    </div>
                </div>

                <div class="space-y-4">
                    <div id="download-app" class="tp-panel tp-panel-padding tp-install-panel">
                        <div class="flex flex-col gap-4">
                            <div class="flex items-center gap-3">
                                <div class="w-11 h-11 rounded-2xl bg-white/10 flex items-center justify-center text-lg">
                                    <i class="fas fa-mobile-alt"></i>
                                </div>
                                <div>
                                    <div class="font-black text-base sm:text-lg">Installer l’application</div>
                                    <div class="text-slate-300 text-sm">Android • iPhone • iPad</div>
                                </div>
                            </div>

                            <p class="text-slate-300 text-sm leading-7">
                                Accédez à TaPrestation comme une vraie app, directement depuis votre écran d’accueil.
                            </p>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                <button id="android-install-btn" type="button" class="tp-btn tp-btn-primary !min-h-[3rem] !py-3">
                                    <i class="fab fa-android"></i>
                                    <span id="android-install-label">Installer</span>
                                </button>

                                <button id="ios-install-btn" type="button" class="tp-btn tp-btn-light !min-h-[3rem] !py-3">
                                    <i class="fab fa-apple"></i>
                                    Guide iPhone / iPad
                                </button>
                            </div>

                            <div id="android-install-hint" class="text-xs text-slate-300 leading-6"></div>
                        </div>
                    </div>

                    <div class="tp-panel tp-panel-padding">
                        <div class="flex items-center justify-between gap-3 mb-4">
                            <div>
                                <div class="tp-kicker !mb-2">L’essentiel</div>
                                <h2 class="tp-card-title !mb-0">Tout ce qui compte, visible rapidement</h2>
                            </div>
                            <div class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-amber-50 border border-amber-200 text-amber-700 text-sm font-extrabold">
                                <i class="fas fa-star"></i>
                                {{ number_format((float) ($stats['avg_rating'] ?? 0), 1, ',', ' ') }}
                            </div>
                        </div>

                        <div class="tp-features-grid">
                            @foreach($homeFeatures as $feature)
                                <div class="tp-feature">
                                    <i class="fas {{ $feature['icon'] }}"></i>
                                    <span>{{ $feature['label'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="tp-three-col">
                <div class="tp-panel tp-panel-padding">
                    <div class="tp-kicker">Côté client</div>
                    <h3 class="tp-card-title">Trouver et réserver sans friction</h3>
                    <div class="tp-list">
                        @foreach($clientTools as $tool)
                            <div class="tp-list-item">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ $tool }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="tp-panel tp-panel-padding">
                    <div class="tp-kicker">Côté prestataire</div>
                    <h3 class="tp-card-title">Gérer l’activité plus proprement</h3>
                    <div class="tp-list">
                        @foreach($prestataireTools as $tool)
                            <div class="tp-list-item">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ $tool }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="tp-panel tp-panel-padding">
                    <div class="tp-kicker">Accès rapides</div>
                    <h3 class="tp-card-title">Les entrées principales</h3>

                    <div class="tp-link-list">
                        <a href="{{ route('services.index') }}" class="tp-link-row">
                            <div>
                                <strong>Prestations</strong>
                                <span>Réserver un service</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>

                        <a href="{{ route('equipment.index') }}" class="tp-link-row">
                            <div>
                                <strong>Location</strong>
                                <span>Louer du matériel</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>

                        <a href="{{ route('urgent-sales.index') }}" class="tp-link-row">
                            <div>
                                <strong>Vente</strong>
                                <span>Acheter ou vendre rapidement</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>

                        <a href="{{ route('prestataire.register') }}" class="tp-link-row">
                            <div>
                                <strong>Espace prestataire</strong>
                                <span>Créer mon activité</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="tp-panel tp-panel-padding mt-4 sm:mt-5">
                <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 mb-4">
                    <div>
                        <div class="tp-kicker">Idées populaires</div>
                        <h3 class="tp-card-title !mb-0">Activités à lancer ou à réserver</h3>
                    </div>
                    <a href="{{ route('services.index') }}" class="font-extrabold text-blue-700 inline-flex items-center gap-2 no-underline">
                        Voir toutes les activités
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>

                <div class="tp-chip-wrap">
                    @foreach($activityIdeas as $idea)
                        <a href="{{ url('/services?search=' . urlencode($idea)) }}" class="tp-chip">
                            {{ $idea }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- PARCOURS --}}
    <section class="tp-section tp-alt-section">
        <div class="tp-container">
            <div class="tp-section-head">
                <div class="tp-kicker justify-center">Parcours clairs</div>
                <h2 class="tp-section-title">Ce que vous pouvez faire sur TaPrestation</h2>
                <p class="tp-section-copy">
                    Une page d’accueil plus simple, plus directe, avec les vraies portes d’entrée mises en avant.
                </p>
            </div>

            <div class="tp-cards-3">
                <a href="{{ route('services.index') }}" class="tp-service-card">
                    <div class="tp-service-icon blue">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <h3>Prestations</h3>
                    <p>
                        Réservez un service en consultant les profils, les avis, les échanges et les disponibilités.
                    </p>
                    <div class="tp-mini-list">
                        <div><i class="fas fa-check-circle text-blue-600"></i><span>Recherche claire par besoin</span></div>
                        <div><i class="fas fa-check-circle text-blue-600"></i><span>Profils visibles et rassurants</span></div>
                        <div><i class="fas fa-check-circle text-blue-600"></i><span>Réservation plus directe</span></div>
                    </div>
                    <div class="tp-card-link text-blue-700">
                        Parcourir les prestations
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </a>

                <a href="{{ route('equipment.index') }}" class="tp-service-card">
                    <div class="tp-service-icon green">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3>Location équipement</h3>
                    <p>
                        Mettez en avant le bon matériel, les bonnes dates et un parcours de location plus compréhensible.
                    </p>
                    <div class="tp-mini-list">
                        <div><i class="fas fa-check-circle text-green-600"></i><span>Catalogue plus lisible</span></div>
                        <div><i class="fas fa-check-circle text-green-600"></i><span>Disponibilités visibles</span></div>
                        <div><i class="fas fa-check-circle text-green-600"></i><span>Suivi plus simple</span></div>
                    </div>
                    <div class="tp-card-link text-emerald-700">
                        Voir les équipements
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </a>

                <a href="{{ route('urgent-sales.index') }}" class="tp-service-card">
                    <div class="tp-service-icon orange">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3>Vente & stock</h3>
                    <p>
                        Vendez comme dans une vraie boutique, avec une lecture plus propre des produits et de l’activité.
                    </p>
                    <div class="tp-mini-list">
                        <div><i class="fas fa-check-circle text-orange-600"></i><span>Produits mieux mis en avant</span></div>
                        <div><i class="fas fa-check-circle text-orange-600"></i><span>Gestion de stock centralisée</span></div>
                        <div><i class="fas fa-check-circle text-orange-600"></i><span>Suivi client plus net</span></div>
                    </div>
                    <div class="tp-card-link text-orange-700">
                        Explorer la vente
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </a>
            </div>
        </div>
    </section>

    {{-- POURQUOI --}}
    <section class="tp-section tp-dark-section">
        <div class="tp-container relative z-10">
            <div class="tp-section-head tp-left">
                <div class="tp-kicker !text-blue-300">Pourquoi TaPrestation</div>
                <h2 class="tp-section-title">Une plateforme plus lisible, plus fluide, plus utile.</h2>
                <p class="tp-section-copy">
                    L’objectif est simple : moins de bruit visuel, moins de friction, plus de clarté pour le client
                    et plus de contrôle pour le prestataire.
                </p>
            </div>

            <div class="tp-cards-4">
                <div class="tp-benefit-card">
                    <span class="tp-benefit-index">01</span>
                    <div class="tp-benefit-icon green"><i class="fas fa-calendar-check"></i></div>
                    <h3>Réservation plus claire</h3>
                    <p>Le parcours devient plus direct, avec moins de surcharge et des actions mieux hiérarchisées.</p>
                </div>

                <div class="tp-benefit-card">
                    <span class="tp-benefit-index">02</span>
                    <div class="tp-benefit-icon violet"><i class="fas fa-comments"></i></div>
                    <h3>Messagerie intégrée</h3>
                    <p>Les échanges restent centralisés, sans multiplier les outils ni perdre les informations utiles.</p>
                </div>

                <div class="tp-benefit-card">
                    <span class="tp-benefit-index">03</span>
                    <div class="tp-benefit-icon orange"><i class="fas fa-star"></i></div>
                    <h3>Confiance renforcée</h3>
                    <p>Les avis, les profils et les repères visuels permettent de choisir plus vite et avec plus d’assurance.</p>
                </div>

                <div class="tp-benefit-card">
                    <span class="tp-benefit-index">04</span>
                    <div class="tp-benefit-icon blue"><i class="fas fa-chart-line"></i></div>
                    <h3>Pilotage plus propre</h3>
                    <p>Prestations, location, vente, food et suivi d’activité restent dans un environnement cohérent.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- PRESTATAIRES --}}
    <section class="tp-section">
        <div class="tp-container">
            <div class="tp-section-head">
                <div class="tp-kicker justify-center">Sélection du moment</div>
                <h2 class="tp-section-title">Des profils mis en avant plus proprement</h2>
                <p class="tp-section-copy">
                    Une présentation plus légère, plus rassurante et plus moderne pour valoriser les prestataires.
                </p>
            </div>

            <div class="tp-cards-3">
                @forelse($featuredPrestataires as $prestataire)
                    @php
                        $providerUser = $prestataire->user;
                        $providerName = $providerUser?->name ?: 'Prestataire';
                        $providerAvatar = $providerUser?->avatar;
                        $providerInitial = strtoupper(mb_substr($providerName, 0, 1));
                        $speciality = $prestataire->speciality ?? $prestataire->specialty ?? 'Spécialité non renseignée';
                        $rating = (float) ($prestataire->rating_average ?? 0);
                        $fullStars = floor($rating);
                        $hasHalfStar = ($rating - $fullStars) >= 0.5;
                    @endphp

                    <div class="tp-provider-card">
                        <div class="tp-provider-top"></div>

                        <div class="tp-provider-body">
                            <div class="tp-avatar">
                                @if($prestataire->photo)
                                    <img src="{{ asset('storage/' . $prestataire->photo) }}" alt="Photo de {{ $providerName }}" class="w-full h-full object-cover" loading="lazy">
                                @elseif($providerAvatar)
                                    <img src="{{ asset('storage/' . $providerAvatar) }}" alt="Photo de {{ $providerName }}" class="w-full h-full object-cover" loading="lazy">
                                @else
                                    <span>{{ $providerInitial }}</span>
                                @endif
                            </div>

                            <div class="tp-provider-name">{{ $providerName }}</div>
                            <div class="tp-provider-sub">{{ $speciality }}</div>

                            @if(method_exists($prestataire, 'isVerified') && $prestataire->isVerified())
                                <div class="tp-verified">
                                    <i class="fas fa-check-circle"></i>
                                    Vérifié
                                </div>
                            @endif

                            <div class="tp-rating">
                                @for($i = 0; $i < 5; $i++)
                                    @if($i < $fullStars)
                                        <i class="fas fa-star text-amber-400"></i>
                                    @elseif($i == $fullStars && $hasHalfStar)
                                        <i class="fas fa-star-half-alt text-amber-400"></i>
                                    @else
                                        <i class="fas fa-star text-slate-300"></i>
                                    @endif
                                @endfor
                                <span>{{ number_format($rating, 1, ',', ' ') }}</span>
                                <span>•</span>
                                <span>{{ $prestataire->total_reviews ?? 0 }} avis</span>
                            </div>

                            <div class="tp-provider-meta">
                                <span class="tp-provider-pill">{{ $prestataire->services->count() }} service{{ $prestataire->services->count() > 1 ? 's' : '' }}</span>
                                <span class="tp-provider-pill">{{ $prestataire->total_reviews ?? 0 }} retour{{ ($prestataire->total_reviews ?? 0) > 1 ? 's' : '' }}</span>
                            </div>

                            <a href="{{ route('prestataires.show', $prestataire) }}" class="tp-provider-btn">
                                Voir le profil
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full tp-panel tp-panel-padding text-center">
                        <h3 class="tp-card-title mb-3">Aucun prestataire vedette pour le moment</h3>
                        <p class="tp-copy mx-auto">
                            Les profils mis en avant apparaîtront ici dès qu’ils seront disponibles.
                        </p>
                    </div>
                @endforelse
            </div>

            <div class="text-center mt-10">
                <a href="{{ route('prestataires.index') }}" class="tp-btn tp-btn-primary">
                    Voir tous les prestataires
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>

    {{-- SEO / CONTENU TEXTE --}}
    <section class="tp-section tp-alt-section">
        <div class="tp-container">
            <div class="tp-section-head">
                <div class="tp-kicker justify-center">Découvrir plus vite</div>
                <h2 class="tp-section-title">Trouvez le bon prestataire près de chez vous</h2>
                <p class="tp-section-copy">
                    TaPrestation rassemble les services les plus recherchés dans une interface plus simple à comprendre,
                    plus agréable à lire et plus rapide à utiliser.
                </p>
            </div>

            <div class="mb-10">
                <h3 class="tp-card-title text-center mb-4">Services populaires</h3>
                <div class="tp-chip-wrap justify-center">
                    <a href="{{ url('/services?category=coiffure') }}" class="tp-chip">Coiffure</a>
                    <a href="{{ url('/services?category=menage') }}" class="tp-chip">Ménage</a>
                    <a href="{{ url('/services?category=bricolage') }}" class="tp-chip">Bricolage</a>
                    <a href="{{ url('/services?category=traiteur') }}" class="tp-chip">Traiteur</a>
                    <a href="{{ url('/services?category=photo') }}" class="tp-chip">Photographe</a>
                    <a href="{{ url('/services?category=dj') }}" class="tp-chip">DJ & animation</a>
                    <a href="{{ url('/services?category=decoration') }}" class="tp-chip">Décoration</a>
                    <a href="{{ url('/services?category=jardinage') }}" class="tp-chip">Jardinage</a>
                </div>
            </div>

            <div class="mb-10">
                <h3 class="tp-card-title text-center mb-4">Villes populaires</h3>
                <div class="tp-chip-wrap justify-center">
                    @foreach($popularCities as $city)
                        <a href="{{ url('/services?city=' . strtolower($city)) }}" class="tp-chip">
                            <i class="fas fa-map-marker-alt text-blue-600 mr-1"></i>
                            {{ $city }}
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="tp-seo-wrap mb-10">
                <div class="tp-seo-box">
                    <h3 class="tp-card-title">Pourquoi choisir TaPrestation ?</h3>
                    <p>
                        TaPrestation permet de centraliser les besoins du client et les outils du prestataire dans une seule plateforme.
                        Vous pouvez y rechercher un service, comparer les profils, consulter les avis, réserver, échanger,
                        commander, louer ou vendre dans un environnement cohérent.
                    </p>
                    <p class="mt-4">
                        Cette version de la page d’accueil met davantage l’accent sur la lisibilité, l’accueil et la clarté du parcours.
                        Les blocs sont plus respirants, les appels à l’action sont mieux placés et l’ensemble paraît plus premium sans être chargé.
                    </p>
                </div>

                <div class="tp-seo-box">
                    <h3 class="tp-card-title">Vous êtes prestataire ?</h3>
                    <p>
                        TaPrestation vous permet de présenter vos services, gérer vos créneaux, recevoir des demandes,
                        piloter vos commandes et donner à votre activité une image plus professionnelle.
                    </p>
                    <p class="mt-4">
                        L’objectif n’est pas seulement d’être visible, mais d’avoir un vrai espace de gestion,
                        plus agréable à utiliser et plus crédible aux yeux du client.
                    </p>

                    <a href="{{ route('prestataire.register') }}" class="tp-btn tp-btn-secondary mt-5">
                        Créer mon espace prestataire
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>

            <div class="tp-faq">
                <details>
                    <summary>
                        <span>Comment trouver un prestataire sur TaPrestation ?</span>
                        <i class="fas fa-chevron-down text-slate-400"></i>
                    </summary>
                    <div class="tp-faq-content">
                        Parcourez les catégories, utilisez les filtres disponibles et consultez les profils pour choisir le prestataire qui correspond à votre besoin.
                    </div>
                </details>

                <details>
                    <summary>
                        <span>Le paiement est-il sécurisé ?</span>
                        <i class="fas fa-chevron-down text-slate-400"></i>
                    </summary>
                    <div class="tp-faq-content">
                        Oui, le paiement en ligne est prévu pour offrir un cadre plus rassurant et plus structuré selon les modules activés sur la plateforme.
                    </div>
                </details>

                <details>
                    <summary>
                        <span>Comment devenir prestataire ?</span>
                        <i class="fas fa-chevron-down text-slate-400"></i>
                    </summary>
                    <div class="tp-faq-content">
                        Il suffit de créer votre espace, compléter votre profil, ajouter vos prestations et commencer à recevoir vos premières demandes.
                    </div>
                </details>

                <details>
                    <summary>
                        <span>Quels services sont disponibles ?</span>
                        <i class="fas fa-chevron-down text-slate-400"></i>
                    </summary>
                    <div class="tp-faq-content">
                        La plateforme peut accueillir de nombreux univers : coiffure, ménage, bricolage, traiteur, photo, DJ, décoration, location de matériel, vente, food et bien plus.
                    </div>
                </details>
            </div>

            <div class="mt-10">
                <div class="tp-cta-final">
                    <h3 class="text-2xl sm:text-3xl font-black mb-3">Prêt à passer à l’action ?</h3>
                    <p class="text-white/90 max-w-2xl mx-auto leading-8 mb-6">
                        Trouvez un prestataire, ouvrez votre activité ou installez TaPrestation sur votre téléphone.
                    </p>

                    <div class="flex flex-col sm:flex-row gap-3 justify-center">
                        <a href="{{ route('prestataires.index') }}" class="tp-btn tp-btn-secondary !bg-white !text-blue-700 !border-0">
                            <i class="fas fa-search"></i>
                            Trouver un prestataire
                        </a>

                        <a href="{{ route('prestataire.register') }}" class="tp-btn tp-btn-light">
                            <i class="fas fa-user-plus"></i>
                            Devenir prestataire
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- FOOTER --}}
    <footer class="tp-footer">
        <div class="tp-container tp-footer-top">
            <div class="tp-footer-grid">
                <div>
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-emerald-500 flex items-center justify-center text-white">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <h3>TaPrestation</h3>
                    </div>
                    <p>
                        Une plateforme pensée pour rendre la mise en relation, la réservation et la gestion d’activité
                        plus simples, plus lisibles et plus professionnelles.
                    </p>
                </div>

                <div>
                    <h4>Plateforme</h4>
                    <ul>
                        <li><a href="{{ route('prestataires.index') }}">Trouver des prestataires</a></li>
                        <li><a href="{{ route('services.index') }}">Découvrir les services</a></li>
                        <li><a href="{{ route('equipment.index') }}">Louer du matériel</a></li>
                        <li><a href="{{ route('urgent-sales.index') }}">Vente & stock</a></li>
                    </ul>
                </div>

                <div>
                    <h4>Ressources</h4>
                    <ul>
                        <li><a href="{{ route('videos.feed') }}">Vidéos</a></li>
                        <li><a href="{{ route('faq') }}">FAQ</a></li>
                        <li><a href="{{ route('contact') }}">Contact</a></li>
                    </ul>
                </div>

                <div>
                    <h4>Légal</h4>
                    <ul>
                        <li><a href="{{ route('cgu') }}">CGU</a></li>
                        <li><a href="{{ route('cgv') }}">CGV</a></li>
                        <li><a href="{{ route('privacy') }}">Confidentialité</a></li>
                        <li><a href="{{ route('cookies') }}">Cookies</a></li>
                        <li><a href="{{ route('mentions') }}">Mentions légales</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="tp-footer-bottom">
            <div class="tp-container flex flex-col md:flex-row items-center justify-between gap-3">
                <div class="text-sm text-slate-300">
                    © {{ date('Y') }} TaPrestation. Tous droits réservés.
                </div>

                <div class="flex flex-wrap items-center justify-center gap-5 text-sm text-slate-400">
                    <span><i class="fas fa-map-marker-alt text-blue-400 mr-2"></i>France</span>
                    <span><i class="fas fa-shield-alt text-emerald-400 mr-2"></i>Sécurisé</span>
                    <span><i class="fas fa-mobile-alt text-amber-400 mr-2"></i>PWA installable</span>
                </div>
            </div>
        </div>
    </footer>
</div>

{{-- MODAL INSTALL PWA --}}
<div id="tp-install-modal" class="tp-install-modal" role="dialog" aria-modal="true" aria-labelledby="tp-install-title">
    <div class="tp-install-overlay" data-close-install></div>

    <div class="tp-install-dialog-wrap">
        <div class="tp-install-dialog">
            <div class="tp-install-head">
                <h4 id="tp-install-title">Installation</h4>
                <button type="button" class="tp-install-close" id="tp-install-close-btn" aria-label="Fermer">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="tp-install-body" id="tp-install-body"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script defer>
    let deferredPrompt = null;

    function openInstallModal(title, content) {
        const modal = document.getElementById('tp-install-modal');
        const body = document.getElementById('tp-install-body');
        const heading = document.getElementById('tp-install-title');

        heading.textContent = title;
        body.innerHTML = content;
        modal.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }

    function closeInstallModal() {
        const modal = document.getElementById('tp-install-modal');
        modal.classList.remove('is-open');
        document.body.style.overflow = '';
    }

    function getIosGuideHtml() {
        return `
            <div class="tp-note">
                Sur iPhone / iPad, l’installation fonctionne depuis <strong>Safari</strong>.
            </div>

            <div class="tp-step-list">
                <div class="tp-step">
                    <div class="tp-step-num">1</div>
                    <div>
                        <strong class="block text-slate-900 mb-1">Ouvrez le site avec Safari</strong>
                        <span>Si vous êtes sur un autre navigateur, ouvrez TaPrestation dans Safari.</span>
                    </div>
                </div>

                <div class="tp-step">
                    <div class="tp-step-num">2</div>
                    <div>
                        <strong class="block text-slate-900 mb-1">Appuyez sur “Partager”</strong>
                        <span>Utilisez l’icône de partage en bas de l’écran.</span>
                    </div>
                </div>

                <div class="tp-step">
                    <div class="tp-step-num">3</div>
                    <div>
                        <strong class="block text-slate-900 mb-1">Choisissez “Sur l’écran d’accueil”</strong>
                        <span>Validez ensuite l’ajout pour installer TaPrestation comme une app.</span>
                    </div>
                </div>
            </div>
        `;
    }

    function getAndroidGuideHtml(nativeAvailable = false) {
        return `
            <div class="tp-note">
                Sur Android, l’installation fonctionne généralement avec <strong>Chrome</strong>, <strong>Edge</strong> ou <strong>Samsung Internet</strong>.
            </div>

            <div class="tp-step-list">
                <div class="tp-step">
                    <div class="tp-step-num">1</div>
                    <div>
                        <strong class="block text-slate-900 mb-1">Ouvrez le menu du navigateur</strong>
                        <span>Appuyez sur les trois points en haut à droite.</span>
                    </div>
                </div>

                <div class="tp-step">
                    <div class="tp-step-num">2</div>
                    <div>
                        <strong class="block text-slate-900 mb-1">Choisissez “Installer”</strong>
                        <span>Selon le navigateur, l’option peut aussi s’appeler “Ajouter à l’écran d’accueil”.</span>
                    </div>
                </div>

                <div class="tp-step">
                    <div class="tp-step-num">3</div>
                    <div>
                        <strong class="block text-slate-900 mb-1">Confirmez</strong>
                        <span>TaPrestation apparaîtra ensuite directement sur votre écran d’accueil.</span>
                    </div>
                </div>
            </div>

            ${nativeAvailable ? `
                <div class="mt-4">
                    <button type="button" id="tp-native-install-btn" class="tp-btn tp-btn-primary w-full">
                        <i class="fas fa-download"></i>
                        Installer maintenant
                    </button>
                </div>
            ` : ''}
        `;
    }

    async function installAndroidApp() {
        if (!deferredPrompt) {
            openInstallModal('Installation Android', getAndroidGuideHtml(false));
            return;
        }

        try {
            deferredPrompt.prompt();
            const choiceResult = await deferredPrompt.userChoice;

            deferredPrompt = null;
            updateInstallButtons();

            if (choiceResult.outcome !== 'accepted') {
                openInstallModal('Installation Android', getAndroidGuideHtml(false));
            }
        } catch (error) {
            openInstallModal('Installation Android', getAndroidGuideHtml(false));
        }
    }

    function installIosApp() {
        openInstallModal('Installation iPhone / iPad', getIosGuideHtml());
    }

    function updateInstallButtons() {
        const label = document.getElementById('android-install-label');
        const hint = document.getElementById('android-install-hint');

        if (!label || !hint) return;

        if (deferredPrompt) {
            label.textContent = 'Installer maintenant';
            hint.textContent = 'Installation en 1 clic disponible sur cet appareil.';
        } else {
            label.textContent = 'Guide Android';
            hint.textContent = 'Si le bouton d’installation n’apparaît pas, utilisez le menu du navigateur.';
        }
    }

    window.addEventListener('beforeinstallprompt', (event) => {
        event.preventDefault();
        deferredPrompt = event;
        updateInstallButtons();
    });

    window.addEventListener('appinstalled', () => {
        deferredPrompt = null;
        updateInstallButtons();
        closeInstallModal();
    });

    document.addEventListener('DOMContentLoaded', () => {
        const androidBtn = document.getElementById('android-install-btn');
        const iosBtn = document.getElementById('ios-install-btn');
        const closeBtn = document.getElementById('tp-install-close-btn');
        const modal = document.getElementById('tp-install-modal');

        androidBtn?.addEventListener('click', installAndroidApp);
        iosBtn?.addEventListener('click', installIosApp);
        closeBtn?.addEventListener('click', closeInstallModal);

        modal?.addEventListener('click', (e) => {
            if (e.target.closest('[data-close-install]')) {
                closeInstallModal();
            }
        });

        document.addEventListener('click', async (e) => {
            if (e.target.closest('#tp-native-install-btn') && deferredPrompt) {
                try {
                    deferredPrompt.prompt();
                    await deferredPrompt.userChoice;
                    deferredPrompt = null;
                    updateInstallButtons();
                    closeInstallModal();
                } catch (error) {}
            }
        });

        const isStandalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || !!window.navigator.standalone;
        if (isStandalone && window.innerWidth < 640) {
            document.body.classList.add('tp-app-mode');
        }

        updateInstallButtons();
    });
</script>
@endpush