/* global React, GamacaPrimitives */
const { Btn, PointerBullet } = GamacaPrimitives;

function ServiceCard({ n, kind, title, sub, body, target, format, livrable, featured }) {
  if (featured) {
    return (
      <div className="gamaca-bg-gradient text-white p-8 flex flex-col relative shadow-2xl transform md:-translate-y-4 rounded-sm">
        <div className="text-white font-bold text-6xl absolute top-4 right-4 opacity-10 brand-font">{n}</div>
        <span className="absolute top-0 left-0 bg-stone-500 text-white text-xs px-3 py-1 font-bold uppercase tracking-widest shadow-sm">
          Stratégique
        </span>
        <h3 className="text-xl font-bold mt-6">{title}</h3>
        <p className="text-xs uppercase tracking-wide text-stone-300 mt-1 font-bold">{sub}</p>
        <div className="my-6 h-px w-12 bg-stone-500"></div>
        <p className="text-stone-300 text-sm mb-6 flex-grow">{body}</p>
        <ul className="space-y-3 text-sm text-stone-300">
          <li className="flex items-start"><PointerBullet tone="light" />Cible : {target}</li>
          <li className="flex items-start"><PointerBullet tone="light" />Format : {format}</li>
          <li className="flex items-start font-medium text-white border-t border-stone-600 pt-2">Livrable : {livrable}</li>
        </ul>
      </div>
    );
  }
  return (
    <div className="group hover:border-stone-400 transition-all duration-300 border border-stone-200 bg-white p-8 flex flex-col relative rounded-sm">
      <div className="text-stone-200 font-bold text-6xl absolute top-4 right-4 opacity-50 group-hover:opacity-80 transition-opacity brand-font">{n}</div>
      <h3 className="text-xl font-bold text-stone-900 mt-4">{title}</h3>
      <p className="text-xs uppercase tracking-wide text-stone-500 mt-1 font-bold">{sub}</p>
      <div className="my-6 h-px w-12 bg-stone-900"></div>
      <p className="text-stone-600 text-sm mb-6 flex-grow">{body}</p>
      <ul className="space-y-3 text-sm text-stone-500">
        <li className="flex items-start"><PointerBullet />Cible : {target}</li>
        <li className="flex items-start"><PointerBullet />Format : {format}</li>
        <li className="flex items-start font-medium text-stone-800 border-t border-stone-100 pt-2">Livrable : {livrable}</li>
      </ul>
    </div>
  );
}

function ServicesSection() {
  return (
    <section id="services" className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold text-stone-900">Offre d'Accompagnement</h2>
          <p className="mt-4 text-lg text-stone-500">3 niveaux d'intervention adaptés à votre maturité.</p>
        </div>
        <div className="grid gap-8 lg:grid-cols-3">
          <ServiceCard
            n="1" title="Comprendre" sub="Saisir les opportunités"
            body="Comprendre, démystifier et détecter les opportunités qu'offre l'IA pour votre entreprise au-delà des effets d'annonce."
            target="COMEX / CODIR" format="1/2 Journée" livrable="Guide de compréhension & Cas d'usage"
          />
          <ServiceCard
            featured n="2" title="Définir" sub="Stratégie de développement"
            body="Cartographier les enjeux majeurs de votre entreprise et imaginer les agents IA pour les transcender."
            target="Directions Opérationnelles" format="2 Jours (Foundation Sprint)" livrable="Roadmap, Rapport exécutif & Arbitrages"
          />
          <ServiceCard
            n="3" title="Valider" sub="POC & Optimisation ROI"
            body="Concevoir et prototyper les agents IA les plus stratégiques pour les tester rapidement et à moindre coût."
            target="Équipes Produit / Innovation" format="3 à 5 Jours (Design Sprint)" livrable="POC fonctionnel, ROI & Tests utilisateurs"
          />
        </div>
      </div>
    </section>
  );
}

window.GamacaServices = ServicesSection;