"use client"

import { useCallback, 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 {
  LandingAppsSection,
  LandingFeaturesSection,
  LandingFooter,
  LandingIntegrationsSection,
  LandingSovereigntySection,
} from "@/components/landing/landing-sections"

export function LandingPage() {
  const scrollRef = useRef<HTMLDivElement>(null)
  const [scrolled, setScrolled] = useState(false)
  const [demoActiveTab, setDemoActiveTab] = useState("mail")
  const [demoRevealNonce, setDemoRevealNonce] = useState(0)

  const openDemo = useCallback((tabId: string | null) => {
    if (tabId) setDemoActiveTab(tabId)
    setDemoRevealNonce((n) => n + 1)
    requestAnimationFrame(() => {
      document.getElementById("demo")?.scrollIntoView({ behavior: "smooth", block: "start" })
    })
  }, [])

  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))
      }}
    >
      <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 onOpenDemo={openDemo} />
          <LandingIntegrationsSection />
          <LandingDemoSection
            activeTab={demoActiveTab}
            onActiveTabChange={setDemoActiveTab}
            revealNonce={demoRevealNonce}
          />
          <LandingAppsSection />
          <LandingFeaturesSection />
          <LandingSovereigntySection />
        </main>
        <LandingFooter />
      </div>
    </div>
  )
}