"use client";

import { useEffect, useState } from 'react';

export default function ModelNav() {
  const [activeHash, setActiveHash] = useState('');

  useEffect(() => {
    const handleScroll = () => {
      const sections = ['fence-staining', 'deck-staining', 'structures', 'pre-staining', 'restoration', 'your-wood', 'quote-section'];
      let current = '';

      for (const section of sections) {
        const el = document.getElementById(section);
        if (el) {
          const rect = el.getBoundingClientRect();
          if (rect.top <= 120) {
            current = section;
          }
        }
      }
      setActiveHash(current);
    };

    window.addEventListener('scroll', handleScroll);
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navItems = [
    { name: 'Fence Staining', href: '#fence-staining' },
    { name: 'Deck Staining', href: '#deck-staining' },
    { name: 'Pergolas & Structures', href: '#structures' },
    { name: 'Pre-Staining', href: '#pre-staining' },
    { name: 'Restoration', href: '#restoration' },
    { name: "Your wood's condition", href: '#your-wood' },
    { name: 'Get a quote', href: '#quote-section' },
  ];

  return (
    <div className="model-nav">
      {navItems.map((item) => (
        <a
          key={item.href}
          className={`model-nav-item ${activeHash === item.href.substring(1) ? 'active' : ''}`}
          href={item.href}
        >
          {item.name}
        </a>
      ))}
    </div>
  );
}