import React, { useEffect, useLayoutEffect } from 'react';
import Navbar from '@/src/components/Navbar.tsx';
import Sidebar from '@/src/components/Sidebar.tsx';
import Footer from '@/src/components/Footer.tsx';
import TipsCategory from '@/src/components/TipsCategory.tsx';
import FAQItem from '@/src/components/FAQItem.tsx';
import { CONTENT } from '../constants.ts';
import { useLanguage } from '@/src/contexts/LanguageContext.tsx';
import { useTheme } from '@/src/contexts/ThemeContext.tsx';
import { useLocation } from 'react-router-dom';

const Guide: React.FC = () => {
  const { language } = useLanguage();
  const { guideHeroImage } = useTheme();
  const location = useLocation();
  const t = CONTENT[language];

  useLayoutEffect(() => {
    const params = new URLSearchParams(location.search);
    const section = params.get('section');
    
    let elementId = '';
    if (section === 'tips') {
      elementId = 'guide-tips';
    } else if (section === 'faq') {
      elementId = 'guide-faq';
    }
    
    if (elementId) {
      const element = document.getElementById(elementId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [location.search]);

  return (
    <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
      <Navbar />
      <Sidebar />

      {/* Hero Section */}
      <section className="relative h-[50vh] w-full overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src={guideHeroImage || "https://images.unsplash.com/photo-1578474843222-9593bc88d8b0?q=80&w=1920&auto=format&fit=crop"} 
            alt="Travel Guide" 
            className="w-full h-full object-cover object-center" 
            onError={(e) => {
              const target = e.target as HTMLImageElement;
              target.src = "https://images.unsplash.com/photo-1578474843222-9593bc88d8b0?q=80&w=1920&auto=format&fit=crop";
            }}
          />
          <div className="absolute inset-0 bg-black/40 pointer-events-none"></div>
        </div>
        <div className="relative z-10 h-full flex flex-col justify-center items-center text-center px-4 drop-shadow-md">
          <h1 className="text-white text-4xl md:text-6xl font-serif leading-tight italic">
            {t.guide.hero.title}
          </h1>
          <p className="text-white text-xl md:text-2xl mt-4 max-w-2xl">
            {t.guide.hero.subtitle}
          </p>
        </div>
      </section>

      {/* Main Content */}
      <main className="py-20">
        {/* Travel Tips Section */}
        <section id="guide-tips" className="max-w-7xl mx-auto px-6 mb-24">
          <div className="text-center mb-16">
            <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.guide.tips.sectionTitle}</span>
            <h2 className="text-4xl font-serif text-vista-darkblue mt-3">{t.guide.tips.sectionSubtitle}</h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {t.guide.tips.categories.map((category) => (
              <TipsCategory 
                key={category.title} 
                icon={category.icon} 
                title={category.title} 
                items={category.items} 
              />
            ))}
          </div>
        </section>

        {/* FAQ Section */}
        {/*<section id="guide-faq" className="py-24 bg-vista-teal">*/}
        <section id="guide-faq" className="py-24 bg-gray-500">
          <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-16">
              <span className="text-white uppercase tracking-widest text-sm font-bold">{t.guide.faq.sectionTitle}</span>
              <h2 className="text-4xl font-serif text-white mt-3">{t.guide.faq.sectionSubtitle}</h2>
            </div>
            
            <div className="max-w-3xl mx-auto space-y-6">
              {t.guide.faq.items.map((faq) => (
                <FAQItem 
                  key={faq.question} 
                  question={faq.question} 
                  answer={faq.answer} 
                />
              ))}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
};

export default Guide;