import React, { useState } from "react";
import {
  Globe,
  Laptop,
  Award,
  Shield,
  ChevronRight,
  Search,
  Clock,
} from "lucide-react";
import { Helmet } from "react-helmet";

const jobCategories = [
  { id: "all", label: "All Positions" },
  { id: "engineering", label: "Engineering" },
  { id: "gameOperations", label: "Game Operations" },
  { id: "marketing", label: "Marketing" },
  { id: "customerSupport", label: "Customer Support" },
];

const cultureItems = [
  {
    icon: Globe,
    title: "Global Team",
    description: "Work with talented professionals from around the world.",
  },
  {
    icon: Laptop,
    title: "Flexible Work",
    description: "Remote and hybrid work options with flexible schedules.",
  },
  {
    icon: Award,
    title: "Career Growth",
    description:
      "Continuous learning and professional development opportunities.",
  },
  {
    icon: Shield,
    title: "Inclusive Environment",
    description: "Diverse, supportive workplace that values every team member.",
  },
];

const jobListings = {
  engineering: [
    {
      title: "Senior Software Engineer",
      location: "Remote",
      type: "Full-time",
      department: "Platform Development",
      description:
        "Design and implement scalable infrastructure for game hosting platforms.",
      requirements: [
        "5+ years of backend software engineering experience",
        "Expertise in cloud technologies and distributed systems",
        "Strong knowledge of Python, Go, or Rust",
      ],
      compensation: {
        base: "$130,000 - $180,000",
        equity: "0.1% - 0.5% RSU",
        bonus: "15% annual performance bonus",
      },
      benefits: [
        "Comprehensive health, dental, and vision insurance",
        "401(k) with 5% company match",
        "$5,000 annual professional development budget",
        "Unlimited PTO",
        "Home office setup stipend",
        "Mental health and wellness programs",
      ],
    },
    {
      title: "DevOps Engineer",
      location: "Hybrid",
      type: "Full-time",
      department: "Infrastructure",
      description:
        "Optimize and maintain our global game server infrastructure.",
      requirements: [
        "Experience with Kubernetes and container orchestration",
        "Proficient in cloud platforms (AWS, GCP, Azure)",
        "Strong automation and scripting skills",
      ],
      compensation: {
        base: "$120,000 - $165,000",
        equity: "0.05% - 0.3% RSU",
        bonus: "12% annual performance bonus",
      },
      benefits: [
        "Comprehensive health insurance",
        "401(k) with 4% company match",
        "$4,000 annual tech conference budget",
        "Flexible hybrid work model",
        "Free cloud certification training",
        "Quarterly wellness stipend",
      ],
    },
  ],
  gameOperations: [
    {
      title: "Game Server Technician",
      location: "On-site",
      type: "Full-time",
      department: "Server Management",
      description:
        "Manage and optimize game server performance and reliability.",
      requirements: [
        "Deep understanding of multiplayer game infrastructure",
        "Network and system administration skills",
        "Passion for gaming and technical problem-solving",
      ],
      compensation: {
        base: "$85,000 - $110,000",
        equity: "0.02% - 0.1% RSU",
        bonus: "10% annual performance bonus",
      },
      benefits: [
        "Health insurance",
        "401(k) with 3% company match",
        "Free game subscriptions",
        "Gaming equipment discount",
        "Casual work environment",
        "Team gaming events",
      ],
    },
  ],
  marketing: [
    {
      title: "Community Marketing Manager",
      location: "Remote",
      type: "Full-time",
      department: "Community & Partnerships",
      description:
        "Build and engage our global gaming community across multiple platforms.",
      requirements: [
        "Experience in gaming or tech community management",
        "Strong social media and content creation skills",
        "Ability to create engaging multimedia content",
      ],
      compensation: {
        base: "$90,000 - $125,000",
        equity: "0.03% - 0.2% RSU",
        bonus: "12% annual performance bonus",
      },
      benefits: [
        "Health and wellness insurance",
        "401(k) with 4% company match",
        "Content creation budget",
        "Global community event access",
        "Remote work flexibility",
        "Professional development courses",
      ],
    },
  ],
  customerSupport: [
    {
      title: "Senior Gaming Support Specialist",
      location: "Remote",
      type: "Full-time",
      department: "Player Experience",
      description:
        "Provide world-class support for our global gaming community.",
      requirements: [
        "Excellent communication skills",
        "Technical troubleshooting ability",
        "Passion for gaming and customer satisfaction",
      ],
      compensation: {
        base: "$65,000 - $85,000",
        equity: "0.01% - 0.05% RSU",
        bonus: "8% annual performance bonus",
      },
      benefits: [
        "Health insurance",
        "401(k) with 3% company match",
        "Free gaming subscriptions",
        "Multilingual support incentives",
        "Flexible scheduling",
        "Career development programs",
      ],
    },
  ],
};

const CultureCard = ({ icon: Icon, title, description }) => (
  <div className="bg-slate-900 p-5 rounded-md">
    <div className="flex flex-col items-center text-center">
      <div className="bg-gray-950 p-4 rounded-md mb-4">
        <Icon className="w-8 h-8 text-blue-600" />
      </div>
      <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
      <p className="text-gray-400">{description}</p>
    </div>
  </div>
);

const JobCard = ({ job }) => {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div className="bg-slate-950 rounded-md border border-gray-900 p-5">
      <div className="space-y-4">
        <div className="flex justify-between items-start">
          <div>
            <h3 className="text-xl font-semibold text-white">{job.title}</h3>
            <div className="text-sm text-gray-400 mt-1">{job.department}</div>
          </div>
          <span className="bg-slate-950 text-blue-600 px-3 py-1 rounded-md text-sm">
            {job.type}
          </span>
        </div>

        <p className="text-gray-400">{job.description}</p>

        <div className="space-y-2">
          <h4 className="text-white font-medium">Requirements:</h4>
          <ul className="space-y-1">
            {job.requirements.map((req, index) => (
              <li
                key={index}
                className="flex items-center text-gray-400 text-sm"
              >
                <ChevronRight className="w-4 h-4 text-blue-600 mr-2" />
                {req}
              </li>
            ))}
          </ul>
        </div>

        <div className="flex items-center justify-between">
          <div className="flex items-center text-gray-400 text-sm">
            <Clock className="w-4 h-4 mr-2 text-blue-600" />
            {job.location}
          </div>
          <button
            onClick={() => setShowDetails(!showDetails)}
            className="text-sm text-blue-600 hover:text-blue-600 transition-colors duration-200"
          >
            {showDetails ? "Hide Details" : "Show Compensation"}
          </button>
        </div>

        {showDetails && (
          <div className="space-y-4 border-t border-gray-900 pt-4 mt-4">
            <div className="space-y-2">
              <h4 className="text-white font-medium">Compensation:</h4>
              <div className="text-gray-400 space-y-1">
                <p>
                  Base Salary:{" "}
                  <span className="font-semibold">{job.compensation.base}</span>
                </p>
                <p>
                  Equity:{" "}
                  <span className="font-semibold">
                    {job.compensation.equity}
                  </span>
                </p>
                <p>
                  Annual Bonus:{" "}
                  <span className="font-semibold">
                    {job.compensation.bonus}
                  </span>
                </p>
              </div>
            </div>

            <div className="space-y-2">
              <h4 className="text-white font-medium">Benefits:</h4>
              <ul className="space-y-1">
                {job.benefits.map((benefit, index) => (
                  <li
                    key={index}
                    className="flex items-center text-gray-400 text-sm"
                  >
                    <ChevronRight className="w-4 h-4 text-blue-600 mr-2" />
                    {benefit}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}

        <a
          href="https://example.com/"
          className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
        >
          Apply Now
          <ChevronRight className="w-5 h-5" />
        </a>
      </div>
    </div>
  );
};

const CareersPage = () => {
  const [activeCategory, setActiveCategory] = useState("all");
  const [searchTerm, setSearchTerm] = useState("");

  const filteredJobs = Object.entries(jobListings).reduce(
    (acc, [category, jobs]) => {
      return [
        ...acc,
        ...jobs.filter(
          (job) =>
            (activeCategory === "all" || category === activeCategory) &&
            (job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
              job.description.toLowerCase().includes(searchTerm.toLowerCase()))
        ),
      ];
    },
    []
  );

  return (
    <div className="min-h-screen bg-gray-900">
      <Helmet>
        <title>Careers | Skylink Hosting</title>
      </Helmet>
      {/* Hero */}
      <section className="py-12 md:py-24">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Join Our <span className="text-blue-600">Gaming Community</span>
            </h1>
            <p className="text-xl text-gray-300">
              We're building the future of gaming infrastructure. If you're
              passionate about technology and gaming, we want to hear from you.
            </p>
          </div>
        </div>
      </section>

      {/* Culture Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Our Culture
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              We're a global community of innovators passionate about
              transforming the gaming landscape.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {cultureItems.map((item, index) => (
              <CultureCard key={index} {...item} />
            ))}
          </div>
        </div>
      </section>

      {/* Jobs Section */}
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center mb-6">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Open Positions
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Find your place in our dynamic and innovative team.
            </p>
          </div>

          {/* Filters */}
          <div className="flex flex-col md:flex-row justify-between items-center gap-8 mb-6">
            <div className="flex flex-wrap justify-center gap-2">
              {jobCategories.map((category) => (
                <button
                  key={category.id}
                  onClick={() => setActiveCategory(category.id)}
                  className={`
                    px-6 py-2 rounded-md text-sm font-medium transition-all duration-200
                    ${
                      activeCategory === category.id
                        ? "bg-blue-600 text-white"
                        : "bg-slate-950 text-gray-400 hover:text-white"
                    }
                  `}
                >
                  {category.label}
                </button>
              ))}
            </div>

            <div className="relative w-full max-w-md">
              <div className="bg-slate-950 rounded-md">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                <input
                  type="text"
                  placeholder="Search jobs..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full pl-12 pr-4 py-3 rounded-md bg-transparent text-white placeholder-gray-400 focus:outline-none"
                />
              </div>
            </div>
          </div>

          {/* Job Listings */}
          {filteredJobs.length > 0 ? (
            <div className="grid md:grid-cols-2 gap-2 md:gap-8">
              {filteredJobs.map((job, index) => (
                <JobCard key={index} job={job} />
              ))}
            </div>
          ) : (
            <div className="bg-slate-950 p-5 rounded-md text-center">
              <p className="text-gray-400">
                No jobs found matching your search criteria.
              </p>
            </div>
          )}
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="bg-gray-900 rounded-md border border-gray-900 p-8">
            <div className="max-w-2xl mx-auto text-center">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                Don't See the Perfect Role?
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                We're always looking for talented individuals. Send us your
                portfolio or resume, and we'll keep you in mind for future
                opportunities.
              </p>
              <a
                href="https://example.com/"
                className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 "
              >
                Send Your Application
                <ChevronRight className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default CareersPage;
