import { useEffect } from "react";
import { useSearchParams } from 'react-router-dom';
import { Header } from '../components/Header';
import { FeaturedSection } from '../components/FeaturedSection';
import { AuthorsSection } from '../components/AuthorsSection';
import { BlogOwnerSectionFull } from '../components/BlogOwnerSectionFull';
import { BackgroundImages } from '../hooks/useBackgroundImage';
import { useScrollStore } from '../stores/scrollStore';
import { CategoryDescription, CategoryText, CategoryTitles } from '../types';
import { SEO } from '../components/SEO';
//import { MasterBio } from "../components/MasterBio";


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

  // Восстановление позиции скролинга, когда возвращаемся на главную страницу
  useEffect(() => {
    // Проверка, возвращаемся ли мы к статье (сохранено положение скролинга).
    const hasStoredPosition = useScrollStore.getState().homeScrollPosition > 0;
    if (hasStoredPosition) {
      restoreHomeScrollPosition();
    }
  }, [restoreHomeScrollPosition]);

  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();

  const getSEODescription = () => {
    if (categoryId) {
      return `Explore the latest ${CategoryTitles[Number(categoryId)].toLowerCase()} stories, events, and cultural highlights from around the globe.`;
    }
    return 'Discover the latest in art, music, theater, and cultural events from around the globe. Your premier destination for arts and culture coverage.';
  };

  return (
      <div className="min-h-screen bg-cover bg-center bg-fixed bg-white/95" style={{ backgroundImage: `url('/images/gpt_main-bg.webp')` }}>
      <SEO
        title={categoryId ? `${CategoryTitles[Number(categoryId)]} Stories - CultureScope` : undefined}
        description={getSEODescription()}
        keywords={categoryId ? [CategoryTitles[Number(categoryId)].toLowerCase(), 'culture', 'arts', 'events'] : undefined}
        image={backgroundImage}
      />
      <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>
                {/* <MasterBio/> */}
                <BlogOwnerSectionFull />
                <AuthorsSection />
              </div>

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