'use client';

import { Reveal } from '../Reveal';
import { steps } from '../content';

export function HowItWorks() {
  return (
    <section className="relative px-6 py-28">
      <div className="mx-auto max-w-5xl">
        <Reveal className="mb-16 flex justify-center">
          <h2 className="abrban-panel abrban-ink rounded-3xl px-8 py-5 text-4xl font-bold text-white">
            به سادگیِ سه قدم
          </h2>
        </Reveal>

        <div className="grid gap-8 md:grid-cols-3">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 0.1}>
              <div className="abrban-panel relative rounded-2xl p-8 text-center">
                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-primary-600/35 text-2xl font-black text-primary-100 ring-1 ring-primary-400/50">
                  {s.n}
                </div>
                <h3 className="abrban-ink mt-5 text-xl font-bold text-white">{s.title}</h3>
                <p className="mt-2 leading-8 text-white/80">{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}