'use client';

import { AppShell, useShell } from '@/components/AppShell';
import { AboutSection } from '@/components/AboutSection';
import { ChairmanMessage } from '@/components/ChairmanMessage';
import { ImpactSection } from '@/components/ImpactSection';
import Link from 'next/link';
import { ArrowRight, Award, ShieldCheck, Users, HeartPulse } from 'lucide-react';

function AboutContent() {
  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>Our Heritage & Vision</span>
          </div>
          <h1 className="text-4xl sm:text-6xl font-black text-neutral-900 uppercase tracking-tight mb-4">
            About Healthy Billionaires
          </h1>
          <p className="text-neutral-600 text-base sm:text-lg max-w-3xl leading-relaxed">
            Founded in 2019 in Calabar, Cross River State, Nigeria. Healthy Billionaires Fitness Club (HBFC) is a premier fitness, lifestyle, adventure, and community organization founded on the conviction that <strong className="text-neutral-900">Health is Wealth</strong>.
          </p>
        </div>
      </section>

      {/* Main About Component */}
      <AboutSection data={store.data} />

      {/* Chairman Message */}
      <ChairmanMessage data={store.data} />

      {/* Impact Footprint */}
      <ImpactSection
        data={store.data}
        onJoinClick={() => {
          window.location.href = '/membership';
        }}
      />
    </>
  );
}

export default function AboutPage() {
  return (
    <AppShell activePage="about">
      <AboutContent />
    </AppShell>
  );
}