'use client'

import { H4, PS } from '@/components/text'

export function Hero5() {
  return (
    <div
      id="section-3"
      data-story-section
      data-image="/images/hero_story3.jpg"
      className="relative w-full overflow-hidden mt-0"
    >
      <img
        src="/images/hero_story3.jpg"
        alt="Hero Story Background"
        className="w-full h-auto object-cover block relative z-0 lg:hidden"
      />

      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>

      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-4">
          <PS className="text-white lg:text-neutral-700">
            Are you ready to step out of your comfort zone and embrace these changes? Can you let the new energies flow through you and break free from outdated programs to welcome new wisdom?
          </PS>
          <PS className="mt-6 text-white lg:text-neutral-700">
            Together, let us open new gates of consciousness and expand the flow of unconditional love. The magical energy of the Nile is ready to flow through us, uniting us in a heartbeat. Home is calling you, inviting you to a journey of inner discovery and profound connection.
          </PS>
          <H4 className="text-base mt-8 font-semibold leading-7 italic text-gold-600">With Love,</H4>
          <H4 className="text-base font-semibold leading-7 text-white lg:text-black">Kristof & Isabelle</H4>
        </div>
      </div>
    </div>
  )
}