import { useSearchParams } from 'react-router-dom';
import { Header } from '../components/Header';
import { FeaturedSection } from '../components/FeaturedSection';
import { AuthorsSection } from '../components/AuthorsSection';
import { BackgroundImages } from '../hooks/useBackgroundImage';
import { CategoryDescription, CategoryText, CategoryTitles } from '../types';

export function HomePage() {
  const [searchParams] = useSearchParams();
  const categoryId = searchParams.get('category');
  const backgroundImage= BackgroundImages[Number(categoryId)];

  console.log(categoryId)

  const getHeroTitle = () => {
    if (categoryId) {
      return {
        main: CategoryTitles[Number(categoryId)],
        sub: CategoryDescription[Number(categoryId)],
        description: CategoryText[Number(categoryId)]
      };
    }
    return {
      main: 'Волшебный мир искуства',
      sub: 'Все о культуре Москвы и Петербурга',
      description: 'Следите за событиями культурной жизни столиц: концерты, выставки, спектакли и многое другое в одном удобном формате.'
    };
  };

  const { main, sub, description } = getHeroTitle();

  return (
      <div className="min-h-screen bg-cover bg-center bg-fixed bg-white/95" style={{ backgroundImage: `url('/images/main-bg.jpg')` }}>
      <Header />
        <main>
          <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <div className="px-4 py-6 sm:px-0">
              <div className="relative">

                <div className="absolute inset-0">
                  <div
                    className="w-full h-full bg-cover bg-center transition-all duration-500 ease-in-out"
                    style={{
                      backgroundImage: `url("${backgroundImage}")`,
                    }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-r from-gray-900/90 to-gray-900/60 backdrop-blur-sm" />
                  </div>
                </div>

                <div className="relative">
                  <div className="text-center max-w-4xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
                    <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
                      <span className="block mb-2">{main}</span>
                      <span className="block text-blue-400">{sub}</span>
                    </h1>
                    <p className="mt-6 text-xl text-gray-200 max-w-2xl mx-auto">
                      {description}
                    </p>
                    <div className="mt-8 flex justify-center space-x-4">
                    </div>
                  </div>
                </div>

              </div>

              <div className="relative bg-white/95">
                <div id="featured">
                  <FeaturedSection />
                </div>
                <AuthorsSection />
              </div>

            </div>
          </div>
        </main>
      </div>
  );
}