১. ২ :JavaScript অপটিমাইজেশন

// pages/index.tsx (Pages Router) বা app/page.tsx (App Router)
import React from 'react'
import ProductList from '@/components/ProductList'
import FeaturedCarousel from '@/components/FeaturedCarousel'
import SalesChart from '@/components/SalesChart'
import PaymentGateway from '@/components/PaymentGateway'
import NewsletterSignup from '@/components/NewsletterSignup'
import RecommendationEngine from '@/components/RecommendationEngine'
import CustomerReviews from '@/components/CustomerReviews'
import ChatSupport from '@/components/ChatSupport'

export default function HomePage() {
  return (
    <div className="container mx-auto">
      <h1 className="text-3xl font-bold my-6">আমাদের ই-কমার্স স্টোর</h1>
      
      {/* ফিচার্ড প্রোডাক্ট ক্যারোসেল */}
      <FeaturedCarousel />
      
      {/* প্রোডাক্ট লিস্ট */}
      <ProductList />
      
      {/* সেলস চার্ট - এডমিনদের জন্য */}
      <SalesChart />
      
      {/* পেমেন্ট গেটওয়ে */}
      <PaymentGateway />
      
      {/* নিউজলেটার সাইনআপ */}
      <NewsletterSignup />
      
      {/* রেকমেন্ডেশন ইঞ্জিন */}
      <RecommendationEngine />
      
      {/* কাস্টমার রিভিউ */}
      <CustomerReviews />
      
      {/* লাইভ চ্যাট সাপোর্ট */}
      <ChatSupport />
    </div>
  )
}

// app/page.tsx
import React from 'react'
import ProductList from '@/components/ProductList'
import FeaturedCarousel from '@/components/FeaturedCarousel'
import NewsletterSignup from '@/components/NewsletterSignup'
import CustomerReviews from '@/components/CustomerReviews'
import dynamic from 'next/dynamic'

// লেজি লোডিং কম্পোনেন্ট
const PaymentGateway = dynamic(() => import('@/components/PaymentGateway'), {
  loading: () => <div className="h-40 bg-gray-100 animate-pulse rounded-md"></div>,
  ssr: true
})

const RecommendationEngine = dynamic(() => import('@/components/RecommendationEngine'), {
  loading: () => <div className="h-60 bg-gray-100 animate-pulse rounded-md"></div>,
  ssr: false // ক্লায়েন্ট সাইডে রেন্ডার হবে
})

// ইন্টারসেকশন অবজারভার দিয়ে লেজি লোড
const ChatSupport = dynamic(() => import('@/components/ChatSupport'), {
  loading: () => <div className="h-20 bg-gray-100 rounded-md"></div>,
  ssr: false
})

// এডমিন-ওনলি কম্পোনেন্ট
const SalesChart = dynamic(() => import('@/components/SalesChart'), {
  ssr: false
})

export default function HomePage() {
  return (
    <div className="container mx-auto">
      <h1 className="text-3xl font-bold my-6">আমাদের ই-কমার্স স্টোর</h1>
      
      {/* প্রাথমিক লোডে প্রয়োজনীয় কম্পোনেন্ট */}
      <FeaturedCarousel />
      <ProductList />
      
      {/* লেজি লোডেড কম্পোনেন্ট */}
      <PaymentGateway />
      <NewsletterSignup />
      
      {/* ফোল্ডের নিচে থাকা কম্পোনেন্ট */}
      <RecommendationEngine />
      <CustomerReviews />
      
      {/* কন্ডিশনাল রেন্ডারিং */}
      <AdminOnlyComponent>
        <SalesChart />
      </AdminOnlyComponent>
      
      {/* ইন্টারসেকশন অবজারভার দিয়ে লেজি লোড */}
      <LazyLoadComponent>
        <ChatSupport />
      </LazyLoadComponent>
    </div>
  )
}

// এডমিন চেক কম্পোনেন্ট
function AdminOnlyComponent({ children }) {
  const [isAdmin, setIsAdmin] = React.useState(false)
  
  React.useEffect(() => {
    // এডমিন চেক লজিক
    const checkAdminStatus = async () => {
      try {
        const response = await fetch('/api/check-admin')
        const data = await response.json()
        setIsAdmin(data.isAdmin)
      } catch (error) {
        console.error('Admin check failed:', error)
      }
    }
    
    checkAdminStatus()
  }, [])
  
  if (!isAdmin) return null
  return children
}

// ইন্টারসেকশন অবজারভার কম্পোনেন্ট
function LazyLoadComponent({ children }) {
  const [isVisible, setIsVisible] = React.useState(false)
  const ref = React.useRef(null)
  
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          observer.disconnect()
        }
      },
      { rootMargin: '200px' } // 200px আগে থেকে লোড শুরু করবে
    )
    
    if (ref.current) {
      observer.observe(ref.current)
    }
    
    return () => {
      if (ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [])
  
  return (
    <div ref={ref}>
      {isVisible ? children : <div className="h-20 bg-gray-100 rounded-md"></div>}
    </div>
  )
}