import type { Metadata } from "next";
import { Header } from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { CareersHero } from "@/features/careers/components/CareersHero";
import { CareersFilterBar } from "@/features/careers/components/CareersFilterBar";
import { CareersSpotlight } from "@/features/careers/components/CareersSpotlight";
import { CareersJobsList } from "@/features/careers/components/CareersJobsList";
import { CareersSidebar } from "@/features/careers/components/CareersSidebar";
import { CultureBand } from "@/features/careers/components/CultureBand";
import { HireProcess } from "@/features/careers/components/HireProcess";
import { TeamQuotes } from "@/features/careers/components/TeamQuotes";

export const metadata: Metadata = {
  title: "Careers — DTNews",
  description:
    "Join DTNews across 14 bureaus and 9 desks. Reporters, editors, photographers, audio producers, product designers and engineers.",
};

import { getServerLocale } from "@/lib/i18n/server";

export default async function CareersPage() {
  const locale = await getServerLocale();

  return (
    <div className="dt-fade-in">
      <Header locale={locale} />
      <main>
        <CareersHero locale={locale} />
        <CareersFilterBar />
        <CareersSpotlight locale={locale} />
        <section className="careers-sec">
          <div className="wrap">
            <div className="jobs-shell">
              <CareersJobsList />
              <CareersSidebar />
            </div>
          </div>
        </section>
        {/* <CultureBand locale={locale} /> */}
        <HireProcess locale={locale} />
        <TeamQuotes locale={locale} />
      </main>
      <Footer locale={locale} />
    </div>
  );
}