<script setup lang="ts">
import { Download, Globe, Wifi, LayoutDashboard, ArrowDown } from 'lucide-vue-next'
</script>

<template>
  <div>
    <!-- Header -->
    <section class="pt-20 pb-12">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">How Corrosion Works</h1>
        <p class="text-lg text-neutral-400">
          Corrosion connects your Rust server to a hosted control plane — securely, outbound-only.
        </p>
      </div>
    </section>

    <!-- Steps -->
    <section class="pb-20">
      <div class="max-w-3xl mx-auto px-6">
        <div class="space-y-2">
          <!-- Step 1 -->
          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
            <div class="flex items-start gap-6">
              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
                <Download class="w-6 h-6 text-oxide-500" />
              </div>
              <div>
                <div class="flex items-center gap-3 mb-2">
                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 1</span>
                </div>
                <h3 class="text-xl font-bold text-neutral-100 mb-2">Install the Plugin</h3>
                <p class="text-neutral-400">
                  Drop the Corrosion plugin into <code class="px-2 py-0.5 bg-neutral-800 rounded text-oxide-300 text-sm">oxide/plugins</code>.
                  That's it. No dependencies, no config files to create.
                </p>
              </div>
            </div>
          </div>

          <div class="flex justify-center py-1">
            <ArrowDown class="w-5 h-5 text-neutral-700" />
          </div>

          <!-- Step 2 -->
          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
            <div class="flex items-start gap-6">
              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
                <Globe class="w-6 h-6 text-oxide-500" />
              </div>
              <div>
                <div class="flex items-center gap-3 mb-2">
                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 2</span>
                </div>
                <h3 class="text-xl font-bold text-neutral-100 mb-2">Register Online</h3>
                <p class="text-neutral-400">
                  Activate your license and configure your server. Set your hostname, game port, and admin preferences.
                </p>
              </div>
            </div>
          </div>

          <div class="flex justify-center py-1">
            <ArrowDown class="w-5 h-5 text-neutral-700" />
          </div>

          <!-- Step 3 -->
          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
            <div class="flex items-start gap-6">
              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
                <Wifi class="w-6 h-6 text-oxide-500" />
              </div>
              <div>
                <div class="flex items-center gap-3 mb-2">
                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 3</span>
                </div>
                <h3 class="text-xl font-bold text-neutral-100 mb-2">Secure Outbound Connection</h3>
                <p class="text-neutral-400">
                  Your server connects securely to Corrosion's NATS cluster. No inbound firewall rules required. Your server initiates all connections.
                </p>
              </div>
            </div>
          </div>

          <div class="flex justify-center py-1">
            <ArrowDown class="w-5 h-5 text-neutral-700" />
          </div>

          <!-- Step 4 -->
          <div class="bg-neutral-900 border border-oxide-500/30 rounded-xl p-8">
            <div class="flex items-start gap-6">
              <div class="w-12 h-12 bg-oxide-500/15 border border-oxide-500/30 rounded-xl flex items-center justify-center shrink-0">
                <LayoutDashboard class="w-6 h-6 text-oxide-400" />
              </div>
              <div>
                <div class="flex items-center gap-3 mb-2">
                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 4</span>
                </div>
                <h3 class="text-xl font-bold text-neutral-100 mb-2">Full Orchestration</h3>
                <p class="text-neutral-400 mb-4">From the dashboard, you can:</p>
                <ul class="space-y-2">
                  <li class="text-neutral-300 text-sm flex items-center gap-2">
                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
                    Execute console commands
                  </li>
                  <li class="text-neutral-300 text-sm flex items-center gap-2">
                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
                    Configure plugins
                  </li>
                  <li class="text-neutral-300 text-sm flex items-center gap-2">
                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
                    Schedule wipes
                  </li>
                  <li class="text-neutral-300 text-sm flex items-center gap-2">
                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
                    Monitor performance
                  </li>
                  <li class="text-neutral-300 text-sm flex items-center gap-2">
                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
                    Automate Steam updates
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
      <div class="max-w-3xl mx-auto px-6 text-center">
        <h2 class="text-2xl font-bold text-neutral-100 mb-10">Architecture Overview</h2>
        <div class="space-y-3">
          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Rust Server</div>
          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Corrosion Plugin</div>
          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Secure NATS Messaging</div>
          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Corrosion Cloud</div>
          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Dashboard + Store + Analytics</div>
        </div>
        <p class="text-neutral-500 mt-10">
          Corrosion does not proxy gameplay traffic. It orchestrates operations.
        </p>
      </div>
    </section>
  </div>
</template>
