App.tsx

import React, { useState, useEffect } from 'react';
import Navbar from './components/Navbar.tsx';
import Hero from './components/Hero.tsx';
import Features from './components/Features.tsx';
import Roadmap from './components/Roadmap.tsx';
import IsingSimulator from './components/IsingSimulator.tsx';
import TechnicalAssistant from './components/TechnicalAssistant.tsx';
import Footer from './components/Footer.tsx';

const App: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);

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

  return (
    <div className="min-h-screen selection:bg-amber-500/30">
      <div className="fixed inset-0 pointer-events-none z-0">
        {/* Subtle atmospheric glow instead of bright circles */}
        <div className="absolute top-0 left-0 w-full h-full bg-black/40"></div>
      </div>

      <Navbar scrolled={scrolled} />
      
      <main className="relative z-10">
        <Hero />
        
        <section id="simulator" className="py-32 px-4 border-y border-white/5">
          <IsingSimulator />
        </section>

        <section id="features" className="py-32 px-4">
          <Features />
        </section>

        <section id="roadmap" className="py-32 px-4 border-t border-white/5 bg-black/20">
          <Roadmap />
        </section>
      </main>

      <TechnicalAssistant />
      <Footer />
    </div>
  );
};

export default App;