FAQ Glass

"use client";

import { Accordion } from "radix-ui";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqGlassItem {
  question: string;
  answer: string;
}

export interface FaqGlassProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  items?: FaqGlassItem[];
  className?: string;
}

const DEFAULT_ITEMS: FaqGlassItem[] = [
  { question: "Does Halo need to join my calls as a bot?", answer: "On Zoom, Meet and Teams Halo can join as a named participant, or record locally from the desktop app with no bot at all. You choose per calendar or per meeting." },
  { question: "Who can see my meeting notes?", answer: "Only invited participants by default. You can share a recap with a link, a Slack channel or your whole workspace — and redact sections before sharing." },
  { question: "Which languages are supported?", answer: "Transcription and summaries work in 30 languages, including mixed-language meetings. You can read the summary in a different language than the one spoken." },
  { question: "Do you train AI models on our data?", answer: "Never. Your recordings and transcripts are only used to generate your own summaries, and you can set automatic deletion after 30, 90 or 365 days." },
  { question: "Can I try it with my team before paying?", answer: "Yes — the Team plan has a 14-day free trial with no credit card, and Starter is free forever for individuals." },
];

export function FaqGlass({
  eyebrow = "FAQ",
  title = "Questions? We've got notes.",
  description = "Everything you need to know about Halo. Can't find an answer? Chat with us — a human replies in minutes.",
  items = DEFAULT_ITEMS,
  className,
}: FaqGlassProps) {
  return (
    <section className={cn("da-section text-da-fg", className)} aria-labelledby="faq-glass-title">
      <div className="mx-auto max-w-3xl px-(--da-gutter)">
        <div className="text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2 id="faq-glass-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.08] font-semibold tracking-da-display">
            {title}
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-lg text-da-muted-fg">{description}</p>
        </div>

        <Accordion.Root type="single" collapsible defaultValue="item-0" className="mt-12 flex flex-col gap-3">
          {items.map((item, i) => (
            <Accordion.Item
              key={item.question}
              value={`item-${i}`}
              className="da-stroke da-transition overflow-hidden rounded-da-lg bg-da-surface shadow-da-sm backdrop-blur-da backdrop-saturate-150 data-[state=open]:shadow-da-md"
            >
              <Accordion.Header asChild>
                <h3>
                  <Accordion.Trigger className="da-focus group flex w-full items-center justify-between gap-6 rounded-da-lg px-6 py-5 text-left font-semibold">
                    {item.question}
                    <span
                      aria-hidden
                      className="grid size-8 shrink-0 place-items-center rounded-full bg-da-fg/5 transition-[rotate,background-color] duration-(--da-duration-slow) ease-da-emphasized group-data-[state=open]:rotate-45 group-data-[state=open]:bg-gradient-to-br group-data-[state=open]:from-da-primary group-data-[state=open]:to-da-accent group-data-[state=open]:text-da-primary-fg motion-reduce:transition-none"
                    >
                      <Plus className="size-4" />
                    </span>
                  </Accordion.Trigger>
                </h3>
              </Accordion.Header>
              <Accordion.Content className="overflow-hidden data-[state=closed]:animate-[glass-collapse_var(--da-duration)_var(--da-ease)] data-[state=open]:animate-[glass-expand_var(--da-duration-slow)_var(--da-ease)] motion-reduce:animate-none">
                <p className="px-6 pb-6 leading-relaxed text-da-muted-fg">{item.answer}</p>
              </Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </div>
      <style href="glass-accordion" precedence="default">{`
        @keyframes glass-expand { from { height: 0; opacity: 0 } to { height: var(--radix-accordion-content-height); opacity: 1 } }
        @keyframes glass-collapse { from { height: var(--radix-accordion-content-height); opacity: 1 } to { height: 0; opacity: 0 } }
      `}</style>
    </section>
  );
}

export default FaqGlass;