Faq Columns

import { cn } from "@/lib/utils";

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

const DEFAULT_ITEMS = [
  { q: "Who is Grove for?", a: "Companies of 10 to 2,000 people who want honest climate numbers without hiring a consultant." },
  { q: "How long does setup take?", a: "About an afternoon. Connect your tools, confirm a few categories, and your first footprint is ready." },
  { q: "What data do you need?", a: "Accounting exports or a live connection, plus optional energy bills, travel and cloud usage." },
  { q: "Where is our data stored?", a: "In the EU (Frankfurt), encrypted at rest and in transit. We never sell or share it." },
  { q: "Can our suppliers join?", a: "Yes — invite them to a free, friendly portal to share their own data." },
  { q: "Do you help with targets?", a: "Grove suggests science-aligned targets and tracks your progress toward them." },
];

/** Editorial FAQ: serif title and intro in a narrow left column, questions as a two-column definition list on the right separated by warm hairlines. */
export function FaqColumns({
  title = "Good questions",
  intro = "The things people ask us most. Anything else? Write to hello@grove.eco — a human answers.",
  items = DEFAULT_ITEMS,
  className,
}: FaqColumnsProps) {
  return (
    <section aria-labelledby="os-fcol-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-12 lg:grid-cols-[1fr_2.2fr]">
        <div>
          <h2 id="os-fcol-title" className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-none tracking-da-display">
            {title}
          </h2>
          <p className="mt-5 text-da-muted-fg">{intro}</p>
        </div>
        <dl className="grid gap-x-12 sm:grid-cols-2">
          {items.map((it) => (
            <div key={it.q} className="border-t border-da-border py-7">
              <dt className="font-da-display text-xl">{it.q}</dt>
              <dd className="mt-2 text-da-muted-fg">{it.a}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

export default FaqColumns;