import Link from "next/link";
import { FaqPageView } from "@/components/support/FaqPageView";
import { getFaqSections } from "@/lib/faq/getFaqSections";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "FAQs",
  description:
    "Frequently asked questions about ordering, shipping, returns, your account, and how to contact The Pet Loft.",
};

export default function FaqsPage() {
  const sections = getFaqSections();

  return (
    <main className="mx-auto max-w-4xl px-4 py-8 md:px-6 md:py-12">
      <Link
        href="/shop"
        className="mb-6 inline-flex items-center gap-1 text-sm text-[#3d5554] transition-colors hover:text-[#236f6b]"
      >
        ← Back to Shop
      </Link>
      <h1 className="font-[family-name:var(--font-fraunces)] text-2xl font-bold text-[#1a2e2d] md:text-3xl">
        Frequently asked questions
      </h1>
      <p className="mt-2 text-[#3d5554]">
        Select a topic below to see common questions and answers.
      </p>
      <div className="mt-8">
        <FaqPageView sections={sections} lastUpdated="March 2025" />
      </div>
      <p className="mt-10 text-sm text-[#3d5554]">
        Can&apos;t find what you need?{" "}
        <Link
          href="/support/contact-us"
          className="font-medium text-[#38a99f] underline transition-colors hover:text-[#236f6b]"
        >
          Contact us
        </Link>
        .
      </p>
    </main>
  );
}
