import { MapPin, Phone } from "lucide-react";
import { ContactForm } from "@/components/contact/ContactForm";

interface LocationContactSectionProps {
  address?: string | null;
  phone?: string | null;
}

export function LocationContactSection({
  address,
  phone,
}: LocationContactSectionProps) {
  return (
    <section className="bg-bg-white py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-semibold text-heading">
          Lokasi &amp; Kontak
        </h2>
        <p className="mt-2 text-body">
          Kunjungi kantor kami atau kirim pesan langsung dari sini.
        </p>

        <div className="mt-10 grid grid-cols-1 gap-8 lg:grid-cols-2">
          <div className="relative aspect-[4/3] overflow-hidden rounded-2xl">
            {/* Thumbnail dekoratif, bukan embed peta/video asli */}
            <img
              src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80"
              alt="Lokasi kantor Ranata Tour"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
            <div className="absolute inset-x-0 bottom-0 space-y-2 p-6">
              {address && (
                <p className="flex items-start gap-2 text-sm text-white">
                  <MapPin className="mt-0.5 h-4 w-4 shrink-0" />
                  {address}
                </p>
              )}
              {phone && (
                <p className="flex items-center gap-2 text-sm text-white">
                  <Phone className="h-4 w-4 shrink-0" />
                  {phone}
                </p>
              )}
            </div>
          </div>

          <div className="rounded-2xl bg-bg-light p-6 shadow-sm sm:p-8">
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}