<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { RouterLink } from 'vue-router'
import CorrosionMark from '@/components/brand/CorrosionMark.vue'
import Icon from '@/components/ds/core/Icon.vue'
import { useThemeGame, type Game } from '@/composables/useThemeGame'

const { setGame } = useThemeGame()

const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''

// ---- Game pill data ----
interface GameDef {
  key: Game
  label: string
  icon: string
}

const GAMES: GameDef[] = [
  { key: 'rust',     label: 'Rust',            icon: 'box'    },
  { key: 'dune',     label: 'Dune: Awakening', icon: 'sun'    },
  { key: 'soulmask', label: 'Soulmask',         icon: 'drama'  },
  { key: 'conan',    label: 'Conan Exiles',     icon: 'swords' },
]

const activeGame = ref<Game>('rust')
const userPicked = ref(false)
let rotateTimer: ReturnType<typeof setInterval> | null = null
let idx = 0

function pickGame(g: Game): void {
  userPicked.value = true
  activeGame.value = g
  setGame(g)
}

function heroIsVisible(): boolean {
  const hero = document.querySelector('.hero')
  if (!hero) return false
  return hero.getBoundingClientRect().bottom >= 140
}

function startRotation(): void {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
  rotateTimer = setInterval(() => {
    if (userPicked.value || !heroIsVisible()) return
    idx = (idx + 1) % GAMES.length
    const next = GAMES[idx]
    if (next) {
      activeGame.value = next.key
      setGame(next.key)
    }
  }, 3400)
}

// ---- Scroll-reveal via IntersectionObserver ----
let io: IntersectionObserver | null = null

function initReveal(): void {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
  io = new IntersectionObserver(
    (entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in')
          io?.unobserve(e.target)
        }
      })
    },
    { threshold: 0.1 },
  )
  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
}

onMounted(() => {
  // Set initial game on html — stays in sync with the global composable
  setGame('rust')
  activeGame.value = 'rust'
  startRotation()
  initReveal()
})

onUnmounted(() => {
  if (rotateTimer !== null) clearInterval(rotateTimer)
  io?.disconnect()
})

// Mock sidebar game switcher active key mirrors activeGame
const mockActiveGame = activeGame
</script>

<template>
  <!-- HERO -->
  <section class="hero">
    <div class="hero__atmo" />
    <div class="hero__grid" />
    <div class="hero__grain" />
    <div class="wrap hero__in">
      <div class="hero__mark">
        <CorrosionMark :size="72" />
      </div>
      <div class="notpill">
        <b>Not hosting.</b>&nbsp;Not a generic panel. Self-hosted, agent-based.
      </div>
      <h1>Run your game servers<span class="accent">like an operation.</span></h1>
      <p class="hero__sub">
        Corrosion is a management platform for self-hosted survival game servers. Deploy servers, automate
        wipes, manage plugins and mods, schedule maintenance, monitor players, and orchestrate
        multi-server worlds — all from Catalyst Console.
      </p>
      <div class="hero__cta">
        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
          Join early access
        </RouterLink>
        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
          <Icon name="key" :size="17" />Sign in
        </a>
      </div>
      <!-- Game pills -->
      <div class="hero__games">
        <button
          v-for="g in GAMES"
          :key="g.key"
          class="gpill"
          :data-on="String(activeGame === g.key)"
          @click="pickGame(g.key)"
        >
          <Icon :name="g.icon" :size="15" />
          <span>{{ g.label }}</span>
        </button>
      </div>
    </div>

    <!-- Panel mockup -->
    <div class="wrap">
      <div class="mock">
        <div class="mock__bar">
          <div class="mock__dots">
            <span /><span /><span />
          </div>
          <div class="mock__url">panel.corrosionmgmt.com / fleet</div>
        </div>
        <div class="mock__body">
          <aside class="mock__side">
            <div class="mock__brand">
              <span class="mark"><CorrosionMark :size="18" /></span>
              <b>Catalyst</b>
            </div>
            <div class="mock__gs">
              <span :class="{ on: mockActiveGame === 'rust' }">
                <Icon name="box" :size="13" />
              </span>
              <span :class="{ on: mockActiveGame === 'dune' }">
                <Icon name="sun" :size="13" />
              </span>
              <span :class="{ on: mockActiveGame === 'soulmask' }">
                <Icon name="drama" :size="13" />
              </span>
              <span :class="{ on: mockActiveGame === 'conan' }">
                <Icon name="swords" :size="13" />
              </span>
            </div>
            <div class="mock__nav on"><Icon name="layout-dashboard" :size="14" />Dashboard</div>
            <div class="mock__nav"><Icon name="server" :size="14" />Servers</div>
            <div class="mock__nav"><Icon name="terminal" :size="14" />Console</div>
            <div class="mock__nav"><Icon name="trash-2" :size="14" />Wipes</div>
            <div class="mock__nav"><Icon name="cpu" :size="14" />Agents</div>
          </aside>
          <main class="mock__main">
            <div class="mock__kpis">
              <div class="mock__kpi">
                <div class="l">Servers running</div>
                <div class="v">5<small>/6</small></div>
              </div>
              <div class="mock__kpi">
                <div class="l">Players online</div>
                <div class="v">234</div>
              </div>
              <div class="mock__kpi">
                <div class="l">re-Agent nodes</div>
                <div class="v">2<small>/2</small></div>
              </div>
            </div>
            <div class="mock__row">
              <span class="g"><Icon name="box" :size="13" /></span>
              <span class="nm">
                Main · 2x Vanilla
                <small>rust-host · rust</small>
              </span>
              <span class="st"><b />online</span>
            </div>
            <div class="mock__row">
              <span class="g"><Icon name="sun" :size="13" /></span>
              <span class="nm">
                Arrakis · Hardcore
                <small>dune-host · dune</small>
              </span>
              <span class="st"><b />online</span>
            </div>
            <div class="mock__row">
              <span class="g"><Icon name="drama" :size="13" /></span>
              <span class="nm">
                Ritual Cluster · PvE
                <small>soul-host · soulmask</small>
              </span>
              <span class="st"><b />online</span>
            </div>
            <div class="mock__row">
              <span class="g"><Icon name="swords" :size="13" /></span>
              <span class="nm">
                Exiled Lands · PvP-C
                <small>conan-host · conan</small>
              </span>
              <span class="st"><b />online</span>
            </div>
          </main>
        </div>
      </div>
    </div>
    <div class="wrap" style="text-align:center">
      <div class="hero__foot">
        One re-Agent, many game instances · Rust · Dune: Awakening · Soulmask · Conan Exiles ·
        Windows &amp; Linux hosts
      </div>
    </div>
    <div style="height:80px" />
  </section>

  <!-- PROBLEM -->
  <section class="sec" id="problem">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">The problem</span>
        <h2 class="title">Game servers were never supposed<br>to be babysitting duty</h2>
      </div>
      <div class="pain reveal">
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Editing configs over SFTP
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Manually updating mods &amp; plugins
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Guessing when a server crashed
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Running wipe day by hand
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Juggling community bots &amp; cron tasks
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Linking multi-server clusters manually
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Managing admins without real permissions
        </div>
        <div class="pain__item">
          <span class="pain__x"><Icon name="x" :size="14" /></span>
          Explaining downtime to players
        </div>
      </div>
      <p class="closing reveal">
        Your community sees the server. You deal with the chaos.<br>
        <span class="accent">Catalyst Console gives you the control plane.</span>
      </p>
    </div>
  </section>

  <!-- SHIFT -->
  <section class="sec" id="shift">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">The shift</span>
        <h2 class="title">Drop in re-Agent.<br>Take control from Catalyst Console.</h2>
        <p class="lead">
          One lightweight re-Agent runs on your machine and manages every game instance you assign
          to it — an outbound-only ops runtime, not an exposed panel.
        </p>
      </div>
      <div class="steps reveal">
        <div class="step">
          <div class="step__n">1</div>
          <b>Install re-Agent</b>
          <p>One runtime on your Windows or Linux host. Outbound connection only.</p>
        </div>
        <div class="step">
          <div class="step__n">2</div>
          <b>Register your server or fleet</b>
          <p>Connect one server, a cluster, or multiple game worlds on the same box.</p>
        </div>
        <div class="step">
          <div class="step__n">3</div>
          <b>Manage from the browser</b>
          <p>Console, files, schedules, wipes, plugins, mods, players, backups, metrics.</p>
        </div>
      </div>
      <div class="nots reveal">
        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No open inbound ports</span>
        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No constant SSH sessions</span>
        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No config spelunking</span>
        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No fragile scripts</span>
      </div>
      <p class="closing reveal" style="font-size:var(--text-lg)">
        You provide the machine.
        <span class="accent">Catalyst Console provides the control plane.</span>
      </p>
    </div>
  </section>

  <!-- BLUEPRINTS / SUPPORTED GAMES -->
  <section class="sec" id="blueprints">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Supported games</span>
        <h2 class="title">Game-aware Formulae,<br>not generic configs</h2>
        <p class="lead">
          Every game has a different operational reality. Corrosion models each one as a Formula — Rust wipes, Dune: Awakening battlegroups, Soulmask clusters, Conan persistent
          worlds.
        </p>
      </div>
      <div class="blueprints reveal">
        <!-- Rust card — sets its own game scope via inline style on the surrounding element.
             The token system resolves var(--accent) from data-game on <html> (set globally by
             useThemeGame). Cards carry a data-game attr for future per-card scoping if desired. -->
        <div class="bp" data-game="rust">
          <div class="bp__head">
            <span class="bp__ic"><Icon name="box" :size="21" /></span>
            <div>
              <div class="bp__name">Rust</div>
              <div class="bp__accent">Oxide Orange</div>
            </div>
          </div>
          <div class="bp__role">Modded server operations</div>
          <div class="bp__list">
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />uMod / Oxide plugin browsing</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Plugin config profiles</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Map / blueprint / full wipes</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Wipe schedules &amp; map library</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Player &amp; admin workflows</div>
          </div>
        </div>
        <div class="bp" data-game="dune">
          <div class="bp__head">
            <span class="bp__ic"><Icon name="sun" :size="21" /></span>
            <div>
              <div class="bp__name">Dune: Awakening</div>
              <div class="bp__accent">Spice Amber</div>
            </div>
          </div>
          <div class="bp__role">Battlegroup orchestration</div>
          <div class="bp__list">
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Deep Desert wipe scheduling</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Procedural map regeneration</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Service health checks</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Backups before maintenance</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Battlegroup lifecycle controls</div>
          </div>
        </div>
        <div class="bp" data-game="soulmask">
          <div class="bp__head">
            <span class="bp__ic"><Icon name="drama" :size="21" /></span>
            <div>
              <div class="bp__name">Soulmask</div>
              <div class="bp__accent">Ritual Jade</div>
            </div>
          </div>
          <div class="bp__role">Linked-world cluster deployment</div>
          <div class="bp__list">
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />One-click linked-server clusters</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Linked map validation</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Port &amp; config automation</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Cluster health</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Scheduled maintenance</div>
          </div>
        </div>
        <div class="bp" data-game="conan">
          <div class="bp__head">
            <span class="bp__ic"><Icon name="swords" :size="21" /></span>
            <div>
              <div class="bp__name">Conan Exiles</div>
              <div class="bp__accent">Hyborian Bronze</div>
            </div>
          </div>
          <div class="bp__role">Persistent world management</div>
          <div class="bp__list">
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Mod &amp; server management</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Clan &amp; player visibility</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Purge, decay &amp; event tracking</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Backup &amp; restart scheduling</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />World maintenance workflows</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CAPABILITIES -->
  <section class="sec" id="caps">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Core capabilities</span>
        <h2 class="title">Everything an operator needs</h2>
      </div>
      <div class="caps reveal">
        <div class="caps__col">
          <span class="eyebrow">Operations</span>
          <div class="feat">
            <span class="feat__ic"><Icon name="power" :size="16" /></span>
            <b>Server lifecycle control</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="terminal" :size="16" /></span>
            <b>Real-time console</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="users" :size="16" /></span>
            <b>Player visibility</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="folder-open" :size="16" /></span>
            <b>File manager</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="calendar-clock" :size="16" /></span>
            <b>Scheduled tasks &amp; restart windows</b>
          </div>
        </div>
        <div class="caps__col">
          <span class="eyebrow">Automation</span>
          <div class="feat">
            <span class="feat__ic"><Icon name="refresh-cw" :size="16" /></span>
            <b>Wipe orchestration</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="database-backup" :size="16" /></span>
            <b>Backup-before-change</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="download" :size="16" /></span>
            <b>SteamCMD / game updates</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="bell" :size="16" /></span>
            <b>Webhook / status announcements</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="undo-2" :size="16" /></span>
            <b>Health checks &amp; rollback</b>
          </div>
        </div>
        <div class="caps__col">
          <span class="eyebrow">Game systems</span>
          <div class="feat">
            <span class="feat__ic"><Icon name="puzzle" :size="16" /></span>
            <b>Rust plugins &amp; configs</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="sun" :size="16" /></span>
            <b>Dune: Awakening battlegroups</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="drama" :size="16" /></span>
            <b>Soulmask clusters</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="swords" :size="16" /></span>
            <b>Conan mods &amp; events</b>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="store" :size="16" /></span>
            <b>Public pages &amp; storefront</b>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- WIPE & MAINTENANCE ORCHESTRATION -->
  <section class="sec" id="wipe">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Wipe &amp; maintenance orchestration</span>
        <h2 class="title">Wipes should be workflows,<br>not rituals</h2>
        <p class="lead">
          Rust map / BP / full wipes. Dune: Awakening Deep Desert wipes. Soulmask &amp; Conan
          maintenance and event resets — all as verified, logged sequences.
        </p>
      </div>
      <div class="pipe reveal">
        <span class="pchip">Pre-warning</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip">Backup</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip">Stop services</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip">Update</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip">Rotate map / config</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip">Restart</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip">Health check</span>
        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
        <span class="pchip pchip--last">Announce complete</span>
      </div>
      <div class="stack-lines reveal">
        <span>Every operation is logged.</span>
        <span>Every step is verified.</span>
        <span class="hi">Rollback is one click away when supported.</span>
      </div>
    </div>
  </section>

  <!-- BUILT LIKE INFRASTRUCTURE -->
  <section class="sec" id="platform">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Built like infrastructure</span>
        <h2 class="title">Not a skin over SSH</h2>
        <p class="lead">
          A hosted control plane plus re-Agent — with tenant isolation, command namespacing,
          health reporting, and outbound-only connectivity.
        </p>
      </div>
      <div class="infra reveal">
        <div class="icard">
          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
          <b>Agent-based control</b>
          <p>re-Agent connects to Corrosion. No exposed management panel required.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
          <b>Tenant isolated</b>
          <p>Every license, server, and command is scoped.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="route" :size="16" /></div>
          <b>Command namespaced</b>
          <p>Server actions are routed intentionally, not sprayed blindly.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
          <b>Event-driven</b>
          <p>NATS-powered messaging keeps re-Agent and Catalyst Console in sync.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="activity" :size="16" /></div>
          <b>Observable</b>
          <p>Health, metrics, task history, and agent status — all visible.</p>
        </div>
      </div>
      <div class="techrow reveal">
        <span>NestJS</span>
        <span>NATS JetStream</span>
        <span>PostgreSQL</span>
        <span>re-Agent</span>
        <span>Outbound-only</span>
      </div>
    </div>
  </section>

  <!-- PUBLIC SITES & STOREFRONT -->
  <section class="sec" id="store">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Public server sites &amp; storefront</span>
        <h2 class="title">Give your players a home base</h2>
        <p class="lead">
          Publish a server page with live status, wipe countdowns, player counts, plugin / mod lists,
          announcements, and optional storefront support.
        </p>
      </div>
      <div class="chips reveal">
        <div class="chip-card"><Icon name="globe" :size="16" style="color:var(--accent-text)" />Public server page</div>
        <div class="chip-card"><Icon name="users" :size="16" style="color:var(--accent-text)" />Live player count</div>
        <div class="chip-card"><Icon name="timer" :size="16" style="color:var(--accent-text)" />Wipe countdown</div>
        <div class="chip-card"><Icon name="puzzle" :size="16" style="color:var(--accent-text)" />Mod / plugin list</div>
        <div class="chip-card"><Icon name="megaphone" :size="16" style="color:var(--accent-text)" />Announcements</div>
        <div class="chip-card chip-card--accent"><Icon name="shopping-cart" :size="16" />Integrated webstore (coming soon)</div>
      </div>
      <p
        class="closing reveal"
        style="font-size:var(--text-md);color:var(--text-tertiary);font-weight:500"
      >
        Operate the server. Inform the players. Monetize without duct tape.
      </p>
    </div>
  </section>

  <!-- PRICING -->
  <section class="sec" id="pricing">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Pricing</span>
        <h2 class="title">Scale from one server to a fleet</h2>
      </div>
      <div class="pricing reveal">
        <div class="plan">
          <div class="plan__tag" />
          <div class="plan__name">Hobby</div>
          <div class="plan__price">$9.99<small>/mo</small></div>
          <div class="plan__scope">1–5 non-commercial servers.</div>
          <RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
        </div>
        <div class="plan">
          <div class="plan__tag" />
          <div class="plan__name">Community</div>
          <div class="plan__price">$19.99<small>/mo</small></div>
          <div class="plan__scope">6–10 non-commercial servers.</div>
          <RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
        </div>
        <div class="plan plan--feature">
          <div class="plan__tag">Most popular</div>
          <div class="plan__name">Operator</div>
          <div class="plan__price">$99.99<small>/mo</small></div>
          <div class="plan__scope">Commercial use, or up to 50 servers.</div>
          <RouterLink class="btn btn--primary" :to="{ name: 'early-access' }">Get Operator</RouterLink>
        </div>
        <div class="plan">
          <div class="plan__tag" />
          <div class="plan__name">Network</div>
          <div class="plan__price">Custom</div>
          <div class="plan__scope">50+ servers for fleets and hosting partners. Fleet Blocks add capacity.</div>
          <a class="btn btn--ghost" href="mailto:support@corrosionmgmt.com">Contact us</a>
        </div>
      </div>
      <div class="fleetblock reveal">
        <b>Fleet Block</b>
        <span class="p">+$49.99/mo</span>
        <span>each additional 50 servers — stack as many as your network needs.</span>
      </div>
      <p class="commercial reveal">
        <b>Commercial use</b> includes monetized communities, paid access, VIP slots, donations,
        sponsorship-supported servers, hosting providers, or managing servers for others.
      </p>
      <p class="support-note reveal">
        Community support is included with every plan (documentation, community forum, diagnostics,
        structured bug reports).
        <b>Direct 1:1 support</b> is available separately at $125/hour in prepaid 1-hour blocks.
        Corrosion is a tool, not a managed service.
      </p>
    </div>
  </section>

  <!-- FOR SERIOUS ADMINS -->
  <section class="sec" id="admins">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">For serious admins</span>
        <h2 class="title">Built for admins<br>who are done babysitting</h2>
      </div>
      <div class="admins reveal">
        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />You run more than a toy server.</span>
        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Your players expect uptime.</span>
        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Wipe day needs a plan.</span>
        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Mods and plugins need control.</span>
        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Admin access needs boundaries.</span>
        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Your community deserves better than guesswork.</span>
      </div>
      <p class="closing reveal accent">Stop babysitting your server. Start orchestrating it.</p>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="finalcta">
    <div class="finalcta__atmo" />
    <div class="wrap finalcta__in reveal">
      <h2>Ready to run your servers<br>like an operation?</h2>
      <div class="cta-row">
        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
          Join early access
        </RouterLink>
        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
          <Icon name="key" :size="17" />Sign in
        </a>
      </div>
    </div>
  </section>
</template>
