
import {useState, useEffect} from 'react';
import Navbar from './blocks/Navbar';
import Footer from './blocks/Footer';
import StartSection from './blocks/StartSection';
import AboutSection from './blocks/AboutSection';
import Glow from './components/Glow';
import InventorySection from './blocks/InventorySection';
import MemberSection from './blocks/MemberSection';
import PartnersSection from './blocks/PartnersSection';
import LANsection from './blocks/LANsection';

function App() {
    const [opacity, setOpacity] = useState(1);
    const rate = 0.5; // lower = faster fade
    

    document.addEventListener('scroll', () => {
        setOpacity(100/window.scrollY*rate);
    });

    //useEffect(() => {
    //    const svg = document.querySelector('svg#route');
    //    const path = svg.querySelector('#path');

    //    const scroll = () => {
    //        const distance = window.scrollY;
    //        const totalDistance = svg.clientHeight - window.innerHeight;
    //        const percentage = distance /totalDistance;
    //        const pathLength = path.getTotalLength();

    //        path.style.strokeDasharray = `${pathLength}`;
    //        path.style.strokeDashoffset = `${pathLength * (1 - percentage)}`;

    //    }

    //    scroll();
    //    window.addEventListener('scroll', scroll);
    //}, []);

  return (
    <div className="App">
        <Glow opacity={opacity} />
        <Navbar />
        <StartSection opacity={opacity}/>
        <LANsection />
        <AboutSection />
        <MemberSection />
        <InventorySection />
        <PartnersSection />
        <Footer />
     
    </div>
  );
}

export default App;
