"use client";

import { MapPin, Phone, Send } from "lucide-react";

export function ContactSection() {
  return (
    <section className="bg-bg-light py-12 md:py-20 relative z-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          <h2 className="text-2xl md:text-3xl font-bold text-heading">
            Lokasi & Kontak
          </h2>
          <p className="text-sm text-muted mt-2">
            Kunjungi kantor kami atau kirim pesan langsung dari sini.
          </p>
        </div>

        <div className="flex flex-col lg:flex-row gap-8">
          {/* Left: Map */}
          <div className="flex-1 relative rounded-2xl overflow-hidden min-h-[400px] bg-gray-200">
            {/* Placeholder for map image */}
            <div 
              className="absolute inset-0 bg-cover bg-center"
              style={{ backgroundImage: "url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=800&q=80')" }}
            />
            <div className="absolute inset-0 bg-black/20" />
            
            {/* Map Pin */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-merah-ranata">
              <MapPin className="w-10 h-10 fill-white" />
            </div>

            {/* Overlaid Card */}
            <div className="absolute bottom-6 left-6 right-6 md:right-auto md:w-80 bg-black/80 backdrop-blur-sm rounded-xl p-6 text-white">
              <div className="flex items-start gap-3 mb-4">
                <MapPin className="w-5 h-5 text-merah-ranata shrink-0 mt-0.5" />
                <div>
                  <p className="font-bold text-sm">Kantor Ranata Tour</p>
                  <p className="text-xs text-gray-300 mt-1">Jl. Cempaka No. 123, Jakarta Selatan, DKI Jakarta 12150</p>
                </div>
              </div>
              <div className="flex items-center gap-3 mb-6">
                <Phone className="w-5 h-5 text-merah-ranata shrink-0" />
                <p className="text-sm font-semibold">+62 812-3456-7890</p>
              </div>
              <button className="w-full md:w-auto px-6 py-2 border border-white/30 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors">
                Lihat di Peta
              </button>
            </div>
          </div>

          {/* Right: Form */}
          <div className="flex-1 bg-white rounded-2xl border border-gray-100 p-6 md:p-8 shadow-sm">
            <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
              <div>
                <label className="block text-xs font-bold text-heading mb-1.5">Nama</label>
                <input 
                  type="text" 
                  placeholder="Masukkan nama lengkap Anda"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-merah-ranata/20 focus:border-merah-ranata transition-colors"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-heading mb-1.5">Email</label>
                <input 
                  type="email" 
                  placeholder="Masukkan email Anda"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-merah-ranata/20 focus:border-merah-ranata transition-colors"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-heading mb-1.5">Nomor Telepon (Opsional)</label>
                <input 
                  type="tel" 
                  placeholder="Masukkan nomor telepon Anda"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-merah-ranata/20 focus:border-merah-ranata transition-colors"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-heading mb-1.5">Pesan</label>
                <textarea 
                  placeholder="Tulis pesan Anda di sini..."
                  rows={4}
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-merah-ranata/20 focus:border-merah-ranata transition-colors resize-none"
                />
              </div>
              <div className="pt-2">
                <p className="text-xs text-muted mb-4 flex items-center gap-2">
                  <span className="w-4 h-4 rounded-full bg-red-50 flex items-center justify-center shrink-0">
                    <span className="w-1.5 h-1.5 rounded-full bg-merah-ranata" />
                  </span>
                  Kami akan membalas pesan Anda secepat mungkin.
                </p>
                <button type="submit" className="w-full bg-[#c52222] hover:bg-merah-hover text-white rounded-xl py-3.5 flex items-center justify-center gap-2 font-semibold text-sm transition">
                  <Send className="w-4 h-4" />
                  Kirim Pesan
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}