'use client';

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

function GalleryContent() {
  const { store } = 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>Visual Archive</span>
          </div>
          <h1 className="text-4xl sm:text-6xl font-black text-neutral-900 uppercase tracking-tight mb-4">
            HBFC Official Gallery
          </h1>
          <p className="text-neutral-600 text-base sm:text-lg max-w-3xl leading-relaxed">
            High-energy moments from the Calabar Walkathon, misty peaks of Obudu Mountain Resort, weekly Aerofit drills, and impactful medical outreaches across Cross River State.
          </p>
        </div>
      </section>

      {/* Main Gallery Component */}
      <GallerySection gallery={store.data.gallery} />
    </>
  );
}

export default function GalleryPage() {
  return (
    <AppShell activePage="gallery">
      <GalleryContent />
    </AppShell>
  );
}