'use client';

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

function ContactContent() {
  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>Secretariat & Inquiries</span>
          </div>
          <h1 className="text-4xl sm:text-6xl font-black text-neutral-900 uppercase tracking-tight mb-4">
            Contact Healthy Billionaires
          </h1>
          <p className="text-neutral-600 text-base sm:text-lg max-w-3xl leading-relaxed">
            Have questions about Walkathon 7.0 registration, corporate partnerships, or executive club membership? Reach out to our secretariat in Calabar.
          </p>
        </div>
      </section>

      {/* Main Contact Component */}
      <ContactSection data={store.data} />
    </>
  );
}

export default function ContactPage() {
  return (
    <AppShell activePage="contact">
      <ContactContent />
    </AppShell>
  );
}