Faq Soft

"use client";

import { Accordion } from "radix-ui";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqSoftProps {
  title?: string;
  items?: { q: string; a: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  {
    q: "How accurate is an automatic footprint?",
    a: "For most companies, spend-based estimates land within 10–15% of a full audit. Grove then swaps estimates for real supplier and meter data as it arrives, so accuracy improves every month.",
  },
  {
    q: "Which methodology do you use?",
    a: "The GHG Protocol for scopes 1, 2 and 3, with emission factors from ADEME, DEFRA and EXIOBASE. Every factor is visible and cited.",
  },
  {
    q: "Do you sell carbon offsets?",
    a: "No. We focus on reducing first. If you choose to contribute to removal projects, we point you to independently rated ones — we take no commission.",
  },
  { q: "Is Grove ready for CSRD?", a: "Yes. Grove covers the ESRS E1 climate disclosures and exports an auditor-friendly data pack." },
  { q: "Can we try it before committing?", a: "Every plan starts with a 30-day trial, and Seedling is free forever for teams under 20 people." },
];

/** Soft accordion: each question is its own rounded paper pill-card that turns sage when open, with a round plus that rotates into a cross; generous spacing. */
export function FaqSoft({ title = "Questions, answered gently", items = DEFAULT_ITEMS, className }: FaqSoftProps) {
  return (
    <section aria-labelledby="os-faq-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container max-w-3xl">
        <h2 id="os-faq-title" className="text-center font-da-display text-[clamp(2.25rem,5vw,3.5rem)] tracking-da-display">
          {title}
        </h2>
        <Accordion.Root type="single" collapsible defaultValue="q-0" className="mt-12 grid gap-3">
          {items.map((it, i) => (
            <Accordion.Item
              key={it.q}
              value={`q-${i}`}
              className="da-transition rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm data-[state=open]:bg-da-accent data-[state=open]:text-da-accent-fg"
            >
              <Accordion.Header>
                <Accordion.Trigger className="group da-focus flex w-full items-center justify-between gap-4 rounded-da-lg px-7 py-6 text-left font-da-display text-xl">
                  {it.q}
                  <span
                    aria-hidden
                    className="grid size-9 shrink-0 place-items-center rounded-full bg-da-surface-2 text-da-fg transition-transform duration-(--da-duration) group-data-[state=open]:rotate-45 group-data-[state=open]:bg-da-primary group-data-[state=open]:text-da-primary-fg motion-reduce:transition-none"
                  >
                    <Plus className="size-4" />
                  </span>
                </Accordion.Trigger>
              </Accordion.Header>
              <Accordion.Content className="px-7 pb-7 text-[17px] leading-relaxed opacity-90">{it.a}</Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </div>
    </section>
  );
}

export default FaqSoft;