'use client';

import React, { useEffect, useState } from 'react';
import { AnnouncementBar } from '@/layout/AnnouncementBar';
import { Header } from '@/layout/Header';
import { Navbar } from '@/layout/Navbar';
import { Footer } from '@/layout/Footer';
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
import { FloatingButtons } from '@/components/FloatingButtons';
import { FaqHub } from '@/components/faq/FaqPageView';
import { storefrontService } from '@/services/api/storefrontService';
import { parseFaqPageData } from '@/lib/faqPageLayout';
import { DEFAULT_FAQ_PAGE, type FaqPageData } from '@/lib/faqDefaults';

export default function FaqsPage() {
  const [data, setData] = useState<FaqPageData>(DEFAULT_FAQ_PAGE);

  useEffect(() => {
    let cancelled = false;
    storefrontService.getFaqLayout().then((raw) => {
      if (!cancelled) setData(parseFaqPageData(raw));
    });
    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
      <AnnouncementBar />
      <Header />
      <StickyHeaderSpacer />
      <Navbar />
      <main className="flex-grow py-10 pb-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px]">
          <FaqHub data={data} />
        </div>
      </main>
      <Footer />
      <FloatingButtons />
    </div>
  );
}