export default function GeelyCebuWebsite() {
  const vehicles = [
    {
      name: 'Coolray',
      desc: 'Sporty crossover with turbocharged performance and smart technology.',
      image: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1200&auto=format&fit=crop'
    },
    {
      name: 'GX3 Pro 2026',
      desc: 'Compact SUV built for everyday confidence and city driving.',
      image: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1200&auto=format&fit=crop'
    },
    {
      name: 'Emgrand',
      desc: 'Premium sedan offering elegance, comfort, and modern safety.',
      image: 'https://images.unsplash.com/photo-1549399542-7e3f8b79c341?q=80&w=1200&auto=format&fit=crop'
    },
    {
      name: 'Okavango Elite',
      desc: 'Spacious 7-seater SUV designed for family adventures.',
      image: 'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?q=80&w=1200&auto=format&fit=crop'
    }
  ];

  const branches = [
    {
      name: 'Geely Cebu - Gorordo',
      address: 'Gorordo Ave., Cebu City'
    },
    {
      name: 'Geely Cebu - Mandaue',
      address: 'A.C. Cortes Ave., Mandaue City'
    },
    {
      name: 'Geely Cebu - Talisay',
      address: 'Talisay City, Cebu'
    }
  ];

  const promos = [
    '8K Down Payment',
    '150K Cash Discount',
    'Fast & Easy Approval',
    'Flexible Financing Options'
  ];

  return (
    <div className="bg-black text-white min-h-screen font-sans">
      <header className="bg-black/90 border-b border-red-600 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-black tracking-wider text-white">GEELY CEBU</h1>
            <p className="text-sm text-red-500">Drive the Future</p>
          </div>

          <nav className="hidden md:flex gap-8 text-sm font-semibold uppercase tracking-wide">
            <a href="#home" className="hover:text-red-500">Home</a>
            <a href="#vehicles" className="hover:text-red-500">Vehicles</a>
            <a href="#promos" className="hover:text-red-500">Promos</a>
            <a href="#branches" className="hover:text-red-500">Branches</a>
            <a href="#contact" className="hover:text-red-500">Contact</a>
          </nav>
        </div>
      </header>

      <section
        id="home"
        className="relative bg-cover bg-center min-h-[90vh] flex items-center"
        style={{
          backgroundImage:
            "url('https://images.unsplash.com/photo-1494905998402-395d579af36f?q=80&w=1600&auto=format&fit=crop')"
        }}
      >
        <div className="absolute inset-0 bg-black/70"></div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-red-500 uppercase tracking-[0.3em] mb-4 font-semibold">
              Official Geely Dealer in Cebu
            </p>

            <h2 className="text-5xl md:text-7xl font-black leading-tight mb-6">
              DRIVE THE
              <span className="text-red-600 block">FUTURE</span>
            </h2>

            <p className="text-gray-300 text-lg mb-8 max-w-xl">
              Discover Geely’s latest SUVs and sedans with unbeatable promos,
              modern technology, and premium driving experience.
            </p>

            <div className="flex flex-wrap gap-4">
              <button className="bg-red-600 hover:bg-red-700 px-8 py-4 rounded-2xl font-bold transition-all shadow-2xl">
                Book a Test Drive
              </button>

              <button className="border border-white hover:bg-white hover:text-black px-8 py-4 rounded-2xl font-bold transition-all">
                View Models
              </button>
            </div>
          </div>
        </div>
      </section>

      <section id="vehicles" className="py-24 bg-zinc-950">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <p className="text-red-500 uppercase tracking-widest mb-3">Vehicle Lineup</p>
            <h3 className="text-5xl font-black">Featured Models</h3>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {vehicles.map((vehicle) => (
              <div
                key={vehicle.name}
                className="bg-black rounded-3xl overflow-hidden border border-zinc-800 hover:border-red-600 transition-all shadow-2xl"
              >
                <img
                  src={vehicle.image}
                  alt={vehicle.name}
                  className="h-56 w-full object-cover"
                />

                <div className="p-6">
                  <h4 className="text-3xl font-black mb-3">{vehicle.name}</h4>

                  <p className="text-gray-400 text-sm leading-relaxed mb-6">
                    {vehicle.desc}
                  </p>

                  <button className="w-full bg-red-600 hover:bg-red-700 py-3 rounded-xl font-bold transition-all">
                    Learn More
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="promos" className="py-24 bg-gradient-to-b from-black to-zinc-900">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <p className="text-red-500 uppercase tracking-widest mb-3">Latest Deals</p>
          <h3 className="text-5xl font-black mb-16">Hot Promos</h3>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {promos.map((promo) => (
              <div
                key={promo}
                className="bg-zinc-950 border border-red-600 rounded-3xl p-10 shadow-2xl hover:scale-105 transition-transform"
              >
                <h4 className="text-4xl font-black text-red-500 mb-3">PROMO</h4>
                <p className="text-2xl font-bold">{promo}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="branches" className="py-24 bg-black">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <p className="text-red-500 uppercase tracking-widest mb-3">Visit Us</p>
            <h3 className="text-5xl font-black">Showroom Locations</h3>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {branches.map((branch) => (
              <div
                key={branch.name}
                className="bg-zinc-950 border border-zinc-800 hover:border-red-600 rounded-3xl p-8 transition-all"
              >
                <div className="w-16 h-16 rounded-2xl bg-red-600 flex items-center justify-center text-3xl mb-6">
                  📍
                </div>

                <h4 className="text-3xl font-black mb-4">{branch.name}</h4>

                <p className="text-gray-400 text-lg leading-relaxed">
                  {branch.address}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="contact" className="py-24 bg-zinc-950">
        <div className="max-w-5xl mx-auto px-6">
          <div className="bg-black border border-red-600 rounded-[2rem] p-10 md:p-16 shadow-2xl">
            <div className="text-center mb-12">
              <p className="text-red-500 uppercase tracking-widest mb-3">Contact Us</p>
              <h3 className="text-5xl font-black">Book Your Test Drive</h3>
            </div>

            <div className="grid md:grid-cols-2 gap-10">
              <div>
                <h4 className="text-3xl font-black mb-6">Get in Touch</h4>

                <div className="space-y-5 text-lg">
                  <p>
                    <span className="font-bold text-red-500">Phone:</span> 09274313777
                  </p>

                  <p>
                    <span className="font-bold text-red-500">Facebook:</span> Geely Cebu
                  </p>

                  <p>
                    <span className="font-bold text-red-500">Email:</span> inquiry@geelycebu.com
                  </p>
                </div>
              </div>

              <form className="space-y-5">
                <input
                  type="text"
                  placeholder="Full Name"
                  className="w-full bg-zinc-900 border border-zinc-700 rounded-2xl px-5 py-4 outline-none focus:border-red-600"
                />

                <input
                  type="email"
                  placeholder="Email Address"
                  className="w-full bg-zinc-900 border border-zinc-700 rounded-2xl px-5 py-4 outline-none focus:border-red-600"
                />

                <input
                  type="text"
                  placeholder="Preferred Vehicle"
                  className="w-full bg-zinc-900 border border-zinc-700 rounded-2xl px-5 py-4 outline-none focus:border-red-600"
                />

                <textarea
                  placeholder="Message"
                  rows="5"
                  className="w-full bg-zinc-900 border border-zinc-700 rounded-2xl px-5 py-4 outline-none focus:border-red-600"
                ></textarea>

                <button className="w-full bg-red-600 hover:bg-red-700 py-4 rounded-2xl font-black text-lg transition-all">
                  Submit Inquiry
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-black border-t border-zinc-800 py-8">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-gray-500">
            © 2026 Geely Cebu. All Rights Reserved.
          </p>

          <div className="flex gap-6 text-gray-400">
            <a href="#" className="hover:text-red-500">Facebook</a>
            <a href="#" className="hover:text-red-500">Instagram</a>
            <a href="#" className="hover:text-red-500">TikTok</a>
          </div>
        </div>
      </footer>
    </div>
  );
}