<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() })

interface PlanFeature {
  text: string
}

interface Plan {
  name: string
  price: string
  period: string
  scope: string
  tag: string
  featured: boolean
  cta: string
  ctaVariant: 'primary' | 'ghost'
  ctaHref?: string
  features: PlanFeature[]
}

const plans: Plan[] = [
  {
    name: 'Hobby',
    price: '$9.99',
    period: '/mo',
    scope: '1–5 servers · non-commercial use',
    tag: '',
    featured: false,
    cta: 'Join early access',
    ctaVariant: 'ghost',
    features: [
      { text: 'Up to 5 game server instances' },
      { text: 'Non-commercial servers only' },
      { text: 'Auto-wiper with rollback' },
      { text: 'Plugin management (Rust uMod/Oxide)' },
      { text: 'File manager + real-time console' },
      { text: 'Scheduled tasks' },
      { text: 'Public server page' },
      { text: 'Community support' },
    ],
  },
  {
    name: 'Community',
    price: '$19.99',
    period: '/mo',
    scope: '6–10 servers · non-commercial use',
    tag: '',
    featured: false,
    cta: 'Join early access',
    ctaVariant: 'ghost',
    features: [
      { text: 'Up to 10 game server instances' },
      { text: 'Non-commercial servers only' },
      { text: 'Auto-wiper with rollback' },
      { text: 'Plugin management (Rust uMod/Oxide)' },
      { text: 'File manager + real-time console' },
      { text: 'Scheduled tasks' },
      { text: 'Public server page' },
      { text: 'Community support' },
    ],
  },
  {
    name: 'Operator',
    price: '$99.99',
    period: '/mo',
    scope: 'Commercial use · or 11–50 servers',
    tag: 'Most popular',
    featured: true,
    cta: 'Get Operator',
    ctaVariant: 'primary',
    features: [
      { text: 'Up to 50 game server instances' },
      { text: 'Commercial use permitted' },
      { text: 'All games: Rust, Dune, Soulmask, Conan' },
      { text: 'Auto-wiper with rollback' },
      { text: 'Plugin + mod management' },
      { text: 'File manager + real-time console' },
      { text: 'Scheduled tasks + maintenance windows' },
      { text: 'Player management + RBAC team access' },
      { text: 'Public server page + storefront' },
      { text: 'Community support + priority bug triage' },
    ],
  },
  {
    name: 'Network',
    price: 'Custom',
    period: '',
    scope: '50+ servers · hosting partners + fleets',
    tag: '',
    featured: false,
    cta: 'Contact us',
    ctaVariant: 'ghost',
    ctaHref: 'mailto:support@corrosionmgmt.com',
    features: [
      { text: '50 servers base included' },
      { text: 'Fleet Blocks: +$49.99/mo per 50 servers' },
      { text: 'Commercial use permitted' },
      { text: 'All games + multi-game hosts' },
      { text: 'Full Operator feature set' },
      { text: 'Fleet-level management' },
      { text: 'Priority bug triage for platform issues' },
      { text: 'Community support' },
    ],
  },
]
</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">Pricing</span>
      <h1 style="font-size:var(--text-5xl)">
        Scale from one server
        <span class="accent">to a fleet.</span>
      </h1>
      <p class="hero__sub">
        Simple tiers based on how many servers you run and whether you operate commercially.
        No per-seat charges. No surprises.
      </p>
    </div>
  </section>

  <!-- PRICING CARDS -->
  <section class="sec" id="plans">
    <div class="wrap">
      <div class="pricing reveal">
        <div
          v-for="plan in plans"
          :key="plan.name"
          class="plan"
          :class="plan.featured ? 'plan--feature' : ''"
        >
          <div class="plan__tag">{{ plan.tag }}</div>
          <div class="plan__name">{{ plan.name }}</div>
          <div class="plan__price">
            {{ plan.price }}<small>{{ plan.period }}</small>
          </div>
          <div class="plan__scope">{{ plan.scope }}</div>

          <ul class="plan__feats">
            <li v-for="feat in plan.features" :key="feat.text">
              <Icon name="check" :size="13" style="color:var(--accent-text);flex:none" />
              {{ feat.text }}
            </li>
          </ul>

          <a
            v-if="plan.ctaHref"
            class="btn"
            :class="plan.ctaVariant === 'primary' ? 'btn--primary' : 'btn--ghost'"
            :href="plan.ctaHref"
          >
            {{ plan.cta }}
          </a>
          <RouterLink
            v-else
            class="btn"
            :class="plan.ctaVariant === 'primary' ? 'btn--primary' : 'btn--ghost'"
            :to="{ name: 'early-access' }"
          >
            {{ plan.cta }}
          </RouterLink>
        </div>
      </div>

      <!-- Fleet Block -->
      <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>

      <!-- Commercial use definition -->
      <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>

      <!-- Support model -->
      <p class="support-note reveal">
        Community support is included with every plan — documentation, community forum,
        diagnostics, and 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>

  <!-- COMPARISON TABLE -->
  <section class="sec" id="compare">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Feature breakdown</span>
        <h2 class="title">What is included in each tier</h2>
      </div>

      <div class="compare-table reveal">
        <div class="compare-table__head">
          <div class="compare-table__label">Feature</div>
          <div>Hobby</div>
          <div>Community</div>
          <div class="compare-table__featured">Operator</div>
          <div>Network</div>
        </div>

        <div class="compare-table__row">
          <div class="compare-table__label">Server instances</div>
          <div>1–5</div>
          <div>6–10</div>
          <div class="compare-table__featured">Up to 50</div>
          <div>50 + Fleet Blocks</div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">Commercial use</div>
          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">Rust (Oxide/uMod)</div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">All supported games</div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">Auto-wiper + rollback</div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">Real-time console</div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">RBAC team access</div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">Public server page</div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
        <div class="compare-table__row">
          <div class="compare-table__label">Priority bug triage</div>
          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
        </div>
      </div>
    </div>
  </section>

  <!-- SUPPORT MODEL -->
  <section class="sec" id="support">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Support model</span>
        <h2 class="title">Corrosion is a tool,<br>not a managed service</h2>
        <p class="lead">
          Every plan includes self-service support. Hands-on time is available separately — at
          an honest rate, when you actually need it.
        </p>
      </div>

      <div class="infra reveal">
        <div class="icard">
          <div class="icard__ic"><Icon name="file-text" :size="16" /></div>
          <b>Documentation</b>
          <p>Setup guides, architecture reference, troubleshooting walkthroughs. Included on every plan.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="message-square" :size="16" /></div>
          <b>Community forum</b>
          <p>Operator-to-operator knowledge base. Questions, configs, and war stories. All plans.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="activity" :size="16" /></div>
          <b>Diagnostics</b>
          <p>Built-in agent health checks, log access, and structured bug reports. All plans.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
          <b>Priority bug triage</b>
          <p>Platform bugs for Operator and Network customers go to the front of the queue.</p>
        </div>
        <div class="icard">
          <div class="icard__ic"><Icon name="clock" :size="16" /></div>
          <b>Direct 1:1 support</b>
          <p>$125/hour, prepaid in 1-hour blocks. Available to any customer who needs it.</p>
        </div>
      </div>

      <p class="closing reveal" style="font-size:var(--text-md);color:var(--text-tertiary);font-weight:500">
        Direct server administration, firewall configuration, mod installation, and wipe-day
        hand-holding are not included in any plan. Corrosion gives you Catalyst Console and the tools.
        You run the operation.
      </p>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="finalcta">
    <div class="finalcta__atmo" />
    <div class="wrap finalcta__in reveal">
      <h2>Ready to stop babysitting<br>your servers?</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>

<style scoped>
.plan__feats {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plan__feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}
.plan__feats li svg { margin-top: 1px; }

/* Comparison table */
.compare-table {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--ring-default);
}
.compare-table__head,
.compare-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr;
  align-items: center;
}
.compare-table__head {
  background: var(--surface-raised-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.compare-table__head > div,
.compare-table__row > div {
  padding: 2px 8px;
  text-align: center;
}
.compare-table__head > div:first-child,
.compare-table__row > div:first-child {
  text-align: left;
  padding-left: 0;
}
.compare-table__row {
  background: var(--surface-base);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.compare-table__row:last-child { border-bottom: none; }
.compare-table__label { color: var(--text-secondary); font-weight: 500; }
.compare-table__featured {
  background: var(--accent-soft);
  color: var(--accent-text) !important;
  font-weight: 600;
}
</style>
