import type { Metadata } from "next";
import { Suspense } from "react";
import { siteConfig } from "@/lib/site";
import { JsonLd, GRAPH_IDS } from "@/lib/json-ld";
import { authorJsonLd, getAuthor } from "@/lib/authors";
import { requireTool } from "@/lib/tools-data";
import { SimulateurWizard } from "./_components/simulateur-wizard";

const tool = requireTool("simulateur-exoneration-accise-electricite");
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 SimulateurExonerationPage() {
  const webAppJsonLd = {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "@id": `${PAGE_URL}#webapp`,
    name: "Simulateur d'exonération d'accise sur l'électricité",
    url: PAGE_URL,
    applicationCategory: "FinanceApplication",
    operatingSystem: "Web",
    offers: {
      "@type": "Offer",
      price: "0",
      priceCurrency: "EUR",
    },
    provider: { "@id": GRAPH_IDS.organization },
    description:
      "Calculez gratuitement vos économies sur l'accise électricité (ex-TICFE/CSPE). Identifiez les taux réduits et exonérations applicables à votre code NAF.",
  };

  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: "Simulateur Exonération Accise Électricité",
        item: 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 articleJsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: tool.metaTitle,
    description: tool.metaDescription,
    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 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={webAppJsonLd} />
      <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 UI */}
          <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">
                Simulateur Exonération
              </li>
            </ol>
          </nav>

          {/* H1 + contenu SEO */}
          <div className="mb-12">
            <h1 className="mb-3 text-3xl font-bold text-[#0f2b46] sm:text-4xl">
              Simulateur d&apos;exonération d&apos;accise sur
              l&apos;électricité&nbsp;2026
            </h1>
            <p className="mb-6 text-sm text-gray-500">
              Par <span className="font-medium text-[#0f2b46]">{author.name}</span>
              , {author.jobTitle} · Mis à jour le{" "}
              <time dateTime={DATE_MODIFIED}>{DATE_MODIFIED_LABEL}</time>
            </p>
            <div className="prose max-w-none">
              <p className="text-lg leading-relaxed text-[#4a5568]">
                L&apos;accise sur l&apos;électricité (ex-TICFE/CSPE) est la
                principale taxe sur la consommation d&apos;électricité en
                France. Au taux normal de{" "}
                <strong className="text-[#0f2b46]">
                  26,58&nbsp;&euro;/MWh
                </strong>{" "}
                depuis février 2026, elle représente entre 20 et 35&nbsp;% de
                votre facture. Pourtant, de nombreuses entreprises paient le
                taux plein alors qu&apos;elles sont éligibles à des{" "}
                <strong className="text-[#0f2b46]">
                  taux réduits de 0,50 à 12,00&nbsp;&euro;/MWh
                </strong>
                .
              </p>
              <p className="text-[#4a5568]">
                Ce simulateur gratuit identifie en 2&nbsp;minutes les
                exonérations et taux réduits applicables à votre activité selon
                votre code NAF/APE, votre consommation et vos critères
                d&apos;éligibilité. Les économies peuvent atteindre{" "}
                <strong className="text-[#0f2b46]">98&nbsp;%</strong> pour les
                procédés métallurgiques et le transport ferroviaire.
              </p>
            </div>
          </div>

          {/* Wizard — white card */}
          <div className="overflow-hidden rounded-2xl bg-white p-6 shadow-sm sm:p-8">
            <Suspense
              fallback={
                <div className="h-96 animate-pulse rounded-2xl bg-gray-100" />
              }
            >
              <SimulateurWizard />
            </Suspense>
          </div>

          {/* FAQ SEO */}
          <section className="mt-20">
            <h2 className="mb-8 text-2xl font-bold text-[#0f2b46]">
              Questions fréquentes
            </h2>
            <dl className="space-y-6">
              {tool.faqs.map((faq, idx) => (
                <div
                  key={idx}
                  className="border-b border-[#e2e8f0] pb-6"
                >
                  <dt className="mb-2 font-semibold text-[#0f2b46]">
                    {faq.question}
                  </dt>
                  <dd className="leading-relaxed text-[#4a5568]">
                    {faq.answer}
                  </dd>
                </div>
              ))}
            </dl>
          </section>
        </div>
      </main>
    </>
  );
}