'use client'

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

export default function MoltenRockHeroSection() {
  return (
    <section data-vula-section="moltenrockhero" id="hero" className="relative min-h-screen flex items-center overflow-hidden bg-[#17170f]">
      <div className="absolute inset-0">
        <Image
          src="https://images.pexels.com/photos/19281386/pexels-photo-19281386.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="Dawn over volcanic rock formations and untouched bush"
          fill
          sizes="100vw"
          className="object-cover opacity-70"
          priority
        />
      </div>
      <div className="absolute inset-0 bg-gradient-to-t from-[#17170f]/90 via-[#17170f]/50 to-transparent" />
      <div className="relative container mx-auto px-6 text-center py-32">
        <div className="inline-flex items-center gap-4 mb-8">
          <span className="block w-14 h-px bg-[#6b8e23]" />
          <p className="font-sans uppercase tracking-[0.2em] text-[#6b8e23] text-sm">Molten Rock Private Reserve</p>
          <span className="block w-14 h-px bg-[#6b8e23]" />
        </div>
        <h1 className="font-serif font-light text-5xl md:text-7xl text-[#f5f5dc] leading-tight">
          Where the Earth Breathes <span className="italic text-[#6b8e23]">Fire</span> and Silence
        </h1>
        <p className="mt-6 max-w-2xl mx-auto text-lg md:text-xl text-[#eeeee7]/80 font-light">
          An intimate, exclusive retreat in the Greater Kruger — 6 volcanic suites, private game drives, and a primal connection to the wild.
        </p>
        <div className="mt-10 flex gap-4 justify-center">
          <Button variant="default" size="lg" href="/services">
            Explore Experiences
          </Button>
        </div>
      </div>
    </section>
  )
}