Details FAQ

/**
 * VibeBox Motion · Details FAQ
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { Container, headingId, Icon, REVEAL, RichTextView, Section, SectionHead, SlotText, TextLink, type BlockProps } from "@/lib/vibebox/block-kit";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * Questions on native <details>: they open and close without JavaScript, by keyboard and screen
 * reader, and the first one starts open. Answers are rich text and can hold a fill-in for a fact
 * still to come.
 */

export type FaqDetailsProps = BlockProps<Content, Variant>;

export function FaqDetails({ content, variant = "split", id, tone, className }: FaqDetailsProps) {
  const split = variant === "split";
  return (
    <Section slug="faq-details" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className={cn("grid gap-[clamp(32px,4vw,56px)]", split && "lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] lg:gap-20")}>
        <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} align={split ? "start" : "center"} className={cn(split && "lg:sticky lg:top-24 lg:self-start")}>
          {content.action && <TextLink link={content.action} path="action" className="mt-1" />}
        </SectionHead>
        <div className={cn("grid border-t border-border", !split && "mx-auto w-full max-w-3xl")}>
          {content.items.map((item, index) => (
            <details key={index} open={index === 0} className={cn("group/faq border-b border-border", REVEAL)}>
              <summary className="flex cursor-pointer list-none items-start justify-between gap-6 py-5 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden">
                <SlotText value={item.question} path={`items.${index}.question`} className="text-[1.075rem] font-semibold tracking-tight" />
                <span aria-hidden="true" className="mt-0.5 inline-grid size-7 shrink-0 place-items-center rounded-full ring-1 ring-border-strong transition-transform duration-(--vb-duration-reveal) ease-expo-out group-open/faq:rotate-45">
                  <Icon name="plus" className="size-4" />
                </span>
              </summary>
              <RichTextView value={item.answer} path={`items.${index}.answer`} className="max-w-[62ch] pr-12 pb-6 leading-relaxed text-pretty text-muted-foreground" />
            </details>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Details FAQ
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { sections, type z } from "@/lib/vibebox/content";

export const variants = ["split", "stacked"] as const;

export type Variant = (typeof variants)[number];

export const content = sections.faq;

export type Content = z.infer<typeof content>;