const steps = [
  {
    number: "01",
    title: "See a word",
    description:
      "A word appears in your target language, ready to challenge you.",
  },
  {
    number: "02",
    title: "Pick the translation",
    description:
      "Choose from four options. Only one is correct — trust your gut.",
  },
  {
    number: "03",
    title: "Track your score",
    description: "See how you did and challenge a friend to beat it.",
  },
];

const HowItWorks = () => {
  return (
    <section className="py-14">
      <div className="relative -mx-6 px-6 py-12 rounded-3xl bg-(--color-surface) border border-(--color-primary-light) overflow-hidden">
        <div className="absolute -top-20 -left-24 h-56 w-56 rounded-full bg-(--color-accent) opacity-[0.12] blur-3xl" />
        <div className="absolute -bottom-24 -right-20 h-64 w-64 rounded-full bg-(--color-primary) opacity-[0.14] blur-3xl" />
        <div className="text-center">
          <div className="inline-flex items-center gap-2 rounded-full bg-(--color-bg) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-accent)">
            Quick · satisfying · replayable
          </div>
          <h2 className="mt-3 text-3xl font-black tracking-tight text-(--color-text)">
            How it works
          </h2>
          <p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
            Short rounds, instant feedback, and just enough pressure to make the
            words stick.
          </p>
        </div>

        <ol className="relative mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
          {steps.map(({ number, title, description }) => (
            <li
              key={number}
              className="group relative overflow-hidden rounded-2xl bg-(--color-bg) border border-(--color-primary-light) p-6 shadow-sm hover:shadow-lg transition-shadow"
            >
              <div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.10] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
              <div className="absolute -bottom-24 -left-24 h-48 w-48 rounded-full bg-(--color-accent) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:-translate-x-2 group-hover:translate-y-2" />
              <div className="relative flex items-start gap-4">
                <div className="shrink-0">
                  <div className="h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center">
                    <span className="text-sm font-black tracking-widest text-(--color-primary)">
                      {number}
                    </span>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-bold text-(--color-text)">
                    {title}
                  </h3>
                  <p className="mt-2 text-sm text-(--color-text-muted) leading-relaxed">
                    {description}
                  </p>
                  <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
                    <span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
                    Under 30 seconds
                  </div>
                </div>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

export default HowItWorks;
