import TiltedCard from '../components/reactbits/Components/TiltedCard/TiltedCard';

const HomeContent = () => {
  return (
    <div className="min-h-screen bg-campfire-dark">
      {/* Hero Section с наложением на Grid */}
      <div className="relative z-10">
        <div className="container-custom mx-auto px-4 pt-32 pb-16">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-campfire-light mb-6">
              Составляй рецензии на
            </h1>
            <div className="bg-campfire-charcoal/80 backdrop-blur-md rounded-lg p-6 border border-campfire-ash/20">
              <SearchBar />
            </div>
          </div>
        </div>
      </div>

      {/* Grid начинается с верха страницы */}
      <div className="relative -mt-32">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:gap-10 container-custom mx-auto px-4">
          {mediaItems.map((item) => (
            <div className="transform hover:scale-105 transition-transform duration-300">
              <TiltedCard 
                key={item.id}
                imageSrc={item.poster_path}
                captionText={item.title}
                rating={item.rating}
                releaseDate={item.release_date}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default HomeContent; 