Faq Chat

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface FaqChatProps {
  eyebrow?: string;
  title?: string;
  items?: { question: string; answer: string }[];
  className?: string;
}

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

const DEFAULT_ITEMS = [
  { question: "Does everyone on the call need Halo?", answer: "Nope — only the person who invites Halo. Everyone else just gets the recap." },
  { question: "Can Halo skip the small talk?", answer: "Yes. Recaps focus on decisions and actions; you can also pause recording any time from the call." },
  { question: "Will it work with our Google Workspace SSO?", answer: "Yes, Google and Microsoft SSO on every plan, SAML on Business." },
  { question: "Can I try it before paying?", answer: "Every workspace starts with a 14-day Team trial. No card needed." },
];

/** FAQ as a conversation: question chips; clicking one appends the question as a user bubble and Halo’s answer as a glass bubble (with typing dots). */
export function FaqChat({ eyebrow = "Ask us anything", title = "Questions? Halo has answers.", items = DEFAULT_ITEMS, className }: FaqChatProps) {
  const [asked, setAsked] = useState<number[]>([0]);
  const [typing, setTyping] = useState(false);

  const ask = (i: number) => {
    if (asked.includes(i) || typing) return;
    setTyping(true);
    setAsked((a) => [...a, i]);
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    window.setTimeout(() => setTyping(false), reduce ? 0 : 700);
  };

  return (
    <section aria-labelledby="glass-faq-chat-title" className={cn("da-section text-da-fg", className)}>
      <div className="da-container grid gap-10 lg:grid-cols-[1fr_1.3fr]">
        <div>
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-faq-chat-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>
          <ul className="mt-8 flex flex-wrap gap-2" aria-label="Suggested questions">
            {items.map((it, i) => (
              <li key={it.question}>
                <button
                  type="button"
                  disabled={asked.includes(i)}
                  onClick={() => ask(i)}
                  className={cn(
                    "da-focus da-transition rounded-da-pill px-4 py-2 text-left text-sm font-medium shadow-da-sm hover:-translate-y-0.5 disabled:opacity-50 disabled:hover:translate-y-0",
                    GLASS,
                  )}
                >
                  {it.question}
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div className={cn("flex min-h-[420px] flex-col gap-3 rounded-da-lg p-5 shadow-da-lg", GLASS)} role="log" aria-live="polite" aria-label="Answers">
          {asked.map((i, k) => {
            const it = items[i]!;
            const last = k === asked.length - 1;
            return (
              <div key={i} className="flex flex-col gap-3">
                <p className="max-w-[85%] self-end rounded-da-lg rounded-br-da-sm bg-gradient-to-r from-da-primary to-da-accent px-4 py-2.5 text-[15px] text-da-primary-fg shadow-da-sm">
                  {it.question}
                </p>
                {last && typing ? (
                  <p aria-label="Halo is typing" className="flex w-fit gap-1 rounded-da-lg rounded-bl-da-sm bg-da-surface px-4 py-3.5">
                    {[0, 1, 2].map((d) => (
                      <span key={d} className="size-1.5 animate-bounce rounded-full bg-da-muted-fg" style={{ animationDelay: `${d * 120}ms` }} />
                    ))}
                  </p>
                ) : (
                  <p className="max-w-[85%] self-start rounded-da-lg rounded-bl-da-sm bg-da-surface px-4 py-2.5 text-[15px] shadow-da-sm transition-[opacity,translate] duration-(--da-duration) starting:translate-y-1 starting:opacity-0">
                    {it.answer}
                  </p>
                )}
              </div>
            );
          })}
          {asked.length === items.length && !typing && (
            <p className="mt-auto text-center text-xs text-da-muted-fg">That’s everything — email hello@halo.app for more.</p>
          )}
        </div>
      </div>
    </section>
  );
}

export default FaqChat;