import { Input, Button, Tag } from 'antd';
import { SearchOutlined, CameraOutlined } from '@ant-design/icons';
import './Hero.css';

const Hero = () => {
  const recommendTags = ['地产', '医美', '旅游', '汽车', '价值点', '美陈', '电商', '画册', '大寒'];

  return (
    <section className="hero">
      <div className="hero-background">
        {/* Winter Scene Illustration */}
        <div className="hero-scene">
          <div className="snowflakes">
            {[...Array(20)].map((_, i) => (
              <div key={i} className="snowflake" style={{
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${3 + Math.random() * 4}s`
              }}>❄</div>
            ))}
          </div>
          
          {/* Left Side - Title */}
          <div className="hero-title-area">
            <h1 className="hero-main-title">这个冬天</h1>
            <h2 className="hero-sub-title">相约雪山</h2>
            <p className="hero-english">APPOINTMENT AT SNOWMOUNTAIN</p>
          </div>
          
          {/* Decorative Elements */}
          <div className="hero-decorations">
            <div className="mountain mountain-1"></div>
            <div className="mountain mountain-2"></div>
            <div className="tree tree-1">🌲</div>
            <div className="tree tree-2">🌲</div>
            <div className="tree tree-3">🎄</div>
            <div className="snowman">⛄</div>
            <div className="people people-1">🎿</div>
            <div className="people people-2">🛷</div>
          </div>
        </div>
      </div>

      <div className="hero-content">
        <h2 className="hero-slogan">有所想，不如有所享！</h2>
        
        <div className="hero-search-box">
          <Input
            size="large"
            placeholder="搜索作品或编号"
            className="hero-search-input"
            suffix={
              <div className="search-actions">
                <CameraOutlined className="camera-icon" />
                <Button type="primary" shape="circle" icon={<SearchOutlined />} className="search-btn" />
              </div>
            }
          />
        </div>

        <div className="hero-tags">
          <span className="tags-label">推荐搜索：</span>
          {recommendTags.map(tag => (
            <Tag key={tag} className="recommend-tag">{tag}</Tag>
          ))}
        </div>

        <div className="hero-designer">
          设计师：M.A
        </div>
      </div>
    </section>
  );
};

export default Hero;
