Features Cards

import { BarChart3, FileCheck2, Leaf, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesCardsProps {
  eyebrow?: string;
  title?: string;
  items?: { icon: LucideIcon; title: string; text: string; tone: "accent" | "secondary" | "surface" }[];
  className?: string;
}

const TONE = {
  accent: "bg-da-accent text-da-accent-fg",
  secondary: "bg-da-secondary text-da-secondary-fg",
  surface: "bg-da-surface text-da-surface-fg shadow-da-sm",
} as const;

/** Three tall rounded cards in sage, clay and paper tints; each has an icon sitting in an organic blob, a serif title and calm copy. */
export function FeaturesCards({
  eyebrow = "What Grove does",
  title = "Three gentle steps to a smaller footprint",
  items = [
    {
      icon: BarChart3,
      title: "Measure",
      text: "Connect accounting, cloud and travel tools. Every invoice becomes tonnes of CO₂e, automatically.",
      tone: "accent",
    },
    {
      icon: Leaf,
      title: "Reduce",
      text: "See your biggest levers ranked by impact and effort, with suppliers and swaps that actually exist.",
      tone: "secondary",
    },
    { icon: FileCheck2, title: "Report", text: "Generate CSRD, CDP and B Corp-ready reports your auditors can trace back to the source.", tone: "surface" },
  ],
  className,
}: FeaturesCardsProps) {
  return (
    <section aria-labelledby="os-fc-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-medium text-da-primary">{eyebrow}</p>
          <h2 id="os-fc-title" className="mt-3 font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display text-balance">
            {title}
          </h2>
        </div>
        <ul className="mt-14 grid gap-5 md:grid-cols-3">
          {items.map((it) => (
            <li key={it.title} className={cn("flex flex-col rounded-da-lg p-8", TONE[it.tone])}>
              <span className="relative grid size-16 place-items-center">
                <svg aria-hidden viewBox="0 0 64 64" className="absolute inset-0 size-full text-current opacity-15">
                  <path fill="currentColor" d="M45 6c10 5 17 16 16 28s-9 24-21 27-26-1-33-11S1 26 8 16 35 1 45 6Z" />
                </svg>
                <it.icon aria-hidden className="relative size-7" />
              </span>
              <h3 className="mt-8 font-da-display text-3xl">{it.title}</h3>
              <p className="mt-3 leading-relaxed opacity-85">{it.text}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesCards;