import dynamic from "next/dynamic";
import Layout from "@/components/layout/Layout";
import TideWidget from "@/components/mana-tracker/TideWidget";
import SunTimesWidget from "@/components/mana-tracker/SunTimesWidget";

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

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

export default function ManaTrackerPage() {
  return (
    <Layout>
      <div className="px-4 py-6 space-y-6">
        <header>
          <h1 className="text-2xl font-bold text-primary mb-2">
            Mana Tracker
          </h1>
          <p className="text-gray-600">
            Activités & Météo - Tout dépend de la mer et du soleil
          </p>
        </header>

        <TideWidget />

        <SunTimesWidget />

        <ExcursionBooking />

        <PushNotificationManager />
      </div>
    </Layout>
  );
}