"use client";

import { Button } from "@/components/ui/button";
import Section from "@/components/ui/section";
import Link from "next/link";
import { useTranslation } from "react-i18next";

export default function Page() {
  const { t } = useTranslation("common");

  return (
    <div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
      <h1 className="text-3xl mb-3">
        {t("jobPage.title")}
      </h1>

      <Section>

        <div className="font-bold text-lg override">
          {t("jobPage.hero")}
        </div>

        <div>
          {t("jobPage.description")}
          <ul className="list-disc list-inside">
            <li>{t("jobPage.responsibilities.drone")}</li>
            <li>{t("jobPage.responsibilities.database")}</li>
            <li>{t("jobPage.responsibilities.deployment")}</li>
            <li>{t("jobPage.responsibilities.team")}</li>
          </ul>
        </div>

        <div>
          {t("jobPage.salary")}
        </div>

        <ul className="list-disc list-inside">
          {t("jobPage.requirements.title")}
          <li>{t("jobPage.requirements.exp")}</li>
          <li>{t("jobPage.requirements.graduate")}</li>
          <li>{t("jobPage.requirements.languages")}</li>
          <li>{t("jobPage.requirements.swahili")}</li>
          <li>{t("jobPage.requirements.cambodia")}</li>
          <li>{t("jobPage.requirements.hgv")}</li>
          <li>{t("jobPage.requirements.dbs")}</li>
        </ul>

        <ul className="list-disc list-inside">
          {t("jobPage.desirables.title")}
          <li>{t("jobPage.desirables.social")}</li>
          <li>{t("jobPage.desirables.warhammer")}</li>
          <li>{t("jobPage.desirables.morals")}</li>
        </ul>

        <Button className="bg-blue-500 text-white px-4 py-2 rounded mt-4" asChild>
          <Link href="/careers/apply/">
            {t("jobPage.apply")}
          </Link>
        </Button>

      </Section>
    </div>
  );
}