import { useSearchParams } from 'react-router-dom';
import { Header } from '../components/Header';
import { FeaturedSection } from '../components/FeaturedSection';
import { useBackgroundImage } from '../hooks/useBackgroundImage';
import { Category } from '../types';

export function HomePage() {
  const [searchParams] = useSearchParams();
  const category = searchParams.get('category') as Category | null;
  const backgroundImage = useBackgroundImage(category);

  const getHeroTitle = () => {
    if (category) {
      return {
        main: `Discover ${category}`,
        sub: getCategoryDescription(category)
      };
    }
    return {
      main: 'Discover the World of',
      sub: 'Arts & Culture'
    };
  };

  const getCategoryDescription = (category: Category): string => {
    const descriptions = {
      Film: 'Cinema & Motion Pictures',
      Theater: 'Stage & Performance',
      Music: 'Rhythm & Harmony',
      Sports: 'Athletics & Competition',
      Art: 'Visual & Creative Expression',
      Legends: 'Stories & Heritage',
      Anniversaries: 'Celebrations & Milestones',
      Memory: 'History & Remembrance'
    };
    return descriptions[category];
  };

  const { main, sub } = getHeroTitle();

  return (
    <>
      <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">
                    {category ? 
                      `Explore the latest ${category.toLowerCase()} stories, events, and cultural highlights from around the globe.` :
                      'Explore the latest in art, music, theater, and cultural events from around the globe. Join us on a journey through the world\'s most inspiring creative expressions.'
                    }
                  </p>
                  <div className="mt-8 flex justify-center space-x-4">
                    <a
                      href={category ? `/?category=${category}` : '/?category=Art'}
                      className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors"
                    >
                      Explore Articles
                    </a>
                    <a
                      href="#featured"
                      className="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-white hover:bg-white/10 transition-colors"
                    >
                      Latest Stories
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div id="featured">
              <FeaturedSection />
            </div>
          </div>
        </div>
      </main>
    </>
  );
}