"use client";

import type { ZoneData } from '@/data/zones';
import { mockZoneVille, mockZoneDepartement, mockZoneRegion, getZoneBySlug } from '@/data/zones';
import { buildLocalBreadcrumbItems, buildLocalHeroCopy, getHeroMedia } from '@/lib/localSeoWorkflow';

import Navbar from '@/components/Navbar';
import LocalHero from '@/components/LocalHero';
import Breadcrumb from '@/components/Breadcrumb';
import ZoneInterventionSection from '@/components/ZoneInterventionSection';
import StickyClimateZone from '@/components/StickyClimateZone';
import LocalSolutionSection from '@/components/LocalSolutionSection';
import RoissyActivitiesSection from '@/components/RoissyActivitiesSection';
import SectorsGrid from '@/components/SectorsGrid';
import SocialProofSection from '@/components/SocialProofSection';
import Testimonials from '@/components/Testimonials';
import VideoSection from '@/components/VideoSection';
import MidPageForm from '@/components/MidPageForm';
import PriceVSSection from '@/components/PriceVSSection';
import TypesToituresSection from '@/components/TypesToituresSection';
import ProcessSection from '@/components/ProcessSection';
import ApplicatorsSection from '@/components/ApplicatorsSection';
import MaillageInterneSection from '@/components/MaillageInterneSection';
import SEOContentSection from '@/components/SEOContentSection';
import Footer from '@/components/Footer';
import StickyMobileCTA from '@/components/StickyMobileCTA';

/**
 * Template de page SEO locale pour "peinture cool roof [VILLE, DÉPARTEMENT ou RÉGION]".
 *
 * Ce template gère 3 types de pages via pageType: 'ville' | 'departement' | 'region'.
 * Architecture : 20 blocs + sticky mobile CTA.
 */
const LocalSEO = ({ slug, zoneData: providedZoneData }: { slug?: string; zoneData?: ZoneData }) => {

  // Résolution : données réelles si le slug existe dans le registry, sinon fallback mock
  const realZone = slug ? getZoneBySlug(slug) : undefined;
  let zoneData: ZoneData;
  if (providedZoneData) {
    zoneData = providedZoneData;
  } else if (realZone) {
    zoneData = realZone;
  } else if (slug === 'cool-roof-departement') {
    zoneData = mockZoneDepartement;
  } else if (slug === 'cool-roof-region') {
    zoneData = mockZoneRegion;
  } else {
    zoneData = mockZoneVille;
  }

  const { pageType } = zoneData;
  const isDepartement = pageType === 'departement';
  const isRegion = pageType === 'region';

  // SEO on-page (metadata + JSON-LD LocalBusiness) : géré par app/[...slug]/page.tsx via src/lib/zoneSeo.ts.

  // --- Hero content ---
  const heroCopy = buildLocalHeroCopy(zoneData);
  const heroImage = zoneData.heroImage ?? getHeroMedia(zoneData);

  // --- Breadcrumb items ---
  const breadcrumbItems = buildLocalBreadcrumbItems(zoneData);

  return (
    <>
      <a href="#main-content" className="sr-only focus:not-sr-only">
        Aller au contenu principal
      </a>

      <Navbar />

      <main id="main-content">
        {/* Bloc 1 — Hero */}
        <LocalHero
          title={heroCopy.title}
          subtitle={heroCopy.subtitle}
          image={heroImage}
          primaryCTA={{ label: 'Estimer mon projet en 48h', href: '/diagnostic' }}
          secondaryCTA={{ label: 'Parler à un expert', href: '/estimation' }}
        />

        {/* Bloc 2 — Breadcrumb (sticky) */}
        <Breadcrumb items={breadcrumbItems} />

        {/* Bloc 2 — Problème + climax météo GIEC */}
        <StickyClimateZone zoneData={zoneData} />

        {/* Bloc 3 — Solution Covalba / CovaTherm */}
        <LocalSolutionSection zoneData={zoneData} />

        {/* Bloc 3 — Activités principales Roissy */}
        <RoissyActivitiesSection zoneData={zoneData} />

        {/* Bloc 5 — Proximité */}
        <ZoneInterventionSection
          zoneData={zoneData}
          ville={zoneData.ville}
          departement={zoneData.departement}
          region={zoneData.region}
          villesProches={zoneData.villesProches}
          villesCount={zoneData.villesDepartement.length}
          isDepartementPage={isDepartement || isRegion}
        />

        {/* Bloc 3 — Process */}
        <ProcessSection />

        {/* Bloc 4 — Comparatif 10 ans */}
        <PriceVSSection />

        {/* Bloc 4 — Preuve sociale */}
        <SocialProofSection />
        <Testimonials />
        <VideoSection />

        {/* Bloc 5 — Estimation */}
        <div id="mid-page-form">
          <MidPageForm />
        </div>

        {/* Bloc 6 — Secteurs d'activité */}
        <SectorsGrid />

        {/* Bloc 6 — Compatibilité toitures */}
        <TypesToituresSection />

        {/* Bloc 6 — Maillage territorial */}
        <MaillageInterneSection
          zoneData={zoneData}
          departementNom={zoneData.departementNom}
          departement={zoneData.departement}
          region={zoneData.region}
          slugDepartement={zoneData.slugDepartement}
          slugRegion={zoneData.slugRegion}
          villesDepartement={zoneData.villesDepartement}
          villeCourante={zoneData.ville}
          isDepartementPage={isDepartement || isRegion}
        />

        {/* Bloc 7 — Applicateurs */}
        <ApplicatorsSection
          title={`Notre réseau d'applicateurs agréés en ${zoneData.region}`}
        />

        {/* Bloc 8 — Contenu SEO */}
        <SEOContentSection zoneData={zoneData} />
      </main>

      <Footer />
      <StickyMobileCTA />
    </>
  );
};

export default LocalSEO;