<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { usePostHog } from '@/composables/usePostHog'
import MarketingNav from '@/components/marketing/MarketingNav.vue'
import MarketingFooter from '@/components/marketing/MarketingFooter.vue'
import HeroSection from '@/components/marketing/HeroSection.vue'
import InteractiveDemo from '@/components/marketing/InteractiveDemo.vue'
import ProblemSolution from '@/components/marketing/ProblemSolution.vue'
import FeedbackLoop from '@/components/marketing/FeedbackLoop.vue'
import CapabilitiesGrid from '@/components/marketing/CapabilitiesGrid.vue'
import CliShowcase from '@/components/marketing/CliShowcase.vue'
import ProductMockup from '@/components/marketing/ProductMockup.vue'
import PricingSection from '@/components/marketing/PricingSection.vue'
import IntegrationsGrid from '@/components/marketing/IntegrationsGrid.vue'
import SetupSteps from '@/components/marketing/SetupSteps.vue'
import CtaSection from '@/components/marketing/CtaSection.vue'

const { track } = usePostHog()

let observer: IntersectionObserver | null = null

onMounted(() => {
  // Track section visibility for scroll depth analytics
  const sections = document.querySelectorAll('section[id]')
  observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          track('landing_section_viewed', { section: (entry.target as HTMLElement).id })
          observer?.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.3 }
  )
  sections.forEach((el) => observer!.observe(el))
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <MarketingNav />

    <main class="flex-1">
      <HeroSection />
      <InteractiveDemo />
      <ProblemSolution />
      <FeedbackLoop />
      <CapabilitiesGrid />
      <CliShowcase />
      <ProductMockup />
      <PricingSection />
      <IntegrationsGrid />
      <SetupSteps />
      <CtaSection />
    </main>

    <MarketingFooter />
  </div>
</template>
