import Link from "next/link";

/**
 * Section dédiée aux Comités d'Entreprise (CE). Registre coop/solidaire,
 * voix différente du reste de la home (qui parle au touriste aventurier).
 */
export function CESection() {
  return (
    <section className="bg-[var(--color-karbe-canopy-700)] text-[var(--color-karbe-bone)]">
      <div className="mx-auto grid max-w-6xl gap-8 px-6 py-20 sm:px-8 sm:py-24 lg:grid-cols-2 lg:gap-16 lg:px-12">
        <div>
          <span className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--color-karbe-laterite-300)]">
            Pour comités d&apos;entreprise
          </span>
          <h2 className="mt-3 font-serif text-3xl font-medium leading-tight tracking-tight sm:text-4xl md:text-5xl">
            Les carbets dorment quand vous n&apos;y êtes pas.
            <br />
            <span className="italic text-[var(--color-karbe-bone)]/80">Partageons-les.</span>
          </h2>
          <p className="mt-5 text-base leading-relaxed text-[var(--color-karbe-bone)]/85 sm:text-lg">
            Karbé est conçu pour que les comités sociaux possédant déjà un carbet le réservent à
            leurs membres certains week-ends, et l&apos;ouvrent au public touriste le reste de
            l&apos;année. Sans commission sur le séjour : le paiement revient intégralement au CE.
          </p>
        </div>

        <ul className="grid grid-cols-1 gap-4 self-center sm:grid-cols-2">
          {[
            { k: "0 %", v: "de commission sur le séjour" },
            { k: "CE first", v: "vos membres réservent en priorité" },
            { k: "Public ouvert", v: "le reste des dates rentre dans le pot" },
            { k: "Sans paperasse", v: "Stripe encaisse et reverse direct" },
          ].map(({ k, v }) => (
            <li
              key={k}
              className="rounded-2xl border border-[var(--color-karbe-bone)]/15 bg-[var(--color-karbe-bone)]/5 p-5 backdrop-blur-sm"
            >
              <div className="font-serif text-2xl font-medium text-[var(--color-karbe-laterite-300)]">{k}</div>
              <div className="mt-1 text-sm leading-relaxed text-[var(--color-karbe-bone)]/85">{v}</div>
            </li>
          ))}
          <li className="sm:col-span-2">
            <Link
              href="/pour-comites-entreprise"
              className="inline-flex items-center gap-2 rounded-full bg-[var(--color-karbe-laterite-500)] px-5 py-2.5 text-sm font-semibold text-[var(--color-karbe-bone)] transition hover:bg-[var(--color-karbe-laterite-700)]"
            >
              En savoir plus pour votre CE
              <span aria-hidden>→</span>
            </Link>
          </li>
        </ul>
      </div>
    </section>
  );
}