'use client';

import { AppShell, useShell } from '@/components/AppShell';
import { MembershipSection } from '@/components/MembershipSection';

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

  return (
    <>
      {/* Page Header */}
      <section className="bg-neutral-50 py-12 sm:py-16 border-b border-neutral-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center sm:text-left">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-amber-100 border border-amber-300 text-amber-900 text-xs font-bold uppercase tracking-widest mb-4">
            <span>Fraternity & Volunteer Corps</span>
          </div>
          <h1 className="text-3xl sm:text-5xl md:text-6xl font-black text-neutral-900 uppercase tracking-tight mb-4">
            JOIN & VOLUNTEER
          </h1>
          <p className="text-neutral-600 text-sm sm:text-base md:text-lg max-w-3xl leading-relaxed">
            Healthy Billionaires Fitness Club (HBFC) is a premier wellness fraternity. Club membership is strictly by executive peer sponsorship and invitation, and is <strong>not open to the general public</strong>. Sign up to volunteer for Calabar Walkathon 8.0 and our upcoming expeditions.
          </p>
        </div>
      </section>

      {/* Main Membership & Volunteer Component */}
      <MembershipSection
        onRegisterWalkathon={openWalkathonModal}
        data={store.data}
      />
    </>
  );
}

export default function MembershipPage() {
  return (
    <AppShell activePage="membership">
      <MembershipContent />
    </AppShell>
  );
}