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

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

// Scroll-reveal
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(() => { initReveal() })
onUnmounted(() => { io?.disconnect() })
</script>

<template>
  <!-- PAGE HEADER -->
  <section class="hero" style="padding-bottom:0; border-bottom:none;">
    <div class="hero__atmo" />
    <div class="hero__grid" />
    <div class="hero__grain" />
    <div class="wrap hero__in" style="padding-bottom:52px;">
      <div class="hero__mark">
        <CorrosionMark :size="56" />
      </div>
      <span class="eyebrow">How it works</span>
      <h1 style="font-size:var(--text-5xl)">
        One re-Agent.
        <span class="accent">Every game. No SSH.</span>
      </h1>
      <p class="hero__sub">
        Install re-Agent once on your Windows or Linux machine. Corrosion connects
        securely, outbound-only. You manage every game instance from Catalyst Console.
      </p>
    </div>
  </section>

  <!-- THE MODEL: 3-STEP OVERVIEW -->
  <section class="sec" id="model">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">The re-Agent model</span>
        <h2 class="title">Bring your own server.<br>We provide the control plane.</h2>
        <p class="lead">
          Corrosion is not a hosting provider. You supply the hardware or the VPS. re-Agent
          runs on that machine and bridges your game instances to Corrosion's control
          plane — securely, without opening inbound firewall ports.
        </p>
      </div>
      <div class="steps reveal">
        <div class="step">
          <div class="step__n">1</div>
          <b>Install re-Agent</b>
          <p>
            Download the re-Agent binary from your dashboard. Run it on any Windows
            or Linux host. One agent per machine — it manages every game instance you assign
            to it.
          </p>
        </div>
        <div class="step">
          <div class="step__n">2</div>
          <b>It connects to Corrosion</b>
          <p>
            re-Agent makes a single outbound NATS connection to Corrosion's cloud. No
            inbound ports. No open panels. No SSH required after initial setup.
          </p>
        </div>
        <div class="step">
          <div class="step__n">3</div>
          <b>Deploy and manage from the browser</b>
          <p>
            Create game instances, run wipes, manage plugins, schedule maintenance, and
            monitor players — all from Catalyst Console at panel.corrosionmgmt.com.
          </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 permanent SSH sessions</span>
        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No config file spelunking</span>
        <span><Icon name="check" :size="16" style="color:var(--status-online)" />Windows and Linux supported</span>
      </div>
    </div>
  </section>

  <!-- MULTI-GAME RUNTIME -->
  <section class="sec" id="multi-game">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Multi-game host runtime</span>
        <h2 class="title">One agent. Multiple game worlds<br>on the same machine.</h2>
        <p class="lead">
          re-Agent is not a per-game process. It is a general-purpose ops runtime. One
          re-Agent on a single machine can supervise multiple game server processes across
          different games — each with its own configuration, lifecycle, and wipe schedule.
        </p>
      </div>

      <div class="blueprints reveal">
        <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">uMod / Oxide plugin ecosystem</div>
          <div class="bp__list">
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Map / BP / full wipe scheduling</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Plugin config profiles from the browser</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Wipe-day backup before every change</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" />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" />Port and config automation</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Cluster health monitoring</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 management + world backups</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Purge, decay, and event tracking</div>
            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Scheduled maintenance workflows</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- WIPE AND MAINTENANCE AUTOMATION -->
  <section class="sec" id="automation">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Wipe and maintenance automation</span>
        <h2 class="title">Self-service workflows,<br>not manual processes</h2>
        <p class="lead">
          Every wipe, update, and maintenance window runs as a verified, logged sequence.
          Pre-warning announcements, pre-wipe backups, health checks after restart, and
          rollback capability when things go wrong.
        </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 / rotate</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. Every step is verified.</span>
        <span class="hi">Rollback is one click away when supported.</span>
      </div>
    </div>
  </section>

  <!-- ARCHITECTURE: HOW CONNECTIVITY WORKS -->
  <section class="sec" id="connectivity">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Connectivity model</span>
        <h2 class="title">Outbound-only. No exposed panel.</h2>
        <p class="lead">
          re-Agent establishes one secure NATS connection to Corrosion's cloud. All
          commands flow through that channel. Your machine never needs to accept inbound
          connections from the internet.
        </p>
      </div>

      <div class="infra reveal">
        <div class="icard">
          <div class="icard__ic"><Icon name="server" :size="16" /></div>
          <b>Your host machine</b>
          <p>Windows or Linux. Bare metal, VPS, or dedicated. You own it and run it.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
          <b>re-Agent</b>
          <p>A single binary. Runs as a service. Manages game processes, files, and updates.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
          <b>Outbound NATS channel</b>
          <p>One secure, outbound-only connection. No open ports. No SSH tunnels.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
          <b>Corrosion cloud</b>
          <p>Hosted control plane. Multi-tenant isolation. Every command is license-scoped.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="layout-dashboard" :size="16" /></div>
          <b>Your browser</b>
          <p>Catalyst Console at panel.corrosionmgmt.com. Console, wipes, plugins, schedules — all here.</p>
        </div>
      </div>

      <div class="techrow reveal">
        <span>re-Agent</span>
        <span>NATS JetStream</span>
        <span>NestJS API</span>
        <span>PostgreSQL</span>
        <span>Outbound-only connectivity</span>
      </div>
    </div>
  </section>

  <!-- HOST REQUIREMENTS -->
  <section class="sec" id="requirements">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Host requirements</span>
        <h2 class="title">What you need to get started</h2>
      </div>

      <div class="caps reveal" style="max-width:760px">
        <div class="caps__col">
          <span class="eyebrow">Your machine</span>
          <div class="feat">
            <span class="feat__ic"><Icon name="server" :size="16" /></span>
            <div>
              <b>Windows or Linux host</b>
              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
                VPS, dedicated server, or bare metal. You supply it; Corrosion manages it.
              </p>
            </div>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="hard-drive" :size="16" /></span>
            <div>
              <b>Enough CPU and RAM for your game</b>
              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
                re-Agent is lightweight. Your game server determines the actual
                hardware requirement.
              </p>
            </div>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="wifi" :size="16" /></span>
            <div>
              <b>Outbound internet access</b>
              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
                re-Agent connects out; your game server's player ports stay open as they
                always have been.
              </p>
            </div>
          </div>
        </div>
        <div class="caps__col">
          <span class="eyebrow">From Corrosion</span>
          <div class="feat">
            <span class="feat__ic"><Icon name="download" :size="16" /></span>
            <div>
              <b>re-Agent binary (Windows or Linux)</b>
              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
                Downloaded from your dashboard. No manual build. No dependency management.
              </p>
            </div>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="key" :size="16" /></span>
            <div>
              <b>Your license key</b>
              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
                Issued when you register. re-Agent uses it to authenticate to the cloud.
              </p>
            </div>
          </div>
          <div class="feat">
            <span class="feat__ic"><Icon name="globe" :size="16" /></span>
            <div>
              <b>Catalyst Console</b>
              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
                Everything else — console, wipes, schedules, players — lives at
                panel.corrosionmgmt.com.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="finalcta">
    <div class="finalcta__atmo" />
    <div class="wrap finalcta__in reveal">
      <h2>Install re-Agent.<br>Never SSH again.</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>
