@extends('layouts.app')

@section('content')
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

.investment-card {
    background: #f8fafc;
    transition: all 0.3s ease;
}

.investment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-step {
    position: relative;
    padding-left: 3rem;
}

.service-step::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: #D52B2B;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
}

.service-list {
    counter-reset: step-counter;
}

.pricing-highlight {
    background: #D52B2B;
    border: 2px solid #B91C1C;
    color: white;
}

/* Espacement des paragraphes */
.content-spacing p {
    margin-bottom: 1.5rem;
}
.content-spacing p:last-child {
    margin-bottom: 0;
}

* {
    font-family: 'Roboto', sans-serif;
}
</style>

<!-- Hero Section avec template -->
<x-hero-section 
    title="Patrimoine & Investissement : l'accompagnement d'un <span class='text-brand-red'>Avocat-Investisseur</span> pour les Dirigeants."
    :description="'Protéger votre entreprise est la première étape. La seconde est de faire de sa réussite le tremplin de votre liberté financière. En tant qu\'<strong>avocat</strong> et investisseur immobilier chevronné, nous avons créé le service sur-mesure pour construire votre <strong>patrimoine immobilier</strong>.'"
    background-image="images/patrimoine-immobilier.jpg"
    overlay-opacity="0.8"
/>

<!-- Histoire d'investisseur -->
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
                Mon histoire d'investisseur : des leçons apprises pour votre bénéfice.
            </h2>
            <div class="text-lg text-gray-700 leading-relaxed content-spacing">
                <p>
                    Avant de maîtriser les stratégies gagnantes, j'ai connu les pièges de l'<strong class="text-brand-red">investissement immobilier</strong>. Des conseils mal avisés, des artisans peu fiables, des montages fiscaux inadaptés...
                </p>
                <p>
                    C'est cette connaissance du terrain que je mets aujourd'hui à votre service en tant qu'<strong class="text-gray-800">avocat conseil</strong>.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Service Clé en Main -->
<section class="py-16 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
                Un service "Clé en Main" à 360° : de la chasse du bien à l'optimisation fiscale.
            </h2>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 service-list">
            <div class="investment-card p-6 rounded-xl service-step">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                    <strong>Définition de la stratégie d'investissement.</strong>
                </h3>
                <p class="text-gray-600">Analyse personnalisée de vos objectifs et contraintes.</p>
            </div>
            
            <div class="investment-card p-6 rounded-xl service-step">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                    <strong>Chasse de biens "off-market".</strong>
                </h3>
                <p class="text-gray-600">Accès à des opportunités exclusives non publiques.</p>
            </div>
            
            <div class="investment-card p-6 rounded-xl service-step">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                    <strong>Négociation et Audit juridique.</strong>
                </h3>
                <p class="text-gray-600">Sécurisation juridique complète de votre acquisition.</p>
            </div>
            
            <div class="investment-card p-6 rounded-xl service-step">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                    <strong>Montage Juridique et Fiscal par votre avocat :</strong>
                </h3>
                <p class="text-gray-600">C'est notre cœur de métier. Nous créons la structure la plus adaptée (<strong>SCI à l'IS/IR, LMNP...</strong>).</p>
            </div>
            
            <div class="investment-card p-6 rounded-xl service-step">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                    <strong>Suivi des Travaux et Ameublement.</strong>
                </h3>
                <p class="text-gray-600">Coordination complète jusqu'à la livraison clé en main.</p>
            </div>
            
            <div class="investment-card p-6 rounded-xl service-step">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                    <strong>Mise en place du Locataire.</strong>
                </h3>
                <p class="text-gray-600">Recherche et sélection de locataires de qualité.</p>
            </div>
        </div>
    </div>
</section>

<!-- Honoraires -->
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
                Des honoraires clairs, un service exclusif.
            </h2>
            <div class="pricing-highlight p-8 rounded-2xl">
                <div class="text-lg text-white leading-relaxed mb-4 content-spacing">
                    <p>
                        Notre rémunération est simple : un forfait de <strong class="text-2xl text-white">5% HT du montant de l'investissement</strong>, avec un minimum de <strong class="text-xl text-white">20 000€ HT</strong>.
                    </p>
                    <p class="text-white">
                        Pour garantir un niveau d'excellence, nous limitons notre accompagnement à <strong>4 nouveaux projets par mois.</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Final -->
<section class="py-16 bg-black text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl lg:text-4xl font-bold mb-6">
            Prêt à faire de votre réussite professionnelle le levier de votre patrimoine ?
        </h2>
        <div class="mt-8">
            <button onclick="openFreeAppointment()" class="inline-flex items-center bg-brand-red text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-red-700 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                <div>
                    Planifier une Session Stratégique Investissement
                    <span class="block text-sm font-normal">(30 min - Offert)</span>
                </div>
            </button>
        </div>
    </div>
</section>
@endsection