Questions

import type { ReactNode } from "react";

export interface FaqProps {
  eyebrow?: ReactNode;
  title?: ReactNode;
  description?: ReactNode;
  /** Somewhere to go when the answer is not here: who answers, and a button to reach them. */
  contact?: { title: string; line?: string; people?: string[]; label: string; href: string };
  items: { question: string; answer: ReactNode }[];
  className?: string;
}

// A button with a little depth: a highlight along the top edge, a shade along the bottom, and a soft cast in its own colour.
const raised =
  "bg-(--tui-faq-accent) text-(--tui-faq-accent-fg) [background-image:linear-gradient(to_bottom,rgb(255_255_255_/_0.18),rgb(255_255_255_/_0)_55%,rgb(0_0_0_/_0.14))] [box-shadow:inset_0_1px_0_rgb(255_255_255_/_0.24),inset_0_-1px_0_rgb(0_0_0_/_0.2),0_1px_2px_rgb(0_0_0_/_0.2),0_8px_16px_-8px_var(--tui-faq-accent)] hover:brightness-110";
const panel = "bg-(--tui-faq-card-bg) [box-shadow:0_0_0_1px_var(--tui-faq-border),0_1px_2px_rgb(0_0_0_/_0.05),0_8px_20px_-12px_rgb(0_0_0_/_0.18)]";

/**
 * Questions and their answers. The heading stands on one side and stays put,
 * with a card under it for anything left unanswered. The questions are on the
 * other side in a shell: a closed one lies flat in it, and the open one lifts
 * out as a raised panel. They open and close with the browser's own
 * disclosure, so there is no script and find in page reaches the answers.
 */
export function Faq({ eyebrow, title, description, contact, items, className }: FaqProps) {
  return (
    <section data-slot="faq" className={["relative isolate flex w-full justify-center overflow-hidden bg-(--tui-faq-bg) px-6 py-(--tui-faq-padding-y) font-(family-name:--tui-font) text-(--tui-faq-fg)", className].filter(Boolean).join(" ")}>
      <div aria-hidden className="pointer-events-none absolute top-[10%] right-[8%] -z-10 size-[30rem] rounded-full bg-(--tui-faq-glow) blur-[100px]" />
      <div className="grid w-full max-w-(--tui-faq-width) grid-cols-1 items-start gap-(--tui-faq-gap) lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
        <header className="flex flex-col items-start gap-4 lg:sticky lg:top-24">
          {eyebrow && <span className="inline-flex h-7 items-center rounded-full px-3 text-[12px] font-semibold tracking-[0.08em] text-(--tui-faq-accent) uppercase [box-shadow:inset_0_0_0_1px_var(--tui-faq-border)]">{eyebrow}</span>}
          {title && <h2 className="m-0 text-(length:--tui-faq-title-size) leading-[1.08] font-semibold tracking-[-0.03em] text-balance">{title}</h2>}
          {description && <p className="m-0 text-[17px] leading-relaxed text-pretty text-(--tui-faq-muted)">{description}</p>}
          {contact && (
            <div data-slot="faq-contact" className="mt-4 flex w-full max-w-[24rem] flex-col gap-1.5 rounded-(--tui-faq-radius) bg-(--tui-faq-shell-bg) p-1.5 [box-shadow:inset_0_0_0_1px_var(--tui-faq-border)]">
              <div className={`flex items-center gap-4 rounded-[calc(var(--tui-faq-radius)_-_6px)] p-4 ${panel}`}>
                {contact.people && (
                  <span aria-hidden className="flex shrink-0">
                    {contact.people.slice(0, 3).map((initials, i) => (
                      <span key={i} className="-ml-2.5 flex size-9 items-center justify-center rounded-full bg-(--tui-faq-shell-bg) text-[11px] font-semibold first:ml-0 [box-shadow:0_0_0_2px_var(--tui-faq-card-bg)]">
                        {initials}
                      </span>
                    ))}
                  </span>
                )}
                <span className="flex min-w-0 flex-col gap-0.5">
                  <span className="text-[15px] font-semibold">{contact.title}</span>
                  {contact.line && <span className="text-[13px] text-(--tui-faq-muted)">{contact.line}</span>}
                </span>
              </div>
              <a href={contact.href} className={`inline-flex h-11 items-center justify-center gap-2 rounded-[calc(var(--tui-faq-radius)_-_6px)] text-[14px] font-semibold no-underline transition-[filter,scale] duration-(--tui-duration) active:scale-[0.985] ${raised}`}>
                {contact.label}
                <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="size-3.5">
                  <path d="M5 11l6-6M6 5h5v5" />
                </svg>
              </a>
            </div>
          )}
        </header>
        <div data-slot="faq-list" className="flex flex-col gap-1 rounded-(--tui-faq-radius) bg-(--tui-faq-shell-bg) p-1.5 [box-shadow:inset_0_0_0_1px_var(--tui-faq-border)]">
          {items.map((item, i) => (
            <details
              key={item.question}
              open={i === 0}
              data-slot="faq-item"
              className="group rounded-[calc(var(--tui-faq-radius)_-_6px)] transition-[background-color,box-shadow] duration-300 open:bg-(--tui-faq-card-bg) open:[box-shadow:0_0_0_1px_var(--tui-faq-border),0_1px_2px_rgb(0_0_0_/_0.05),0_8px_20px_-12px_rgb(0_0_0_/_0.18)] not-open:hover:bg-[color-mix(in_srgb,var(--tui-faq-card-bg)_55%,transparent)]"
            >
              <summary className="flex cursor-pointer list-none items-center gap-4 rounded-[inherit] p-(--tui-faq-row-padding) text-[16px] leading-snug font-semibold outline-none focus-visible:[outline:2px_solid_var(--tui-ring)] [&::-webkit-details-marker]:hidden">
                <span aria-hidden className="w-6 shrink-0 text-[13px] font-medium text-(--tui-faq-muted) tabular-nums group-open:text-(--tui-faq-accent)">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span className="flex-1">{item.question}</span>
                <span
                  aria-hidden
                  className="flex size-7 shrink-0 items-center justify-center rounded-full bg-(--tui-faq-card-bg) text-(--tui-faq-fg) transition-[rotate,background-color,color] duration-300 [box-shadow:0_0_0_1px_var(--tui-faq-border),0_1px_2px_rgb(0_0_0_/_0.06)] group-open:rotate-45 group-open:bg-(--tui-faq-accent) group-open:text-(--tui-faq-accent-fg) group-open:[background-image:linear-gradient(to_bottom,rgb(255_255_255_/_0.18),rgb(255_255_255_/_0)_55%,rgb(0_0_0_/_0.14))] group-open:[box-shadow:inset_0_1px_0_rgb(255_255_255_/_0.24),inset_0_-1px_0_rgb(0_0_0_/_0.2),0_6px_12px_-6px_var(--tui-faq-accent)]"
                >
                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" className="size-3.5">
                    <path d="M8 3.500v9M3.500 8h9" />
                  </svg>
                </span>
              </summary>
              <div className="pr-[calc(var(--tui-faq-row-padding)_+_2.75rem)] pb-(--tui-faq-row-padding) pl-[calc(var(--tui-faq-row-padding)_+_2.5rem)] text-[15px] leading-relaxed text-pretty text-(--tui-faq-muted) group-open:[animation:tui-faq_0.35s_cubic-bezier(0.2,0.7,0.2,1)] motion-reduce:[animation:none]">{item.answer}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Questions */
  --tui-faq-padding-y: calc(var(--tui-space) * 20);
  --tui-faq-gap: calc(var(--tui-space) * 14);
  --tui-faq-width: 1040px;
  --tui-faq-row-padding: calc(var(--tui-space) * 5);
  --tui-faq-radius: calc(var(--tui-radius) * 2.5);
  --tui-faq-title-size: 40px;
  --tui-faq-bg: var(--tui-bg);
  --tui-faq-shell-bg: var(--tui-muted);
  --tui-faq-card-bg: var(--tui-bg);
  --tui-faq-fg: var(--tui-fg);
  --tui-faq-muted: var(--tui-muted-fg);
  --tui-faq-border: var(--tui-border);
  --tui-faq-glow: color-mix(in srgb, var(--tui-primary) 9%, transparent);
  --tui-faq-accent: var(--tui-primary);
  --tui-faq-accent-fg: var(--tui-primary-fg);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}

@keyframes tui-faq {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}