import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";
import { FaqAccordion } from "@/components/public/FaqAccordion";
import { FaqPageJsonLd, BreadcrumbJsonLd } from "@/components/public/JsonLd";
import { apiUrl } from "@/lib/api-base";

interface FaqItem {
  id: string;
  question: string;
  answer: string;
  order: number;
  showOnHomepage: boolean;
}

// Render at request time from the live backend so the Q&A and FAQPage JSON-LD
// are always present in the HTML for crawlers, never a build-time-empty shell.
export const dynamic = "force-dynamic";

async function fetchFaqs(): Promise<FaqItem[]> {
  try {
    const res = await fetch(apiUrl("/faqs?all=true"), { cache: "no-store" });
    if (!res.ok) return [];
    const data = await res.json();
    return Array.isArray(data) ? data : [];
  } catch {
    return [];
  }
}

export default async function FaqPage() {
  const items = await fetchFaqs();

  return (
    <>
      {items.length > 0 && (
        <FaqPageJsonLd
          items={items.map((i) => ({ question: i.question, answer: i.answer }))}
        />
      )}
      <BreadcrumbJsonLd
        items={[
          { name: "Home", href: "/" },
          { name: "FAQ", href: "/faq" },
        ]}
      />
      <Navbar />
      <div className="min-h-screen">
        <div className="max-w-3xl mx-auto px-8 pt-16 pb-24">
          <h1 className="text-4xl font-black mb-4">Frequently Asked Questions</h1>
          <p className="text-on-surface-variant text-lg mb-12">
            Everything you need to know about the Belgian Bitcoin Embassy.
          </p>

          {items.length === 0 ? (
            <p className="text-on-surface-variant">No FAQs available yet.</p>
          ) : (
            <FaqAccordion items={items} />
          )}
        </div>
      </div>
      <Footer />
    </>
  );
}