import React from 'react';
import { useNavigate } from 'react-router-dom';
import HeroBanner from '../components/HeroBanner';
import PopularModelsHome from '../components/PopularModelsHome';
import QuickAccess from '../components/QuickAccess';
import { ArrowRight } from 'lucide-react';

interface HomeProps {}

const Home: React.FC<HomeProps> = () => {
  const navigate = useNavigate();

  return (
    <div className="space-y-6 sm:space-y-8 md:space-y-12">
      <HeroBanner />
      
      <section>
        <div className="flex items-center justify-between mb-4 sm:mb-6">
          <h2 className="text-lg sm:text-xl font-bold text-gray-900">精选模型</h2>
          <button 
            onClick={() => navigate('/models')}
            className="group flex items-center space-x-1.5 px-3 sm:px-4 py-1.5 bg-blue-50 text-blue-600 rounded-full text-xs font-bold hover:bg-blue-100 transition-all border border-blue-100/50"
          >
            <span>进入模型广场</span>
            <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" />
          </button>
        </div>
        <PopularModelsHome />
      </section>

      <section className="pb-10">
        <div className="flex items-center justify-between mb-4 sm:mb-6">
          <h2 className="text-lg sm:text-xl font-bold text-gray-900">常用功能入口</h2>
        </div>
        <QuickAccess />
      </section>
    </div>
  );
};

export default Home;