import dynamic from "next/dynamic";
import Layout from "@/components/layout/Layout";
import { config } from "@/lib/config";
import WifiCard from "@/components/accueil/WifiCard";
import Logo from "@/components/Logo";

const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget"), {
  loading: () => <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />,
  ssr: false,
});

export default function AccueilPage() {
  return (
    <Layout>
      <div className="px-4 py-6 space-y-6">
        <header className="text-center py-4">
          <Logo size={140} className="mb-4" />
          <h1 className="text-2xl font-bold text-primary mb-2">
            Ia Ora Na
          </h1>
          <p className="text-lg text-gray-700">
            Bienvenue au Bungalow {config.bungalowNumber}
          </p>
        </header>

        <WifiCard />

        <WeatherWidget />

        <section className="bg-secondary rounded-2xl p-6">
          <h2 className="text-xl font-semibold text-primary mb-3">
            Le mot du gérant
          </h2>
          <p className="text-gray-700 leading-relaxed">
            {config.gerantMessage}
          </p>
        </section>
      </div>
    </Layout>
  );
}