import { useEffect, useRef, useState } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
import { CallToAction } from './CallToAction'
import { HomeTab } from './HomeTab'
import { HomeMap } from './HomeMap' 
import { HomeAurora } from './HomeAurora'
import { HomeArchitecture } from './HomeArchitecture';
import { HomeDesign } from './HomeDesign';

function LazyHomeMapSection() {
  const [isVisible, setIsVisible] = useState(false)
  const containerRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
    const el = containerRef.current
    if (!el || isVisible) return

    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries
        if (entry.isIntersecting) {
          setIsVisible(true)
          observer.disconnect()
        }
      },
      {
        root: null,
        rootMargin: '200px 0px',
        threshold: 0.1,
      },
    )

    observer.observe(el)

    return () => {
      observer.disconnect()
    }
  }, [isVisible])

  return (
    <div ref={containerRef}>
      {isVisible ? (
        <HomeMap />
      ) : (
        <div className="max-w-7xl mx-auto px-6 py-16 text-center text-gray-400">
          <p className="text-sm md:text-base">
            Loading live node map when you scroll here…
          </p>
        </div>
      )}
    </div>
  )
}

export default function HomePage() {
  return (
    <div>
      <AnimatedSection>
        <HomeAurora />
      </AnimatedSection>

      <AnimatedSection>
        <HomeArchitecture />
      </AnimatedSection>

      <AnimatedSection>
        <HomeTab />
      </AnimatedSection>

      <AnimatedSection>
        <LazyHomeMapSection />
      </AnimatedSection>

     
        <HomeDesign />
     

   
        <CallToAction />
  
    </div>
  )
}