FAQ 2

'use client';

import * as React from 'react';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/registry/hirael/bases/radix/ui/accordion';

const FAQS = [
  {
    q: 'Do I need to install a package?',
    a: 'No. Hirael is a registry; components copy straight into your repo via the shadcn CLI. Zero runtime dependency.',
  },
  {
    q: 'Will updates break my code?',
    a: 'You own the copied source, so updates are opt-in. Re-run the install command to pull the latest, then diff and merge.',
  },
  {
    q: 'Is it compatible with shadcn themes?',
    a: 'Yes. Same CSS variables. Any shadcn theme works out of the box.',
  },
  {
    q: 'What about accessibility?',
    a: 'Every shipped component is keyboard-navigable with proper ARIA roles. We test focus management before tagging stable.',
  },
  {
    q: 'Can I use it with Pages Router?',
    a: 'Yes. Components are React-first and framework-agnostic: App Router, Pages Router, Remix, anywhere React runs.',
  },
  {
    q: 'Do I own the code?',
    a: 'Yes. Installing pulls the source straight into your repo; yours to keep, edit, and ship. No telemetry, no lock-in.',
  },
] as const;

const Faq02 = () => {
  return (
    <section className="bg-background py-20 md:py-28">
      <div className="mx-auto flex w-full max-w-5xl flex-col gap-12 px-6 md:px-10">
        <div className="flex flex-col items-center gap-4 text-center">
          <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-foreground">frequently asked</span>
          <h2 className="max-w-2xl font-serif text-4xl font-medium leading-[1.04] tracking-tight sm:text-5xl md:text-6xl">
            Everything you&apos;d ask in the first ten minutes.
          </h2>
          <p className="max-w-xl text-sm text-muted-foreground">
            Short answers first. If something isn&apos;t here, the issue tracker is open and we usually respond within a
            day.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-x-12 gap-y-0 lg:grid-cols-2 lg:items-start">
          {[FAQS.slice(0, 3), FAQS.slice(3)].map((col, ci) => (
            <Accordion
              key={ci}
              type="multiple"
              defaultValue={ci === 0 ? ['item-0-0'] : []}
              className="border-y border-border lg:border-y"
            >
              {col.map((f, i) => (
                <AccordionItem key={f.q} value={`item-${ci}-${i}`} className="px-1">
                  <AccordionTrigger>
                    <span className="flex items-baseline gap-3">
                      <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground">
                        Q{ci * 3 + i + 1}
                      </span>
                      <span>{f.q}</span>
                    </span>
                  </AccordionTrigger>
                  <AccordionContent>
                    <div className="ms-8">{f.a}</div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Faq02;