<script setup lang="ts">
import { Shield, Zap, RefreshCw, Terminal, Users, Wifi, Server, ChevronRight } from 'lucide-vue-next'

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

<template>
  <div>
    <!-- Hero -->
    <section class="relative overflow-hidden">
      <div class="max-w-6xl mx-auto px-6 pt-20 pb-24 text-center">
        <h1 class="text-5xl md:text-6xl font-bold text-neutral-100 mb-6 tracking-tight">
          The Control Plane<br />
          <span class="text-oxide-500">for Rust Servers</span>
        </h1>
        <p class="text-xl text-neutral-400 max-w-2xl mx-auto mb-10">
          Deploy once. Automate everything. Never SSH again.
        </p>
        <div class="flex items-center justify-center gap-4">
          <a :href="panelUrl + '/register'" class="px-8 py-3.5 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors text-lg">
            Buy License
          </a>
          <a href="#demo" class="px-8 py-3.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-semibold rounded-lg border border-neutral-700 transition-colors text-lg">
            View Live Demo
          </a>
        </div>
      </div>
      <!-- Gradient glow -->
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-oxide-500/10 rounded-full blur-3xl pointer-events-none" />
    </section>

    <!-- The Problem -->
    <section class="py-20 border-t border-neutral-800">
      <div class="max-w-4xl mx-auto px-6">
        <h2 class="text-3xl font-bold text-neutral-100 mb-8 text-center">The Problem</h2>
        <p class="text-neutral-400 text-lg mb-8 text-center">Running a Rust server today means:</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-10">
          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <span class="text-red-400 mt-0.5">&#x2717;</span>
            <span class="text-neutral-300">Editing JSON configs over SFTP</span>
          </div>
          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <span class="text-red-400 mt-0.5">&#x2717;</span>
            <span class="text-neutral-300">Babysitting wipes</span>
          </div>
          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <span class="text-red-400 mt-0.5">&#x2717;</span>
            <span class="text-neutral-300">Manually installing and updating plugins</span>
          </div>
          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <span class="text-red-400 mt-0.5">&#x2717;</span>
            <span class="text-neutral-300">Restarting servers blindly</span>
          </div>
          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg md:col-span-2 md:max-w-sm md:mx-auto">
            <span class="text-red-400 mt-0.5">&#x2717;</span>
            <span class="text-neutral-300">Staying online when something crashes</span>
          </div>
        </div>
        <p class="text-center text-lg text-neutral-300 font-medium">
          Rust servers deserve <span class="text-oxide-400">orchestration</span> — not babysitting.
        </p>
      </div>
    </section>

    <!-- The Shift -->
    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold text-neutral-100 mb-8">The Shift</h2>
        <p class="text-lg text-neutral-400 mb-10">
          Corrosion moves Rust server administration to a unified cloud control plane.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <span class="text-oxide-400 text-xl font-bold">1</span>
            </div>
            <p class="text-neutral-200 font-medium">Install one plugin</p>
          </div>
          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <span class="text-oxide-400 text-xl font-bold">2</span>
            </div>
            <p class="text-neutral-200 font-medium">Register online</p>
          </div>
          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <span class="text-oxide-400 text-xl font-bold">3</span>
            </div>
            <p class="text-neutral-200 font-medium">Manage everything from your browser</p>
          </div>
        </div>
        <div class="flex flex-col md:flex-row items-center justify-center gap-4 text-neutral-500">
          <span>No open firewall ports.</span>
          <span class="hidden md:inline">&middot;</span>
          <span>No manual file editing.</span>
          <span class="hidden md:inline">&middot;</span>
          <span>No SSH required.</span>
        </div>
      </div>
    </section>

    <!-- Core Capabilities -->
    <section class="py-20 border-t border-neutral-800">
      <div class="max-w-6xl mx-auto px-6">
        <h2 class="text-3xl font-bold text-neutral-100 mb-12 text-center">Core Capabilities</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <!-- Operational Control -->
          <div>
            <h3 class="text-lg font-semibold text-oxide-400 mb-6 uppercase tracking-wider">Operational Control</h3>
            <div class="space-y-4">
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <RefreshCw class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Auto-Wiper with Rollback</p>
                  <p class="text-sm text-neutral-500 mt-1">Full wipe sequences with health verification</p>
                </div>
              </div>
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <Terminal class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Real-Time Console + Player Control</p>
                  <p class="text-sm text-neutral-500 mt-1">Execute commands from your browser</p>
                </div>
              </div>
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <Zap class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Web-Based Plugin Configuration</p>
                  <p class="text-sm text-neutral-500 mt-1">No more JSON editing over SFTP</p>
                </div>
              </div>
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <Server class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Automated Steam Updates</p>
                  <p class="text-sm text-neutral-500 mt-1">Stay current without manual intervention</p>
                </div>
              </div>
            </div>
          </div>
          <!-- Infrastructure & Scale -->
          <div>
            <h3 class="text-lg font-semibold text-oxide-400 mb-6 uppercase tracking-wider">Infrastructure & Scale</h3>
            <div class="space-y-4">
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <Shield class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Companion Agent — No SSH Required</p>
                  <p class="text-sm text-neutral-500 mt-1">Outbound-only secure connections</p>
                </div>
              </div>
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <Users class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Multi-Admin Role-Based Access Control</p>
                  <p class="text-sm text-neutral-500 mt-1">Scale your team without losing order</p>
                </div>
              </div>
              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
                <Wifi class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
                <div>
                  <p class="text-neutral-200 font-medium">Zero Inbound Ports Required</p>
                  <p class="text-sm text-neutral-500 mt-1">Your server initiates all connections</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Wipe Orchestration -->
    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
      <div class="max-w-4xl mx-auto px-6">
        <h2 class="text-3xl font-bold text-neutral-100 mb-4 text-center">Wipe Orchestration</h2>
        <p class="text-lg text-neutral-400 mb-10 text-center">
          Wipes aren't just "delete map and restart."
        </p>
        <div class="flex flex-wrap items-center justify-center gap-3 mb-10">
          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Pre-Wipe</span>
          <ChevronRight class="w-4 h-4 text-neutral-600" />
          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Backup</span>
          <ChevronRight class="w-4 h-4 text-neutral-600" />
          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Map Rotation</span>
          <ChevronRight class="w-4 h-4 text-neutral-600" />
          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Steam Update</span>
          <ChevronRight class="w-4 h-4 text-neutral-600" />
          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Restart</span>
          <ChevronRight class="w-4 h-4 text-neutral-600" />
          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Health Check</span>
          <ChevronRight class="w-4 h-4 text-neutral-600" />
          <span class="px-4 py-2 bg-oxide-500/15 border border-oxide-500/30 rounded-lg text-sm text-oxide-400">Rollback</span>
        </div>
        <div class="flex flex-col md:flex-row items-center justify-center gap-6 text-neutral-400">
          <span>Every wipe is logged.</span>
          <span>Every step is verified.</span>
          <span class="text-oxide-400 font-medium">Rollback is one click away.</span>
        </div>
      </div>
    </section>

    <!-- Built Like Infrastructure -->
    <section class="py-20 border-t border-neutral-800">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Built Like Infrastructure</h2>
        <p class="text-lg text-neutral-400 mb-10">
          Corrosion isn't a UI wrapper. It's a hosted SaaS platform built with:
        </p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-oxide-400 font-semibold mb-1">Rust</p>
            <p class="text-xs text-neutral-500">Axum backend</p>
          </div>
          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-oxide-400 font-semibold mb-1">NATS</p>
            <p class="text-xs text-neutral-500">JetStream messaging</p>
          </div>
          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-oxide-400 font-semibold mb-1">PostgreSQL</p>
            <p class="text-xs text-neutral-500">Multi-tenant isolation</p>
          </div>
          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-oxide-400 font-semibold mb-1">Outbound-Only</p>
            <p class="text-xs text-neutral-500">Secure connections</p>
          </div>
        </div>
        <div class="flex flex-col items-center gap-2 text-neutral-500 text-sm">
          <span>Every server is scoped by license.</span>
          <span>Every command is namespaced.</span>
          <span>Every tenant is isolated.</span>
        </div>
      </div>
    </section>

    <!-- Public Server Sites -->
    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Public Server Sites & Storefront</h2>
        <p class="text-lg text-neutral-400 mb-10">Each license includes:</p>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-sm text-neutral-200">Public server page</p>
          </div>
          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-sm text-neutral-200">Wipe countdown</p>
          </div>
          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-sm text-neutral-200">Live player count</p>
          </div>
          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
            <p class="text-sm text-neutral-200">Plugin/mod list</p>
          </div>
          <div class="p-4 bg-neutral-900 border border-oxide-500/30 rounded-lg">
            <p class="text-sm text-oxide-400">Integrated webstore</p>
          </div>
        </div>
        <p class="text-neutral-400">Monetize your server without third-party complexity.</p>
      </div>
    </section>

    <!-- For Serious Admins -->
    <section class="py-20 border-t border-neutral-800">
      <div class="max-w-3xl mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold text-neutral-100 mb-8">For Serious Admins</h2>
        <p class="text-lg text-neutral-400 mb-8">If you:</p>
        <div class="space-y-3 max-w-md mx-auto mb-10">
          <p class="text-neutral-300 text-lg">Run scheduled wipes</p>
          <p class="text-neutral-300 text-lg">Care about uptime</p>
          <p class="text-neutral-300 text-lg">Want crash recovery</p>
          <p class="text-neutral-300 text-lg">Want automation</p>
          <p class="text-neutral-300 text-lg">Manage multiple admins</p>
        </div>
        <p class="text-xl text-oxide-400 font-semibold">Corrosion was built for you.</p>
      </div>
    </section>

    <!-- CTA -->
    <section class="py-24 bg-neutral-900/50 border-t border-neutral-800">
      <div class="max-w-3xl mx-auto px-6 text-center">
        <p class="text-2xl text-neutral-400 mb-2">Stop babysitting your server.</p>
        <p class="text-3xl font-bold text-neutral-100 mb-10">Start orchestrating it.</p>
        <a :href="panelUrl + '/register'" class="inline-block px-10 py-4 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors text-lg">
          Get Corrosion
        </a>
      </div>
    </section>
  </div>
</template>
