import type { Metadata } from "next";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import CareerHero from "@/components/careers/CareerHero";
import WhyChoose from "@/components/WhyChoose";
import OpenPositions from "@/components/careers/OpenPositions";
import CtaBanner from "@/components/CtaBanner";

export const metadata: Metadata = {
  title: "Careers | Join Our Team",
  description:
    "Explore career opportunities and join our team of passionate people building innovative technology products and digital solutions.",
  alternates: {
    canonical: "/careers",
  },
};

export default function CareersPage() {
  return (
    <>
      <Header forceSolid />
      <main>
        <CareerHero />
        <WhyChoose tinted />
        <OpenPositions />
        <CtaBanner
          pill="Join Us"
          heading={
            <>
              Don&apos;t see your role? <br className="hidden sm:block" />
              Tell us how you&apos;d help.
            </>
          }
          description="We're always glad to meet people who care about building great mobile products."
          primary={{ label: "Get in Touch", href: "/#contact" }}
          secondary={{ label: "Explore Our Apps", href: "/#work" }}
        />
      </main>
      <Footer />
    </>
  );
}