import { Suspense } from 'react';
import RegistrationForm from '@/components/form/registration-form';
import Header from '@/components/layout/header';
import BannerSection from '@/components/custom/banner';
import StatsSection from '@/components/custom/stats';
import Footer from '@/components/layout/footer';
import FormHeader from '@/components/form/form-header';

export const metadata = {
  title: 'Apply for Ignite-100 | TechTan',
  description:
    'Join the Ignite-100 tech training program. 3 months of intensive, hands-on training in Web Development, Data Analytics, Product Design, Digital Marketing, or AI & Automation.',
};

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-50 relative">
      <Header />

      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-6 lg:py-10 relative z-10">
        <BannerSection />

        <div className="grid gap-10 lg:gap-16 items-start">
          <div className="space-y-8">
            <StatsSection />
          </div>

          <div id="application-form" className="lg:sticky lg:top-24 scroll-mt-24 sm:px-50">
            <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-visible">
              <div className="overflow-hidden rounded-t-3xl">
                <FormHeader />
              </div>
              <div className="p-6 overflow-visible">
                <Suspense fallback={<div className="py-10 text-center text-gray-400 text-sm">Loading form…</div>}>
                  <RegistrationForm />
                </Suspense>
              </div>
            </div>

            <p className="text-center text-sm font-medium text-gray-700 mt-4">
              By applying you agree to our Terms of Service &amp; Privacy Policy
            </p>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}