'use client';

import { AppShell, useShell } from '@/components/AppShell';
import { EventsSection } from '@/components/EventsSection';
import { WalkathonSpotlight } from '@/components/WalkathonSpotlight';
import { OmrExpedition } from '@/components/OmrExpedition';

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

  return (
    <>
      {/* Page Header */}
      <section className="bg-neutral-50 py-14 border-b border-neutral-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-100 border border-emerald-300 text-emerald-800 text-xs font-bold uppercase tracking-widest mb-4">
            <span>Calendar of Activities</span>
          </div>
          <h1 className="text-4xl sm:text-6xl font-black text-neutral-900 uppercase tracking-tight mb-4">
            HBFC Events & Expeditions
          </h1>
          <p className="text-neutral-600 text-base sm:text-lg max-w-3xl leading-relaxed">
            From the 15KM Calabar Walkathon to the Obudu Mountain Resort summit climb and community medical outreaches, discover what makes HBFC Nigeria’s vibrant wellness fraternity.
          </p>
        </div>
      </section>

      {/* Featured Walkathon 7.0 Spotlight & Countdown */}
      <WalkathonSpotlight
        onRegisterClick={openWalkathonModal}
        imageUrl={store.data.hero.bgImage}
      />

      {/* All Events Grid with Category Filters & Modal */}
      <EventsSection
        events={store.data.events}
        onRegisterWalkathon={openWalkathonModal}
        onVolunteerClick={() => {
          window.location.href = '/membership';
        }}
      />

      {/* Obudu Mountain Resort Expedition Details */}
      <OmrExpedition
        data={store.data}
        onExploreEventsClick={() => {
          const el = document.getElementById('events');
          if (el) el.scrollIntoView({ behavior: 'smooth' });
        }}
      />
    </>
  );
}

export default function EventsPage() {
  return (
    <AppShell activePage="events">
      <EventsContent />
    </AppShell>
  );
}