Career 4

//biome-ignore-all lint/suspicious/noArrayIndexKey:<>

"use client";

import { ChevronRightIcon } from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

const filters = [
  { count: 8, label: "Show all" },
  { count: 5, label: "Creative Team" },
  { count: 3, label: "Product Leadership" },
  { count: 12, label: "Brand Strategy" },
];

const allJobs = [
  {
    category: "Creative Team",
    company: "Figma",
    companyLogo:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770737807/logoipsum-6.png",
    country: "🇺🇸",
    location: "United States",
    salary: "125k - 220k",
    title: "UI Designer",
    type: "Full time",
  },
  {
    category: "Product Leadership",
    company: "Linkedin",
    companyLogo:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770737807/logoipsum-7.png",
    country: "🇦🇺",
    location: "Australia",
    salary: "180 - 240K USD",
    title: "Product Designer",
    type: "Part time",
  },
  {
    category: "Creative Team",
    company: "Reddit",
    companyLogo:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770737807/logoipsum-8.png",
    country: "🇺🇸",
    location: "United States",
    salary: "220 - 310K USD",
    title: "Product Design Lead",
    type: "Full time",
  },
  {
    category: "Brand Strategy",
    company: "Spotify",
    companyLogo:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770737807/logoipsum-9.png",
    country: "🇬🇧",
    location: "United Kingdom",
    salary: "150 - 200K USD",
    title: "Brand Designer",
    type: "Full time",
  },
  {
    category: "Product Leadership",
    company: "Slack",
    companyLogo:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770737807/logoipsum-10.png",
    country: "🇨🇦",
    location: "Canada",
    salary: "190 - 280K USD",
    title: "Product Manager",
    type: "Full time",
  },
  {
    category: "Brand Strategy",
    company: "Notion",
    companyLogo:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770737807/logoipsum-7.png",
    country: "🇺🇸",
    location: "United States",
    salary: "140 - 190K USD",
    title: "Marketing Designer",
    type: "Full time",
  },
];

export default function Component() {
  const [_activeTab, _setActiveTab] = useState("tab-all");

  const getFilteredJobs = (category: string) => {
    if (category === "Show all") return allJobs;
    return allJobs.filter((job) => job.category === category);
  };

  const JobCard = ({ job }: { job: (typeof allJobs)[0] }) => (
    <div className="flex items-start justify-between gap-4 rounded-2xl border border-neutral-200 bg-white p-5 transition-colors hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800">
      <div className="flex gap-4">
        <div className="flex h-12 w-12 shrink-0 items-center justify-center">
          <Image
            alt=""
            className="w-20"
            height={720}
            src={job.companyLogo}
            width={1080}
          />
        </div>
        <div className="space-y-2">
          <div>
            <h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
              {job.title}
            </h3>
            <p className="text-neutral-600 text-sm dark:text-neutral-400">
              {job.company} · {job.type} · {job.salary}
            </p>
          </div>
          <div className="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-3 py-1 text-xs dark:border-neutral-700 dark:bg-neutral-800">
            <span className="text-neutral-700 dark:text-neutral-300">
              {job.location}
            </span>
          </div>
        </div>
      </div>
      <Button className="rounded-lg bg-neutral-900 px-5 py-2 font-medium text-sm text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200">
        Apply
      </Button>
    </div>
  );

  return (
    <section className="relative w-full overflow-hidden bg-white py-12 md:py-24 dark:bg-background">
      <svg
        className="absolute top-0 -right-16 text-neutral-100 dark:text-neutral-800"
        fill="none"
        height="413"
        viewBox="0 0 615 413"
        width="615"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_career2)">
          <path
            d="M53.6842 -174C10.9702 -71.2132 6.62611 40.7282 53.6842 105.688C108.466 181.309 232.908 193.262 447.569 52.9833C191.422 724.946 730.375 87.8948 560.032 392"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="40"
          />
        </g>
        <defs>
          <clipPath id="clip0_career2">
            <rect fill="white" height="413" width="615" />
          </clipPath>
        </defs>
      </svg>

      <div className="relative z-10 mx-auto max-w-5xl px-6 lg:px-0">
        <div className="mb-12 space-y-6">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
            <Icons.shapes className="size-6" />
          </div>

          <h1 className="max-w-2xl font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
            Join Our Team and Contribute to Crafting Timeless, Inspiring Designs
          </h1>

          <p className="max-w-xl text-neutral-600 dark:text-neutral-400">
            Real stories from teams transforming workflows with Beam.
          </p>
        </div>

        {/* Tabs Layout */}
        <div className="w-full">
          <Tabs
            className="w-full flex-col gap-8 sm:flex-row"
            defaultValue="tab-all"
            orientation="vertical"
          >
            <TabsList className="h-fit w-full shrink-0 rounded-2xl border border-neutral-200 bg-white p-2 sm:w-64 dark:border-neutral-800 dark:bg-neutral-900">
              {filters.map((filter, index) => (
                <TabsTab
                  className="w-full justify-between rounded-lg p-2 text-left text-neutral-700 hover:bg-neutral-100 data-[state=active]:bg-neutral-100 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:hover:bg-neutral-800"
                  key={filter.label}
                  value={`tab-${index === 0 ? "all" : filter.label.toLowerCase().replace(" ", "-")}`}
                >
                  <span className="font-medium">
                    {filter.label} ({filter.count})
                  </span>
                  <ChevronRightIcon className="ml-auto size-4 text-neutral-400" />
                </TabsTab>
              ))}
            </TabsList>

            <TabsPanel className="flex-1" value="tab-all">
              <div className="space-y-3">
                {getFilteredJobs("Show all").map((job, idx) => (
                  <JobCard job={job} key={`${job.title}-${idx}`} />
                ))}
              </div>
            </TabsPanel>

            <TabsPanel className="flex-1" value="tab-creative-team">
              <div className="space-y-3">
                {getFilteredJobs("Creative Team").map((job, idx) => (
                  <JobCard job={job} key={`${job.title}-${idx}`} />
                ))}
              </div>
            </TabsPanel>

            <TabsPanel className="flex-1" value="tab-product-leadership">
              <div className="space-y-3">
                {getFilteredJobs("Product Leadership").map((job, idx) => (
                  <JobCard job={job} key={`${job.title}-${idx}`} />
                ))}
              </div>
            </TabsPanel>

            <TabsPanel className="flex-1" value="tab-brand-strategy">
              <div className="space-y-3">
                {getFilteredJobs("Brand Strategy").map((job, idx) => (
                  <JobCard job={job} key={`${job.title}-${idx}`} />
                ))}
              </div>
            </TabsPanel>
          </Tabs>
        </div>
      </div>
    </section>
  );
}