/* 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">Acceleration Methodology</h2>
          <p className="mt-4 text-lg text-stone-500 max-w-3xl mx-auto">
            Two innovative, battle-tested methods to de-risk your investment.
          </p>
        </div>
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          <MethodologyCard
            variant="dark"
            title="Foundation Sprint"
            meta="Duration: 2 days • Focus: Alignment"
            body="Quickly identify the strategic challenges and design specific AI agents to address them. From theory to a validated plan of attack."
            steps={[
              { title: "Use cases", desc: "Selection of high-impact opportunities." },
              { title: "Data feasibility", desc: "Flash audit of available data." },
              { title: "Roadmap", desc: "Clear, costed action plan." },
            ]}
          />
          <MethodologyCard
            variant="light"
            title="Design Sprint"
            meta="Duration: 3–5 days • Focus: Prototype"
            body="Turn the identified AI agents into concrete, tested, validated prototypes — in days. Avoid spending dev budget without prior validation."
            steps={[
              { title: "Prototyping", desc: "Build an interactive MVP." },
              { title: "User testing", desc: "Reality-check usage with real users." },
              { title: "ROI validation", desc: "Financial check before scaling." },
            ]}
          />
        </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">Cross-cutting expertise</p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
            {[
              ["Data & AI Audit", "Structure & Quality"],
              ["Governance", "Ethics & Security"],
              ["Industrialization", "MLOps & Performance"],
              ["Change Management", "Training & 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;