FAQ

1"use client"
2 
3import { ArrowRight, ChevronDown } from "lucide-react"
4import Link from "next/link"
5import { useState } from "react"
6 
7/**
8 * Edit CONTENT / ITEMS to match your FAQ. Accordion on all breakpoints
9 * (no motion deps).
10 */
11const CONTENT = {
12  stamp: "FAQ",
13  headlineBefore: "Questions we get",
14  headlineAccent: "a lot",
15  headlineAfter: ".",
16  ctaLabel: "Still unsure? Talk to us",
17  ctaHref: "/contact",
18}
19 
20const ITEMS = [
21  {
22    id: "fixed-price",
23    category: "Engagement",
24    question: "Why fixed-price instead of hourly?",
25    answer:
26      "Hourly aligns incentives against you. Fixed price means we scope carefully up-front and ship on time - if we go over, that's our problem, not yours.",
27  },
28  {
29    id: "stack",
30    category: "Technical",
31    question: "What stack do you use?",
32    answer:
33      "Next.js (App Router), TypeScript, Tailwind, Postgres / Supabase, and Vercel. Happy to work in other stacks, but we ship fastest here.",
34  },
35  {
36    id: "team",
37    category: "Engagement",
38    question: "Can you work with my existing team?",
39    answer:
40      "Yes. We slot in like a senior engineer: PR reviews, shared boards, and we adopt your conventions.",
41  },
42  {
43    id: "timeline",
44    category: "Process",
45    question: "How fast can we start?",
46    answer:
47      "Usually within a week of scope lock. Two project slots open per quarter - ask early if timing is tight.",
48  },
49]
50 
51export function Faq() {
52  const [openId, setOpenId] = useState(ITEMS[0]?.id ?? "")
53 
54  return (
55    <section className="border-t border-border-subtle">
56      <div className="border-b border-border-subtle">
57        <div className="mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 text-center sm:px-10 sm:py-16">
58          <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
59            {CONTENT.stamp}
60          </p>
61          <h2 className="mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl">
62            {CONTENT.headlineBefore}{" "}
63            <span className="italic text-[var(--color-brand,#0b7bff)]">
64              {CONTENT.headlineAccent}
65            </span>
66            {CONTENT.headlineAfter}
67          </h2>
68        </div>
69      </div>
70 
71      <div className="border-b border-border-subtle">
72        <div className="mx-auto max-w-7xl border-x border-border-subtle">
73          <ul className="divide-y divide-border-subtle">
74            {ITEMS.map((item) => {
75              const open = openId === item.id
76// … truncated