import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowUp } from 'lucide-react';
import './App.css';

// 组件导入
import Header from './components/Header';
import Hero from './components/Hero';
import CompanyIntro from './components/CompanyIntro';
import Mission from './components/Mission';
import ProductMatrix from './components/ProductMatrix';
import VascularScenarios from './components/VascularScenarios';
import Architecture from './components/Architecture';
import FutureVision from './components/FutureVision';
import Conclusion from './components/Conclusion';

function App() {
  const [showScrollButton, setShowScrollButton] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      // 获取第一个section（Hero）的高度来判断是否显示按钮
      const heroSection = document.getElementById('hero');
      if (heroSection) {
        const heroHeight = heroSection.offsetHeight;
        const scrollY = window.scrollY;
        
        // 当滚动超过Hero区域的50%时显示按钮（即进入第二页）
        setShowScrollButton(scrollY > heroHeight * 0.5);
      }
    };

    window.addEventListener('scroll', handleScroll);
    handleScroll(); // 初始检查
    
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <Router>
      <div className="min-h-screen bg-background relative">
        <Header />
        <main>
          <Routes>
            <Route path="/" element={
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.5 }}
              >
                <Hero />
                <CompanyIntro />
                <Mission />
                <ProductMatrix />
                <VascularScenarios />
                <Architecture />
                <FutureVision />
                <Conclusion />
              </motion.div>
            } />
          </Routes>
        </main>
        
        {/* 全局回到首页按钮 */}
        <AnimatePresence>
          {showScrollButton && (
            <motion.button
              onClick={scrollToTop}
              className="fixed bottom-19 right-8 px-2 py-1 rounded-full flex items-center justify-center gap-1 transition-all duration-300 z-50 bg-white border text-gray-400 hover:bg-gray-50 hover:shadow-lg backdrop-blur-sm font-medium text-xs"
              style={{ 
                borderColor: '#9ca3af',
                color: '#9ca3af'
              }}
              initial={{ opacity: 0, scale: 0, y: 100 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0, y: 100 }}
              transition={{ 
                type: "spring", 
                stiffness: 300, 
                damping: 25 
              }}
              whileHover={{ 
                scale: 1.1,
                transition: { duration: 0.2 }
              }}
              whileTap={{ scale: 0.9 }}
              title="回到顶部"
            >
              <ArrowUp className="w-3 h-3" />
              回到顶部
            </motion.button>
          )}
        </AnimatePresence>
      </div>
    </Router>
  );
}

export default App;