import { useState, useEffect, useRef } from 'react'
import './index.css'

// 导航栏组件
function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [activeSection, setActiveSection] = useState('')

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50)

      // 检测当前活跃的 section
      const sections = ['coupon', 'faq', 'contact']
      for (const sectionId of sections) {
        const element = document.getElementById(sectionId)
        if (element) {
          const rect = element.getBoundingClientRect()
          if (rect.top <= 100 && rect.bottom >= 100) {
            setActiveSection(sectionId)
            break
          }
        }
      }
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const scrollToSection = (e, sectionId) => {
    e.preventDefault()
    if (sectionId === 'page-top') {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    } else {
      const element = document.getElementById(sectionId)
      if (element) {
        const offset = element.offsetTop - 50
        window.scrollTo({ top: offset, behavior: 'smooth' })
      }
    }
    setIsMenuOpen(false)
  }

  return (
    <nav className={`navbar-default ${isScrolled ? 'affix' : ''}`}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <a
            className="navbar-brand"
            href="#page-top"
            onClick={(e) => scrollToSection(e, 'page-top')}
          >
            <img className="iconlogo" src="/img/iconlogo.png" width="50" alt="Logo" />
            ZU CHRISTMAS
          </a>

          <button
            className="navbar-toggle"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            Menu <i className="fa fa-bars"></i>
          </button>

          <ul className={`nav-links ${isMenuOpen ? 'open' : ''}`} style={{
            display: 'flex',
            listStyle: 'none',
            margin: 0,
            padding: 0,
            gap: '20px',
            alignItems: 'center'
          }}>
            <li>
              <a
                className={`nav-link ${activeSection === 'coupon' ? 'active' : ''}`}
                href="#coupon"
                onClick={(e) => scrollToSection(e, 'coupon')}
              >
                Special Offer
              </a>
            </li>
            <li>
              <a
                className={`nav-link ${activeSection === 'faq' ? 'active' : ''}`}
                href="#faq"
                onClick={(e) => scrollToSection(e, 'faq')}
              >
                F.A.Q.
              </a>
            </li>
            <li>
              <a
                className={`nav-link ${activeSection === 'contact' ? 'active' : ''}`}
                href="#contact"
                onClick={(e) => scrollToSection(e, 'contact')}
              >
                Contact
              </a>
            </li>
            <li>
              <a
                className="nav-link menuhighlight"
                href="#"
              >
                <i className="fa fa-cloud-download"></i> Download
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

// 粒子动画背景
function Illustration() {
  return (
    <div className="illustration">
      <div className="i-large"></div>
      <div className="i-medium"></div>
      <div className="i-small"></div>
    </div>
  )
}

// Header 区域
function Header() {
  const audioRef = useRef(null)

  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = 0.4
    }
  }, [])

  return (
    <header id="page-top">
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <div className="device-container">
              <img
                src="/img/homeimg.png"
                alt="Home"
                style={{ maxWidth: '100%', height: 'auto' }}
              />
            </div>
          </div>
          <div className="col-sm-6">
            <div className="header-content">
              <div className="header-content-inner">
                <h1>Merry Holidays</h1>
                <h4>Make your visitors smile with this special landing page!</h4>
                <br />
                <a href="#" className="btnimg">
                  <img src="/img/button-available.png" height="50" alt="App Store" />
                </a>
                {' '}
                <a href="#" className="btnimg">
                  <img src="/img/button-googleplay.png" height="50" alt="Google Play" />
                </a>
                <br /><br />
                <div className="social">
                  <a href="#"><i className="fa fa-facebook"></i></a>
                  <a href="#"><i className="fa fa-twitter"></i></a>
                  <a href="#"><i className="fa fa-google-plus"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="audioembed">
        <audio
          ref={audioRef}
          controls
          autoPlay
          src="/audio/audio.mp3"
        />
      </div>
    </header>
  )
}

// 优惠券区域
function CouponSection() {
  return (
    <section id="coupon" className="couponsection bg-primary text-center">
      <div className="container">
        <div className="row">
          <div className="col-md-10 col-md-offset-1">
            <h2 className="title section-heading">December Only</h2>
            <p>Get your discount, available in stores this month only</p>
            <div className="coupon">
              <img src="/img/gift.png" alt="Gift" />
              <h3>50% Off All Products!</h3>
              <h4>Coupon Code: <span style={{ borderBottom: '1px dashed' }}>HOLIDAY50</span></h4>
              <br />
              <p>
                <i>
                  Use this coupon code at checkout to receive<br />
                  <u>half off</u> your order. Hurry up, limited time offer!
                </i>
              </p>
              <p>
                <a href="#" className="btn-buynow">
                  <i className="fa fa-shopping-cart"></i> Shop Now
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

// FAQ 区域
function FAQSection() {
  const faqs = [
    {
      question: "How soon do I get my item?",
      answer: "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
    },
    {
      question: "Is there a free shipping?",
      answer: "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
    },
    {
      question: "Can I get several discounts?",
      answer: "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
    },
    {
      question: "Do you deliver it as a gift?",
      answer: "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
    },
    {
      question: "What payment methods?",
      answer: "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
    },
    {
      question: "I have a different question?",
      answer: "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
    }
  ]

  return (
    <section id="faq">
      <div className="container">
        <div className="row">
          <div className="col-lg-12 text-center">
            <div className="section-heading">
              <h2 className="title">F.A.Q.</h2>
              <p className="text-muted">Contact us if you have a different question</p>
              <img src="/img/sep.png" width="120" alt="Separator" className="sep-img" />
            </div>
          </div>
        </div>
        <div className="col-md-10 col-md-offset-1">
          <div className="row">
            <div className="col-md-6">
              {faqs.slice(0, 3).map((faq, index) => (
                <div key={index}>
                  <h3>{faq.question}</h3>
                  <p>{faq.answer}</p>
                </div>
              ))}
            </div>
            <div className="col-md-6">
              {faqs.slice(3, 6).map((faq, index) => (
                <div key={index}>
                  <h3>{faq.question}</h3>
                  <p>{faq.answer}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

// 联系区域
function ContactSection() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    comment: ''
  })
  const [errors, setErrors] = useState({})
  const [showSuccess, setShowSuccess] = useState(false)

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
    // 清除错误
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: false
      }))
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault()

    // 验证
    const newErrors = {}
    if (!formData.name.trim()) newErrors.name = true
    if (!formData.email.trim() || !/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = true
    if (!formData.comment.trim()) newErrors.comment = true

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors)
      return
    }

    // 模拟提交成功
    setShowSuccess(true)
    setFormData({ name: '', email: '', comment: '' })

    setTimeout(() => {
      setShowSuccess(false)
    }, 5000)
  }

  const closeAlert = () => {
    setShowSuccess(false)
  }

  return (
    <section id="contact">
      <div className="container">
        <div className="row">
          <div className="col-lg-12 text-center">
            <div className="section-heading">
              <h2 className="title" style={{ marginBottom: '60px', color: '#fff' }}>Contact Us</h2>
            </div>
          </div>
        </div>
        <div className="col-lg-8 col-lg-offset-2">
          <div className={`done ${showSuccess ? 'show' : ''}`}>
            <div className="alert-success">
              <button type="button" className="close" onClick={closeAlert}>×</button>
              Your message has been sent. Thank you!
            </div>
          </div>
          <form id="contactform" onSubmit={handleSubmit}>
            <div className="form">
              <div className="row">
                <div className="col-md-6">
                  <input
                    type="text"
                    name="name"
                    placeholder="Name *"
                    value={formData.name}
                    onChange={handleChange}
                    className={errors.name ? 'error' : ''}
                  />
                </div>
                <div className="col-md-6">
                  <input
                    type="text"
                    name="email"
                    placeholder="E-mail *"
                    value={formData.email}
                    onChange={handleChange}
                    className={errors.email ? 'error' : ''}
                  />
                </div>
              </div>
              <textarea
                name="comment"
                rows="7"
                placeholder="Message *"
                value={formData.comment}
                onChange={handleChange}
                className={errors.comment ? 'error' : ''}
              />
              <input type="submit" className="clearfix btn" value="Send" />
            </div>
          </form>
        </div>
      </div>
      <div className="overlay"></div>
    </section>
  )
}

// 页脚
function Footer() {
  return (
    <footer>
      <div className="container">
        <p>© 2025 Your Company Name. All Rights Reserved.</p>
        <ul>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
    </footer>
  )
}

// 主应用
function App() {
  return (
    <>
      <Illustration />
      <Navbar />
      <Header />
      <CouponSection />
      <FAQSection />
      <ContactSection />
      <Footer />
    </>
  )
}

export default App
