Features Journey

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

export interface FeaturesJourneyProps {
  title?: string;
  description?: string;
  steps?: { title: string; text: string; time: string }[];
  className?: string;
}

/** Horizontal journey: numbered circles connected by a hand-drawn wavy dashed path (vertical list on mobile), each step with a serif title, text and a mono time estimate. */
export function FeaturesJourney({
  title = "Your first footprint in an afternoon",
  description = "No spreadsheets to fill in. Most teams see their first full footprint the same day they sign up.",
  steps = [
    { title: "Connect", text: "Link your accounting, cloud provider and travel tool in a few clicks.", time: "10 min" },
    { title: "Review", text: "Grove maps spend to emission factors; you confirm the handful it’s unsure about.", time: "30 min" },
    { title: "Plan", text: "Pick reduction actions from a ranked list and set a realistic target.", time: "1 hour" },
    { title: "Share", text: "Publish a public climate page or export a report for your board.", time: "5 min" },
  ],
  className,
}: FeaturesJourneyProps) {
  return (
    <section aria-labelledby="os-fj-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <h2 id="os-fj-title" className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>
        <div className="relative mt-16">
          <svg
            aria-hidden
            viewBox="0 0 1000 60"
            preserveAspectRatio="none"
            className="absolute top-3 left-[12%] hidden h-14 w-[76%] text-da-border-strong md:block"
          >
            <path
              d="M0 30C80 0 170 60 250 30s170-60 250 0 170 60 250 30 170-60 250 0"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeDasharray="6 8"
              vectorEffect="non-scaling-stroke"
            />
          </svg>
          <ol className="relative grid gap-10 md:grid-cols-4 md:gap-6">
            {steps.map((s, i) => (
              <li key={s.title} className="flex gap-5 md:flex-col md:items-center md:text-center">
                <span
                  aria-hidden
                  className={cn(
                    "grid size-20 shrink-0 place-items-center rounded-full font-da-display text-3xl",
                    i % 2 ? "bg-da-secondary text-da-secondary-fg" : "bg-da-accent text-da-accent-fg",
                  )}
                >
                  {i + 1}
                </span>
                <div>
                  <h3 className="font-da-display text-2xl md:mt-6">
                    <span className="sr-only">Step {i + 1}: </span>
                    {s.title}
                  </h3>
                  <p className="mt-2 text-da-muted-fg">{s.text}</p>
                  <p className="mt-3 font-da-mono text-xs text-da-primary">≈ {s.time}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

export default FeaturesJourney;