import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { motion, AnimatePresence } from 'framer-motion'
import { Home } from './pages/Home'
import { About } from './pages/About'
import { Services } from './pages/Services'
import { News } from './pages/News'
import { Contact } from './pages/Contact'
import { Cases } from './pages/Cases'
import { Learning } from './pages/Learning'
import { Assistant } from './pages/Assistant'

// 页面切换动画配置
const pageVariants = {
  initial: {
    opacity: 0,
    y: 20,
  },
  animate: {
    opacity: 1,
    y: 0,
  },
  exit: {
    opacity: 0,
    y: -20,
  },
}

const pageTransition = {
  duration: 0.4,
}

// 页面包装组件 - 添加动画效果
const PageWrapper = ({ children }: { children: React.ReactNode }) => (
  <motion.div
    initial="initial"
    animate="animate"
    exit="exit"
    variants={pageVariants}
    transition={pageTransition}
    style={{ width: '100%' }}
  >
    {children}
  </motion.div>
)

// 404 页面组件
const NotFound = () => (
  <PageWrapper>
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="text-center">
        <h1 className="text-9xl font-bold text-primary">404</h1>
        <p className="text-2xl font-medium text-gray-600 mt-4">页面不存在</p>
        <p className="text-gray-500 mt-2">抱歉，您访问的页面不存在或已被移除</p>
        <a
          href="/"
          className="inline-block mt-8 px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary-light transition-colors"
        >
          返回首页
        </a>
      </div>
    </div>
  </PageWrapper>
)

function App() {
  return (
    <Router>
      <AnimatePresence mode="wait">
        <Routes>
          <Route path="/" element={<PageWrapper><Home /></PageWrapper>} />
          <Route path="/about" element={<PageWrapper><About /></PageWrapper>} />
          <Route path="/services" element={<PageWrapper><Services /></PageWrapper>} />
          <Route path="/cases" element={<PageWrapper><Cases /></PageWrapper>} />
          <Route path="/news" element={<PageWrapper><News /></PageWrapper>} />
          <Route path="/learning" element={<PageWrapper><Learning /></PageWrapper>} />
          <Route path="/contact" element={<PageWrapper><Contact /></PageWrapper>} />

          {/* English routes */}
          <Route path="/en" element={<PageWrapper><Home /></PageWrapper>} />
          <Route path="/en/about" element={<PageWrapper><About /></PageWrapper>} />
          <Route path="/en/services" element={<PageWrapper><Services /></PageWrapper>} />
          <Route path="/en/cases" element={<PageWrapper><Cases /></PageWrapper>} />
          <Route path="/en/news" element={<PageWrapper><News /></PageWrapper>} />
          <Route path="/en/learning" element={<PageWrapper><Learning /></PageWrapper>} />
          <Route path="/en/contact" element={<PageWrapper><Contact /></PageWrapper>} />

          <Route path="*" element={<NotFound />} />
        </Routes>
      </AnimatePresence>
    </Router>
  )
}

export default App
