Features Numbered

import { cn } from "@/lib/utils";

export interface FeaturesNumberedProps {
  title?: string;
  steps?: { title: string; text: string }[];
  className?: string;
}

/** Three large numbered steps: giant outlined-looking numerals in muted ink above a hairline, step title and text; columns on desktop, stacked on mobile. */
export function FeaturesNumbered({
  title = "From folder to website in three steps.",
  steps = [
    { title: "Import", text: "Drag a folder of images or connect Figma, Dropbox or Are.na. Frame builds the projects." },
    { title: "Arrange", text: "Choose a layout per project. Adjust the grid, spacing and captions — every value is yours." },
    { title: "Publish", text: "Connect your domain and go live. Updates publish in under a second." },
  ],
  className,
}: FeaturesNumberedProps) {
  return (
    <section aria-labelledby="mc-fn-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-fn-title" className="max-w-3xl font-da-display text-[clamp(2rem,4.5vw,3.5rem)] leading-[1] font-medium tracking-da-display">
          {title}
        </h2>
        <ol className="mt-16 grid gap-12 md:grid-cols-3 md:gap-8">
          {steps.map((s, i) => (
            <li key={s.title}>
              <span aria-hidden className="block font-da-display text-[clamp(5rem,12vw,9rem)] leading-[0.8] font-medium tracking-da-display text-da-muted">
                {i + 1}
              </span>
              <div className="mt-6 border-t border-da-border-strong pt-5">
                <h3 className="text-xl font-medium">
                  <span className="sr-only">Step {i + 1}: </span>
                  {s.title}
                </h3>
                <p className="mt-2 text-da-muted-fg">{s.text}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

export default FeaturesNumbered;