import Image from 'next/image'
import Button from '@/components/ui/Button'

export default function MoltenRockOriginsSection() {
  return (
    <section data-vula-section="moltenrockorigins" id="our-story" className="py-24 bg-[#17170f]">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="relative h-96 md:h-[500px] overflow-hidden rounded-md border border-[#404030]">
            <Image
              src="https://images.pexels.com/photos/13033134/pexels-photo-13033134.jpeg?auto=compress&cs=tinysrgb&h=350"
              alt="Ancient volcanic landscape of the Greater Kruger"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-[#17170f]/30 to-transparent" />
          </div>
          <div>
            <div className="inline-flex items-center gap-4 mb-6">
              <span className="block w-14 h-px bg-[#6b8e23]" />
              <p className="font-sans uppercase tracking-[0.2em] text-[#6b8e23] text-sm">Origins</p>
              <span className="block w-14 h-px bg-[#6b8e23]" />
            </div>
            <h2 className="font-serif font-light text-4xl md:text-5xl text-[#f5f5dc] leading-tight mb-6">
              Born from <span className="italic text-[#6b8e23]">fire</span>, rooted in conservation
            </h2>
            <p className="text-[#eeeee7]/80 leading-relaxed mb-6">
              Molten Rock Private Reserve was carved from an ancient volcanic ridge by the Moloi family — a legacy of custodianship passed down through three generations. Where molten lava once scarred the earth, nutrient-rich soils now sustain an astonishing density of wildlife: lion, leopard, elephant, and over 340 bird species.
            </p>
            <p className="text-[#eeeee7]/70 leading-relaxed mb-8">
              We chose to build only six suites — not for scarcity, but for intimacy. Every game drive is private, every meal is a conversation with the bush, every guest leaves knowing they belong to this land. Our foundation is conservation-led hospitality: 15% of every booking directly funds anti-poaching patrols and community education in neighbouring villages.
            </p>
            <div className="flex flex-wrap gap-6 text-sm font-sans uppercase tracking-wider">
              <span className="text-[#6b8e23]">24,000 acres</span>
              <span className="text-[#eeeee7]/40">|</span>
              <span className="text-[#6b8e23]">6 exclusive suites</span>
              <span className="text-[#eeeee7]/40">|</span>
              <span className="text-[#6b8e23]">3rd generation stewards</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}