"use client";

import Link from "next/link";
import { LifeBuoy } from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { publicTexts } from "@/lib/i18n/public";

/** Six real questions, first one open by default. */
export function FaqSection() {
  return (
    <section id="faq" className="scroll-mt-24 border-y bg-muted/40 py-20 lg:py-28">
      <div className="mx-auto grid w-full max-w-6xl gap-10 px-5 sm:px-8 lg:grid-cols-[minmax(0,20rem)_1fr] lg:gap-16">
        <div className="lg:sticky lg:top-24 lg:self-start">
          <p className="text-[11px] font-semibold tracking-wider text-primary uppercase">
            {publicTexts.faqEyebrow}
          </p>
          <h2 className="mt-3 font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            {publicTexts.faqTitle}
          </h2>
          <p className="mt-4 text-base leading-relaxed text-pretty text-muted-foreground">
            {publicTexts.faqSubtitle}
          </p>

          <div className="mt-8 rounded-2xl border bg-card p-5 shadow-sm">
            <span
              aria-hidden
              className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary"
            >
              <LifeBuoy className="size-[18px]" />
            </span>
            <p className="mt-3 font-display text-sm font-semibold">
              {publicTexts.faqContactLead}
            </p>
            <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
              {publicTexts.faqContactBody}
            </p>
            <Button asChild size="lg" variant="outline" className="mt-4 w-full">
              <Link href="/signup">{publicTexts.faqContactCta}</Link>
            </Button>
          </div>
        </div>

        <Accordion
          type="single"
          collapsible
          defaultValue="faq-0"
          className="rounded-2xl border bg-card px-5 shadow-sm sm:px-6"
        >
          {publicTexts.faqItems.map((item, i) => (
            <AccordionItem key={item.q} value={`faq-${i}`}>
              <AccordionTrigger className="gap-6 py-5 text-left text-base font-semibold hover:text-primary hover:no-underline">
                {item.q}
              </AccordionTrigger>
              <AccordionContent className="pb-5 text-sm leading-relaxed text-muted-foreground sm:pr-10">
                {item.a}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}

export default FaqSection;