Features Grid

import { Bell, GitMerge, Globe, Languages, LayoutTemplate, Sparkles, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesGridItem {
  icon: LucideIcon;
  title: string;
  description: string;
}

export interface FeaturesGridProps {
  kicker?: string;
  title?: string;
  description?: string;
  features?: FeaturesGridItem[];
  className?: string;
}

const DEFAULT_FEATURES: FeaturesGridItem[] = [
  {
    icon: GitMerge,
    title: "From merge to changelog",
    description: "Connect GitHub or GitLab. Every merged PR with a label becomes a draft entry — grouped, deduplicated, ready to publish.",
  },
  {
    icon: Sparkles,
    title: "AI release summaries",
    description: "Turn 40 commit messages into three sentences your customers understand. You always review before it ships.",
  },
  {
    icon: Bell,
    title: "In-app widget",
    description: "A 9 kB launcher that shows unread updates right inside your product. Badge counts, deep links, no iframe.",
  },
  {
    icon: LayoutTemplate,
    title: "Hosted changelog page",
    description: "A fast, SEO-friendly public page on your domain with RSS, search and per-release permalinks.",
  },
  {
    icon: Languages,
    title: "Localized in 24 languages",
    description: "Machine translation with a glossary you control. Customers read updates in the language of their workspace.",
  },
  {
    icon: Globe,
    title: "Email & Slack digests",
    description: "Weekly or per-release digests to subscribers and your own #releases channel. Zero copy-pasting.",
  },
];

const TILE_ACCENTS = ["bg-da-primary text-da-primary-fg", "bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg"];

export function FeaturesGrid({
  kicker = "[ 02 ] What you get",
  title = "Everything between “merged” and “my users know about it”.",
  description = "Shipyard plugs into the tools you already use and does the boring part of communicating releases.",
  features = DEFAULT_FEATURES,
  className,
}: FeaturesGridProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="features-grid-title">
      <div className="da-container">
        <div className="grid gap-6 lg:grid-cols-[1fr_1fr] lg:items-end">
          <div>
            <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
            <h2 id="features-grid-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
              {title}
            </h2>
          </div>
          <p className="max-w-md text-lg text-da-muted-fg lg:justify-self-end">{description}</p>
        </div>

        {/* Grid rules are the 3px gaps revealing the border color behind the tiles. */}
        <ul className="da-stroke mt-12 grid gap-(--da-border-width) bg-da-border text-da-surface-fg shadow-da-lg sm:grid-cols-2 lg:grid-cols-3">
          {features.map((f, i) => {
            const Icon = f.icon;
            return (
              <li
                key={f.title}
                className="group flex flex-col gap-4 bg-da-surface p-6 sm:p-8"
              >
                <div className="flex items-center justify-between">
                  <span
                    className={cn(
                      "da-stroke da-transition grid size-12 place-items-center shadow-da-sm group-hover:translate-x-[3px] group-hover:translate-y-[3px] group-hover:shadow-none",
                      TILE_ACCENTS[i % TILE_ACCENTS.length],
                    )}
                  >
                    <Icon aria-hidden className="size-6" strokeWidth={2.25} />
                  </span>
                  <span aria-hidden className="font-da-mono text-xs font-bold text-da-muted-fg">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                </div>
                <h3 className="text-xl leading-tight font-bold">{f.title}</h3>
                <p className="text-da-muted-fg">{f.description}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesGrid;