import { FileQuestion, ChevronRight, Zap, Headphones } from "lucide-react";

export const HeroSection = () => {
  const featureItems = [
    {
      title: "Instant Access",
      icon: <Zap className="w-5 h-5 text-blue-500" />,
      description: "Get started in minutes, not hours.",
    },
    {
      title: "No Overselling",
      icon: <ChevronRight className="w-5 h-5 text-blue-500" />,
      description: "Pure performance. No limits. No compromises.",
    },
    {
      title: "24/7 Support",
      icon: <Headphones className="w-5 h-5 text-blue-500" />,
      description: "We're here whenever you need us.",
    },
  ];

  return (
    <section className="bg-slate-900 min-h-auto md:min-h-screen py-12 md:py-24">
      <div className="container max-w-screen-xl mx-auto px-4">
        <div className="flex flex-col md:flex-row items-center justify-between gap-12">
          <div className="flex-1 text-white">
            {/* Header */}
            <div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-950 border border-gray-900 mb-6">
              <FileQuestion className="w-5 h-5 text-blue-500 mr-2" />
              <span className="text-sm font-semibold text-gray-300">
                Tired of your server lagging?
              </span>
            </div>

            {/* Main Content */}
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
              Skylink Hosting Has <br />
              <span className="text-blue-500">Your Back</span>!
            </h1>
            <p className="text-xl text-gray-300 mb-8 leading-relaxed">
            Deploy your Game or VPS server in seconds and experience low latency, high performance, and 24/7 support—designed with you in mind.
            </p>

            {/* Feature List */}
            <ul className="space-y-4 mb-8">
              {featureItems.map((feature, index) => (
                <li key={index} className="group">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-slate-950 rounded-md border border-gray-900 flex items-center justify-center">
                      {feature.icon}
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg text-white">
                        {feature.title}
                      </h3>
                      <p className="text-gray-400 text-sm">
                        {feature.description}
                      </p>
                    </div>
                  </div>
                </li>
              ))}
            </ul>

            {/* Buttons */}
            <div className="flex flex-wrap gap-4">
              <a
                href="/games"
                className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-transparent"
              >
                View Games
              </a>
              <a
                href="/vps"
                className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
              >
                Deploy a VPS
              </a>
            </div>
          </div>

          {/* Image */}
          <div className="hidden md:block md:flex-1">
            <div className="bg-slate-950 rounded-md">
              <img
                src="/images/hero.jpg"
                alt="Gaming server infrastructure"
                className="rounded-md w-full h-auto"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;
