import type { Metadata } from "next";
import { Suspense } from "react";
import { siteConfig } from "@/lib/site";
import { JsonLd } from "@/lib/json-ld";
import { authorJsonLd, getAuthor } from "@/lib/authors";
import { requireTool } from "@/lib/tools-data";
import { CalculatorWizard } from "./_components/calculator-wizard";
import { LongFormContent } from "./_components/long-form-content";

const tool = requireTool("comparateur-electricite-pro");
const author = getAuthor("joel-lassalle");

const PAGE_URL = tool.url;
const DATE_PUBLISHED = "2026-04-29";
const DATE_MODIFIED = "2026-05-26";
const DATE_MODIFIED_LABEL = "26 mai 2026";

export const metadata: Metadata = {
  title: tool.metaTitle,
  description: tool.metaDescription,
  keywords: tool.keywords,
  alternates: { canonical: PAGE_URL },
  openGraph: {
    title: tool.metaTitle,
    description: tool.ogDescription,
    url: PAGE_URL,
    type: "website",
  },
};

export default function ComparateurElectriciteProPage() {
  const breadcrumbJsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Accueil", item: siteConfig.url },
      { "@type": "ListItem", position: 2, name: "Outils", item: `${siteConfig.url}/outils/` },
      {
        "@type": "ListItem",
        position: 3,
        name: "Comparateur électricité pro",
        item: PAGE_URL,
      },
    ],
  };

  const softwareAppJsonLd = {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    name: "Comparateur électricité pro Acieb",
    applicationCategory: "BusinessApplication",
    operatingSystem: "Web",
    offers: {
      "@type": "Offer",
      price: "0",
      priceCurrency: "EUR",
    },
    description:
      "Calculez en 30 secondes le meilleur fournisseur d'électricité B2B adapté à votre profil C5, C4 ou C3.",
    url: PAGE_URL,
  };

  const articleJsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: "Comparatif électricité pro 2026 : Comparateur B2B expert",
    description:
      "Comparatif électricité pro 2026 : profils C5/C4/C3, contrats fixe/indexé/sur-mesure, ARENH, TURPE, mécanisme capacité décryptés.",
    datePublished: DATE_PUBLISHED,
    dateModified: DATE_MODIFIED,
    author: authorJsonLd(author),
    publisher: {
      "@type": "Organization",
      name: "Acieb Énergie",
      url: siteConfig.url,
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": PAGE_URL,
    },
  };

  const faqJsonLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: tool.faqs.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.answer,
      },
    })),
  };

  const howToJsonLd = {
    "@context": "https://schema.org",
    "@type": "HowTo",
    name: tool.howTo.name,
    description: tool.howTo.description,
    totalTime: tool.howTo.totalTime,
    estimatedCost: {
      "@type": "MonetaryAmount",
      currency: "EUR",
      value: "0",
    },
    step: tool.howTo.steps.map((s, i) => ({
      "@type": "HowToStep",
      position: i + 1,
      name: s.name,
      text: s.text,
    })),
  };

  return (
    <>
      <JsonLd data={softwareAppJsonLd} />
      <JsonLd data={articleJsonLd} />
      <JsonLd data={breadcrumbJsonLd} />
      <JsonLd data={faqJsonLd} />
      <JsonLd data={howToJsonLd} />

      <main className="min-h-screen overflow-x-hidden">
        <div className="mx-auto max-w-5xl px-4 py-12 sm:px-6 sm:py-20">
          {/* Breadcrumb */}
          <nav aria-label="Fil d'Ariane" className="mb-8">
            <ol className="flex items-center gap-2 text-sm text-[#9ca3af]">
              <li><a href="/" className="transition-colors hover:text-[#e85d04]">Accueil</a></li>
              <li aria-hidden="true">/</li>
              <li><a href="/outils/" className="transition-colors hover:text-[#e85d04]">Outils</a></li>
              <li aria-hidden="true">/</li>
              <li className="font-medium text-[#0f2b46]" aria-current="page">Comparateur électricité pro</li>
            </ol>
          </nav>

          {/* H1 */}
          <h1 className="mb-4 text-3xl font-bold text-[#0f2b46] sm:text-4xl lg:text-5xl text-center">
            Comparatif électricité pro 2026 : Comparateur B2B expert
          </h1>
          <p className="text-center text-gray-600 max-w-2xl mx-auto mb-4">
            Calculez vos économies en 30 secondes. Profils C5/C4/C3, ranking
            fournisseurs, recommandation contrat adaptée à votre tolérance au
            risque.
          </p>
          <p className="text-center text-sm text-gray-500 mb-10">
            Par <span className="font-medium text-[#0f2b46]">{author.name}</span>
            , {author.jobTitle} · Mis à jour le{" "}
            <time dateTime={DATE_MODIFIED}>{DATE_MODIFIED_LABEL}</time>
          </p>

          {/* Calculator wizard */}
          <Suspense
            fallback={
              <div className="flex min-h-[640px] items-center justify-center text-sm text-gray-500">
                Chargement…
              </div>
            }
          >
            <CalculatorWizard />
          </Suspense>

          {/* Long-form SEO content — 9 H2 sections */}
          <LongFormContent />
        </div>
      </main>
    </>
  );
}