import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { FaqList } from "@/components/faq-list";
import { SectionTitle } from "@/components/section-title";
import type { FaqItem, SiteSettingsRow } from "@/lib/types";

function parseFaq(items?: string[] | null): FaqItem[] {
  if (!items) return [];
  const out: FaqItem[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<FaqItem>;
      if (obj.q && obj.a) out.push({ q: obj.q, a: obj.a });
    } catch {
      /* ignore */
    }
  }
  return out;
}

export function HomepageFaq({
  settings,
}: {
  settings?: SiteSettingsRow | null;
}) {
  const items = parseFaq(settings?.homepage_faq);
  if (items.length === 0) return null;

  return (
    <section className="border-t border-[var(--border)] py-20">
      <div className="mx-auto grid max-w-6xl gap-12 px-6 lg:grid-cols-[1fr_2fr]">
        <div className="lg:sticky lg:top-24 lg:self-start">
          <SectionTitle
            align="left"
            eyebrow="SSS"
            title="Aklınızdaki sorular"
            description="Müşterilerimizin en sık sorduğu konular. Cevabı burada bulamadığınız her şey için bizi arayın."
          />
          <Link
            href="/iletisim"
            className="mt-6 inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-5 py-2.5 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
          >
            Sorunuz mu var?
            <ArrowRight className="size-4" />
          </Link>
        </div>
        <FaqList items={items} />
      </div>
    </section>
  );
}