Faq 6

"use client";

import { Minus, Plus } from "lucide-react";
import Link from "next/link";

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { FaqContent } from "../_types/faq";
import { defaultFaq6Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

const tones = {
  dark: {
    answer: "text-primary-foreground/60",
    border: "border-primary-foreground/10",
    icon: "border-primary-foreground/20 text-secondary",
    number: "text-primary-foreground/35",
    question: "text-primary-foreground",
  },
  light: {
    answer: "text-muted-foreground",
    border: "border-border",
    icon: "border-input text-primary",
    number: "text-muted-foreground/70",
    question: "text-primary",
  },
};

/** Header and an optional button in a narrow column beside an accordion.
 *  `numbered` prefixes each question with its two-digit index, which turns
 *  it into a list of principles or reasons. */
export default function Faq6({
  content = defaultFaq6Content,
  numbered = false,
  surface = "default",
}: {
  content?: FaqContent;
  numbered?: boolean;
  surface?: Surface;
}) {
  const t = surface === "primary" ? tones.dark : tones.light;

  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-4">
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              size="sm"
              title={content.title}
              tone={toneFor(surface)}
            />
            {content.action && (
              <Button
                className="mt-8 border-input bg-background px-7 text-primary shadow-none before:shadow-none hover:bg-muted"
                render={<Link href={content.action.href} />}
                size="xl"
                variant="outline"
              >
                {content.action.label}
              </Button>
            )}
          </div>

          <div className="lg:col-span-8">
            <Accordion
              className={cn("border-t", t.border)}
              defaultValue={content.items[0] ? [content.items[0].id] : []}
            >
              {content.items.map((item, index) => (
                <AccordionItem
                  className={cn("border-b last:border-b-0", t.border)}
                  key={item.id}
                  value={item.id}
                >
                  <AccordionTrigger
                    className="items-center gap-6 py-6 text-left font-normal [&:not([data-panel-open])_[data-icon=minus]]:hidden [&[data-panel-open]_[data-icon=plus]]:hidden"
                    icon={
                      <span
                        className={cn(
                          "flex size-8 shrink-0 items-center justify-center rounded-md border",
                          t.icon,
                        )}
                      >
                        <Plus className="size-4" data-icon="plus" />
                        <Minus className="size-4" data-icon="minus" />
                      </span>
                    }
                  >
                    <span className="flex items-baseline gap-5">
                      {numbered && (
                        <span className={cn("font-mono text-xs", t.number)}>
                          {String(index + 1).padStart(2, "0")}
                        </span>
                      )}
                      <span
                        className={cn(
                          "font-display text-xl sm:text-2xl",
                          t.question,
                        )}
                      >
                        {item.question}
                      </span>
                    </span>
                  </AccordionTrigger>
                  <AccordionPanel
                    className={cn(
                      "max-w-2xl pb-7 text-sm leading-relaxed",
                      numbered && "pl-11",
                      t.answer,
                    )}
                  >
                    {item.answer}
                  </AccordionPanel>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </section>
  );
}