const STEPS = [
  {
    n: "01",
    title: "Pick a plan",
    body: "Choose coverage for one country, a region, or the whole map. Price is on the card.",
  },
  {
    n: "02",
    title: "Pay once",
    body: "Checkout takes a minute. You get a QR code by email as soon as payment clears.",
  },
  {
    n: "03",
    title: "Scan and land connected",
    body: "Open Settings, add the eSIM, done. Most people are online in under 30 seconds.",
  },
];

export function HowItWorks() {
  return (
    <section id="how-it-works" className="border-y border-sand-200 bg-sand-100/60 py-20 dark:border-sand-800 dark:bg-sand-900/40">
      <div className="mx-auto max-w-6xl px-4">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sand-500">How it works</p>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
          Connected before you reach the gate.
        </h2>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {STEPS.map((step) => (
            <div
              key={step.n}
              className="rounded-2xl border border-sand-200 bg-white p-6 dark:border-sand-800 dark:bg-sand-950"
            >
              <p className="text-sm font-semibold" style={{ color: "var(--brand-accent)" }}>
                {step.n}
              </p>
              <h3 className="mt-3 text-lg font-semibold text-sand-900 dark:text-sand-50">{step.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-sand-600 dark:text-sand-400">{step.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}