Features Bento

import { Globe2, Leaf, Users } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesBentoProps {
  title?: string;
  className?: string;
}

/** Soft bento: rounded tinted tiles of mixed sizes — a monthly emissions bar chart, a human equivalence (“= 42 flights”), supplier avatars, a certifications tile and a leaf quote. */
export function FeaturesBento({ title = "Everything in one calm place", className }: FeaturesBentoProps) {
  const months = [52, 48, 50, 44, 41, 43, 38, 35, 33];
  return (
    <section aria-labelledby="os-bento-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="os-bento-title" className="max-w-xl font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display text-balance">
          {title}
        </h2>
        <ul className="mt-12 grid auto-rows-[minmax(11rem,auto)] gap-4 md:grid-cols-4">
          <li className="rounded-da-lg bg-da-surface p-7 text-da-surface-fg shadow-da-sm md:col-span-2 md:row-span-2">
            <h3 className="font-da-display text-2xl">Emissions, month by month</h3>
            <p className="mt-1 text-da-muted-fg">Down 37% since January.</p>
            <div aria-hidden className="mt-8 flex h-48 items-end gap-2.5">
              {months.map((m, i) => (
                <span
                  key={i}
                  className={cn("flex-1 rounded-t-full", i === months.length - 1 ? "bg-da-primary" : "bg-da-accent")}
                  style={{ height: `${30 + ((m - Math.min(...months)) / (Math.max(...months) - Math.min(...months))) * 70}%` }}
                />
              ))}
            </div>
          </li>
          <li className="flex flex-col justify-between rounded-da-lg bg-da-secondary p-7 text-da-secondary-fg md:col-span-2">
            <Globe2 aria-hidden className="size-7" />
            <p className="font-da-display text-3xl leading-tight">
              84 tCO₂e saved <em>= 42 return flights</em> Paris–New York
            </p>
          </li>
          <li className="rounded-da-lg bg-da-accent p-7 text-da-accent-fg">
            <Users aria-hidden className="size-6" />
            <h3 className="mt-4 font-da-display text-xl">38 suppliers</h3>
            <div aria-hidden className="mt-4 flex -space-x-2">
              {["MP", "RF", "KC", "AL", "+"].map((s) => (
                <span
                  key={s}
                  className="grid size-9 place-items-center rounded-full border-2 border-da-accent bg-da-surface text-xs font-medium text-da-surface-fg"
                >
                  {s}
                </span>
              ))}
            </div>
          </li>
          <li className="rounded-da-lg bg-da-surface p-7 text-da-surface-fg shadow-da-sm">
            <Leaf aria-hidden className="size-6 text-da-primary" />
            <h3 className="mt-4 font-da-display text-xl">Report-ready</h3>
            <ul className="mt-3 flex flex-wrap gap-1.5 text-xs">
              {["CSRD", "CDP", "GHG", "B Corp"].map((c) => (
                <li key={c} className="rounded-da-pill bg-da-surface-2 px-2.5 py-1">
                  {c}
                </li>
              ))}
            </ul>
          </li>
        </ul>
      </div>
    </section>
  );
}

export default FeaturesBento;