'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 HeroJourney() {
  const scrollDown = () => {
    // Scroll to Hero4 (2nd section) - account for Hero3's 90vh height
    window.scrollTo({
      top: window.innerHeight * 0.9,
      behavior: 'smooth'
    })
  }
  return (
    <div className="relative w-full overflow-hidden -mt-40">
      {/* Background Image - Extended to cover header */}
      <img
        src="/images/journeyhero.jpg"
        alt="Hero Story Background"
        className="w-full h-auto object-cover block relative z-0"
      />
      
      {/* Black Overlay */}
      <div className="absolute inset-0 bg-black opacity-50"></div>
      
      {/* Content */}
      <div className="absolute inset-0 flex items-center justify-center text-center px-4 sm:px-6 z-20">
              <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
                <H2 className="text-white">
                  Discover a path to wellbeing that is uniquely yours...
                </H2>
                {/* Chevron Down Button */}
                <div className="mt-10 flex justify-center">
                  <ChevronDownIcon 
                    onClick={scrollDown}
                    className="h-12 w-12 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
                  />
                </div>
              </div>
            </div>
    </div>
  )
}