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

interface FaqItem {
  question: string
  answer: string
}

interface FaqGroup {
  label: string
  icon: string
  items: FaqItem[]
}

const groups: FaqGroup[] = [
  {
    label: 'Support',
    icon: 'help-circle',
    items: [
      {
        question: 'Do you provide direct support?',
        answer:
          'Corrosion is a self-service tool. Every plan includes documentation, community forum access, diagnostics, and structured platform bug reports. We do not provide 1:1 setup assistance, Discord DMs, video calls, server administration, hosting-provider troubleshooting, firewall configuration, mod installation, or emergency wipe-day support.',
      },
      {
        question: 'What if Corrosion itself is broken?',
        answer:
          'Platform bugs and agent issues go through structured bug reports in Catalyst Console. Operator and Network customers receive priority bug triage for platform-level issues. Direct server administration is not included in any support tier.',
      },
      {
        question: 'Do you manage my server for me?',
        answer:
          'No. Corrosion provides Catalyst Console, re-Agent, automation workflows, diagnostics, and the control plane. You remain responsible for your host machine, operating system, network, firewall, game files, mods, and community rules.',
      },
      {
        question: 'Is hands-on help available?',
        answer:
          'Yes — separately. Direct 1:1 support is available at $125/hour, prepaid in 1-hour blocks. This is billed time with a human, not a support tier. It is available to any customer who needs it.',
      },
      {
        question: 'What does community support include?',
        answer:
          'Documentation (setup guides, architecture reference, troubleshooting walkthroughs), a community forum for operator-to-operator knowledge sharing, in-panel diagnostics (agent health, log access), and a structured bug report system for platform issues.',
      },
    ],
  },
  {
    label: 'Product',
    icon: 'server',
    items: [
      {
        question: 'Do I need my own server?',
        answer:
          'Yes. Corrosion is bring-your-own-server. You supply the host machine — a VPS, dedicated server, or bare metal box running Windows or Linux. Corrosion provides the control plane, re-Agent, and Catalyst Console.',
      },
      {
        question: 'Does Corrosion host my game server for me?',
        answer:
          'No. Corrosion is not a hosting provider. It is a management layer that runs on top of a server you already own or rent. If you need hosting, you need a separate hosting provider.',
      },
      {
        question: 'Do I need to open inbound firewall ports for Corrosion?',
        answer:
          'No. re-Agent establishes a single outbound NATS connection to Corrosion\'s cloud. No inbound management ports are required. Your game server\'s player ports (RCON, game ports) remain as they have always been.',
      },
      {
        question: 'Does Corrosion replace AMP or Pterodactyl?',
        answer:
          'It can, depending on your use case. Corrosion is an independent control plane — it does not require an existing game panel. If you are currently using AMP or Pterodactyl, migration tooling is in active development.',
      },
      {
        question: 'What happens if Corrosion goes offline?',
        answer:
          'Your game servers continue running normally. Corrosion does not proxy gameplay traffic — it only handles management operations. If Catalyst Console or the cloud is unreachable, your players are unaffected.',
      },
      {
        question: 'Can multiple admins manage the same server?',
        answer:
          'Yes. Role-based access control (RBAC) is built in. You can grant team members specific permissions — from full admin access down to read-only viewer — without sharing credentials.',
      },
      {
        question: 'What OS does re-Agent run on?',
        answer:
          'Both Windows and Linux are supported for re-Agent. The re-Agent binary is downloaded directly from your dashboard — there is no manual build or dependency setup required.',
      },
      {
        question: 'Is my data isolated from other customers?',
        answer:
          'Yes. All data is scoped by license ID at the database level. No server, config, or player data is shared across tenant boundaries.',
      },
    ],
  },
  {
    label: 'Games',
    icon: 'box',
    items: [
      {
        question: 'Which games are supported?',
        answer:
          'Currently in active development or shipped: Rust, Dune: Awakening, Conan Exiles, and Soulmask. Each game has a purpose-built Formula that models its specific operational reality (wipe types, mod systems, cluster configurations). More games are planned.',
      },
      {
        question: 'Does Corrosion support Rust plugin management?',
        answer:
          'Yes. Corrosion integrates with uMod (Oxide) for Rust. You can browse the plugin registry, install plugins, manage configuration profiles, and push config changes to the server — all from the browser.',
      },
      {
        question: 'Can I run multiple game types on the same host machine?',
        answer:
          'Yes. A single re-Agent can supervise multiple game server processes — across different games — on the same machine. Each game instance has its own lifecycle, configuration, and wipe schedule.',
      },
      {
        question: 'Does Corrosion handle Rust wipes?',
        answer:
          'Yes. Rust wipes are a first-class feature: map wipes, blueprint wipes, and full wipes. Wipes run as verified, logged sequences — pre-warning, backup, stop, update, map rotation, restart, health check, announce. Rollback is available when supported.',
      },
    ],
  },
  {
    label: 'Billing',
    icon: 'credit-card',
    items: [
      {
        question: 'What counts as commercial use?',
        answer:
          'Commercial use includes monetized communities, paid access, VIP slots, donation-funded servers, sponsorship-supported servers, hosting providers, or managing servers for others. Hobby and Community plans are non-commercial only. Operator and Network plans permit commercial use.',
      },
      {
        question: 'What is the Fleet Block on the Network plan?',
        answer:
          'The Network plan base includes 50 server instances at $99.99/mo. Each additional Fleet Block adds 50 more server slots at $49.99/mo. Stack as many Fleet Blocks as your operation requires.',
      },
      {
        question: 'Can I upgrade my plan?',
        answer:
          'Yes. You can upgrade at any time. Pricing is prorated from the upgrade date.',
      },
      {
        question: 'Is there a free trial?',
        answer:
          'Corrosion is currently in early access. Join the early access list to be notified when access opens.',
      },
      {
        question: 'Are there annual billing discounts?',
        answer:
          'Not at this time. All plans are billed monthly.',
      },
    ],
  },
]

const openKey = ref<string | null>(null)

function toggle(key: string): void {
  openKey.value = openKey.value === key ? null : key
}

function itemKey(groupLabel: string, idx: number): string {
  return `${groupLabel}-${idx}`
}

// 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">FAQ</span>
      <h1 style="font-size:var(--text-5xl)">
        Honest answers.
        <span class="accent">No marketing fluff.</span>
      </h1>
      <p class="hero__sub">
        Common questions about support, the product, supported games, and billing — answered
        plainly.
      </p>
    </div>
  </section>

  <!-- FAQ GROUPS -->
  <section class="sec" id="faq">
    <div class="wrap">
      <div
        v-for="group in groups"
        :key="group.label"
        class="faq-group reveal"
      >
        <div class="faq-group__head">
          <span class="faq-group__ic">
            <Icon :name="group.icon" :size="16" />
          </span>
          <span class="eyebrow">{{ group.label }}</span>
        </div>

        <div class="faq-list">
          <div
            v-for="(item, idx) in group.items"
            :key="idx"
            class="faq-item"
            :class="{ 'faq-item--open': openKey === itemKey(group.label, idx) }"
          >
            <button
              class="faq-item__q"
              @click="toggle(itemKey(group.label, idx))"
            >
              <span>{{ item.question }}</span>
              <span class="faq-item__chevron">
                <Icon
                  name="chevron-down"
                  :size="16"
                  :class="{ 'faq-item__chevron--open': openKey === itemKey(group.label, idx) }"
                />
              </span>
            </button>
            <div
              v-if="openKey === itemKey(group.label, idx)"
              class="faq-item__a"
            >
              {{ item.answer }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- SUPPORT CTA -->
  <section class="sec" id="support-cta" style="border-bottom:none">
    <div class="wrap">
      <div class="sec__head reveal">
        <span class="eyebrow">Still have questions?</span>
        <h2 class="title">Check the docs or join the community</h2>
        <p class="lead">
          The documentation covers setup, architecture, troubleshooting, and every supported
          game. The community forum is where operators share configs, ask questions, and help
          each other.
        </p>
      </div>
      <div class="hero__cta reveal">
        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
          Join early access
        </RouterLink>
        <RouterLink class="btn btn--ghost btn--lg" :to="{ name: 'pricing' }">
          <Icon name="credit-card" :size="17" />View pricing
        </RouterLink>
      </div>
    </div>
  </section>
</template>

<style scoped>
.faq-group {
  margin-bottom: 48px;
}
.faq-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.faq-group__ic {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-default);
  overflow: hidden;
  transition: box-shadow var(--dur-fast);
}
.faq-item--open {
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--dur-fast);
}
.faq-item__q:hover { color: var(--accent-text); }
.faq-item__chevron {
  flex: none;
  color: var(--text-muted);
  transition: color var(--dur-fast);
}
.faq-item__chevron--open {
  transform: rotate(180deg);
  color: var(--accent-text);
}
.faq-item__a {
  padding: 0 20px 18px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.65;
}
</style>
