import Link from "next/link";
import type { Metadata } from "next";
import { ArrowRight } from "lucide-react";
import CTA from "@/components/cta";
import { LandingBreadcrumb } from "@/components/services/landing-breadcrumb";
import { tools } from "@/lib/tools-data";
import { siteConfig } from "@/lib/site";

/**
 * Index des outils gratuits.
 *
 * Cette page manquait : `/outils/` renvoyait 404 alors qu'elle était liée dans
 * le fil d'Ariane visible des deux pages outils, déclarée comme `item` dans leur
 * JSON-LD BreadcrumbList, et explicitement autorisée aux moteurs IA dans
 * `app/robots.ts`. On désignait donc à Google un fil d'Ariane menant à une page
 * inexistante. Constaté dans l'audit de couverture GSC du 2026-07-31.
 *
 * Le contenu est dérivé de `lib/tools-data.ts`, source unique déjà utilisée par
 * les pages outils elles-mêmes et par `/services.md` : ajouter un outil suffit
 * à le faire apparaître ici.
 */

export const metadata: Metadata = {
  title: "Outils gratuits pour votre énergie professionnelle",
  description:
    "Comparateur d'électricité pro et simulateur d'exonération d'accise : deux outils gratuits pour estimer vos économies en moins d'une minute, sans inscription.",
  alternates: { canonical: "/outils/" },
};

export default function OutilsPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: "Outils gratuits Acieb Énergie",
    description:
      "Comparateur d'électricité professionnelle et simulateur d'exonération d'accise, gratuits et sans inscription.",
    url: `${siteConfig.url}/outils/`,
    hasPart: tools.map((tool) => ({
      "@type": "WebApplication",
      name: tool.name,
      url: tool.url,
      description: tool.shortDescription,
      applicationCategory: "BusinessApplication",
      offers: { "@type": "Offer", price: "0", priceCurrency: "EUR" },
    })),
  };

  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <section className="bg-white pt-28 pb-6">
        <div className="mx-auto max-w-6xl px-6">
          <p className="text-sm font-semibold uppercase tracking-widest text-orange-700">
            Outils gratuits
          </p>
          <h1 className="mt-2 max-w-3xl text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
            Estimez vos économies d&apos;énergie en moins d&apos;une minute
          </h1>
          <p className="mt-5 max-w-2xl text-lg text-gray-600">
            Deux outils construits par nos ingénieurs, à partir des taux
            officiels et des grilles tarifaires en vigueur. Gratuits, sans
            inscription, sans engagement.
          </p>
        </div>
      </section>

      <LandingBreadcrumb
        scriptId="breadcrumb-outils"
        items={[
          { label: "Accueil", href: "/" },
          { label: "Outils", href: "/outils/" },
        ]}
      />

      <section className="bg-white py-12 sm:py-16">
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 px-6 md:grid-cols-2">
          {tools.map((tool) => (
            <Link
              key={tool.slug}
              href={`/outils/${tool.slug}/`}
              className="group flex flex-col rounded-2xl border border-slate-200 bg-white p-8 shadow-sm transition hover:border-orange-700/30 hover:shadow-lg"
            >
              <span className="inline-flex w-fit items-center rounded-full bg-orange-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-orange-700">
                {tool.type}
              </span>
              <h2 className="mt-4 text-2xl font-bold tracking-tight text-gray-900">
                {tool.name}
              </h2>
              <p className="mt-3 flex-1 text-base leading-relaxed text-gray-600">
                {tool.shortDescription}
              </p>
              <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-orange-700">
                Utiliser l&apos;outil
                <ArrowRight
                  className="h-4 w-4 transition-transform group-hover:translate-x-1"
                  aria-hidden="true"
                />
              </span>
            </Link>
          ))}
        </div>
      </section>

      <CTA />
    </main>
  );
}