import Link from "next/link";
import {
  IconSearch,
  IconChartBar,
  IconShieldCheck,
  IconClock,
  IconArrowRight,
  IconCheck,
  IconX,
} from "@tabler/icons-react";

const steps = [
  {
    icon: IconSearch,
    title: "Audit gratuit de vos factures",
    text: "Nos ingénieurs analysent vos factures, votre courbe de charge et votre puissance souscrite pour identifier les leviers d'économies.",
  },
  {
    icon: IconChartBar,
    title: "Mise en concurrence de 20+ fournisseurs",
    text: "Nous lançons un appel d'offres auprès de l'ensemble du marché : EDF, Engie, TotalEnergies, Alpiq, Vattenfall et tous les fournisseurs alternatifs.",
  },
  {
    icon: IconShieldCheck,
    title: "Négociation et optimisation globale",
    text: "Au-delà du prix du kWh, nous optimisons le TURPE, les taxes (accise, CTA) et le mécanisme de capacité. C'est souvent là que se cachent les vraies économies.",
  },
  {
    icon: IconClock,
    title: "Suivi continu jusqu'au renouvellement",
    text: "Surveillance de la facturation, alerte avant l'échéance, préparation de la renégociation. Votre courtier en énergie reste mobilisé pendant toute la durée du contrat.",
  },
];

export function CourtierExplainer() {
  return (
    <section className="bg-gray-50 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        {/* Header */}
        <div className="max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-widest text-orange-700">
            Courtage en énergie B2B
          </p>
          <h2 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Pourquoi faire appel à un courtier en énergie pour votre entreprise ?
          </h2>
          <p className="mt-6 text-lg leading-8 text-gray-600">
            Un courtier en énergie est un intermédiaire indépendant qui négocie
            vos contrats d'électricité et de gaz directement auprès des
            fournisseurs du marché de gros. Contrairement à un fournisseur qui ne
            propose que ses propres offres, le courtier en énergie met en
            concurrence l'ensemble des acteurs pour obtenir le meilleur tarif
            adapté à votre profil de consommation.
          </p>
        </div>

        {/* Steps grid */}
        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {steps.map((step, i) => (
            <div key={i} className="relative">
              <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>
              <h3 className="mt-4 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>

        {/* Comparatif Courtier vs Comparateur d'offres */}
        <div className="mt-16 border-t border-gray-200 pt-10">
          <h3 className="text-xl font-semibold text-gray-900">
            Courtier en énergie ou comparateur d&apos;offres en ligne : quelle
            différence ?
          </h3>
          <p className="mt-4 max-w-3xl text-base leading-7 text-gray-600">
            Un comparateur en ligne classe automatiquement les tarifs publics
            affichés par quelques fournisseurs partenaires. Un courtier en
            énergie ouvre une mise en concurrence directe auprès du marché de
            gros, analyse votre profil de consommation et négocie des
            conditions sur-mesure. Trois différences clés :
          </p>
          <div className="mt-8 overflow-hidden rounded-2xl ring-1 ring-gray-200 bg-white">
            <table className="min-w-full text-sm">
              <thead className="bg-gray-50">
                <tr>
                  <th scope="col" className="px-4 py-3 text-left font-semibold text-gray-700">
                    Critère
                  </th>
                  <th scope="col" className="px-4 py-3 text-left font-semibold text-gray-700">
                    Comparateur d&apos;offres
                  </th>
                  <th scope="col" className="px-4 py-3 text-left font-semibold text-orange-700">
                    Courtier en énergie (Acieb)
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                <tr>
                  <td className="px-4 py-3 font-medium text-gray-900">
                    Indépendance
                  </td>
                  <td className="px-4 py-3 text-gray-600">
                    <span className="inline-flex items-center gap-1">
                      <IconX className="h-4 w-4 text-gray-400" />
                      Fournisseurs partenaires affiliés
                    </span>
                  </td>
                  <td className="px-4 py-3 text-gray-600">
                    <span className="inline-flex items-center gap-1">
                      <IconCheck className="h-4 w-4 text-orange-700" />
                      Aucune exclusivité, tout le marché consulté
                    </span>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 font-medium text-gray-900">
                    Analyse technique
                  </td>
                  <td className="px-4 py-3 text-gray-600">
                    <span className="inline-flex items-center gap-1">
                      <IconX className="h-4 w-4 text-gray-400" />
                      Algorithme sur tarif public uniquement
                    </span>
                  </td>
                  <td className="px-4 py-3 text-gray-600">
                    <span className="inline-flex items-center gap-1">
                      <IconCheck className="h-4 w-4 text-orange-700" />
                      Audit courbe de charge, TURPE, taxes, puissance
                    </span>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 font-medium text-gray-900">
                    Accompagnement
                  </td>
                  <td className="px-4 py-3 text-gray-600">
                    <span className="inline-flex items-center gap-1">
                      <IconX className="h-4 w-4 text-gray-400" />
                      Ponctuel, transaction unique
                    </span>
                  </td>
                  <td className="px-4 py-3 text-gray-600">
                    <span className="inline-flex items-center gap-1">
                      <IconCheck className="h-4 w-4 text-orange-700" />
                      Suivi long-terme, alerte échéance, renégociation
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <Link
            href="/guides/courtier-en-energie-vs-comparateur-en-ligne/"
            className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-orange-700 hover:text-orange-700"
          >
            Lire l&apos;analyse détaillée : courtier en énergie vs comparateur
            <IconArrowRight className="h-4 w-4" />
          </Link>
        </div>

        {/* Bottom prose + CTA */}
        <div className="mt-16 max-w-3xl border-t border-gray-200 pt-10">
          <h3 className="text-lg font-semibold text-gray-900">
            Transparence et indépendance : notre engagement
          </h3>
          <p className="mt-4 text-base leading-7 text-gray-600">
            Chez Acieb, notre approche de courtier en énergie professionnel se
            distingue : nos ingénieurs analysent techniquement votre courbe de
            charge, votre puissance souscrite et votre fiscalité énergétique
            (TURPE, accise) avant toute négociation. Notre rémunération est
            transparente et communiquée avant le début de la mission. Nous ne
            sommes affiliés à aucun fournisseur.
          </p>
          <Link
            href="/guides/courtier-en-energie-guide-complet/"
            className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-orange-700 hover:text-orange-700"
          >
            Lire notre guide complet : courtier en énergie
            <IconArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </section>
  );
}