Career 1

"use client";

import { Bookmark, ExternalLink, SquareArrowOutUpRight } from "lucide-react";
import Image from "next/image";
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 { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

const categories = [
  { id: "all", label: "All" },
  { id: "ancient-civilization", label: "Ancient Civilization" },
  { id: "archaeological-discoveries", label: "Archaeological Discoveries" },
];

const jobs = [
  {
    categoryId: "ancient-civilization",
    department: "Artifact Curator",
    description:
      "Manages, preserves, and organizes collections of ancient artifacts.",
    id: 1,
    postedAt: "2 hours ago",
    salary: "INR 95k-125k/year",
    title: "Artifact Specialists",
    type: "Full-time",
  },
  {
    categoryId: "archaeological-discoveries",
    department: "Digital Designer",
    description:
      "Manages, preserves, and organizes collections of ancient artifacts.",
    id: 2,
    postedAt: "3 days ago",
    salary: "INR 95k-125k/year",
    title: "3D Model Designer",
    type: "Full-time",
  },
  {
    categoryId: "archaeological-discoveries",
    department: "Digital Archivist",
    description:
      "Digitizes collections, manages online databases, and ensures accurate historical records.",
    id: 3,
    postedAt: "5 days ago",
    salary: "INR 95k-125k/year",
    title: "Digital Experience Roles",
    type: "Full-time",
  },
];

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

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

  return (
    <section className="w-full overflow-clip bg-white py-12 sm:py-16 lg:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
          <div className="col-span-1 lg:col-span-6">
            <Badge className="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="mt-4 font-onest text-gray-600 text-lg">
              Be part of a community dedicated to preserving and sharing
              history.
            </p>

            <Tabs
              className="mt-16"
              onValueChange={setActiveCategory}
              value={activeCategory}
            >
              <TabsList className="flex flex-wrap 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-6" 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-md"
                      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-600 text-xs">
                          {job.postedAt}
                        </span>
                      </div>

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

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

                      <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
                        <div className="flex items-center gap-2">
                          <Button
                            className="rounded-full bg-gray-900 px-6 font-medium font-onest text-sm text-white hover:bg-gray-800"
                            render={<Link href="#" />}
                          >
                            Apply
                          </Button>
                          <Separator className="h-4" orientation="vertical" />
                          <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 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>
                    </article>
                  ))}

                  {filteredJobs.length === 0 && (
                    <div className="py-12 text-center">
                      <p className="font-onest text-gray-500">
                        No positions found in this category.
                      </p>
                    </div>
                  )}
                </div>
              </TabsPanel>
            </Tabs>
          </div>
          <div className="hidden lg:col-span-2 lg:block" />
          <div className="flex flex-col gap-6 px-4 lg:col-span-4">
            <div className="sticky top-10 flex flex-col gap-6 text-center">
              <div className=" ">
                <Icons.eductaion className="mx-auto" />

                <h3 className="mt-2 font-medium font-onest text-gray-900 text-xl tracking-wide">
                  Available Student Program
                </h3>

                <p className="mt-1 font-onest text-gray-600 text-xs">
                  Come and learn to our HQ office!
                </p>

                <Button
                  className="mt-4 rounded-full bg-gray-900 px-4 py-1.5 font-medium font-onest text-sm text-white hover:bg-gray-800"
                  render={<Link href="#" />}
                  size="sm"
                >
                  Learn more
                </Button>
              </div>

              <div className="relative aspect-square h-60 w-full overflow-hidden rounded-2xl bg-gray-100">
                <Image
                  alt="Ancient artifacts collection"
                  className="object-cover"
                  fill
                  src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h12.jpg"
                />
              </div>

              <div className="rounded-2xl border border-gray-200 bg-white p-3">
                <div className="flex items-center text-left">
                  <Image
                    alt=""
                    className="size-18"
                    height={600}
                    src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1753948225/logo-light.png"
                    width={600}
                  />
                  <div>
                    <h3 className="font-medium font-onest text-2xl">Cnippet</h3>
                    <p className="font-onest text-gray-600 text-sm">
                      Follow us on socials for updates!
                    </p>
                  </div>
                </div>

                <div className="mt-4 flex items-center gap-2">
                  <Button className="flex items-center justify-center gap-0 border-none bg-transparent text-black shadow-none hover:bg-transparent">
                    <span className="rounded-full border p-2.5">
                      <Icons.emailSparkle className="size-4" />
                    </span>
                    <span className="rounded-full border px-2 py-2">
                      support@cnippet.dev
                    </span>
                  </Button>
                  <Separator className="h-4" orientation="vertical" />
                  <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"
                  >
                    <ExternalLink className="size-4" />
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}