// ========================================
// BoltX Power Tools — Main App
// ========================================

function App() {
  const [activeSection, setActiveSection] = useState('home');
  const [activeCategory, setActiveCategory] = useState(CATEGORIES[0]?.id || '');
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [selectedCategoryObj, setSelectedCategoryObj] = useState(null);

  // 滚动监听，高亮当前 section
  useEffect(() => {
    const sections = ['home', 'products', 'about', 'contact'];

    const handleScroll = () => {
      const scrollPos = window.scrollY + 120;

      for (let i = sections.length - 1; i >= 0; i--) {
        const el = document.getElementById(sections[i]);
        if (el && el.offsetTop <= scrollPos) {
          setActiveSection(sections[i]);
          break;
        }
      }

      // 产品分类高亮
      if (activeSection === 'products') {
        for (let i = CATEGORIES.length - 1; i >= 0; i--) {
          const catEl = document.getElementById(`cat-${CATEGORIES[i].id}`);
          if (catEl && catEl.offsetTop - 160 <= scrollPos) {
            setActiveCategory(CATEGORIES[i].id);
            break;
          }
        }
      }
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, [activeSection]);

  // 滚动到指定 section
  const scrollToSection = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const offset = 72; // nav height
      const top = el.offsetTop - offset;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  // 滚动到指定分类
  const scrollToCategory = (catId) => {
    const el = document.getElementById(`cat-${catId}`);
    if (el) {
      const offset = 72 + 56; // nav + category nav
      const top = el.offsetTop - offset;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  const handleNavigate = (section) => {
    scrollToSection(section);
  };

  const handleViewProduct = (product, category) => {
    setSelectedProduct(product);
    setSelectedCategoryObj(category);
    document.body.style.overflow = 'hidden';
  };

  const closeModal = () => {
    setSelectedProduct(null);
    setSelectedCategoryObj(null);
    document.body.style.overflow = '';
  };

  // ESC 关闭弹窗
  useEffect(() => {
    const handleEsc = (e) => {
      if (e.key === 'Escape') closeModal();
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, []);

  return (
    <div>
      <Navbar activeSection={activeSection} onNavigate={handleNavigate} />
      <Hero onNavigate={handleNavigate} />
      <CategoryNav
        activeCategory={activeCategory}
        categories={CATEGORIES}
        onSelect={scrollToCategory}
      />
      <Products
        categories={CATEGORIES}
        onViewProduct={handleViewProduct}
        onNavigate={handleNavigate}
      />
      <About onNavigate={handleNavigate} />
      <Contact />
      <Footer onNavigate={handleNavigate} />

      {selectedProduct && (
        <ProductModal
          product={selectedProduct}
          category={selectedCategoryObj}
          onClose={closeModal}
        />
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);