"use client"

import { useRef, useState } from "react"
import { LandingDemoSection } from "@/components/landing/landing-demo"
import { LandingHeader } from "@/components/landing/landing-header"
import { LandingHero } from "@/components/landing/landing-hero"
import { LandingThemeApplier } from "@/components/landing/landing-theme-applier"
import {
  LandingAppsSection,
  LandingFeaturesSection,
  LandingFooter,
  LandingIntegrationsSection,
  LandingSovereigntySection,
} from "@/components/landing/landing-sections"

export function LandingPage() {
  const scrollRef = useRef<HTMLDivElement>(null)
  const [scrolled, setScrolled] = useState(false)

  return (
    <div
      ref={scrollRef}
      className="landing-root relative h-dvh overflow-y-auto overflow-x-hidden"
      onScroll={() => {
        const top = scrollRef.current?.scrollTop ?? 0
        setScrolled((prev) => (top > 8 ? true : top <= 2 ? false : prev))
      }}
    >
      <LandingThemeApplier />
      <div className="landing-backdrop" aria-hidden>
        <div className="landing-orb landing-orb--a" />
        <div className="landing-orb landing-orb--b" />
        <div className="landing-orb landing-orb--c" />
      </div>

      <div className="relative z-10 flex min-h-full flex-col">
        <LandingHeader scrolled={scrolled} />
        <main className="flex-1">
          <LandingHero />
          <LandingIntegrationsSection />
          <LandingDemoSection />
          <LandingAppsSection />
          <LandingFeaturesSection />
          <LandingSovereigntySection />
        </main>
        <LandingFooter />
      </div>
    </div>
  )
}