import { RoadIcon, PirogueIcon } from "@/components/illustrations/Icons";

/**
 * Section « 2 expériences » — route+fleuve vs expédition fleuve.
 * Reflète la distinction métier qu'on appliquera côté schema dans le plugin
 * `access-type`. Ici on ne fait que l'éditorialiser pour la home.
 */
export function ExperiencesSection() {
  return (
    <section className="relative bg-[var(--color-karbe-bone)] py-20 sm:py-24">
      <div className="mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
        <div className="max-w-2xl">
          <span className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--color-karbe-canopy-700)]">
            Deux façons de vivre Karbé
          </span>
          <h2 className="mt-3 font-serif text-3xl font-medium tracking-tight text-[var(--color-karbe-ink)] sm:text-4xl md:text-5xl">
            Du bord du fleuve à l&apos;expédition pirogue.
          </h2>
          <p className="mt-4 max-w-xl text-base leading-relaxed text-[var(--color-karbe-ink)]/75 sm:text-lg">
            Selon l&apos;envie, on choisit le carbet qui se rejoint en voiture pour un week-end facile,
            ou celui qu&apos;on n&apos;atteint qu&apos;en pirogue, à plusieurs heures du dernier village.
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2 md:gap-8">
          {/* Route + fleuve */}
          <article className="group relative overflow-hidden rounded-3xl border border-[var(--color-karbe-canopy-100)] bg-white p-8 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
            <div className="absolute right-6 top-6 h-12 w-12 rounded-full bg-[var(--color-karbe-canopy-50)] p-3 text-[var(--color-karbe-canopy-700)]">
              <RoadIcon className="h-full w-full" />
            </div>
            <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-karbe-canopy-500)]">
              🛣️ Route + fleuve
            </p>
            <h3 className="mt-3 font-serif text-2xl font-medium text-[var(--color-karbe-ink)]">
              Le carbet du week-end
            </h3>
            <p className="mt-3 text-sm leading-relaxed text-[var(--color-karbe-ink)]/75">
              Accessible par la piste depuis Kourou, Saint-Laurent ou Régina. Garez la voiture,
              prenez vos affaires et vous y êtes. Pour les familles, les couples qui veulent du calme
              sans logistique, les CE qui réservent des séjours courts.
            </p>
            <ul className="mt-5 space-y-1.5 text-sm text-[var(--color-karbe-ink)]/70">
              <li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-canopy-500)]" /> 1 à 3 nuits typiques</li>
              <li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-canopy-500)]" /> Voiture ou 4×4 selon la piste</li>
              <li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-canopy-500)]" /> Carbets équipés, baignade possible</li>
            </ul>
          </article>

          {/* Expédition fleuve */}
          <article className="group relative overflow-hidden rounded-3xl border border-[var(--color-karbe-laterite-300)]/60 bg-gradient-to-br from-[var(--color-karbe-canopy-50)] via-white to-[var(--color-karbe-bone)] p-8 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
            <div className="absolute right-6 top-6 h-12 w-12 rounded-full bg-[var(--color-karbe-laterite-300)]/30 p-3 text-[var(--color-karbe-laterite-700)]">
              <PirogueIcon className="h-full w-full" />
            </div>
            <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-karbe-laterite-700)]">
              🛶 Expédition fleuve
            </p>
            <h3 className="mt-3 font-serif text-2xl font-medium text-[var(--color-karbe-ink)]">
              Le carbet qu&apos;on mérite
            </h3>
            <p className="mt-3 text-sm leading-relaxed text-[var(--color-karbe-ink)]/75">
              Aucune route n&apos;y mène. On embarque en pirogue depuis un dégrad, parfois deux ou
              trois heures de remontée. Pour ceux qui veulent vraiment dormir loin — singes hurleurs,
              ciel sans halo, l&apos;eau du fleuve à 5 mètres du hamac.
            </p>
            <ul className="mt-5 space-y-1.5 text-sm text-[var(--color-karbe-ink)]/70">
              <li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-laterite-500)]" /> 2 nuits minimum recommandées</li>
              <li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-laterite-500)]" /> Pirogue avec passeur (loueur ou partenaire)</li>
              <li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-laterite-500)]" /> Saison sèche conseillée (juillet-novembre)</li>
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}