import {
  IconFileAnalytics,
  IconScale,
  IconHandClick,
  IconHeartHandshake,
} from "@tabler/icons-react";

const steps = [
  {
    number: "01",
    icon: IconFileAnalytics,
    title: "Audit technique de vos factures",
    text: "Nos ingénieurs analysent vos factures des 12 à 24 derniers mois, votre courbe de charge Enedis et votre puissance souscrite. Cet audit identifie les leviers d'économies sur la fourniture, l'acheminement (TURPE) et les taxes (accise, CTA). Gratuit et sans engagement.",
  },
  {
    number: "02",
    icon: IconScale,
    title: "Mise en concurrence de 20+ fournisseurs",
    text: "Nous lançons un appel d'offres structuré auprès de l'ensemble du marché : EDF, Engie, TotalEnergies, Alpiq, Vattenfall et tous les fournisseurs alternatifs. Chaque offre est normalisée pour une comparaison objective sur le coût total, pas seulement le prix du kWh.",
  },
  {
    number: "03",
    icon: IconHandClick,
    title: "Négociation et recommandation",
    text: "Nos ingénieurs négocient les conditions contractuelles (durée, clauses de sortie, indexation) et vous présentent une recommandation argumentée avec un comparatif clair. Vous décidez en connaissance de cause, sans pression commerciale.",
  },
  {
    number: "04",
    icon: IconHeartHandshake,
    title: "Suivi continu pendant toute la durée du contrat",
    text: "Votre courtier en énergie reste mobilisé après la signature : surveillance de la facturation, détection des anomalies, alerte avant l'échéance et préparation de la renégociation. Pas de reconduction tacite subie.",
  },
];

export function ProcessSteps() {
  return (
    <section className="bg-white py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-widest text-orange-700">
            Processus en 4 étapes
          </p>
          <h2 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Comment votre courtier en énergie optimise vos contrats
          </h2>
          <p className="mt-4 text-lg text-gray-600">
            De l'audit initial à la gestion post-signature, notre accompagnement
            couvre l'intégralité du cycle de vie de vos contrats d'électricité
            et de gaz.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
          {steps.map((step) => (
            <div key={step.number} className="relative">
              {/* Number + icon */}
              <div className="flex items-center gap-3 mb-4">
                {/* Numéro purement décoratif : l'ordre des étapes est déjà porté
                    par l'ordre du DOM, et chaque carte a son icône, son titre et
                    son texte. À 20 % d'opacité il tombe à 1,34:1 — très en deçà
                    du seuil WCAG. On le sort de l'arbre d'accessibilité plutôt
                    que d'assombrir le filigrane voulu par le design. */}
                <span
                  aria-hidden="true"
                  className="text-3xl font-bold text-orange-700/20"
                >
                  {step.number}
                </span>
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-600">
                  <step.icon className="h-5 w-5 text-white" strokeWidth={2} />
                </div>
              </div>
              <h3 className="text-base font-semibold text-gray-900">
                {step.title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-gray-600">
                {step.text}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}