import { Input, Button, Tag } from 'antd';
import {
  SearchOutlined,
  CameraOutlined,
  ArrowRightOutlined,
  ThunderboltOutlined,
  SafetyCertificateOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Hero.css';

const recommendTags = ['活动', '医美', '科技', '包装', '直播', '邀请函'];
const heroStats = [
  { value: '24h', label: '持续更新' },
  { value: '原图', label: '即时交付' },
  { value: '在线', label: '支付下载' },
];
const stageHighlights = [
  {
    icon: <ThunderboltOutlined />,
    title: '热门原图',
    description: '按场景、风格和行业快速找图，减少反复沟通。',
  },
  {
    icon: <SafetyCertificateOutlined />,
    title: '支付后交付',
    description: '下单、支付、下载一条链路走通，用户体验更顺。',
  },
  {
    icon: <ClockCircleOutlined />,
    title: '最新上传',
    description: '设计师持续上新，支持详情页预览和作品编号追踪。',
  },
];

const Hero = () => {
  const navigate = useNavigate();

  const scrollToHotWorks = () => {
    document.getElementById('home-hot-works')?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };

  return (
    <section className="hero">
      <div className="hero-shell">
        <div className="hero-copy">
          <span className="hero-eyebrow">图汇精选素材库</span>
          <h1 className="hero-title">
            把灵感整理成
            <span>可直接下载的设计资产</span>
          </h1>
          <p className="hero-description">
            原图、背景、电商图、活动物料统一归档，预览、支付、下载三步走通，
            让客户从找图到拿到成品更省心。
          </p>

          <div className="hero-search-panel">
            <div className="hero-search-box">
              <Input
                size="large"
                placeholder="搜索作品标题、作品编号或场景关键词"
                className="hero-search-input"
                prefix={<SearchOutlined className="hero-search-prefix" />}
                suffix={<CameraOutlined className="hero-search-camera" />}
              />
            </div>
            <div className="hero-action-row">
              <Button
                type="primary"
                size="large"
                className="hero-primary-btn"
                icon={<ArrowRightOutlined />}
                onClick={scrollToHotWorks}
              >
                浏览热门作品
              </Button>
              <Button
                size="large"
                className="hero-secondary-btn"
                onClick={() => navigate('/upload-guide')}
              >
                上传指南
              </Button>
            </div>
          </div>

          <div className="hero-tags">
            <span className="hero-tags-label">推荐分类</span>
            {recommendTags.map((tag) => (
              <Tag
                key={tag}
                className="hero-tag"
                onClick={() => navigate(`/category/${tag}`)}
              >
                {tag}
              </Tag>
            ))}
          </div>

          <div className="hero-stats">
            {heroStats.map((item) => (
              <div key={item.label} className="hero-stat">
                <strong>{item.value}</strong>
                <span>{item.label}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-stage">
          <div className="hero-stage-card hero-stage-main">
            <div className="hero-stage-topline">
              <span className="hero-stage-label">本周趋势</span>
              <span className="hero-stage-badge">精选专题</span>
            </div>
            <h2>更像一个能直接成交的素材站，而不是简单图库</h2>
            <p>
              首页负责承接搜索意图，详情页负责转化下载动作，让用户一眼知道
              “这里能找、能买、能下”。
            </p>
            <div className="hero-stage-pills">
              <span>高清原图</span>
              <span>在线支付</span>
              <span>作品详情页</span>
            </div>
          </div>

          <div className="hero-stage-stack">
            {stageHighlights.map((item) => (
              <div key={item.title} className="hero-stage-card hero-stage-mini">
                <div className="hero-stage-icon">{item.icon}</div>
                <div>
                  <h3>{item.title}</h3>
                  <p>{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;