// components/landing/HowItWorks.tsx
// The 3-step "Como funciona" row (ux.md 1.3). A semantic ordered list for screen
// readers; the step numbers are decorative chrome, the meaning is in the text.
// Server-safe, no data. Peruvian register, no em-dashes, no emojis.

import * as React from "react";
import { AnimatedHeading } from "./AnimatedHeading";

interface Step {
  title: string;
  body: string;
}

const STEPS: Step[] = [
  {
    title: "Pon tus datos",
    body: "Nombre, DNI, correo y celular. Te toma segundos.",
  },
  {
    title: "Elige tu aporte",
    body: "En múltiplos de S/5. Cada S/5 es 1 boleto: mientras más boletos, más posibilidades.",
  },
  {
    title: "Paga con Yape y participa",
    body: "Confirmas con tu código de Yape y te llega todo a tu correo.",
  },
];

export function HowItWorks() {
  return (
    <section
      className="bg-canvas px-5 py-section"
      aria-labelledby="como-funciona-title"
    >
      <div className="mx-auto max-w-[760px]">
        <AnimatedHeading
          as="h2"
          id="como-funciona-title"
          className="text-center font-display text-heading-lg font-bold text-ink-strong"
        >
          Cómo funciona
        </AnimatedHeading>
        <ol className="mx-auto mt-lg flex w-full max-w-[480px] flex-col gap-md">
          {STEPS.map((step, i) => (
            <li key={step.title} className="flex items-start gap-md">
              <span
                aria-hidden="true"
                className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-primary font-impact text-heading-md font-bold text-on-primary"
              >
                {i + 1}
              </span>
              <div className="flex flex-col gap-1">
                <h3 className="font-body text-heading-sm font-bold text-ink-strong">
                  {step.title}
                </h3>
                <p className="font-body text-body-md text-muted">{step.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}