<template>
  <div class="landing-page">
    <!-- Sticky nav -->
    <nav class="landing-nav" :class="{ 'landing-nav-scrolled': scrolled }">
      <div class="nav-inner">
        <img src="/images/c_logo.png" alt="Chorly" class="nav-logo" @click="scrollToTop" />
        <button class="nav-signin" @click="goToLogin">Sign In</button>
      </div>
    </nav>

    <LandingHero />
    <LandingProblem />
    <LandingFeatures />
    <LandingFooter />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import LandingHero from '@/components/landing/LandingHero.vue'
import LandingProblem from '@/components/landing/LandingProblem.vue'
import LandingFeatures from '@/components/landing/LandingFeatures.vue'
import LandingFooter from '@/components/landing/LandingFooter.vue'

const router = useRouter()
const scrolled = ref(false)

function onScroll() {
  scrolled.value = window.scrollY > 40
}

function goToLogin() {
  router.push({ name: 'Login' })
}

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

onMounted(() => {
  window.addEventListener('scroll', onScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})
</script>

<style scoped>
.landing-page {
  min-height: 100svh;
  overflow-x: hidden;
}

/* ── Sticky nav ── */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.9rem 1.5rem;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    border-bottom 0.25s;
}

.landing-nav-scrolled {
  background: rgba(26, 24, 48, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--landing-nav-border);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  height: 34px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  cursor: pointer;
}

.nav-signin {
  background: var(--landing-glass-bg);
  border: 1px solid var(--landing-glass-border);
  color: #fff;
  padding: 0.45rem 1.2rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.nav-signin:hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Mobile */
@media (max-width: 480px) {
  .landing-nav {
    padding: 0.75rem 1rem;
  }

  .nav-logo {
    height: 28px;
  }
}
</style>
