Features Glass Grid

import { Bot, Clapperboard, Languages, ListChecks, Lock, Search, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

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

export interface FeaturesGlassGridProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  features?: FeaturesGlassGridItem[];
  className?: string;
}

const DEFAULT_FEATURES: FeaturesGlassGridItem[] = [
  { icon: Bot, title: "Notetaker that listens", description: "Joins Zoom, Meet and Teams, separates speakers and captures decisions — not just a transcript." },
  { icon: ListChecks, title: "Decisions become tasks", description: "Action items sync to Linear, Jira, Asana or Notion with owners and due dates already filled in." },
  { icon: Clapperboard, title: "Async video updates", description: "Record a 2-minute update with screen and camera. Teammates watch at 1.5× and reply inline." },
  { icon: Search, title: "Ask your meetings", description: "“What did we decide about offline mode?” — answers with timestamps across months of calls." },
  { icon: Languages, title: "Fluent in 30 languages", description: "Transcribe in one language, read the summary in another. Perfect for teams across time zones." },
  { icon: Lock, title: "Private by default", description: "SOC 2 Type II, EU data residency, per-meeting redaction and zero training on your data." },
];

export function FeaturesGlassGrid({
  eyebrow = "Why teams switch",
  title = "Fewer meetings. Better ones.",
  description = "Halo takes the notes, chases the follow-ups and makes the meetings you keep actually count.",
  features = DEFAULT_FEATURES,
  className,
}: FeaturesGlassGridProps) {
  return (
    <section className={cn("da-section text-da-fg", className)} aria-labelledby="features-glass-title">
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2 id="features-glass-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>

        <ul className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((f) => {
            const Icon = f.icon;
            return (
              <li
                key={f.title}
                className="da-stroke da-transition-slow group relative overflow-hidden rounded-da-lg bg-da-surface p-7 shadow-da-md backdrop-blur-da backdrop-saturate-150 hover:-translate-y-1 hover:shadow-da-lg"
              >
                {/* Soft corner glow revealed on hover */}
                <span
                  aria-hidden
                  className="da-transition-slow absolute -top-16 -right-16 size-40 rounded-full bg-gradient-to-br from-da-primary/40 to-da-accent/30 opacity-0 blur-2xl group-hover:opacity-100"
                />
                <span className="relative grid size-12 place-items-center rounded-da-md bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-md">
                  <Icon aria-hidden className="size-5" />
                </span>
                <h3 className="relative mt-6 font-da-display text-lg font-semibold tracking-da-display">{f.title}</h3>
                <p className="relative mt-2 leading-relaxed text-da-muted-fg">{f.description}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesGlassGrid;