import { FaqSection } from "../../components/faq-section";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { defaultFaqs } from "../../data/faq";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "FAQ",
  description: "Common questions about LedgerOne pricing, accounts, and security.",
  keywords: siteInfo.keywords
};

export default function FaqPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "LedgerOne FAQ",
      description: "Common questions about LedgerOne pricing, accounts, and security.",
      url: `${siteInfo.url}/faq`
    },
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: defaultFaqs.map((item) => ({
        "@type": "Question",
        name: item.question,
        acceptedAnswer: { "@type": "Answer", text: item.answer }
      }))
    }
  ];

  return (
    <div className="min-h-screen bg-background font-sans text-foreground flex flex-col">
      <SiteHeader />

      <main className="flex-1 pt-24 pb-16 relative overflow-hidden">
        <div className="absolute inset-0 mesh-gradient -z-10 opacity-40" />

        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <div className="glass-panel rounded-3xl p-6 sm:p-10 shadow-sm">
            <div className="mb-8">
              <p className="text-xs uppercase tracking-[0.2em] text-primary font-bold mb-4">FAQ</p>
              <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
                Common questions, clear answers.
              </h1>
              <p className="mt-4 text-lg text-muted-foreground">
                Find pricing, account, export, and security answers for LedgerOne.
              </p>
            </div>

            <div className="space-y-8">
              {defaultFaqs.map((faq, index) => (
                <div key={index} className="pb-6 last:pb-0">
                  <h3 className="text-lg font-bold text-foreground uppercase tracking-wide mb-3">
                    {index + 1}. {faq.question}
                  </h3>
                  <p className="text-muted-foreground leading-relaxed">
                    {faq.answer}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>

      <SiteFooter />
      <PageSchema schema={schema} />
    </div>
  );
}