// ── MAIN APP (index.html) ───────────────────────────────────────
function App() {
  const [activeSection, setActiveSection] = useState('hero');

  useEffect(() => {
    const sections = ['hero','koleksiyonlar','hakkimizda','iletisim'];
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) setActiveSection(entry.target.id);
      });
    }, { threshold: 0.3 });
    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  return (
    <>
      <Nav activeSection={activeSection} mode="home"/>
      <Hero/>
      <StatsBar/>
      <Collections/>
      <About/>
      <Contact/>
      <Footer/>
    </>
  );
}

// Wait for DOM to be ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
  });
} else {
  ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
}