"use client"

import { useState, useEffect } from "react"
import {TableOfContents} from "@/components/table-of-contents"
import FeeCalculator from "@/components/fee-calculator"
import { ConsultationCTA } from "@/components/consultation-cta"
import ContactWidget from "@/components/contact-widget"
import { Building, MapPin, TrendingUp, Clock, Percent, Home, ArrowRight, Check } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

type VilleInfo = {
  nom: string
  slug: string
  description: string
  quartiers: string[]
  image?: string
  statistiques?: {
    prixMoyen?: number
    delaiLocation?: string
    tauxVacance?: string
    rendementMoyen?: string
  }
  particularites?: string[]
  typologieDemandee?: string[]
  transportCommun?: string[]
  pointsInteret?: string[]
  tendances?: string
}

export default function VillePageClient({ villeInfo }: { villeInfo: VilleInfo }) {
  const [activeSection, setActiveSection] = useState<string>("")

  const sections = [
    { id: "presentation", title: "Présentation" },
    { id: "marche-immobilier", title: `Marché immobilier à ${villeInfo.nom}` },
    { id: "quartiers", title: `Quartiers de ${villeInfo.nom}` },
    { id: "services", title: "Nos services" },
    { id: "formules", title: "Nos formules" },
    { id: "tarifs", title: "Tarifs" },
    { id: "avantages", title: "Avantages" },
    { id: "faq", title: "Questions fréquentes" },
  ]

  useEffect(() => {
    const handleScroll = () => {
      const sectionElements = sections.map((section) => ({
        id: section.id,
        element: document.getElementById(section.id),
      }))

      const currentSection = sectionElements.find((section) => {
        if (!section.element) return false
        const rect = section.element.getBoundingClientRect()
        return rect.top <= 100 && rect.bottom > 100
      })

      if (currentSection) {
        setActiveSection(currentSection.id)
      }
    }

    window.addEventListener("scroll", handleScroll)
    handleScroll() // Initial check

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [villeInfo.nom, villeInfo.slug])

  // Fonction pour obtenir l'image de la ville
  const getVilleImage = (ville: string) => {
    const villeSlug = ville.toLowerCase()

    // Utiliser les images existantes pour les villes principales
    if (villeSlug === "nice") {
      return "/nice-promenade-des-anglais.png"
    } else if (villeSlug === "lyon") {
      return "/lyon-france-skyline.png"
    } else if (villeSlug === "marseille") {
      return "/marseille-port.png"
    } else if (villeSlug === "toulouse") {
      return "/toulouse-pink-city.png"
    } else if (villeSlug === "nantes") {
      return "/nantes-france-city.png"
    } else if (villeSlug === "lille") {
      return "/lille-grand-place.png"
    } else if (villeSlug === "montpellier") {
      return "/montpellier-place-comedie.png"
    } else if (villeSlug === "strasbourg") {
      return "/strasbourg-cathedral.png"
    } else if (villeSlug === "aix-en-provence") {
      return "/aix-en-provence-fontaine.png"
    } else if (villeSlug === "bordeaux") {
      return "/bordeaux-place-bourse.png"
    } else {
      // Image par défaut si la ville n'est pas dans notre liste
      return "/immobilier-scene.png"
    }
  }

  // Obtenir l'image pour cette ville
  const villeImagePath = getVilleImage(villeInfo.nom)

  return (
    <div className="bg-white">
      {/* Header avec fond bleu et image de la ville */}
      <div className="relative bg-[#002395] text-white">
        {/* Image de fond avec overlay */}
        <div className="absolute inset-0 opacity-20">
          <Image
            src={villeImagePath || "/placeholder.svg"}
            alt={`Vue de ${villeInfo.nom}`}
            fill
            className="object-cover"
            priority
          />
        </div>

        <div className="container mx-auto px-4 py-16 md:py-24 relative z-10">
          {/* Fil d'Ariane */}
          <div className="flex items-center gap-2 text-white/80 mb-8">
            {[
              { name: "Accueil", url: "/" },
              { name: "Services", url: "/services" },
              { name: "Gestion Locative en France", url: "/services/gestion-locative-france" },
              {
                name: `Gestion Locative ${villeInfo.nom}`,
                url: `/services/gestion-locative-france/${villeInfo.slug}`,
              },
            ].map((item, index) => (
              <div key={index} className="flex items-center">
                {index > 0 && <span className="mx-2">›</span>}
                {index === 3 ? (
                  <span>{item.name}</span>
                ) : (
                  <Link href={item.url} className="hover:text-white">
                    {item.name}
                  </Link>
                )}
              </div>
            ))}
          </div>

          {/* Titre et description */}
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Gestion Locative à {villeInfo.nom}</h1>
          <p className="text-xl text-white/90 max-w-3xl mb-8">
            Confiez la gestion de votre bien immobilier à DOGES, votre administrateur de biens à {villeInfo.nom}.
            Services personnalisés et honoraires transparents.
          </p>

          {/* Boutons CTA */}
          <div className="flex flex-wrap gap-4">
            <Link href="/contact">
              <button className="bg-white text-[#002395] hover:bg-white hover:text-[#002395] px-6 py-3 rounded font-medium transition-colors">
                Demander un devis gratuit
              </button>
            </Link>
            <Link href="#presentation">
              <button className="bg-transparent text-white border-2 border-white hover:bg-white hover:text-[#002395] px-6 py-3 rounded font-medium transition-colors">
                En savoir plus
              </button>
            </Link>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 py-12">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Main Content */}
          <div className="lg:w-2/3">
            <section id="presentation" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">
                Gestion locative professionnelle à {villeInfo.nom}
              </h2>

              {/* Image de la ville - utiliser l'image existante */}
              <div className="mb-6 rounded-lg overflow-hidden">
                <Image
                  src={villeImagePath || "/placeholder.svg"}
                  alt={`Vue de ${villeInfo.nom}`}
                  width={800}
                  height={400}
                  className="w-full h-80 object-cover rounded-lg"
                  priority
                />
              </div>

              <div className="prose max-w-none">
                <p className="text-lg mb-4">
                  DOGES vous propose des services de gestion locative professionnelle à {villeInfo.nom}. Notre équipe
                  d'experts connaît parfaitement le marché immobilier local et vous accompagne dans la gestion
                  quotidienne de votre bien.
                </p>
                <p className="mb-6">{villeInfo.description}</p>

                {villeInfo.particularites && (
                  <div className="bg-blue-50 p-6 rounded-lg mb-6">
                    <h3 className="text-xl font-semibold mb-3 text-[#002395]">
                      Particularités du marché à {villeInfo.nom}
                    </h3>
                    <ul className="list-disc pl-5 space-y-2">
                      {villeInfo.particularites.map((particularite, index) => (
                        <li key={index}>{particularite}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </section>

            <section id="marche-immobilier" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">Le marché immobilier à {villeInfo.nom}</h2>

              {villeInfo.statistiques && (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                  {villeInfo.statistiques.prixMoyen && (
                    <div className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex flex-col items-center">
                      <TrendingUp className="h-8 w-8 text-[#002395] mb-2" />
                      <span className="text-sm text-gray-600">Prix moyen au m²</span>
                      <span className="text-xl font-bold">
                        {villeInfo.statistiques.prixMoyen.toLocaleString("fr-FR")} €
                      </span>
                    </div>
                  )}

                  {villeInfo.statistiques.delaiLocation && (
                    <div className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex flex-col items-center">
                      <Clock className="h-8 w-8 text-[#002395] mb-2" />
                      <span className="text-sm text-gray-600">Délai moyen de location</span>
                      <span className="text-xl font-bold">{villeInfo.statistiques.delaiLocation}</span>
                    </div>
                  )}

                  {villeInfo.statistiques.tauxVacance && (
                    <div className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex flex-col items-center">
                      <Building className="h-8 w-8 text-[#002395] mb-2" />
                      <span className="text-sm text-gray-600">Taux de vacance</span>
                      <span className="text-xl font-bold">{villeInfo.statistiques.tauxVacance}</span>
                    </div>
                  )}

                  {villeInfo.statistiques.rendementMoyen && (
                    <div className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex flex-col items-center">
                      <Percent className="h-8 w-8 text-[#002395] mb-2" />
                      <span className="text-sm text-gray-600">Rendement moyen</span>
                      <span className="text-xl font-bold">{villeInfo.statistiques.rendementMoyen}</span>
                    </div>
                  )}
                </div>
              )}

              {villeInfo.tendances && (
                <div className="bg-gray-50 p-6 rounded-lg mb-6">
                  <h3 className="text-xl font-semibold mb-3">Tendances actuelles</h3>
                  <p>{villeInfo.tendances}</p>
                </div>
              )}

              {villeInfo.typologieDemandee && (
                <div className="mb-6">
                  <h3 className="text-xl font-semibold mb-3">Biens les plus demandés</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {villeInfo.typologieDemandee.map((type, index) => (
                      <div
                        key={index}
                        className="flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200"
                      >
                        <Home className="h-5 w-5 text-[#002395]" />
                        <span>{type}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </section>

            <section id="quartiers" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">Les quartiers de {villeInfo.nom}</h2>
              <p className="mb-6">
                {villeInfo.nom} est composée de plusieurs quartiers, chacun avec ses particularités et son attractivité
                pour les investisseurs et locataires.
              </p>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                {villeInfo.quartiers.map((quartier, index) => (
                  <div
                    key={index}
                    className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center gap-3"
                  >
                    <MapPin className="h-5 w-5 text-[#002395]" />
                    <div>
                      <h3 className="font-semibold">{quartier}</h3>
                    </div>
                  </div>
                ))}
              </div>

              {villeInfo.transportCommun && (
                <div className="bg-gray-50 p-6 rounded-lg mb-6">
                  <h3 className="text-xl font-semibold mb-3">Transports en commun</h3>
                  <ul className="list-disc pl-5 space-y-2">
                    {villeInfo.transportCommun.map((transport, index) => (
                      <li key={index}>{transport}</li>
                    ))}
                  </ul>
                </div>
              )}

              {villeInfo.pointsInteret && (
                <div className="bg-gray-50 p-6 rounded-lg">
                  <h3 className="text-xl font-semibold mb-3">Points d'intérêt</h3>
                  <ul className="list-disc pl-5 space-y-2">
                    {villeInfo.pointsInteret.map((point, index) => (
                      <li key={index}>{point}</li>
                    ))}
                  </ul>
                </div>
              )}
            </section>

            <section id="services" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">
                Nos services de gestion locative à {villeInfo.nom}
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-3 text-[#002395]">Recherche de locataires</h3>
                  <ul className="space-y-2">
                    <li>• Étude de marché et fixation du loyer optimal</li>
                    <li>• Publicité et marketing du bien</li>
                    <li>• Visites et sélection rigoureuse des candidats</li>
                    <li>• Vérification complète des dossiers</li>
                    <li>• Rédaction et signature du bail</li>
                  </ul>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-3 text-[#002395]">Gestion administrative</h3>
                  <ul className="space-y-2">
                    <li>• Établissement des quittances de loyer</li>
                    <li>• Révision annuelle des loyers</li>
                    <li>• Régularisation des charges</li>
                    <li>• Gestion des assurances</li>
                    <li>• Déclarations fiscales et aide à l'optimisation</li>
                  </ul>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-3 text-[#002395]">Gestion technique</h3>
                  <ul className="space-y-2">
                    <li>• Organisation des états des lieux</li>
                    <li>• Suivi et coordination des travaux</li>
                    <li>• Gestion des sinistres et dégâts</li>
                    <li>• Réseau d'artisans qualifiés à {villeInfo.nom}</li>
                    <li>• Visites techniques périodiques</li>
                  </ul>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-3 text-[#002395]">Gestion financière</h3>
                  <ul className="space-y-2">
                    <li>• Encaissement des loyers et charges</li>
                    <li>• Versements réguliers au propriétaire</li>
                    <li>• Relances en cas d'impayés</li>
                    <li>• Gestion des dépôts de garantie</li>
                    <li>• Reporting financier détaillé</li>
                  </ul>
                </div>
              </div>
            </section>

            <section id="formules" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">Nos formules de gestion locative</h2>
              <p className="mb-6">
                Nous proposons trois formules adaptées à vos besoins spécifiques pour la gestion de votre bien à{" "}
                {villeInfo.nom}. Choisissez celle qui correspond le mieux à vos attentes.
              </p>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Formule Essentielle */}
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm relative h-full flex flex-col">
                  <h3 className="text-xl font-bold mb-2 text-[#002395]">Formule Essentielle</h3>
                  <div className="text-3xl font-bold mb-2">3,9% HT</div>
                  <p className="text-gray-600 mb-6">des loyers encaissés</p>

                  <div className="space-y-3 mb-6 flex-grow">
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Gestion administrative</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Encaissement des loyers</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Révision annuelle des loyers</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Régularisation des charges</span>
                    </div>
                  </div>

                  <Link
                    href={`/contact?formule=essentielle&ville=${villeInfo.slug}`}
                    className="w-full py-3 bg-[#002395] hover:bg-[#001a70] text-white text-center font-medium rounded-md transition-colors mt-auto"
                  >
                    Demander un devis
                  </Link>
                </div>

                {/* Formule Sérénité */}
                <div className="bg-white p-6 rounded-lg border-2 border-[#002395] shadow-md relative h-full flex flex-col">
                  <div className="absolute -top-3 right-6 bg-[#002395] text-white px-3 py-1 text-sm font-medium rounded">
                    Recommandé
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-[#002395]">Formule Sérénité</h3>
                  <div className="text-3xl font-bold mb-2">5,9% HT</div>
                  <p className="text-gray-600 mb-6">des loyers encaissés</p>

                  <div className="space-y-3 mb-6 flex-grow">
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Tous les services Essentiels</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Gestion technique du bien</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Suivi des travaux</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Visite technique annuelle</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Gestion des sinistres</span>
                    </div>
                  </div>

                  <Link
                    href={`/contact?formule=serenite&ville=${villeInfo.slug}`}
                    className="w-full py-3 bg-[#002395] hover:bg-[#001a70] text-white text-center font-medium rounded-md transition-colors mt-auto"
                  >
                    Demander un devis
                  </Link>
                </div>

                {/* Formule Premium */}
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm relative h-full flex flex-col">
                  <h3 className="text-xl font-bold mb-2 text-[#002395]">Formule Premium</h3>
                  <div className="text-3xl font-bold mb-2">7,9% HT</div>
                  <p className="text-gray-600 mb-6">des loyers encaissés</p>

                  <div className="space-y-3 mb-6 flex-grow">
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Tous les services Sérénité</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Garantie loyers impayés</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Garantie dégradations</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Protection juridique</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Conseils fiscaux personnalisés</span>
                    </div>
                  </div>

                  <Link
                    href={`/contact?formule=premium&ville=${villeInfo.slug}`}
                    className="w-full py-3 bg-[#002395] hover:bg-[#001a70] text-white text-center font-medium rounded-md transition-colors mt-auto"
                  >
                    Demander un devis
                  </Link>
                </div>
              </div>
            </section>

            <section id="tarifs" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">Tarifs de gestion locative à {villeInfo.nom}</h2>
              <p className="mb-6">
                Nos honoraires de gestion locative à {villeInfo.nom} sont transparents et adaptés à vos besoins.
                Utilisez notre calculateur pour estimer le coût de nos services en fonction de votre bien et du niveau
                de service souhaité.
              </p>
              <FeeCalculator />
            </section>

            <section id="avantages" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">
                Avantages de notre gestion locative à {villeInfo.nom}
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm text-center">
                  <div className="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <MapPin className="h-8 w-8 text-[#002395]" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">Expertise locale</h3>
                  <p>Connaissance approfondie du marché immobilier de {villeInfo.nom} et de ses spécificités</p>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm text-center">
                  <div className="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Clock className="h-8 w-8 text-[#002395]" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">Gain de temps</h3>
                  <p>Nous gérons tous les aspects de votre location pour vous libérer de toutes contraintes</p>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm text-center">
                  <div className="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <TrendingUp className="h-8 w-8 text-[#002395]" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">Rentabilité optimisée</h3>
                  <p>Stratégies personnalisées pour maximiser votre rendement locatif à {villeInfo.nom}</p>
                </div>
              </div>
            </section>

            <section id="faq" className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-[#002395]">
                Questions fréquentes sur la gestion locative à {villeInfo.nom}
              </h2>
              <div className="space-y-6">
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-2">
                    Quels sont les délais moyens de location à {villeInfo.nom} ?
                  </h3>
                  <p>
                    Les délais de location à {villeInfo.nom} varient selon le type de bien, sa localisation et la
                    période. En moyenne, un bien en bon état et bien situé se loue entre{" "}
                    {villeInfo.statistiques?.delaiLocation || "2 et 4 semaines"}. Notre connaissance du marché local
                    nous permet d'optimiser ce délai.
                  </p>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-2">Comment sont sélectionnés les locataires ?</h3>
                  <p>
                    Nous effectuons une vérification rigoureuse des dossiers : stabilité professionnelle, revenus,
                    garanties, historique locatif. Nous ne sélectionnons que des profils fiables et solvables pour
                    sécuriser votre investissement à {villeInfo.nom}.
                  </p>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-2">
                    Proposez-vous une assurance loyers impayés à {villeInfo.nom} ?
                  </h3>
                  <p>
                    Oui, nous proposons une assurance loyers impayés pour sécuriser vos revenus locatifs. Cette garantie
                    couvre les loyers impayés, les dégradations et les frais juridiques. C'est une protection
                    essentielle pour votre investissement à {villeInfo.nom}.
                  </p>
                </div>
                <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <h3 className="text-xl font-semibold mb-2">Quels types de biens gérez-vous à {villeInfo.nom} ?</h3>
                  <p>
                    Nous gérons tous types de biens à {villeInfo.nom} : appartements, maisons, locaux commerciaux. Notre
                    expertise s'adapte à chaque catégorie de bien et à chaque quartier de la ville, avec une
                    connaissance précise des spécificités locales.
                  </p>
                </div>
              </div>
            </section>

            <ConsultationCTA
              title={`Besoin d'un gestionnaire locatif à ${villeInfo.nom} ?`}
              description="Contactez-nous pour une consultation personnalisée et sans engagement. Notre équipe d'experts vous accompagnera dans la gestion de votre bien."
              buttonText="Prendre rendez-vous"
              buttonLink="/contact"
            />
          </div>

          {/* Sidebar */}
          <div className="lg:w-1/3">
            <div className="sticky top-24 space-y-8">
              <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                <h3 className="text-lg font-bold mb-4">Sommaire</h3>
                <TableOfContents
                  items={sections.map((section) => ({
                    id: section.id,
                    text: section.title,
                    level: 2,
                  }))}
                />
              </div>

              {/* Intégration directe du calculateur de frais */}
              <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                <FeeCalculator />
              </div>

              {/* Intégration directe du widget de contact rapide */}
              <ContactWidget />

              <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                <h3 className="text-lg font-bold mb-4">Services liés</h3>
                <div className="space-y-4">
                  <Link
                    href="/services/gestion-locative"
                    className="block p-3 rounded-lg border border-gray-100 hover:border-blue-100 hover:bg-blue-50/30 transition-colors"
                  >
                    <h4 className="font-medium text-[#002395]">Gestion Locative</h4>
                    <p className="text-sm text-gray-600 mt-1">
                      Confiez-nous la gestion complète de votre bien immobilier
                    </p>
                    <div className="flex items-center text-sm text-[#002395] mt-2 font-medium">
                      En savoir plus <ArrowRight className="ml-1 h-3 w-3" />
                    </div>
                  </Link>
                  <Link
                    href="/services/garantie-loyers-impayes"
                    className="block p-3 rounded-lg border border-gray-100 hover:border-blue-100 hover:bg-blue-50/30 transition-colors"
                  >
                    <h4 className="font-medium text-[#002395]">Garantie Loyers Impayés</h4>
                    <p className="text-sm text-gray-600 mt-1">Protégez vos revenus locatifs contre les impayés</p>
                    <div className="flex items-center text-sm text-[#002395] mt-2 font-medium">
                      En savoir plus <ArrowRight className="ml-1 h-3 w-3" />
                    </div>
                  </Link>
                  <Link
                    href="/services/transaction"
                    className="block p-3 rounded-lg border border-gray-100 hover:border-blue-100 hover:bg-blue-50/30 transition-colors"
                  >
                    <h4 className="font-medium text-[#002395]">Transaction Immobilière</h4>
                    <p className="text-sm text-gray-600 mt-1">Achat, vente et estimation de biens immobiliers</p>
                    <div className="flex items-center text-sm text-[#002395] mt-2 font-medium">
                      En savoir plus <ArrowRight className="ml-1 h-3 w-3" />
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}