'use client'

import { Button } from '@/components/Button'
import { H1, H2, H3, H4, P, PS, PXS, PXXS } 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 mt-0"
    >
      <img
        src="/images/hero_story2.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-10">
          <PS className=" ">
            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  ">
            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 className="mt-8 flex justify-start">
            <ChevronDownIcon
              onClick={scrollDown}
              className="h-12 w-12   animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
            />
          </div>
        </div>
      </div>
    </div>
  )
}