import React, { useEffect, useState } from 'react';
import './Home.css';

const slidesData = [
  { id: 1, title: '行业资讯：新机型发布', description: '最新机型亮相航空展，性能全面升级', image: '' },
  { id: 2, title: '解决方案：资料管理优化', description: '一体化资料管理平台上线，提效30%', image: '' },
  { id: 3, title: '产品更新：PDF在线预览', description: '新增在线预览与多端适配功能', image: '' }
];

const Home = () => {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setActive((prev) => (prev + 1) % slidesData.length);
    }, 4000);
    return () => clearInterval(timer);
  }, []);

  const prevSlide = () => {
    setActive((prev) => (prev - 1 + slidesData.length) % slidesData.length);
  };

  const nextSlide = () => {
    setActive((prev) => (prev + 1) % slidesData.length);
  };

  return (
    <div className="home-page">
      <div className="container">
        <div className="hero">
          <h1>机型信息平台</h1>
          <p>欢迎访问主页，无需登录即可浏览导航与新闻</p>
        </div>

        <div className="carousel">
          <button className="arrow left" onClick={prevSlide}>‹</button>

          <div className="slides">
            {slidesData.map((s, idx) => (
              <div key={s.id} className={`slide ${idx === active ? 'active' : ''}`}>
                <div className="slide-content">
                  <h3>{s.title}</h3>
                  <p>{s.description}</p>
                </div>
              </div>
            ))}
          </div>

          <button className="arrow right" onClick={nextSlide}>›</button>

          <div className="indicators">
            {slidesData.map((_, idx) => (
              <span
                key={idx}
                className={`dot ${idx === active ? 'active' : ''}`}
                onClick={() => setActive(idx)}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;