import dynamic from "next/dynamic";
import Layout from "@/components/layout/Layout";
import ContactSection from "@/components/infos/ContactSection";

const FAQAccordion = dynamic(() => import("@/components/infos/FAQAccordion"), {
  loading: () => <div className="h-64 bg-gray-100 rounded-2xl animate-pulse" />,
});

const LexiqueSection = dynamic(() => import("@/components/infos/LexiqueSection"), {
  loading: () => <div className="h-48 bg-gray-100 rounded-2xl animate-pulse" />,
});

export default function InfosPage() {
  return (
    <Layout>
      <div className="px-4 py-6 space-y-8">
        <header>
          <h1 className="text-2xl font-bold text-primary mb-2">
            Infos Pratiques
          </h1>
          <p className="text-gray-600">
            Tout ce que vous devez savoir pour votre séjour
          </p>
        </header>

        <section>
          <h2 className="text-xl font-semibold text-primary mb-4">
            Questions Fréquentes
          </h2>
          <FAQAccordion />
        </section>

        <section>
          <LexiqueSection />
        </section>

        <section>
          <ContactSection />
        </section>
      </div>
    </Layout>
  );
}