import React from 'react'
import { useSceneStore } from '../../store/useSceneStore'
import { progressToScrollY, smoothScrollToY } from '../../utils/helpers'

export default function Navbar() {
  const activeSection = useSceneStore((state) => state.activeSection)
  const lenis = useSceneStore((state) => state.lenis)

  const handleNavClick = (index) => {
    // Map index (0, 1, 2, 3) to the stable parking progress percentages.
    // The last lands on the analytics-dashboard view, where the closing promise
    // card is revealed as the user finishes the final stretch of scroll.
    const sectionFractions = [0, 0.38, 0.76, 0.92]
    const targetProgress = sectionFractions[index]
    // Relative to the experience spacer (the section sits below the page hero).
    smoothScrollToY(lenis, progressToScrollY(targetProgress))
  }

  const navItems = [
    { label: 'First Mile', index: 0 },
    { label: 'Mid Mile', index: 1 },
    { label: 'Last Mile', index: 2 },
    { label: 'Analytics', index: 3 },
  ]

  return (
    <div className="side-navigation" id="main-navbar">
      {navItems.map((item) => (
        <button
          key={item.index}
          onClick={() => handleNavClick(item.index)}
          className={`side-nav-item ${activeSection === item.index ? 'active' : ''}`}
        >
          <span className="side-nav-label">{item.label}</span>
          <span className="side-nav-dot" />
        </button>
      ))}
    </div>
  )
}
