import React, { useState, useEffect } from 'react';

function Navigation() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`editorial-nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-brand">
        <span className="nav-brand-bar short"></span>
        <span className="nav-brand-name">TRADESTORM</span>
        <span className="nav-brand-bar long"></span>
      </div>
      <div className="nav-links">
        <a href="#simulator" className="nav-link">Simulator</a>
        <a href="#features" className="nav-link">Features</a>
        <a href="#use-cases" className="nav-link">Use Cases</a>
        <a href="#contact" className="nav-link">Request Access</a>
      </div>
    </nav>
  );
}

export default Navigation;