import { Navbar } from "@/components/sections/Navbar";
import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { PageContainer } from "@/components/shared/PageContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { tenextButton as TenextButton } from "@/components/shared/Button";
import { PreFooterCTA } from "@/components/shared/PreFooterCTA";
import { openRoles } from "@/data/site-pages";

export const metadata = {
  title: "Careers",
  description:
    "Build the digital backbone for enterprises. Explore open roles at Tenext Technologies in Coimbatore.",
};

export default function CareersPage() {
  return (
    <>
      <Navbar />
      <main className="bg-white">
        <PageTitleBanner
          title="Careers"
          breadcrumbs={[{ label: "Home", href: "/" }, { label: "Careers" }]}
        />
        <SectionContainer paddingY="lg" className="px-[20px]">
          <PageContainer>
            <SectionHeading
              tag="[ join us ]"
              title="Build the digital backbone for enterprises"
              description="We are engineers, designers, and problem-solvers who care about outcomes. These are the disciplines we hire for — introduce yourself and we will be in touch when a role opens."
              titleClassName="text-tenext-dark max-w-[720px]"
              descriptionClassName="max-w-[620px]"
              className="mb-[50px]"
            />

            <div className="flex flex-col gap-[16px]">
              {openRoles.map((role, index) => (
                <RevealOnView key={role.id} delay={index * 70}>
                  <div className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[30px_40px] transition-transform duration-300 hover:-translate-y-1 md:flex-row md:items-center md:justify-between">
                    <div>
                      <h3 className="font-[var(--font-sora)] text-[22px] font-bold leading-[1.3] text-tenext-dark">
                        {role.title}
                      </h3>
                      <p className="mt-[6px] text-[15px] text-tenext-text-muted">
                        {role.location} · {role.type}
                      </p>
                    </div>
                    <TenextButton
                      href="/contacts"
                      variant="gradient-border"
                      className="shrink-0 rounded-[25px] px-[30px] py-[14px] text-[15px] font-medium"
                      showArrow={true}
                    >
                      Get in touch
                    </TenextButton>
                  </div>
                </RevealOnView>
              ))}
            </div>
          </PageContainer>
        </SectionContainer>
        <PreFooterCTA />
      </main>
    </>
  );
}