import Link from "next/link";

type Job = { href: string; title: string; experience: string };

const ALL_JOBS: Job[] = [
  // { href: "/career-web-designer",        title: "Web Designer",                experience: "1+ Years | Full Time" },
  // { href: "/career-social-media-expert", title: "Social Media Expert",         experience: "1.5–2 Years | Full Time" },
  // { href: "/career-laravel-developer",   title: "Laravel Developer",           experience: "Fresher | Full Time" },
  // { href: "/career-graphic-designer",    title: "Graphic Designer",            experience: "Intern | Full Time" },
  // { href: "/career-quality-analyst",     title: "Quality Analyst (QA)",        experience: "1+ Years | Full Time" },
  { href: "/career-sales-coordinator",   title: "Sales Coordinator",           experience: "1+ Years | Full Time" },
  { href: "/career-performance-marketing", title: "Performance Marketing",      experience: "1+ Years | Full Time" },
  { href: "/career-content-writing-expert", title: "Content Writing Expert",    experience: "1+ Years | Full Time" },
  // { href: "/career-seo-expert",          title: "SEO Expert",                  experience: "Fresher | Full Time" },
  // { href: "/career-ui-ux-designer",      title: "UI/UX Designer",              experience: "1+ Years | Full Time" },
  // { href: "/career-flutter-developer",   title: "Flutter Developer",           experience: "1+ Years | Full Time" },
  // { href: "/business-development-executive", title: "Business Development Executive (Female)", experience: "1+ Years | Full Time" },
];

interface OtherCareersProps {
  current: string;
  limit?: number;
}

export default function OtherCareers({ current, limit = 4 }: OtherCareersProps) {
  const seen = new Set<string>();
  const others = ALL_JOBS.filter((j) => {
    if (j.href === current) return false;
    if (seen.has(j.href)) return false;
    seen.add(j.href);
    return true;
  }).slice(0, limit);

  return (
    <section className="py-12 md:py-16 bg-[#FAFAFA] border-t border-gray-200">
      <div className="max-w-[1200px] mx-auto px-4">
        <h2 className="text-[26px] md:text-[36px] font-bold text-[#3A3A3A] text-center Manrope">
          Other Open <span className="text-[#E77025]">Positions</span> at Fruxinfo
        </h2>
        <p className="text-center text-[#5D5D5D] mt-2 max-w-[700px] mx-auto text-[15px]">
          Browse other openings at Fruxinfo Ahmedabad — we&apos;re hiring across web, app, design, QA, and marketing.
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
          {others.map((j) => (
            <Link
              key={j.href}
              href={j.href}
              className="block bg-white p-5 rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-[#E77025] transition"
            >
              <h3 className="text-[16px] font-semibold text-[#3A3A3A]">{j.title}</h3>
              <p className="text-[13px] text-[#5D5D5D] mt-1">{j.experience}</p>
              <span className="text-[#E77025] text-[13px] font-medium mt-3 inline-block">View role →</span>
            </Link>
          ))}
        </div>
        <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 mt-8 text-[14px]">
          <Link href="/career" className="text-[#E77025] hover:underline">View all open positions</Link>
          <Link href="/team" className="text-[#E77025] hover:underline">Meet our team</Link>
          <Link href="/contact" className="text-[#E77025] hover:underline">Contact HR</Link>
        </div>
      </div>
    </section>
  );
}