'use client'

import { PS } from '@/components/text'
import { ChevronDownIcon } from '@heroicons/react/24/outline'

export function Hero4() {
  const scrollDown = () => {
    const el = document.getElementById('section-3');
    if (!el) return;
    const offset = 88;
    const y = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }

  return (
    <div
      id="section-2"
      data-story-section
      data-image="/images/hero_story2.jpg"
      className="relative w-full overflow-hidden h-screen lg:h-auto mt-0"
    >
      <img
        src="/images/hero_story2.jpg"
        alt="Hero Story Background"
        className="absolute inset-0 w-full h-full object-cover z-0 lg:hidden"
      />

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

      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-center lg: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 lg:text-base text-sm">
            We are unique in the market as the cruises are designed to provide for a private, personalised and wellness experience on the River Nile. Families, communities or dedicated groups up to sixty people can sail the Nile together discovering her hidden treasures. The Nile is a powerful natural energy source, and the boats are designed to help you align with its frequencies to feel the magic carried by sacred waters of the Nile.
          </PS>
          <PS className="mt-6 text-white lg:text-neutral-700 lg:text-base text-sm">
            Frequencies are the new currency. Our mission is to help you recognize and align with different frequencies, creating a deeply fulfilling life in tune with your soul's gifts. Self-knowledge and self-mastery are the keys to fully opening your heart. By understanding and resonating with these frequencies, you can achieve a life of harmony and fulfillment.
          </PS>
        </div>
      </div>
      
      {/* Chevron Down Button - Mobile Only */}
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 lg:hidden z-30">
        <ChevronDownIcon 
          onClick={scrollDown}
          className="h-10 w-10 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
        />
      </div>
    </div>
  )
}
