import React, { useEffect } from 'react';
import { Hero } from './Hero';
import { 
  AboutSection, 
  ServicesSection, 
  BigCTA, 
  PackagesSection, 
  GallerySection, 
  StatsSection,
  WhyChooseSection,
  TestimonialsSection,
  TeamSection,
  FaqSection,
  BlogSection,
  ContactSection,
  ClientsSection,
  SpecialOffersSection,
  BeforeAfterSection // Importado
} from './AppContent';
import { useData } from '../contexts/DataContext';
import { Container, Button } from './Shared';
import { useParams, Link } from 'react-router-dom';
import { ArrowLeft, Calendar } from 'lucide-react';

// Componente para rolar para o topo ao mudar de página
const ScrollToTop = () => {
    useEffect(() => {
      window.scrollTo(0, 0);
    }, []);
    return null;
};

export const HomePage = () => {
  const { data } = useData();
  const { visibility } = data;
  return (
    <>
      <ScrollToTop />
      {visibility.hero && <Hero />}
      {visibility.specialOffers && <SpecialOffersSection />}
      {visibility.about && <AboutSection />}
      {visibility.services && <ServicesSection />}
      {visibility.beforeAfter && <BeforeAfterSection />}
      {visibility.bigCta && <BigCTA />}
      {visibility.packages && <PackagesSection />}
      {visibility.gallery && <GallerySection />}
      {visibility.stats && <StatsSection />}
      {visibility.whyChoose && <WhyChooseSection />}
      {visibility.testimonials && <TestimonialsSection />}
      {visibility.team && <TeamSection />}
      {visibility.faq && <FaqSection />}
      {visibility.blog && <BlogSection />}
      {visibility.contact && <ContactSection />}
      {visibility.clients && <ClientsSection />}
    </>
  );
};

export const AboutPage = () => (
    <>
      <ScrollToTop />
      <div className="pt-20 bg-zinc-950">
        <AboutSection />
        <StatsSection />
        <WhyChooseSection />
        <TeamSection />
        <ClientsSection />
      </div>
    </>
);

export const PromotionsPage = () => (
    <>
      <ScrollToTop />
      <div className="pt-20 bg-zinc-950 min-h-screen">
          <div className="py-12 bg-black text-center">
             <Container>
                <h1 className="text-4xl font-bold text-white mb-4">Promoções & Ofertas</h1>
                <p className="text-gray-400">Confira nossas condições especiais para pneus e revisões.</p>
             </Container>
          </div>
          <SpecialOffersSection />
          <PackagesSection />
          <BigCTA />
      </div>
    </>
);

export const ServicesPage = () => (
    <>
        <ScrollToTop />
        <div className="pt-20 bg-zinc-950">
             <ServicesSection />
             <BigCTA />
             <PackagesSection />
             <GallerySection />
        </div>
    </>
);

export const BlogPage = () => (
    <>
        <ScrollToTop />
        <div className="pt-20 bg-zinc-950 min-h-screen">
             <div className="py-12 bg-black text-center border-b border-zinc-900">
                <Container>
                    <h1 className="text-4xl font-bold text-white mb-4">Blog Automotivo</h1>
                    <p className="text-gray-400">Dicas, manutenção e novidades do mundo automotivo.</p>
                </Container>
             </div>
             <BlogSection />
        </div>
    </>
);

export const BlogPostPage = () => {
    const { id } = useParams();
    const { data } = useData();
    const post = data.blog.find(p => p.id === Number(id));

    if (!post) {
        return (
            <div className="pt-32 pb-20 text-center min-h-screen">
                <h2 className="text-2xl font-bold text-white mb-4">Artigo não encontrado</h2>
                <Link to="/blog"><Button>Voltar para o Blog</Button></Link>
            </div>
        )
    }

    return (
        <>
            <ScrollToTop />
            <article className="pt-24 pb-20 min-h-screen bg-zinc-950">
                <Container className="max-w-4xl">
                    <Link to="/blog" className="inline-flex items-center gap-2 text-gray-400 hover:text-primary mb-8 transition-colors">
                        <ArrowLeft size={20} /> Voltar para o Blog
                    </Link>
                    
                    <div className="aspect-video w-full overflow-hidden rounded-2xl mb-8">
                        <img src={post.image} alt={post.title} className="w-full h-full object-cover" />
                    </div>

                    <div className="flex items-center gap-2 text-primary text-sm font-bold mb-4 uppercase tracking-wider">
                        <Calendar size={16} />
                        {post.date}
                    </div>

                    <h1 className="text-3xl md:text-5xl font-black text-white mb-8 leading-tight">
                        {post.title}
                    </h1>

                    <div 
                        className="prose prose-invert prose-lg max-w-none text-gray-300
                        prose-headings:text-white prose-a:text-primary prose-strong:text-white"
                        dangerouslySetInnerHTML={{ __html: post.content }} 
                    />

                    <div className="mt-12 pt-12 border-t border-zinc-800">
                        <h3 className="text-white font-bold text-xl mb-6">Gostou da dica?</h3>
                        <BigCTA />
                    </div>
                </Container>
            </article>
        </>
    )
}

export const ContactPage = () => (
    <>
        <ScrollToTop />
        <div className="pt-20 bg-zinc-950">
            <ContactSection />
            <FaqSection />
        </div>
    </>
);