<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router'
import CorrosionMark from '@/components/brand/CorrosionMark.vue'
import '@/styles/marketing.css'

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

<template>
  <div>
    <!-- Nav -->
    <nav class="mkt-nav">
      <div class="wrap mkt-nav__in">
        <RouterLink :to="{ name: 'landing' }" class="brand">
          <span class="mark"><CorrosionMark :size="26" /></span>
          <b>Corrosion</b>
        </RouterLink>
        <div class="mkt-nav__links">
          <RouterLink :to="{ name: 'landing' }" class="scroll-link">Features</RouterLink>
          <RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
          <RouterLink :to="{ name: 'how-it-works' }">How it works</RouterLink>
          <RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
          <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
        </div>
        <div class="mkt-nav__cta">
          <a class="mkt-nav__signin" :href="panelUrl + '/login'">Sign in</a>
          <RouterLink class="btn btn--primary btn--sm" :to="{ name: 'early-access' }">
            Early access
          </RouterLink>
        </div>
      </div>
    </nav>

    <!-- Page content -->
    <RouterView />

    <!-- Footer -->
    <footer class="mkt-footer">
      <div class="wrap">
        <div class="footer__cols">
          <div class="footer__brand">
            <RouterLink :to="{ name: 'landing' }" class="brand">
              <span class="mark"><CorrosionMark :size="24" /></span>
              <b>Corrosion</b>
            </RouterLink>
            <p>Game server operations for self-hosted communities.</p>
          </div>
          <div class="footer__col">
            <h5>Product</h5>
            <RouterLink :to="{ name: 'landing' }">Supported games</RouterLink>
            <RouterLink :to="{ name: 'landing' }">Features</RouterLink>
            <RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
            <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
          </div>
          <div class="footer__col">
            <h5>Games</h5>
            <RouterLink :to="{ name: 'landing' }">Rust</RouterLink>
            <RouterLink :to="{ name: 'landing' }">Dune: Awakening</RouterLink>
            <RouterLink :to="{ name: 'landing' }">Soulmask</RouterLink>
            <RouterLink :to="{ name: 'landing' }">Conan Exiles</RouterLink>
          </div>
          <div class="footer__col">
            <h5>Support</h5>
            <RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
            <RouterLink to="/status">Status</RouterLink>
          </div>
          <div class="footer__col">
            <h5>Company</h5>
            <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
            <a href="mailto:support@corrosionmgmt.com">Contact</a>
          </div>
        </div>
        <div class="footer__bar">
          <span>&copy; 2026 Corrosion. All rights reserved.</span>
          <span>One control plane. Every game.</span>
        </div>
      </div>
    </footer>
  </div>
</template>
