'use client'
import { useLanguage } from '@/contexts/LanguageContext'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { ClientErrorBoundary } from '@/components/common/ClientErrorBoundary'

// Direct imports for above-the-fold content
import { HeroSection } from '@/components/HeroSection'
import { StatsSection } from '@/components/StatsSection'
import { CollegesSection } from '@/components/CollegesSection'
import { NewsSection } from '@/components/NewsSection'
import { EventsSection } from '@/components/EventsSection'
import { CampusLifeSection } from '@/components/CampusLifeSection'
import { ProjectsSection } from '@/components/ProjectsSection'
import { ContactSection } from '@/components/ContactSection'
import { ScrollToTop } from '@/components/ScrollToTop'
import SmartChat from '@/components/SmartChat'
import { UniversityVideoSection } from '@/components/UniversityVideoSection'

export default function HomeContent({ home, events, news, colleges, campusLife, projects, faqs }: any) {
    const { t } = useLanguage()

    return (
        <div className="scroll-smooth overflow-x-hidden">
            <main>
                <ClientErrorBoundary>
                    <HeroSection hero={home?.hero} />
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <StatsSection stats={home?.stats} />
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <CampusLifeSection initialData={campusLife} sectionContent={home?.sections?.campusLife} />
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <ProjectsSection initialData={projects} sectionContent={home?.sections?.projects} />
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <CollegesSection initialData={colleges} sectionContent={home?.sections?.colleges} />
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <NewsSection initialNews={news} sectionContent={home?.sections?.news} />
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <EventsSection initialEvents={events} sectionContent={home?.sections?.events} />
                </ClientErrorBoundary>


                <ClientErrorBoundary>
                    <UniversityVideoSection content={home?.sections?.video} />
                </ClientErrorBoundary>

                {/* FAQ Section */}
                <ClientErrorBoundary>
                    <section id="faq" className="py-16 bg-background">
                        <div className="container mx-auto px-4">
                            <div className="text-center mb-12">
                                <h2 className="text-4xl font-bold mb-4">
                                    {t(home?.sections?.faq?.titleAr || 'الأسئلة المتكررة', home?.sections?.faq?.titleEn || 'Frequently Asked Questions')}
                                </h2>
                                <div className="w-24 h-1 bg-secondary mx-auto mb-6"></div>
                                <p className="text-muted-foreground max-w-2xl mx-auto">
                                    {t(home?.sections?.faq?.descriptionAr || 'إجابات للأسئلة الشائعة', home?.sections?.faq?.descriptionEn || 'Answers to common questions')}
                                </p>
                            </div>
                            <div className="max-w-3xl mx-auto">
                                <Accordion type="single" collapsible className="w-full space-y-4">
                                    {faqs.map((faq: any) => (
                                        <AccordionItem
                                            key={faq.id}
                                            value={faq.id}
                                            className="border rounded-lg px-6 bg-card"
                                        >
                                            <AccordionTrigger className="text-lg font-semibold hover:no-underline" aria-label={t(faq.questionAr, faq.questionEn)}>
                                                {t(faq.questionAr, faq.questionEn)}
                                            </AccordionTrigger>
                                            <AccordionContent className="text-base text-muted-foreground pt-4">
                                                {t(faq.answerAr, faq.answerEn)}
                                            </AccordionContent>
                                        </AccordionItem>
                                    ))}
                                </Accordion>
                            </div>
                        </div>
                    </section>
                </ClientErrorBoundary>

                <ClientErrorBoundary>
                    <ContactSection sectionContent={home?.sections?.contact} siteProfile={home?.siteProfile} />
                </ClientErrorBoundary>
                <ClientErrorBoundary fallback={null}>
                    <SmartChat />
                </ClientErrorBoundary>
            </main>
            <ClientErrorBoundary fallback={null}>
                <ScrollToTop />
            </ClientErrorBoundary>
        </div>
    )
}