<script lang="ts" setup>
import { Head, usePage } from '@inertiajs/vue3'
import { computed, ref } from 'vue'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
import HeroSection from '@/Components/Marketing/HeroSection.vue'
import DedicatedHero from '@/Components/Marketing/DedicatedHero.vue'
import ChassisCard from '@/Components/Marketing/Dedicated/ChassisCard.vue'
import GenerationFilter from '@/Components/Marketing/Dedicated/GenerationFilter.vue'
import ComparisonTable from '@/Components/Marketing/ComparisonTable.vue'
import Faq from '@/Components/Marketing/Faq.vue'

defineOptions({ layout: MarketingLayout })

interface Plan {
  id: number
  name: string
  slug: string
  price: string
  setup_fee?: string | number
  features: Record<string, string | number> | null
  stock_quantity: number | null
}

interface PageProps {
  plans: Plan[]
  domains: { marketing: string; account: string; admin: string }
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const plans = computed<Plan[]>(() => props.value.plans || [])

type Generation = 'all' | '14th-gen' | 'in-stock'

const filter = ref<Generation>('all')

const buildToOrderPlans = computed<Plan[]>(() =>
  plans.value.filter(p => p.features?.generation === '14th-gen'),
)

const inStockPlans = computed<Plan[]>(() =>
  plans.value.filter(p => p.features?.generation !== '14th-gen'),
)

const counts = computed(() => ({
  all: plans.value.length,
  build_to_order: buildToOrderPlans.value.length,
  in_stock: inStockPlans.value.length,
}))

const startingPrice = computed<string>(() => {
  if (plans.value.length === 0) return '44'
  const lowest = Math.min(...plans.value.map(p => parseFloat(p.price)))
  return lowest % 1 === 0 ? lowest.toString() : lowest.toFixed(2)
})

// "EZSCALE vs the typical big-cloud / budget-bundler" comparison rows.
// Numbers and competitor positioning sourced from
// infrastructure/docs/json/competitors-2026q2.json (ColoCrossing, GTHost,
// budget Atlanta-presence providers) and ovh-2026q2.json (OVH SYS / Kimsufi).
const comparisonRows = [
  {
    feature: 'Hardware transparency',
    ours: 'Dell PowerEdge SKU + CPU model + DIMM type',
    theirs: 'Generic "Xeon Scalable" + "DDR4"',
  },
  {
    feature: 'iDRAC9 Enterprise (full virtual KVM)',
    ours: 'Included on every build',
    theirs: 'Often Express tier or extra fee',
  },
  {
    feature: 'BOSS M.2 boot drive',
    ours: 'Included — all main bays free for data',
    theirs: 'Boot drive eats a data bay',
  },
  {
    feature: 'Setup fee',
    ours: 'Waived at 6+ month commitments',
    theirs: 'OVH Kimsufi/SYS charge $60-$125 setup; many add hidden install fees',
  },
  {
    feature: 'Who answers your ticket',
    ours: 'Engineers, AI-assisted by Ezra',
    theirs: 'Tier-1 outsourced or AI-only',
  },
]

const faqs = [
  {
    question: 'How long until my dedicated server is live?',
    answer: '<strong>Build to order (14th gen):</strong> 7-10 business days from order. We source and assemble the chassis at our Atlanta datacenter, then hand off root access. You\'ll see live status in your dashboard.<br><br><strong>In stock (12th/13th gen):</strong> 1-2 business days. These are racked already in our Atlanta facility.',
  },
  {
    question: 'What hardware do you actually use?',
    answer: 'Dell PowerEdge 14th-gen chassis (R440 / R540 / R640 / R740 / R740xd / R740xd NVMe), Intel Xeon Gold 6230 baseline (40 cores @ 2.10 GHz), DDR4-2400 ECC memory (RDIMM up to 128 GB; LRDIMM at 256+ GB), Dell BOSS M.2 mirror for boot, PERC HBA330 controller in IT mode (pass-through for ZFS / mdraid), iDRAC9 Enterprise. Full bills of materials are public in our build sheets.',
  },
  {
    question: 'Why is the configured price higher than the listed starting price?',
    answer: 'Listed starting prices are for the locked baseline build (CPU + 32 GB RAM + boot drive + iDRAC + power + network). <strong>All main bays ship empty</strong> — you pick drives in the configurator. A typical "ready to deploy" config (256 GB RAM + 2× SSDs + bandwidth uplift) lands $50-$200/mo above the starting price. We don\'t bundle drives by default because workload requirements vary too much.',
  },
  {
    question: 'How do setup fees work?',
    answer: 'Setup fees range from $349 to $799 depending on chassis class. They cover the work of building, racking, configuring iDRAC, and deploying your server. They\'re <strong>charged on monthly and quarterly cycles, waived on Semi-Annual and Annual commitments</strong>. Once your build starts (typically within 24 hours of your order), the setup fee is non-refundable. Rental fees still fall under the 14-day money-back guarantee.',
  },
  {
    question: 'What operating systems are supported?',
    answer: 'AlmaLinux 9, Ubuntu 24.04 LTS, Debian 12, Rocky Linux 9, and Windows Server 2022 (BYOL — bring your own license). You can also choose "No OS" and PXE-boot a custom image — common for k3s nodes, Proxmox / ESXi hypervisors, or Talos clusters.',
  },
  {
    question: 'Can I run software RAID / ZFS?',
    answer: 'Yes — we ship the PERC HBA330 controller in IT mode (pure pass-through) so SMART data and firmware events route directly to your OS. ZFS, mdraid, btrfs all work. Hardware RAID (PERC H730p / H740p) is available as an upgrade if you prefer it.',
  },
  {
    question: 'Where is the data physically located?',
    answer: 'Atlanta, GA — Evocative datacenter (250 Williams St NW, downtown ATL). All of our customer-facing dedicated servers and hypervisors live in the same facility.',
  },
  {
    question: 'What about DDoS protection, IPv4 addresses, and bandwidth?',
    answer: 'Every server includes 1 IPv4 + a /64 IPv6 block, with extra IPv4 blocks (/29, /28, /27) as configurable add-ons. Bandwidth defaults to 1 Gbps unmetered; 10 Gbps tiered packages (10/50/100 TB or unmetered fair-use) are available. Volumetric DDoS protection is on the roadmap and will be free when it ships.',
  },
]
</script>

<template>
  <Head title="Dedicated Servers | EZSCALE" />
  <div>
    <!-- Hero -->
    <HeroSection>
      <template #content>
        <VChip color="primary" variant="tonal" class="mb-4">Dedicated Servers</VChip>
        <h1 class="text-h3 font-weight-bold mb-3">
          Bare-metal <span class="hero-gradient-text">Dell PowerEdge</span>
        </h1>
        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
          Atlanta-based dedicated servers. Pick a ready-to-rent chassis from rack inventory, or build a 14th-gen exactly to spec — we order the hardware and rack it for you.
        </p>
        <p class="text-body-1 text-medium-emphasis mb-8">
          Starting at <span class="text-primary font-weight-bold">${{ startingPrice }}/mo</span>
        </p>
        <a href="#chassis-grid" class="text-decoration-none">
          <VBtn color="primary" size="large" rounded="lg">
            Browse the lineup
            <VIcon icon="tabler-arrow-down" end />
          </VBtn>
        </a>
      </template>

      <template #visual>
        <DedicatedHero />
      </template>
    </HeroSection>

    <!-- Hardware band -->
    <VContainer class="marketing-section">
      <div class="hardware-band mb-6" role="note" aria-label="Underlying hardware">
        <div class="hardware-band__label">Built on</div>
        <ul class="hardware-band__list">
          <li>
            <VIcon icon="tabler-server-2" size="16" />
            <span>Dell PowerEdge</span>
          </li>
          <li>
            <VIcon icon="tabler-cpu" size="16" />
            <span>Intel Xeon Gold (Cascade Lake)</span>
          </li>
          <li>
            <VIcon icon="tabler-shield-bolt" size="16" />
            <span>DDR4-2400 ECC</span>
          </li>
          <li>
            <VIcon icon="tabler-database" size="16" />
            <span>BOSS M.2 boot · all bays free for data</span>
          </li>
          <li>
            <VIcon icon="tabler-screen-share" size="16" />
            <span>iDRAC9 Enterprise</span>
          </li>
          <li>
            <VIcon icon="tabler-map-pin" size="16" />
            <span>Atlanta, GA datacenter</span>
          </li>
        </ul>
      </div>
    </VContainer>

    <!-- Chassis grid -->
    <div id="chassis-grid" class="section-alt-bg marketing-section">
      <VContainer>
        <SectionHeader
          label="Lineup"
          title="Pick your chassis"
          highlight-word="chassis"
          subtitle="Build to order from our 14th-gen catalog, or rent a ready-to-deploy server from rack inventory."
        />

        <div class="d-flex justify-center mb-6">
          <GenerationFilter v-model="filter" :counts="counts" />
        </div>

        <div v-show="filter === 'all' || filter === '14th-gen'" class="mb-8">
          <h3 class="text-h6 font-weight-bold mb-4 chassis-grid-heading">
            Build to order — Dell 14th gen
            <span class="text-caption text-medium-emphasis ms-2">
              7-10 business days · setup fee waived on 6+ month commitments
            </span>
          </h3>
          <VRow>
            <VCol
              v-for="plan in buildToOrderPlans"
              :key="plan.id"
              cols="12"
              sm="6"
              md="4"
              lg="3"
            >
              <ChassisCard :plan="plan" />
            </VCol>
          </VRow>
        </div>

        <div v-show="filter === 'all' || filter === 'in-stock'">
          <h3 class="text-h6 font-weight-bold mb-4 chassis-grid-heading">
            In stock — rack inventory (12th/13th gen)
            <span class="text-caption text-medium-emphasis ms-2">
              Ready to ship in 1-2 business days · no setup fee
            </span>
          </h3>
          <VRow>
            <VCol
              v-for="plan in inStockPlans"
              :key="plan.id"
              cols="12"
              sm="6"
              md="4"
              lg="3"
            >
              <ChassisCard :plan="plan" />
            </VCol>
          </VRow>
        </div>
      </VContainer>
    </div>

    <!-- Comparison -->
    <VContainer class="marketing-section">
      <SectionHeader
        label="Comparison"
        title="EZSCALE vs the budget-bundler shortcut"
        highlight-word="EZSCALE"
        subtitle="A few honest differences against the cheapest dual-Xeon dedicated providers in our market band."
      />
      <ComparisonTable :rows="comparisonRows" their-label="Typical budget-bundler" />
    </VContainer>

    <!-- FAQ -->
    <div class="section-alt-bg marketing-section">
      <VContainer>
        <SectionHeader
          label="FAQ"
          title="Common questions"
          highlight-word="questions"
          subtitle="Hardware, setup fees, lead times, and the things people actually ask before signing up."
        />
        <Faq :items="faqs" />
      </VContainer>
    </div>

    <!-- CTA -->
    <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-primary), 0.12), rgb(var(--v-theme-surface)));">
      <VContainer class="text-center">
        <h2 class="text-h4 font-weight-bold mb-3">Need something custom?</h2>
        <p class="text-body-1 text-medium-emphasis mb-6">
          If your workload doesn't fit the catalog — colocation, custom GPU, multi-server clusters — talk to us. We build to spec.
        </p>
        <div class="d-flex ga-3 justify-center flex-wrap">
          <a href="#chassis-grid" class="text-decoration-none">
            <VBtn color="primary" size="large" rounded="lg">
              Browse catalog
              <VIcon icon="tabler-arrow-up" end />
            </VBtn>
          </a>
          <a href="/contact" class="text-decoration-none">
            <VBtn color="primary" variant="outlined" size="large" rounded="lg">
              Talk to a Human
            </VBtn>
          </a>
        </div>
      </VContainer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chassis-grid-heading {
  letter-spacing: -0.01em;
  color: rgba(var(--v-theme-on-surface), 0.85);
}

.hardware-band {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(var(--v-theme-surface), 0.45);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.06);

  &__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--v-theme-on-surface), 0.5);
    white-space: nowrap;
  }

  &__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    flex-grow: 1;

    li {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(var(--v-theme-on-surface), 0.78);

      .v-icon {
        color: rgb(var(--v-theme-primary));
      }
    }
  }
}
</style>
