Features Bento

import type { ReactNode } from "react";
import { Globe2, Languages, Lock, Search, Sparkles, Video } from "lucide-react";
import { cn } from "@/lib/utils";

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

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

function Tile({
  className,
  icon: Icon,
  title,
  text,
  children,
}: {
  className?: string;
  icon: typeof Sparkles;
  title: string;
  text: string;
  children?: ReactNode;
}) {
  return (
    <li className={cn("relative flex flex-col overflow-hidden rounded-da-lg p-6 shadow-da-md", GLASS, className)}>
      <span className="grid size-10 place-items-center rounded-da-md bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-sm">
        <Icon aria-hidden className="size-5" />
      </span>
      <h3 className="mt-5 font-da-display text-lg font-semibold tracking-da-display">{title}</h3>
      <p className="mt-1.5 text-sm text-da-muted-fg">{text}</p>
      {children && (
        <div aria-hidden className="mt-6 flex-1">
          {children}
        </div>
      )}
    </li>
  );
}

/** Glass bento grid (6-col): large AI-recap tile with a mock summary, search, languages, video, privacy and integrations tiles. */
export function FeaturesBento({
  eyebrow = "Features",
  title = "Everything a meeting leaves behind, organized",
  description = "Halo captures the conversation and turns it into something your team can use.",
  className,
}: FeaturesBentoProps) {
  return (
    <section aria-labelledby="glass-bento-title" className={cn("da-section text-da-fg", className)}>
      <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="glass-bento-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-4 md:grid-cols-6">
          <Tile
            className="md:col-span-4 md:row-span-2"
            icon={Sparkles}
            title="AI recaps in 10 seconds"
            text="Decisions, action items and open questions — structured, searchable and shared automatically."
          >
            <div className="rounded-da-md bg-da-surface-2 p-4 text-sm">
              <p className="text-xs font-semibold text-da-primary">Design review · 45 min</p>
              <ul className="mt-2 space-y-1.5">
                <li>✓ Ship the new onboarding flow behind a flag</li>
                <li>✓ Drop the dark-mode toggle from settings</li>
                <li className="text-da-muted-fg">? Who owns the empty-state illustrations</li>
              </ul>
              <div className="mt-4 flex flex-wrap gap-2">
                {["@leo · RFC", "@sofia · flag", "@noah · copy"].map((t) => (
                  <span key={t} className="rounded-da-pill bg-da-surface px-2.5 py-1 text-xs font-medium">
                    {t}
                  </span>
                ))}
              </div>
            </div>
          </Tile>
          <Tile className="md:col-span-2" icon={Search} title="Ask Halo" text="“What did we decide about pricing in August?” — answered with sources." />
          <Tile className="md:col-span-2" icon={Languages} title="30 languages" text="Transcribe and translate live, even when people switch mid-sentence." />
          <Tile className="md:col-span-2" icon={Video} title="Async video" text="Record a 2-minute update; Halo adds chapters and a summary." />
          <Tile className="md:col-span-2" icon={Lock} title="Private by default" text="SOC 2 Type II, EU hosting, recordings never used for training." />
          <Tile className="md:col-span-2" icon={Globe2} title="Works everywhere" text="Zoom, Google Meet, Teams, Slack huddles and in-person with the app." />
        </ul>
      </div>
    </section>
  );
}

export default FeaturesBento;