import Image from 'next/image'
import HeroImage from '@/public/images/about-hero.jpg'
import ContactImage from '@/public/images/about-contact.jpg'


export default function HeroContact() {  
  return (
    <section className="relative">

      {/* Dark background */}
      <div className="absolute inset-0 bg-slate-900 pointer-events-none -z-10 mb-48 lg:mb-0 lg:h-[30rem]" aria-hidden="true">
        <div className="w-full h-full" data-aos="fade">
          <Image className="opacity-10 w-full h-full object-cover" src={HeroImage} width="1440" height="497" priority alt="Hero" />
        </div>
      </div>

      <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
        <div className="pt-32 md:pt-40">

          {/* Section header */}
          <div className="max-w-3xl mx-auto text-center pb-16">
            <h1 className="h1 font-playfair-display text-slate-100">Drop us a line!</h1>
          </div>

          {/* Hero image */}
          <div className="flex justify-center items-center" data-aos="fade-up" data-aos-delay="100">
            <Image className="w-full h-auto" src={ContactImage} width="1024" height="576" priority alt="Contact Photo" />
          </div>

        </div>
      </div>
    </section>
  )
}