import React from 'react'
import { useSceneStore } from '../../store/useSceneStore'

export default function Hero() {
  const lenis = useSceneStore((state) => state.lenis)
  const handleScrollToStart = () => {
    // Scroll down to the first active transition point
    lenis?.scrollTo(window.innerHeight * 0.5, { duration: 1.5 })
  }

  return (
    <div className="hero-overlay" id="home-hero">
      {/* Dynamic mouse scrolling indicator */}
      <div className="scroll-indicator" onClick={handleScrollToStart}>
        <div className="mouse-frame">
          <div className="mouse-dot" />
        </div>
        <div className="scroll-text">Scroll to start</div>
      </div>
    </div>
  )
}
