'use client'

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

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

  return (
    <div
      id="section-1"
      data-story-section
      data-image="/images/hero_story1.jpg"
      className="relative w-full overflow-hidden mt-0"
    >
      {/* Background Image - stays for mobile, hidden on lg (sticky column takes over) */}
      <img
        src="/images/hero_story1.jpg"
        alt="Hero Story Background"
        className="w-full h-auto object-cover block relative z-0 lg:hidden"
      />

      {/* Black Overlay (mobile only) */}
      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>

      {/* Content */}
      <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-0">
          <H2 className="text-white lg:text-black">Our Story</H2>
          <P className="mt-4 text-white lg:text-neutral-800">THE TALE OF SACRED ENERGIES OF THE NILE</P>
          <PS className="mt-6 text-white lg:text-neutral-700">
            Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating authentic, zen, art dahabeya to feel and experience in a unique way the mystical and the deep wisdom of the Nile.
          </PS>
          <PS className="mt-4 text-white lg:text-neutral-700">
            Their dream was to offer a sanctuary for the body, mind, and soul, a safe space to open yourself to new experiences, and allow the sacredness of the Nile to flow through you, to step back in the past, to align with the now helping you to reconnect with your true essence. A sanctuary for the body, mind, and soul, a safe space.
          </PS>
        </div>
      </div>
    </div>
  )
}