<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router'

const panelUrl = import.meta.env.VITE_PANEL_URL || ''
</script>

<template>
  <div class="min-h-screen bg-neutral-950 flex flex-col">
    <!-- Navigation -->
    <nav class="border-b border-neutral-800 bg-neutral-950/80 backdrop-blur-sm sticky top-0 z-50">
      <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
        <RouterLink :to="{ name: 'landing' }" class="flex items-center gap-3">
          <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
          <span class="text-lg font-bold text-neutral-100">Corrosion</span>
        </RouterLink>
        <div class="hidden md:flex items-center gap-6">
          <RouterLink :to="{ name: 'how-it-works' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">How It Works</RouterLink>
          <RouterLink :to="{ name: 'pricing' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Pricing</RouterLink>
          <RouterLink :to="{ name: 'roadmap' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Roadmap</RouterLink>
          <RouterLink :to="{ name: 'faq' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">FAQ</RouterLink>
        </div>
        <div class="flex items-center gap-3">
          <a :href="panelUrl + '/login'" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Sign In</a>
          <a :href="panelUrl + '/register'" class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors">Get Started</a>
        </div>
      </div>
    </nav>

    <!-- Page content -->
    <main class="flex-1">
      <RouterView />
    </main>

    <!-- Footer -->
    <footer class="border-t border-neutral-800 py-12">
      <div class="max-w-6xl mx-auto px-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
          <div>
            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Product</h4>
            <div class="space-y-2">
              <RouterLink :to="{ name: 'how-it-works' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">How It Works</RouterLink>
              <RouterLink :to="{ name: 'pricing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Pricing</RouterLink>
              <RouterLink :to="{ name: 'roadmap' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Roadmap</RouterLink>
            </div>
          </div>
          <div>
            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Support</h4>
            <div class="space-y-2">
              <RouterLink :to="{ name: 'faq' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">FAQ</RouterLink>
              <a href="https://discord.gg/corrosion" target="_blank" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Discord</a>
            </div>
          </div>
          <div>
            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Company</h4>
            <div class="space-y-2">
              <RouterLink :to="{ name: 'landing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">About</RouterLink>
              <RouterLink to="/status" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Status</RouterLink>
            </div>
          </div>
          <div>
            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Legal</h4>
            <div class="space-y-2">
              <span class="block text-sm text-neutral-600">Terms of Service</span>
              <span class="block text-sm text-neutral-600">Privacy Policy</span>
            </div>
          </div>
        </div>
        <div class="border-t border-neutral-800 pt-6 flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
            <span class="text-sm text-neutral-600">&copy; 2026 Corrosion. All rights reserved.</span>
          </div>
          <span class="text-xs text-neutral-700">The Control Plane for Rust Servers.</span>
        </div>
      </div>
    </footer>
  </div>
</template>
