Features Tabs

"use client";

import { Tabs } from "radix-ui";
import { CalendarCheck, FileVideo, MessagesSquare, Sparkles, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesTabsItem {
  id: string;
  label: string;
  icon: LucideIcon;
  title: string;
  description: string;
  bullets: string[];
}

export interface FeaturesTabsProps {
  eyebrow?: string;
  title?: string;
  items?: FeaturesTabsItem[];
  className?: string;
}

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

const DEFAULT_ITEMS: FeaturesTabsItem[] = [
  {
    id: "recaps",
    label: "Recaps",
    icon: Sparkles,
    title: "A recap your team will actually read",
    description: "Five lines, decisions first, owners tagged. Posted to Slack and email the moment the call ends.",
    bullets: ["Decisions, actions, open questions", "Custom templates per meeting type", "Edit before sharing — or let it auto-post"],
  },
  {
    id: "video",
    label: "Async video",
    icon: FileVideo,
    title: "Replace the status meeting",
    description: "Record your screen and face for two minutes; Halo adds chapters, a transcript and a summary.",
    bullets: ["Chapters and summary auto-generated", "Viewers reply with emoji or text", "1.5× playback by default"],
  },
  {
    id: "prep",
    label: "Prep",
    icon: CalendarCheck,
    title: "Walk in with context",
    description: "Before each meeting Halo sends what was decided last time and what’s still open.",
    bullets: ["Open action items by attendee", "Last three related recaps", "Suggested agenda"],
  },
  {
    id: "ask",
    label: "Ask Halo",
    icon: MessagesSquare,
    title: "Search everything your team said",
    description: "Ask in plain English and get answers with timestamps you can jump to.",
    bullets: ["Answers cite the exact moment", "Respects meeting permissions", "Works across 12 months of calls"],
  },
];

/** Glass pill tabs (Radix Tabs) switching a large frosted panel: copy + bullets on the left, a themed preview on the right. */
export function FeaturesTabs({ eyebrow = "How Halo helps", title = "One assistant, four superpowers", items = DEFAULT_ITEMS, className }: FeaturesTabsProps) {
  return (
    <section aria-labelledby="glass-tabs-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-tabs-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>
        </div>
        <Tabs.Root defaultValue={items[0]?.id} className="mt-10">
          <Tabs.List aria-label="Features" className={cn("mx-auto flex w-fit max-w-full gap-1 overflow-x-auto rounded-da-pill p-1.5 shadow-da-sm", GLASS)}>
            {items.map((it) => (
              <Tabs.Trigger
                key={it.id}
                value={it.id}
                className="da-focus da-transition inline-flex shrink-0 items-center gap-2 rounded-da-pill px-4 py-2 text-sm font-medium text-da-muted-fg hover:text-da-fg data-[state=active]:bg-gradient-to-r data-[state=active]:from-da-primary data-[state=active]:to-da-accent data-[state=active]:text-da-primary-fg data-[state=active]:shadow-da-sm"
              >
                <it.icon aria-hidden className="size-4" />
                {it.label}
              </Tabs.Trigger>
            ))}
          </Tabs.List>
          {items.map((it, i) => (
            <Tabs.Content
              key={it.id}
              value={it.id}
              className={cn(
                "da-focus mt-8 grid items-center gap-10 rounded-da-lg p-6 shadow-da-lg transition-[opacity,translate] duration-(--da-duration-slow) ease-da starting:translate-y-2 starting:opacity-0 sm:p-10 lg:grid-cols-2",
                GLASS,
              )}
            >
              <div>
                <h3 className="font-da-display text-2xl font-semibold tracking-da-display sm:text-3xl">{it.title}</h3>
                <p className="mt-3 text-da-muted-fg">{it.description}</p>
                <ul className="mt-6 space-y-2.5">
                  {it.bullets.map((b) => (
                    <li key={b} className="flex items-center gap-2.5 text-[15px]">
                      <span aria-hidden className="size-1.5 rounded-full bg-gradient-to-r from-da-primary to-da-accent" />
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
              <div
                aria-hidden
                className="relative aspect-[4/3] overflow-hidden rounded-da-md bg-gradient-to-br from-da-primary/30 via-da-surface-2 to-da-accent/30"
              >
                <div className="absolute inset-x-6 top-6 rounded-da-md bg-da-surface p-4 shadow-da-md backdrop-blur-da">
                  <p className="flex items-center gap-2 text-sm font-semibold">
                    <it.icon className="size-4 text-da-primary" /> {it.label}
                  </p>
                  <div className="mt-3 space-y-2">
                    {[88, 72, 56 + i * 8].map((w, k) => (
                      <span key={k} className="block h-2 rounded-full bg-da-fg/10" style={{ width: `${w}%` }} />
                    ))}
                  </div>
                </div>
                <div className="absolute right-6 bottom-6 left-16 rounded-da-md bg-da-surface p-4 shadow-da-md backdrop-blur-da">
                  <div className="flex gap-2">
                    {it.bullets.map((b) => (
                      <span key={b} className="h-6 flex-1 rounded-da-pill bg-gradient-to-r from-da-primary/40 to-da-accent/40" />
                    ))}
                  </div>
                </div>
              </div>
            </Tabs.Content>
          ))}
        </Tabs.Root>
      </div>
    </section>
  );
}

export default FeaturesTabs;