import { useState } from "react";
import { Menu, X, Phone, Car, MapPin, ShieldCheck } from "lucide-react";

export default function AyintapRentACarHomepage() {
  const [mobileMenu, setMobileMenu] = useState(false);
  const cars = [
    {
      name: "Renault Clio",
      transmission: "Otomatik",
      fuel: "Benzin",
      price: "1.450₺",
      image:
        "https://images.unsplash.com/photo-1549399542-7e3f8b79c341?q=80&w=1200&auto=format&fit=crop",
    },
    {
      name: "Fiat Egea",
      transmission: "Manuel",
      fuel: "Dizel",
      price: "1.650₺",
      image:
        "https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1200&auto=format&fit=crop",
    },
    {
      name: "Renault Taliant",
      transmission: "Otomatik",
      fuel: "Benzin",
      price: "1.850₺",
      image:
        "https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1200&auto=format&fit=crop",
    },
  ];

  return (
    <div className="min-h-screen bg-black text-white">
      {/* Header */}
      <header className="fixed top-0 left-0 w-full z-50 bg-black/80 backdrop-blur border-b border-zinc-800">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-wide text-red-500">
              AYINTAP OTO KİRALAMA
            </h1>
          </div>

          <nav className="hidden md:flex gap-8 text-sm font-medium">
            <a href="#" className="hover:text-red-500 transition">
              Ana Sayfa
            </a>
            <a href="#" className="hover:text-red-500 transition">
              Araç Filosu
            </a>
            <a href="#" className="hover:text-red-500 transition">
              Havalimanı Teslim
            </a>
            <a href="#" className="hover:text-red-500 transition">
              Blog
            </a>
            <a href="#" className="hover:text-red-500 transition">
              İletişim
            </a>
          </nav>

          <button
            className="md:hidden"
            onClick={() => setMobileMenu(!mobileMenu)}
          >
            {mobileMenu ? <X size={28} /> : <Menu size={28} />}
          </button>

          {mobileMenu && (
            <div className="absolute top-20 left-0 w-full bg-black border-t border-zinc-800 md:hidden p-6 flex flex-col gap-5 text-lg">
              <a href="#">Ana Sayfa</a>
              <a href="#">Araç Filosu</a>
              <a href="#">Havalimanı Teslim</a>
              <a href="#">Blog</a>
              <a href="#">İletişim</a>
            </div>
          )}

          <button className="bg-red-600 hover:bg-red-700 transition px-5 py-2 rounded-xl font-semibold shadow-lg">
            WhatsApp
          </button>
        </div>
      </header>

      {/* Hero */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?q=80&w=1600&auto=format&fit=crop"
          alt="Araç Kiralama"
          className="absolute inset-0 w-full h-full object-cover opacity-40"
        />

        <div className="relative z-10 max-w-4xl text-center px-6">
          <h2 className="text-5xl md:text-7xl font-black leading-tight mb-6">
            Gaziantep Oto Kiralama
          </h2>

          <p className="text-zinc-300 text-lg md:text-2xl mb-8 leading-relaxed">
            Günlük, haftalık ve aylık araç kiralama hizmetleri. Gaziantep
            Havalimanı teslim seçenekleriyle hızlı ve güvenilir rent a car
            çözümleri.
          </p>

          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <button className="bg-red-600 hover:bg-red-700 px-8 py-4 rounded-2xl text-lg font-bold transition shadow-2xl">
              Araçları İncele
            </button>

            <button className="border border-white/30 hover:bg-white hover:text-black px-8 py-4 rounded-2xl text-lg font-bold transition">
              Hemen Rezervasyon
            </button>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-24 bg-zinc-950">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-6">
          {[
            {
              title: "7/24 Teslim",
              icon: <Phone className="text-red-500" size={36} />,
            },
            {
              title: "Full Kaskolu Araçlar",
              icon: <ShieldCheck className="text-red-500" size={36} />,
            },
            {
              title: "Gaziantep Havalimanı Teslim",
              icon: <MapPin className="text-red-500" size={36} />,
            },
            {
              title: "Uygun Günlük Fiyatlar",
              icon: <Car className="text-red-500" size={36} />,
            },
          ].map((item, index) => (
            <div
              key={index}
              className="bg-zinc-900 border border-zinc-800 rounded-3xl p-8 hover:border-red-500 transition"
            >
              <div className="mb-5">{item.icon}</div>
              <h3 className="text-xl font-bold text-red-500 mb-3">0{index + 1}</h3>
              <p className="text-lg font-medium text-zinc-100">{item.title}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Cars */}
      <section className="py-24 bg-black">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-5xl font-black mb-4">Araç Filomuz</h2>
            <p className="text-zinc-400 text-lg">
              Ekonomik ve konforlu araç seçenekleri
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {cars.map((car, index) => (
              <div
                key={index}
                className="bg-zinc-950 border border-zinc-800 rounded-3xl overflow-hidden hover:scale-[1.02] transition duration-300 shadow-2xl"
              >
                <img
                  src={car.image}
                  alt={car.name}
                  className="h-64 w-full object-cover"
                />

                <div className="p-6">
                  <h3 className="text-2xl font-bold mb-4">{car.name}</h3>

                  <div className="space-y-2 text-zinc-300 mb-6">
                    <p>Vites: {car.transmission}</p>
                    <p>Yakıt: {car.fuel}</p>
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-zinc-500">Günlük</p>
                      <p className="text-3xl font-black text-red-500">
                        {car.price}
                      </p>
                    </div>

                    <button className="bg-red-600 hover:bg-red-700 px-5 py-3 rounded-xl font-semibold transition">
                      Kirala
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SEO Content */}
      <section className="py-24 bg-zinc-950">
        <div className="max-w-5xl mx-auto px-6">
          <h2 className="text-4xl font-black mb-8 text-center">
            Gaziantep Araç Kiralama Hizmetleri
          </h2>

          <div className="space-y-6 text-zinc-300 leading-8 text-lg">
            <p>
              Ayıntap Oto Kiralama olarak Gaziantep ve çevresinde profesyonel
              rent a car hizmetleri sunuyoruz. Günlük araç kiralama,
              havalimanı teslim araç kiralama ve uzun dönem kiralama
              seçenekleriyle müşterilerimize güvenilir çözümler sağlıyoruz.
            </p>

            <p>
              Gaziantep Havalimanı araç kiralama hizmetlerimiz sayesinde şehir
              dışından gelen müşterilerimiz araçlarını hızlı şekilde teslim
              alabilir. Ekonomik sınıf araçlardan SUV modellere kadar geniş araç
              filomuz ile her ihtiyaca uygun araç seçenekleri sunmaktayız.
            </p>

            <p>
              Şahinbey, Şehitkamil, Oğuzeli ve tüm Gaziantep genelinde aktif
              araç kiralama hizmeti vermekteyiz. Full kaskolu araçlarımız,
              uygun fiyat politikamız ve hızlı destek ekibimiz ile müşteri
              memnuniyetini ön planda tutuyoruz.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 bg-black">
        <div className="max-w-5xl mx-auto px-6 text-center">
          <h2 className="text-5xl font-black mb-6">
            Hemen Rezervasyon Yap
          </h2>

          <p className="text-zinc-400 text-xl mb-10 leading-relaxed">
            Gaziantep oto kiralama hizmetlerinde hızlı teslim ve uygun fiyat
            avantajlarından yararlanın.
          </p>

          <button className="bg-red-600 hover:bg-red-700 px-10 py-5 rounded-2xl text-xl font-bold transition shadow-2xl">
            WhatsApp Üzerinden İletişime Geç
          </button>
        </div>
      </section>

      {/* Footer */}
      {/* Google Map Placeholder */}
      <section className="py-24 bg-zinc-950 border-t border-zinc-800">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-black mb-4">
              Gaziantep Havalimanı Araç Kiralama
            </h2>
            <p className="text-zinc-400 text-lg">
              7/24 teslim ve hızlı rezervasyon sistemi
            </p>
          </div>

          <div className="rounded-3xl overflow-hidden border border-zinc-800 shadow-2xl h-[450px] bg-zinc-900 flex items-center justify-center text-zinc-500 text-xl">
            Google Maps Alanı
          </div>
        </div>
      </section>

      <footer className="border-t border-zinc-800 py-10 bg-zinc-950">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
          <div>
            <h3 className="text-2xl font-bold text-red-500">
              AYINTAP OTO KİRALAMA
            </h3>
            <p className="text-zinc-500 mt-2">
              Gaziantep Rent A Car Hizmetleri
            </p>
          </div>

          <div className="text-zinc-400 text-sm">
            © 2026 Tüm Hakları Saklıdır.
          </div>
        </div>
      </footer>
    </div>
  );
}