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

function ApproachSection() {
  const steps = [
    ["01", <><strong>Strategic clarification:</strong> Define the "Where to Play".</>],
    ["02", <><strong>Rapid prototyping:</strong> Test the "How to Win" through Sprints.</>],
    ["03", <><strong>Security &amp; Ethics:</strong> Data governance from day one.</>],
  ];
  return (
    <section id="approach" className="py-20 bg-stone-50 border-t border-stone-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
          <div className="mb-10 lg:mb-0">
            <Eyebrow>Our Philosophy</Eyebrow>
            <p className="mt-2 text-3xl leading-8 font-bold tracking-tight text-stone-900 sm:text-4xl">
              Thinker &amp; Doer
            </p>
            <p className="mt-4 text-lg text-stone-600 font-light">
              The AI market is saturated with engineers who don't understand your business, and consultants who can't code.
              <br /><br />
              <strong>GAMACA.AI</strong> bridges these two worlds. We help you grasp AI beyond the hype to build durable solutions.
            </p>
            <dl className="mt-8 space-y-6">
              {steps.map(([n, body]) => (
                <div key={n} className="relative pl-12">
                  <NumMarker n={n} variant="default" />
                  <dd className="text-stone-700">{body}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div className="relative">
            <div className="aspect-w-3 aspect-h-2 bg-white rounded-sm shadow-xl overflow-hidden border border-stone-100 flex items-center justify-center p-12">
              <div className="text-center">
                <div className="text-7xl mb-6 text-stone-200 font-thin">▲</div>
                <h3 className="text-xl font-bold text-stone-900">ROI Focus</h3>
                <p className="mt-4 text-stone-500 text-sm leading-relaxed">
                  "My goal: validate the right AI agent at the lowest cost."
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.GamacaApproach = ApproachSection;