"use client"

import { useState, useEffect } from "react"
import ServiceHeader from "@/components/service-header"
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 } from "lucide-react"
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()

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

  const parisianStreetImage =
    "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-SW6ulmgTmwLp2BBCDHFlr2auIdlTzl.png"

  return (
    <div className="bg-white">
      <ServiceHeader
        title={`Gestion Locative à ${villeInfo.nom}`}
        description={`Confiez la gestion de votre bien immobilier à DOGES, votre administrateur de biens à ${villeInfo.nom}. Services personnalisés et honoraires transparents.`}
        breadcrumbItems={[
          { name: "Accueil", url: "/" },
          { name: "Services", url: "/services" },
          { name: "Gestion Locative Île-de-France", url: "/services/gestion-locative-ile-de-france" },
          {
            name: `Gestion Locative ${villeInfo.nom}`,
            url: `/services/gestion-locative-ile-de-france/${villeInfo.slug}`,
          },
        ]}
        backgroundImage={parisianStreetImage}
      />

      <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>

              <div className="mb-6 rounded-lg overflow-hidden">
                <Image
                  src={parisianStreetImage || "/placeholder.svg"}
                  alt={`Immeubles typiques à ${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>
              )}
            </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>
            </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>

            <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,
                    title: section.title,
                  }))}
                />
              </div>

              <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                <FeeCalculator />
              </div>

              <ContactWidget />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}