import { process } from "../data/profile";
import SectionHeading from "../components/SectionHeading";
import Reveal from "../components/Reveal";

export default function Process() {
  return (
    <section className="container-px py-28 md:py-36">
      <div className="mx-auto max-w-6xl flex flex-col gap-14">
        <SectionHeading
          eyebrow="Cómo trabajo"
          title="De una idea a una solución"
          align="center"
        />

        <div className="relative">
          <div
            className="hidden md:block absolute top-6 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[color:var(--color-border)] to-transparent"
            aria-hidden
          />
          <div className="grid gap-8 md:grid-cols-3 lg:grid-cols-6">
            {process.map((item, i) => (
              <Reveal key={item.step} delay={i * 0.08} className="relative flex flex-col gap-3">
                <div className="relative z-10 h-12 w-12 rounded-full glass grid place-items-center font-mono text-sm text-[color:var(--color-accent)]">
                  {item.step}
                </div>
                <h3 className="font-display font-medium">{item.title}</h3>
                <p className="text-sm text-[color:var(--color-muted)] leading-relaxed">
                  {item.description}
                </p>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
