'use client';
/*
* Vireo React — FAQ (route "pages/faq").
*
* Faithful re-expression of src/html/pages/faq.html: searchable + category-
* filterable accordion with live query highlighting (the Alpine `filtered`
* getter + `mark()` highlighter), a categories rail and a contact card. DOM
* classes / ARIA / copy match the reference 1:1.
*/
import { useMemo, useState, type ReactNode } from 'react';
import Link from 'next/link';
import { PageHead } from '../../components/shell/PageHead';
interface Item { id: string; cat: string; q: string; a: string; }
const ITEMS: Item[] = [
{ id: 'a1', cat: 'account', q: 'How do I create a new workspace?', a: 'Open the workspace switcher in the top-left, choose “New workspace”, give it a name and pick a region. Your first three workspaces are free on every paid plan.' },
{ id: 'a2', cat: 'account', q: 'Can I transfer ownership of my account?', a: 'Yes. Go to Settings → Members, open the member you want to promote and select “Transfer ownership”. You’ll confirm by email — the change is instant once both parties accept.' },
{ id: 'a3', cat: 'account', q: 'How do I delete my account?', a: 'Account deletion lives under Settings → Danger zone. We keep a 14-day grace window during which you can restore everything, after which data is permanently purged.' },
{ id: 'b1', cat: 'billing', q: 'When am I charged for my subscription?', a: 'Monthly plans renew on the calendar day you subscribed; annual plans renew on the anniversary date. We email an invoice 3 days before every renewal.' },
{ id: 'b2', cat: 'billing', q: 'Can I get a refund?', a: 'We offer a no-questions-asked refund within 14 days of any new charge. Reach out from the billing page and the credit lands back on your card within 5–10 business days.' },
{ id: 'b3', cat: 'billing', q: 'Do prices include tax?', a: 'Listed prices are exclusive of VAT and sales tax. Applicable tax is calculated at checkout based on your billing address and shown on every invoice.' },
{ id: 's1', cat: 'security', q: 'Where is my data stored?', a: 'Data is stored in SOC 2 Type II certified data centers in your chosen region (US, EU or AP). It is encrypted at rest with AES-256 and in transit with TLS 1.3.' },
{ id: 's2', cat: 'security', q: 'Do you support two-factor authentication?', a: 'Yes — TOTP authenticator apps and hardware security keys (WebAuthn) are supported on all plans. Admins can enforce 2FA org-wide from Security settings.' },
{ id: 's3', cat: 'security', q: 'How do I report a vulnerability?', a: 'Email security@vireo.io or use our responsible-disclosure form. Verified reports are eligible for a bounty and we acknowledge every submission within one business day.' },
{ id: 'i1', cat: 'integrations', q: 'Which integrations are available?', a: 'Vireo connects natively with Slack, Linear, GitHub, Stripe, Google Workspace and 40+ other tools. Anything else can be wired through our REST API and webhooks.' },
{ id: 'i2', cat: 'integrations', q: 'Is there a public API?', a: 'Pro and above include a full REST API plus signed webhooks. Generate keys under Settings → Developer, and explore every endpoint in our interactive API reference.' },
];
const CATS: { key: string; label: string; tint: string; count: number; icon: ReactNode }[] = [
{ key: 'account', label: 'Account', tint: 'var(--ax-viz-cyan)', count: 3, icon: },
{ key: 'billing', label: 'Billing', tint: 'var(--ax-viz-violet)', count: 3, icon: },
{ key: 'security', label: 'Security', tint: 'var(--ax-viz-emerald)', count: 3, icon: },
{ key: 'integrations', label: 'Integrations', tint: 'var(--ax-viz-amber)', count: 2, icon: },
];
function highlight(text: string, term: string): ReactNode {
const t = term.trim();
if (!t) return text;
const safe = t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const parts = text.split(new RegExp(`(${safe})`, 'ig'));
return parts.map((part, i) => (part.toLowerCase() === t.toLowerCase() ? {part} : part));
}
export function Faq() {
const [q, setQ] = useState('');
const [cat, setCat] = useState('all');
const [open, setOpen] = useState(null);
const filtered = useMemo(() => {
const term = q.trim().toLowerCase();
return ITEMS.filter(
(it) => (cat === 'all' || it.cat === cat) && (term === '' || it.q.toLowerCase().includes(term) || it.a.toLowerCase().includes(term))
);
}, [q, cat]);
return (
<>
Contact support
}
/>