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

function ServiceCard({ n, 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">
          Strategic
        </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" />Audience: {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">Deliverable: {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 />Audience: {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">Deliverable: {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">Engagement Offering</h2>
          <p className="mt-4 text-lg text-stone-500">3 levels tailored to your maturity.</p>
        </div>
        <div className="grid gap-8 lg:grid-cols-3">
          <ServiceCard
            n="1" title="Understand" sub="Spot the opportunities"
            body="Understand, demystify and detect the AI opportunities for your business — beyond the hype."
            target="Executive Committee" format="Half-day" livrable="Briefing & use-case map"
          />
          <ServiceCard
            featured n="2" title="Define" sub="Development strategy"
            body="Map your major business challenges and design the AI agents that can transcend them."
            target="Operational leadership" format="2 days (Foundation Sprint)" livrable="Roadmap, executive report & trade-offs"
          />
          <ServiceCard
            n="3" title="Validate" sub="POC & ROI optimization"
            body="Design and prototype your most strategic AI agents to test them quickly and at low cost."
            target="Product / Innovation teams" format="3–5 days (Design Sprint)" livrable="Working POC, ROI & user testing"
          />
        </div>
      </div>
    </section>
  );
}

window.GamacaServices = ServicesSection;