RMO-Front/src/pages/Home.tsx

import { Link } from 'react-router-dom'
import { useEffect, useRef, useState } from 'react'
import { useQuoteModal } from '../contexts/QuoteModalContext'
import './Home.css'

function Home() {
  const { openQuoteModal } = useQuoteModal()
  const [currentSection, setCurrentSection] = useState(0)
  const sectionsRef = useRef<(HTMLElement | null)[]>([])

  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      e.preventDefault()
      const delta = e.deltaY > 0 ? 1 : -1
      const nextSection = Math.max(0, Math.min(sectionsRef.current.length - 1, currentSection + delta))
      
      if (nextSection !== currentSection) {
        setCurrentSection(nextSection)
        sectionsRef.current[nextSection]?.scrollIntoView({ behavior: 'smooth' })
      }
    }

    window.addEventListener('wheel', handleWheel, { passive: false })
    return () => window.removeEventListener('wheel', handleWheel)
  }, [currentSection])

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = sectionsRef.current.indexOf(entry.target as HTMLElement)
            if (index !== -1) {
              setCurrentSection(index)
            }
          }
        })
      },
      { threshold: 0.5 }
    )

    sectionsRef.current.forEach((section) => {
      if (section) observer.observe(section)
    })

    return () => observer.disconnect()
  }, [])

  return (
    <div className="home-fullscreen">
      {/* 导航指示器 */}
      <div className="scroll-indicator">
        {[0, 1, 2, 3, 4].map((index) => (
          <button
            key={index}
            className={`indicator-dot ${currentSection === index ? 'active' : ''}`}
            onClick={() => {
              setCurrentSection(index)
              sectionsRef.current[index]?.scrollIntoView({ behavior: 'smooth' })
            }}
            aria-label={`Section ${index + 1}`}
          />
        ))}
      </div>

      {/* Section 1: Hero - 主视觉 */}
      <section
        ref={(el) => (sectionsRef.current[0] = el)}
        className="home-section hero-section"
        style={{
          backgroundImage: "url('/pic/Home_Page.png')",
          backgroundPosition: 'center center',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          backgroundAttachment: 'fixed'
        }}
      >
        <div className="hero-content">
          <h1 className="hero-title">赋能生命科学风险管理</h1>
          <p className="hero-subtitle">
              患者安全始终第一
          </p>
          <div className="hero-buttons">
            <Link to="/about/overview" className="btn btn-primary">了解更多</Link>
            <button type="button" className="btn btn-secondary" onClick={openQuoteModal}>
              获取报价
            </button>
          </div>
        </div>
      </section>

      {/* Section 2: 解决方案 */}
      <section
        ref={(el) => (sectionsRef.current[1] = el)}
        className="home-section solutions-section"
      >
        <div className="section-content">
          <h2 className="section-title">RMO风险管理解决方案</h2>
          <p className="section-subtitle">提供全流程风险评估与风险减量解决方案</p>
          <div className="solutions-grid">
            <Link to="/solutions/pharmacovigilance" className="solution-card">
              <div className="solution-icon">📊</div>
              <h3>药物警戒</h3>
              <p>系统化的数据收集、监测和分析，识别潜在风险信号</p>
              <span className="solution-link">了解更多 →</span>
            </Link>
            <Link to="/solutions/clinical-insurance" className="solution-card">
              <div className="solution-icon">🛡️</div>
              <h3>临床保险</h3>
              <p>为临床试验提供全面的保险保障服务</p>
              <span className="solution-link">了解更多 →</span>
            </Link>
            <Link to="/solutions/product-insurance" className="solution-card">
              <div className="solution-icon">💼</div>
              <h3>产品保险</h3>
              <p>上市后药物安全与风险管理保障</p>
              <span className="solution-link">了解更多 →</span>
            </Link>
          </div>
        </div>
      </section>

      {/* Section 3: 核心能力 */}
      <section
        ref={(el) => (sectionsRef.current[2] = el)}
        className="home-section capabilities-section"
      >
        <div className="section-content">
          <h2 className="section-title">核心能力</h2>
          <div className="capabilities-grid">
            <div className="capability-item">
              <div className="capability-number">10+</div>
              <div className="capability-label">可承保保司</div>
            </div>
            <div className="capability-item">
              <div className="capability-number">50种以上+</div>
              <div className="capability-label">不同保障方案</div>
            </div>
            <div className="capability-item">
              <div className="capability-number">Top 5</div>
              <div className="capability-label">创新药企业</div>
            </div>
            <div className="capability-item">
              <div className="capability-number">7/15天</div>
              <div className="capability-label">理赔结论时限承诺</div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 4: 知识资源 */}
      <section
        ref={(el) => (sectionsRef.current[3] = el)}
        className="home-section knowledge-section"
      >
        <div className="section-content">
          <h2 className="section-title">知识资源</h2>
          <p className="section-subtitle">分享我们对行业的洞见和风险资讯</p>
          <div className="knowledge-grid">
            <Link to="/knowledge/PVknowledge" className="knowledge-card">
              <h3>法规指南</h3>
              <p>最新的法律法规与实践指南</p>
            </Link>
            <Link to="/knowledge/insurance" className="knowledge-card">
              <h3>保险知识</h3>
              <p>保险方案设计与风险管理知识</p>
            </Link>
            <Link to="/knowledge/pv-insurance" className="knowledge-card">
              <h3>PV与保险</h3>
              <p>药物警戒与保险的深度融合</p>
            </Link>
            <Link to="/faq" className="knowledge-card">
              <h3>常见问题</h3>
              <p>解答您关心的问题</p>
            </Link>
          </div>
        </div>
      </section>

      {/* Section 5: 联系我们 */}
      <section
        ref={(el) => (sectionsRef.current[4] = el)}
        className="home-section contact-section"
      >
        <div className="section-content">
          <h2 className="section-title">联系我们</h2>
          <p className="section-subtitle">获取RMO最新资讯，第一时间了解我们的企业动态</p>
          <div className="contact-actions">
            <Link to="/contact" className="btn btn-primary">立即联系</Link>
            <Link to="/about/overview" className="btn btn-secondary">关于RMO</Link>
          </div>
        </div>
      </section>
    </div>
  )
}

export default Home