'use client'

import { Car, MapPin, Navigation } from 'lucide-react'

const address = "44 Rutherford Circle, Bisley, Pietermaritzburg, 3201"

export default function ConvenientLocationSection() {
  return (
    <section data-vula-section="convenientlocation" id="bisley-location" className="bg-[#FDF6EC] py-16 md:py-24 px-4">
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-10 items-start">
          {/* Map */}
          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-card)] border border-[#e5e7eb] h-[350px] md:h-[450px]">
            <iframe
              title="KwaNtofontofo location"
              src={`https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d0!2d0!3d0!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjnCsDAwJzAwLjAiUyAzMMKwMDAnMDAuMCJF!5e0!3m2!1sen!2sza!4v1700000000000!5m2!1sen!2sza&q=${encodeURIComponent(address)}`}
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>

          {/* Details */}
          <div className="space-y-6">
            <h2 className="text-3xl md:text-4xl font-bold text-[#2C1810]">
              Prime Location in Bisley
            </h2>
            <p className="text-[#2C1810]/80 leading-relaxed">
              Just 1 km from Pietermaritzburg Airport and bordering a nature reserve where zebras graze and monkeys swing through the trees. KwaNtofontofo sits on peaceful Rutherford Circle — close enough to the city yet surrounded by bushveld quiet.
            </p>

            <div className="space-y-4">
              <h3 className="text-xl font-semibold text-[#C0392B]">Getting Here</h3>

              <div className="flex items-start gap-3">
                <Car className="w-5 h-5 text-[#E67E22] shrink-0 mt-0.5" />
                <div className="text-sm text-[#2C1810]/70">
                  <p className="font-semibold text-[#2C1810]">From Pietermaritzburg Airport</p>
                  <ol className="list-decimal list-inside space-y-1 mt-1">
                    <li>Exit the airport onto the R56 / Howick Road heading east.</li>
                    <li>After 400 m, turn left into Rutherford Circle.</li>
                    <li>Number 44 is on your right — look for the secure gate.</li>
                  </ol>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <Navigation className="w-5 h-5 text-[#E67E22] shrink-0 mt-0.5" />
                <div className="text-sm text-[#2C1810]/70">
                  <p className="font-semibold text-[#2C1810]">From the N3 Highway</p>
                  <ol className="list-decimal list-inside space-y-1 mt-1">
                    <li>Take the Howick / Airport off-ramp (Exit 75).</li>
                    <li>Head south on the R56 for 2.5 km.</li>
                    <li>Turn right into Rutherford Circle — we are at number 44.</li>
                  </ol>
                </div>
              </div>
            </div>

            <div className="flex items-center gap-2 text-[#E67E22]">
              <MapPin className="w-5 h-5" />
              <address className="not-italic text-sm">{address}, KwaZulu-Natal</address>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}