import { Head } from "@inertiajs/react";
import { Nav } from "@/components/sections/Nav";
import { Footer } from "@/components/sections/Footer";
import { PageHeader } from "@/components/about/PageHeader";
import { WhoWeAre } from "@/components/about/WhoWeAre";
import { WhyWeExist } from "@/components/about/WhyWeExist";
import { WhoWeServe } from "@/components/about/WhoWeServe";
import { WhereWeWork } from "@/components/about/WhereWeWork";
import { HowWeWork } from "@/components/about/HowWeWork";
import { MissionVisionHero } from "@/components/about/MissionVisionHero";
import { MissionVisionCards } from "@/components/about/MissionVisionCards";
import { OriginStory } from "@/components/about/OriginStory";
import { WhatMakesUsDifferent } from "@/components/about/WhatMakesUsDifferent";
import { OurValues } from "@/components/about/OurValues";
import { OrgTimeline } from "@/components/about/OrgTimeline";
import { Leadership } from "@/components/about/Leadership";
import { Governance } from "@/components/about/Governance";
import { InlineCTA } from "@/components/about/InlineCTA";

export default function AboutPage() {
  return (
    <>
      <Head title="About Us" />
      <Nav />

      <main className="mt-18">
        <PageHeader />
        <WhoWeAre />
        <WhyWeExist />
        <MissionVisionHero />
        <MissionVisionCards />
        <WhoWeServe />
        <WhereWeWork />
        <HowWeWork />
        <OriginStory />
        <OrgTimeline />
        <WhatMakesUsDifferent />
        <OurValues />
        <Leadership />
        <Governance />
        <InlineCTA />
      </main>

      <Footer />

      <a
        href="tel:393"
        aria-label="Call 393 helpline — free and confidential"
        className="fixed right-5 bottom-5 z-200 flex h-13.5 w-13.5 flex-col items-center justify-center rounded-full bg-amber text-white shadow-[0_4px_16px_rgba(232,131,74,.45)] md:hidden"
      >
        <span className="text-[14px] leading-tight font-black">393</span>
        <span className="text-[9px] opacity-80">CALL FREE</span>
      </a>
    </>
  );
}
