Features Grid

import type { ComponentType, SVGProps } from "react";
import { BookOpen, Bot, Brain, Lock, Search, Zap } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesGridItem {
  icon: ComponentType<SVGProps<SVGSVGElement>>;
  title: string;
  description: string;
}

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

const DEFAULT_FEATURES: FeaturesGridItem[] = [
  { icon: Brain, title: "Team memory", description: "Nova remembers decisions, owners and context across every conversation — no more re-explaining." },
  { icon: Search, title: "Answers with sources", description: "Every reply links back to the doc, ticket or thread it came from, so you can check in one click." },
  { icon: Bot, title: "Agents that act", description: "Draft the release notes, triage the inbox, update the roadmap. Agents run tasks, you approve." },
  { icon: BookOpen, title: "Connected knowledge", description: "Notion, Linear, Slack, GitHub and Drive stay in sync — permissions included." },
  { icon: Zap, title: "Instant, even on long docs", description: "Streaming answers start in under a second, even over a 400-page spec." },
  { icon: Lock, title: "Private by default", description: "SOC 2 Type II, EU hosting, and your data never trains a model. Ever." },
];

/** Six feature cards on graphite surfaces: icon in a glowing chip, title and short copy; a soft corner glow lights up on hover. */
export function FeaturesGrid({
  eyebrow = "Why teams switch",
  title = "An assistant that actually knows your work",
  description = "Generic chatbots start from zero every time. Nova starts from everything your team already wrote.",
  features = DEFAULT_FEATURES,
  className,
}: FeaturesGridProps) {
  return (
    <section className={cn("da-section", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h2 className="mt-3 font-da-display text-3xl font-semibold tracking-da-display text-balance sm:text-4xl">{title}</h2>
          <p className="mt-4 text-da-muted-fg text-pretty">{description}</p>
        </div>
        <ul className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map(({ icon: Icon, title: t, description: d }) => (
            <li
              key={t}
              className="group da-stroke da-transition relative overflow-hidden rounded-da-lg bg-da-surface p-6 shadow-da-sm hover:border-da-border-strong"
            >
              <div
                aria-hidden
                className="da-transition pointer-events-none absolute -top-24 -right-24 size-48 rounded-full bg-da-primary/20 opacity-0 blur-3xl group-hover:opacity-100"
              />
              <span className="grid size-10 place-items-center rounded-da-md bg-da-primary/12 text-da-primary ring-1 ring-da-primary/25">
                <Icon aria-hidden className="size-5" />
              </span>
              <h3 className="mt-5 font-da-display text-lg font-medium tracking-da-display">{t}</h3>
              <p className="mt-2 text-sm leading-relaxed text-da-muted-fg">{d}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesGrid;