Features Steps

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

export interface FeaturesStepsProps {
  eyebrow?: string;
  title?: string;
  steps?: { title: string; text: string; emoji: string }[];
  className?: string;
}

const TINTS = ["bg-da-accent text-da-accent-fg", "bg-da-primary/12 text-da-fg", "bg-da-secondary text-da-secondary-fg"];

/** Three big numbered step cards in pastel colors joined by a dashed path on desktop, each with an emoji medallion. */
export function FeaturesSteps({
  eyebrow = "Getting started",
  title = "From messy to planned in 3 steps",
  steps = [
    { title: "Brain-dump", text: "Paste your to-dos; Planta splits them into tasks.", emoji: "🧠" },
    { title: "Sort your week", text: "Drag each task onto the day it belongs.", emoji: "🗓️" },
    { title: "Share & relax", text: "Your team sees the plan. You get your evenings back.", emoji: "🌿" },
  ],
  className,
}: FeaturesStepsProps) {
  return (
    <section aria-labelledby="sf-steps-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2 id="sf-steps-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.08] font-extrabold tracking-da-display text-balance">
            {title}
          </h2>
        </div>
        <ol className="relative mt-14 grid gap-5 md:grid-cols-3">
          <span aria-hidden className="absolute top-16 right-[16%] left-[16%] hidden border-t-3 border-dashed border-da-border-strong md:block" />
          {steps.map((s, i) => (
            <li key={s.title} className={cn("relative rounded-da-lg p-8 text-center", TINTS[i % TINTS.length])}>
              <span aria-hidden className="mx-auto grid size-16 place-items-center rounded-full bg-da-surface text-3xl shadow-da-sm">
                {s.emoji}
              </span>
              <p className="mt-5 font-da-mono text-sm font-medium opacity-80">Step {i + 1}</p>
              <h3 className="mt-1 font-da-display text-2xl font-extrabold tracking-da-display">{s.title}</h3>
              <p className="mt-2 opacity-90">{s.text}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

export default FeaturesSteps;