"use client";

import { getFeatures2Variant } from "@/data/experiments/features2-variants";
import { motion } from "motion/react";
import { CalButton } from "./cal-button";

export function BentoFeatures2() {
  const content = getFeatures2Variant("control");
  return (
    <div className="bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <h2 className="text-base/7 font-semibold text-orange-700">
          Solutions sur-mesure
        </h2>
        <p className="mt-2 max-w-lg text-4xl font-semibold tracking-tight text-pretty text-slate-900 sm:text-5xl">
          {content.sectionTitle}
        </p>
        <p className="mt-4 max-w-2xl text-lg text-slate-900">
          {content.sectionSubtitle}
        </p>

        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2 auto-rows-[25rem]">
          {/* CARTE 1 : INDUSTRIE (Grande carte - 3 colonnes) */}
          <motion.div
            whileHover={{ y: -4 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="relative lg:col-span-3 group isolate flex flex-col rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/10 hover:border-[#ea580c]/30 overflow-hidden max-lg:rounded-t-4xl lg:rounded-tl-4xl"
          >
            <div className="absolute inset-0 bg-linear-to-br from-[#ea580c]/5 to-transparent" />
            <div className="absolute z-10 inset-x-0 bottom-0 h-[60%] bg-linear-to-t from-white via-white/80 to-transparent" />
            <div className="relative flex h-full flex-col justify-end">
              <div className="p-10 relative z-10">
                <h3 className="text-sm/4 font-semibold text-orange-700 uppercase tracking-wider">
                  Industrie & Haute Consommation
                </h3>
                <p className="mt-2 text-2xl font-bold tracking-tight text-slate-900">
                  {content.cards.industrie.subtitle}
                </p>
                <p className="mt-4 max-w-lg text-base text-slate-900 leading-relaxed">
                  {content.cards.industrie.description}
                </p>
                <div className="mt-6 flex flex-wrap gap-2">
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-3 py-1 text-xs font-semibold text-orange-700 uppercase">
                    Industrie
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-3 py-1 text-xs font-semibold text-orange-700 uppercase">
                    Optimisation fiscale
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-3 py-1 text-xs font-semibold text-orange-700 uppercase">
                    Haute Tension
                  </span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* CARTE 2 : TERTIAIRE (3 colonnes) */}
          <motion.div
            whileHover={{ y: -4 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="relative lg:col-span-3 group isolate flex flex-col rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/10 hover:border-[#ea580c]/30 overflow-hidden lg:rounded-tr-4xl"
          >
            <div className="absolute inset-0 bg-linear-to-br from-[#ea580c]/5 to-transparent" />
            <div className="absolute z-10 inset-x-0 bottom-0 h-[60%] bg-linear-to-t from-white via-white/80 to-transparent" />
            <div className="relative flex h-full flex-col justify-end">
              <div className="p-10 relative z-10">
                <h3 className="text-sm/4 font-semibold text-orange-700 uppercase tracking-wider">
                  Tertiaire, Retail & Services
                </h3>
                <p className="mt-2 text-2xl font-bold tracking-tight text-slate-900">
                  {content.cards.tertiaire.subtitle}
                </p>
                <p className="mt-4 max-w-lg text-base text-slate-900 leading-relaxed">
                  {content.cards.tertiaire.description}
                </p>
                <div className="mt-6 flex flex-wrap gap-2">
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-3 py-1 text-xs font-semibold text-orange-700 uppercase">
                    Tertiaire
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-3 py-1 text-xs font-semibold text-orange-700 uppercase">
                    Gestion multi-sites
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-3 py-1 text-xs font-semibold text-orange-700 uppercase">
                    Consolidation
                  </span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* CARTE 3 : HÔTELLERIE (2 colonnes) */}
          <motion.div
            whileHover={{ y: -4 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="relative lg:col-span-2 group isolate flex flex-col rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/10 hover:border-[#ea580c]/30 overflow-hidden lg:rounded-bl-4xl"
          >
            <div className="absolute inset-0 bg-linear-to-br from-[#ea580c]/5 to-transparent" />
            <div className="absolute z-10 inset-x-0 bottom-0 h-[60%] bg-linear-to-t from-white via-white/80 to-transparent" />
            <div className="relative flex h-full flex-col justify-end">
              <div className="p-8 relative z-10">
                <h3 className="text-sm/4 font-semibold text-orange-700 uppercase tracking-wider">
                  Hôtellerie & Restauration
                </h3>
                <p className="mt-2 text-xl font-bold tracking-tight text-slate-900">
                  {content.cards.horeca.subtitle}
                </p>
                <p className="mt-4 text-sm text-slate-900 leading-relaxed">
                  {content.cards.horeca.description}
                </p>
                <div className="mt-4 flex flex-wrap gap-2">
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-2.5 py-0.5 text-xs font-semibold text-orange-700 uppercase">
                    HORECA
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-2.5 py-0.5 text-xs font-semibold text-orange-700 uppercase">
                    Trésorerie
                  </span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* CARTE 4 : ARTISANAT (2 colonnes) */}
          <motion.div
            whileHover={{ y: -4 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="relative lg:col-span-2 group isolate flex flex-col rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/10 hover:border-[#ea580c]/30 overflow-hidden"
          >
            <div className="absolute inset-0 bg-linear-to-br from-[#ea580c]/5 to-transparent" />
            <div className="absolute z-10 inset-x-0 bottom-0 h-[60%] bg-linear-to-t from-white via-white/80 to-transparent" />
            <div className="relative flex h-full flex-col justify-end">
              <div className="p-8 relative z-10">
                <h3 className="text-sm/4 font-semibold text-orange-700 uppercase tracking-wider">
                  Artisanat & TPE/PME
                </h3>
                <p className="mt-2 text-xl font-bold tracking-tight text-slate-900">
                  {content.cards.pme.subtitle}
                </p>
                <p className="mt-4 text-sm text-slate-900 leading-relaxed">
                  {content.cards.pme.description}
                </p>
                <div className="mt-4 flex flex-wrap gap-2">
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-2.5 py-0.5 text-xs font-semibold text-orange-700 uppercase">
                    Artisanat
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-2.5 py-0.5 text-xs font-semibold text-orange-700 uppercase">
                    TPE/PME
                  </span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* CARTE 5 : SYNDICS (2 colonnes) */}
          <motion.div
            whileHover={{ y: -4 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="relative lg:col-span-2 group isolate flex flex-col rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/10 hover:border-[#ea580c]/30 overflow-hidden max-lg:rounded-b-4xl lg:rounded-br-4xl"
          >
            <div className="absolute inset-0 bg-linear-to-br from-[#ea580c]/5 to-transparent" />
            <div className="absolute z-10 inset-x-0 bottom-0 h-[60%] bg-linear-to-t from-white via-white/80 to-transparent" />
            <div className="relative flex h-full flex-col justify-end">
              <div className="p-8 relative z-10">
                <h3 className="text-sm/4 font-semibold text-orange-700 uppercase tracking-wider">
                  Syndics & Copropriétés
                </h3>
                <p className="mt-2 text-xl font-bold tracking-tight text-slate-900">
                  Anticipez vos Assemblées Générales.
                </p>
                <p className="mt-4 text-sm text-slate-900 leading-relaxed">
                  Les délais de vote sont longs, le marché est rapide. Nous
                  figeons les offres en amont des AG pour garantir le budget
                  chauffage de vos copropriétaires sans surprise.
                </p>
                <div className="mt-4 flex flex-wrap gap-2">
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-2.5 py-0.5 text-xs font-semibold text-orange-700 uppercase">
                    Syndics
                  </span>
                  <span className="inline-flex items-center rounded-full bg-[#ea580c]/10 border border-[#ea580c]/20 px-2.5 py-0.5 text-xs font-semibold text-orange-700 uppercase">
                    Copropriétés
                  </span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>

        {/* CTA Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="mt-12 text-center"
        >
          <p className="text-slate-900 mb-6">
            Votre secteur n&apos;est pas listé ?
          </p>
          <CalButton location="bento_features" className="inline-flex items-center px-6 py-3 bg-[#ea580c] text-white font-bold hover:bg-[#ea580c]/90 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/20 hover:scale-105 active:scale-95">
            Discuter de mon cas spécifique avec un ingénieur
          </CalButton>
        </motion.div>
      </div>
    </div>
  );
}