import Image from "next/image"
import { GraduationCap, MapPin, Plane, TreePine } from 'lucide-react'

export default function IdyllicLocationSection() {
  return (
    <section data-vula-section="idylliclocation" id="idyllic-location" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <span className="text-sm uppercase tracking-widest text-[#16a34a] font-semibold">Prime Location</span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#8b5a3c] mt-2 mb-6">
              Convenience Meets Seclusion
            </h2>
            <p className="text-[#111827]/80 leading-relaxed mb-6">
              Nestled in the quiet suburb of Bisley, KwaNtofontofo offers the rare gift of 
              complete privacy while being moments from everything that matters. 
              Pietermaritzburg Airport is just 1 km away — you can hear the birds, not the traffic. 
              The University of KwaZulu-Natal is 4 km to the north, and major shopping centres 
              lie within 4 to 8 km. Across the street, the Bisley Nature Reserve unfolds — 
              zebras grazing at dawn, monkeys swinging through the canopy.
            </p>
            <ul className="space-y-4">
              <li className="flex items-center gap-3">
                <Plane className="w-5 h-5 text-[#8b5a3c]" />
                <span className="text-sm text-[#111827]/70">1 km from Pietermaritzburg Airport</span>
              </li>
              <li className="flex items-center gap-3">
                <GraduationCap className="w-5 h-5 text-[#8b5a3c]" />
                <span className="text-sm text-[#111827]/70">4 km from UKZN University</span>
              </li>
              <li className="flex items-center gap-3">
                <TreePine className="w-5 h-5 text-[#16a34a]" />
                <span className="text-sm text-[#111827]/70">Adjacent to Bisley Nature Reserve</span>
              </li>
              <li className="flex items-center gap-3">
                <MapPin className="w-5 h-5 text-[#d4af37]" />
                <span className="text-sm text-[#111827]/70">44 Rutherford Circle, Bisley, Pietermaritzburg 3201</span>
              </li>
            </ul>
          </div>
          <div className="relative h-80 lg:h-96 rounded-xl overflow-hidden shadow-[var(--shadow-lifted)]">
            <Image
              src="https://images.pexels.com/photos/5131119/pexels-photo-5131119.jpeg?auto=compress&cs=tinysrgb&h=350"
              alt="Scenic view near KwaNtofontofo, KwaZulu-Natal"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
            />
          </div>
        </div>
      </div>
    </section>
  )
}