import { Navbar } from "@/components/sections/Navbar";
import { ContactFormSection } from "@/components/shared/ContactFormSection";
import { AboutHero } from "@/components/sections/about/AboutHero";
import { WhoWeAre } from "@/components/sections/about/WhoWeAre";
import { OurStory } from "@/components/sections/about/OurStory";
import { IconCardGrid } from "@/components/sections/about/IconCardGrid";
import { DeliveryModel } from "@/components/sections/about/DeliveryModel";
import { AboutPracticeTeams } from "@/components/sections/about/AboutPracticeTeams";
import { AboutIndustries } from "@/components/sections/about/AboutIndustries";
import { AboutCTA } from "@/components/sections/about/AboutCTA";
import {
  pillars,
  whyTenext,
  capabilities,
  techEcosystem,
  trustPrinciples,
} from "@/data/about";

export const metadata = {
  title: "About Us",
  description:
    "Tenext Technologies helps enterprises turn digital transformation into predictable business outcomes across cloud, data, AI, and product engineering.",
};

export default function AboutPage() {
  return (
    <>
      <Navbar />
      <main className="bg-white">
        {/* 1 — Hero */}
        <AboutHero />

        {/* 2 — Who we are */}
        <WhoWeAre />

        {/* 3 — Our story */}
        <OurStory />

        {/* 4 — Mission / Vision / Values */}
        <IconCardGrid
          eyebrow="what drives us"
          title="Mission, vision, and the values behind our work"
          items={pillars}
          columns={3}
          theme="dark"
        />

        {/* 5 — Why Tenext */}
        <IconCardGrid
          eyebrow="why tenext"
          title="What sets our engineering apart"
          items={whyTenext}
          columns={3}
          theme="light"
        />

        {/* 6 — Capabilities */}
        <IconCardGrid
          eyebrow="capabilities"
          title="Engineering capabilities across the enterprise"
          items={capabilities}
          columns={3}
          theme="surface"
        />

        {/* 7 — Industries */}
        <AboutIndustries />

        {/* 8 — Delivery model */}
        <DeliveryModel />

        {/* 9 — Practice teams */}
        <AboutPracticeTeams />

        {/* 10 — Technology ecosystem */}
        <IconCardGrid
          eyebrow="technology ecosystem"
          title="The technologies we build with"
          description="We work across the modern enterprise stack — matched to your landscape, not to a single vendor."
          items={techEcosystem}
          columns={4}
          theme="surface"
        />

        {/* 11 — Enterprise trust */}
        <IconCardGrid
          eyebrow="enterprise trust"
          title="Why enterprises rely on Tenext"
          description="Not testimonials — the principles, standards, and culture that make delivery dependable."
          items={trustPrinciples}
          columns={4}
          theme="dark"
        />

        {/* 12 — Final CTA */}
        <AboutCTA />

        {/* 13 — Contact */}
        <ContactFormSection />
      </main>
    </>
  );
}