'use client';

import { AppShell, useShell } from '@/components/AppShell';
import { Hero } from '@/components/Hero';
import { OmrExpedition } from '@/components/OmrExpedition';
import { ChairmanMessage } from '@/components/ChairmanMessage';
import { ImpactSection } from '@/components/ImpactSection';
import { motion } from 'motion/react';

function HomeContent() {
  const { store, openWalkathonModal } = useShell();

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="space-y-0"
    >
      {/* Executive Hero with Official HBFC Crest and Direct CTAs: Explore Heritage, Coming Events, Volunteer */}
      <Hero
        data={store.data}
        activePage="home"
        onRegisterWalkathon={openWalkathonModal}
      />

      {/* Obudu Mountain Resort Expedition */}
      {(store.data.visibleSections?.omrExpedition ?? true) && (
        <OmrExpedition
          data={store.data}
          onExploreEventsClick={() => {
            window.location.href = '/events';
          }}
        />
      )}

      {/* Chairman's Address & Leadership */}
      {(store.data.visibleSections?.chairman ?? true) && (
        <ChairmanMessage
          data={store.data}
        />
      )}

      {/* Impact Pillars */}
      {(store.data.visibleSections?.impact ?? true) && (
        <ImpactSection
          data={store.data}
          onJoinClick={() => {
            window.location.href = '/membership';
          }}
        />
      )}
    </motion.div>
  );
}

export default function RootPage() {
  return (
    <AppShell activePage="home">
      <HomeContent />
    </AppShell>
  );
}