/* global React, GamacaPrimitives */
const { NumMarker } = GamacaPrimitives;

function MethodologyCard({ title, meta, body, steps, variant }) {
  const stepVariant = variant === "dark" ? "filled-dark" : "outline-dark";
  const cornerCls = variant === "dark"
    ? "absolute top-0 right-0 w-32 h-32 bg-stone-100 rounded-bl-full -mr-6 -mt-6"
    : "absolute top-0 right-0 w-32 h-32 bg-stone-800 rounded-bl-full -mr-6 -mt-6 opacity-5";
  return (
    <div className="bg-white p-10 shadow-sm border border-stone-200 relative overflow-hidden rounded-sm">
      <div className={cornerCls}></div>
      <h3 className="text-2xl font-bold text-stone-900 mb-2 relative z-10">{title}</h3>
      <p className="text-xs font-mono text-stone-500 mb-8 uppercase tracking-widest">{meta}</p>
      <p className="text-stone-600 mb-8 leading-relaxed">{body}</p>
      <ul className="space-y-5">
        {steps.map((s, i) => (
          <li key={i} className="flex">
            <NumMarker n={i + 1} variant={stepVariant} />
            <div className="ml-4">
              <h4 className="text-sm font-bold text-stone-900 uppercase">{s.title}</h4>
              <p className="text-sm text-stone-500">{s.desc}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function MethodologySection() {
  return (
    <section className="py-24 bg-stone-50">
      <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">Méthodologie d'Accélération</h2>
          <p className="mt-4 text-lg text-stone-500 max-w-3xl mx-auto">
            Deux méthodes innovantes et éprouvées pour sécuriser l'investissement.
          </p>
        </div>
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          <MethodologyCard
            variant="dark"
            title="Foundation Sprint"
            meta="Durée : 2 Jours • Focus : Alignement"
            body="L'objectif est d'identifier rapidement les enjeux stratégiques pour y répondre au travers d'agents IA spécifiques. Nous passons de la théorie à un plan d'attaque validé."
            steps={[
              { title: "Cas d'usage", desc: "Sélection des opportunités à fort impact." },
              { title: "Faisabilité Data", desc: "Audit flash des données disponibles." },
              { title: "Roadmap", desc: "Plan d'action clair et chiffré." },
            ]}
          />
          <MethodologyCard
            variant="light"
            title="Design Sprint"
            meta="Durée : 3-5 Jours • Focus : Prototype"
            body="Transformer, en quelques jours, les agents IA identifiés en prototypes concrets, testés et validés. Évitez de dépenser du budget développement sans validation préalable."
            steps={[
              { title: "Prototypage", desc: "Création d'un MVP interactif." },
              { title: "Tests Utilisateurs", desc: "Confrontation au réel pour valider l'usage." },
              { title: "Validation ROI", desc: "Calcul financier avant industrialisation." },
            ]}
          />
        </div>
        <div className="mt-20 pt-10 border-t border-stone-200">
          <p className="text-center text-stone-400 text-sm mb-6 uppercase tracking-widest">Expertises Transverses</p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
            {[
              ["Audit Data & IA", "Structure & Qualité"],
              ["Gouvernance", "Éthique & Sécurité"],
              ["Industrialisation", "MLOps & Perf"],
              ["Change Management", "Formation & Adoption"],
            ].map(([t, d]) => (
              <div key={t} className="p-4 bg-white border border-stone-100 rounded-sm">
                <div className="font-bold text-stone-800">{t}</div>
                <div className="text-xs text-stone-500 mt-1">{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.GamacaMethodology = MethodologySection;