Career 2

"use client";

import { Bookmark, SquareArrowOutUpRight } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

const categories = [
  { id: "all", label: "All" },
  { id: "artifact-curator", label: "Artifact Curator" },
  { id: "archaeologist", label: "Archaeologist" },
  { id: "content-writer", label: "Content Writer" },
];

const jobs = [
  {
    categoryId: "artifact-curator",
    department: "Artifact Curator",
    description:
      "Manages, preserves, and organizes collections of ancient artifacts.",
    id: 1,
    postedAt: "2 hours ago",
    salary: "USD 95k-125k/year",
    title: "Artifact Specialists",
    type: "Full-time",
  },
  {
    categoryId: "archaeologist",
    department: "Digital Archivist",
    description:
      "Manages, preserves, and organizes collections of ancient artifacts.",
    id: 2,
    postedAt: "5 days ago",
    salary: "USD 95k-125k/year",
    title: "Digital Experience Roles",
    type: "Full-time",
  },
  {
    categoryId: "content-writer",
    department: "Content Writer",
    description:
      "Creates engaging content about historical artifacts and civilizations for our digital platforms.",
    id: 3,
    postedAt: "1 week ago",
    salary: "USD 75k-95k/year",
    title: "Historical Content Specialist",
    type: "Full-time",
  },
];

export default function CareerVariant2() {
  const [activeCategory, setActiveCategory] = useState("all");

  const filteredJobs =
    activeCategory === "all"
      ? jobs
      : jobs.filter((job) => job.categoryId === activeCategory);

  return (
    <section className="relative w-full bg-white py-12 sm:py-16 lg:py-20">
      <div className="relative mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <Badge className="mx-auto flex w-fit items-center gap-0 bg-transparent">
            <span className="rounded-full bg-neutral-900 p-1">
              <Icons.bag className="size-4 text-white" />
            </span>
            <span className="rounded-full bg-neutral-900 px-3 py-1 dark:text-white">
              Career at Cnippet
            </span>
          </Badge>

          <h1 className="mt-4 font-medium font-onest text-4xl text-gray-900 tracking-tight sm:text-5xl">
            Join the team
          </h1>
          <p className="mx-auto mt-4 max-w-lg font-onest text-base text-gray-600">
            Each artifact is more than just an object, it's a piece of history,
            a remnant of a civilization long gone.
          </p>
        </div>

        <Tabs
          className="mt-10"
          onValueChange={setActiveCategory}
          value={activeCategory}
        >
          <TabsList className="mx-auto flex flex-wrap items-center justify-center gap-2 bg-transparent p-0">
            {categories.map((category) => (
              <TabsTab
                className={`rounded-lg border-none px-4 py-2 font-medium font-onest text-sm transition-colors focus-visible:ring-0 [&_button]:bg-black ${
                  activeCategory === category.id
                    ? "border-none bg-blue-600 outline-0 data-active:text-white"
                    : "bg-gray-50 text-black"
                }`}
                key={category.id}
                value={category.id}
              >
                {category.label}
              </TabsTab>
            ))}
          </TabsList>

          <TabsPanel className="mt-8" value={activeCategory}>
            <div className="flex flex-col gap-4">
              {filteredJobs.map((job) => (
                <article
                  className="rounded-2xl border border-gray-200 bg-white p-6 transition-shadow hover:shadow-sm"
                  key={job.id}
                >
                  <div className="flex items-start justify-between">
                    <Link
                      className="font-medium font-onest text-blue-600 text-sm hover:text-blue-700"
                      href="#"
                    >
                      {job.department}
                    </Link>
                    <span className="text-gray-500 text-sm">
                      {job.postedAt}
                    </span>
                  </div>

                  <h3 className="mt-2 font-medium font-onest text-gray-900 text-xl sm:text-2xl!">
                    {job.title}
                  </h3>

                  <p className="mt-2 font-onest text-gray-600 text-sm leading-relaxed">
                    {job.description}
                  </p>

                  <div className="mt-5 flex flex-wrap items-center justify-between gap-4">
                    <div className="flex flex-wrap items-center gap-3">
                      <Button
                        className="rounded-full bg-gray-900 px-5 py-1 font-medium font-onest text-sm text-white hover:bg-gray-800"
                        render={<Link href="#" />}
                      >
                        Apply
                      </Button>

                      <div className="flex items-center gap-4 font-onest text-gray-500 text-xs tracking-wide">
                        <span className="flex items-center gap-1.5">
                          <Icons.clock className="size-3.5 text-gray-500" />
                          {job.type}
                        </span>
                        <span className="flex items-center gap-1.5">
                          <Icons.coin className="size-4 text-gray-500" />
                          {job.salary}
                        </span>
                      </div>
                    </div>

                    <div className="flex items-center gap-2">
                      <Button
                        className="rounded-full px-2 shadow-none hover:border-gray-300"
                        variant="outline"
                      >
                        <Bookmark className="size-4" />
                      </Button>
                      <Button
                        className="rounded-full px-2 shadow-none hover:border-gray-300"
                        variant="outline"
                      >
                        <SquareArrowOutUpRight className="size-4" />
                      </Button>
                    </div>
                  </div>
                </article>
              ))}

              {filteredJobs.length === 0 && (
                <div className="rounded-2xl border border-gray-200 bg-white py-12 text-center">
                  <p className="font-onest text-gray-500">
                    No positions found in this category.
                  </p>
                </div>
              )}
            </div>
          </TabsPanel>
        </Tabs>

        {/* Footer CTA */}
        <div className="mt-12 text-center">
          <p className="font-onest text-gray-600 text-sm">
            Don&apos;t see the right role?{" "}
            <Link
              className="font-medium text-blue-600 hover:text-blue-700"
              href="#"
            >
              Send us your resume
            </Link>
          </p>
        </div>
      </div>
    </section>
  );
}