<script lang="ts" setup>
import { Head, usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
import HeroSection from '@/Components/Marketing/HeroSection.vue'
import NetworkHero from '@/Components/Marketing/NetworkHero.vue'
import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
import { crossDomainUrl } from '@/utils/resolvers'

defineOptions({ layout: MarketingLayout })

interface StartingPrices {
  vps: string | null
  dedicated: string | null
  hosting: string | null
}

interface PageProps {
  domains: { marketing: string; account: string; admin: string }
  customerCount: number
  serviceCount: number
  startingPrices: StartingPrices
}

const page = usePage()
const pageProps = computed(() => page.props as unknown as PageProps)
const accountUrl = computed(() => crossDomainUrl(pageProps.value.domains?.account))

function formatStartingPrice(price: string | null, fallback: string): string {
  if (!price) return fallback
  const num = parseFloat(price)
  return num % 1 === 0 ? num.toString() : num.toFixed(2)
}

interface Product {
  icon: string
  title: string
  description: string
  href: string
  color: string
}

const products = computed<Product[]>(() => [
  { icon: 'tabler-server', title: 'VPS Hosting', description: `SSD VPS with VirtFusion panel, instant provisioning, and full root access. Starting at $${formatStartingPrice(pageProps.value.startingPrices?.vps, '4.20')}/mo.`, href: '/vps-hosting', color: 'primary' },
  { icon: 'tabler-server-2', title: 'Dedicated Servers', description: `Dell PowerEdge servers with SynergyCP management and 1Gbps connectivity. Starting at $${formatStartingPrice(pageProps.value.startingPrices?.dedicated, '44.39')}/mo.`, href: '/dedicated-servers', color: 'success' },
  { icon: 'tabler-world', title: 'Web Hosting', description: `Web hosting with Enhance panel, free SSL, Cloudflare DNS, and Redis cache. Starting at $${formatStartingPrice(pageProps.value.startingPrices?.hosting, '2.39')}/mo.`, href: '/web-hosting', color: 'warning' },
  { icon: 'tabler-device-gamepad-2', title: 'Game Servers', description: 'Low-latency game hosting for Minecraft, Rust, ARK, and more. Coming soon.', href: '/game-servers', color: 'error' },
])

interface ValueProp {
  icon: string
  title: string
  description: string
  color: string
}

const valueProps: ValueProp[] = [
  { icon: 'tabler-shield-check', title: '99.9% Uptime', description: 'Enterprise-grade infrastructure with redundant power, cooling, and networking ensures your services stay online around the clock.', color: 'success' },
  { icon: 'tabler-lifebuoy', title: 'Responsive Support', description: 'Questions? We\'ll get back to you quickly. Submit a ticket or reach out via our contact form.', color: 'primary' },
  { icon: 'tabler-server', title: 'Enterprise Hardware', description: 'Dell PowerEdge and HP ProLiant servers with NVMe SSDs, ECC RAM, and RAID storage for maximum performance and reliability.', color: 'warning' },
]

interface Stat {
  value: string
  label: string
  icon: string
  color: string
}

const stats = computed<Stat[]>(() => [
  { value: `${pageProps.value.customerCount || 0}+`, label: 'Active Customers', icon: 'tabler-users', color: 'primary' },
  { value: '99.9%', label: 'Uptime SLA', icon: 'tabler-arrow-up', color: 'success' },
  { value: `${pageProps.value.serviceCount || 0}+`, label: 'Active Services', icon: 'tabler-server', color: 'warning' },
  { value: 'Best Effort', label: 'Support', icon: 'tabler-lifebuoy', color: 'error' },
])

interface TechPartner {
  icon: string
  name: string
  color: string
}

const techPartners: TechPartner[] = [
  { icon: 'tabler-server-2', name: 'Dell PowerEdge', color: 'primary' },
  { icon: 'tabler-cloud', name: 'VirtFusion', color: 'info' },
  { icon: 'tabler-server', name: 'SynergyCP', color: 'success' },
  { icon: 'tabler-world', name: 'Enhance', color: 'warning' },
  { icon: 'tabler-shield-check', name: 'Cloudflare', color: 'orange' },
  { icon: 'tabler-credit-card', name: 'Stripe', color: 'indigo' },
]
</script>

<template>
  <Head title="EZSCALE - Cloud Hosting Made Simple" />
  <div>
    <!-- Hero Section -->
    <HeroSection>
      <template #content>
        <h1 class="text-h3 text-md-h2 font-weight-bold mb-3">
          Cloud Hosting
          <span class="hero-gradient-text">Made Simple</span>
        </h1>

        <p
          class="text-body-1 text-medium-emphasis font-weight-regular mb-6"
          style="max-inline-size: min(540px, 100%);"
        >
          VPS, Dedicated Servers, Web Hosting, and Game Servers. Deploy in minutes with enterprise-grade infrastructure.
        </p>

        <div class="d-flex ga-3 flex-wrap mb-3">
          <a
            :href="accountUrl + '/register'"
            class="text-decoration-none"
          >
            <VBtn
              color="primary"
              size="large"
              rounded="lg"
            >
              Get Started
              <VIcon
                icon="tabler-arrow-right"
                end
                size="18"
              />
            </VBtn>
          </a>

          <a
            href="/pricing"
            class="text-decoration-none"
          >
            <VBtn
              variant="outlined"
              size="large"
              rounded="lg"
            >
              View Pricing
            </VBtn>
          </a>
        </div>

        <p class="text-body-2 text-disabled">
          Deploy in 60 seconds. Cancel anytime.
        </p>
      </template>

      <template #visual>
        <NetworkHero />
      </template>
    </HeroSection>

    <!-- Products Section -->
    <VContainer class="marketing-section">
      <ScrollReveal>
      <SectionHeader
        label="Our Products"
        title="Everything You Need to Build, Deploy, and Scale"
        highlight-word="Scale"
      />

      <VRow>
        <VCol
          v-for="(product, index) in products"
          :key="product.title"
          cols="12"
          sm="6"
          md="3"
        >
          <VCard
            variant="outlined"
            class="h-100 feature-card-hover fade-in-up"
            :class="`stagger-${index + 1}`"
            :href="product.href"
          >
            <VCardText class="text-center pa-5">
              <VAvatar
                :color="product.color"
                variant="tonal"
                size="44"
                class="mb-3"
              >
                <VIcon
                  :icon="product.icon"
                  size="22"
                />
              </VAvatar>

              <h3 class="text-subtitle-1 font-weight-bold mb-2">
                {{ product.title }}
              </h3>

              <p class="text-body-2 text-medium-emphasis mb-0">
                {{ product.description }}
              </p>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
      </ScrollReveal>
    </VContainer>

    <!-- Why Choose EZSCALE Section -->
    <div class="section-alt-bg">
      <VContainer class="marketing-section">
        <ScrollReveal>
        <SectionHeader
          label="Why EZSCALE"
          title="Built for Performance and Reliability"
          highlight-word="Reliability"
          subtitle="We invest in enterprise hardware, redundant networks, and expert staff so you can focus on building your business."
        />

        <VRow>
          <VCol
            v-for="(prop, index) in valueProps"
            :key="prop.title"
            cols="12"
            md="4"
          >
            <VCard
              class="h-100 feature-card-hover fade-in-up"
              :class="`stagger-${index + 1}`"
            >
              <VCardText class="text-center pa-5">
                <VAvatar
                  :color="prop.color"
                  variant="tonal"
                  size="44"
                  class="mb-4"
                >
                  <VIcon
                    :icon="prop.icon"
                    size="22"
                  />
                </VAvatar>

                <h3 class="text-subtitle-1 font-weight-bold mb-2">
                  {{ prop.title }}
                </h3>

                <p class="text-body-2 text-medium-emphasis mb-0">
                  {{ prop.description }}
                </p>
              </VCardText>
            </VCard>
          </VCol>
        </VRow>
        </ScrollReveal>
      </VContainer>
    </div>

    <!-- Stats Section -->
    <div v-if="(pageProps.customerCount || 0) >= 5 || (pageProps.serviceCount || 0) >= 5" class="section-alt-bg">
      <VContainer class="marketing-section">
        <VRow>
          <VCol
            v-for="stat in stats"
            :key="stat.label"
            cols="6"
            md="3"
          >
            <VCard
              flat
              class="h-100"
              :style="`border-inline-start: 4px solid rgb(var(--v-theme-${stat.color}))`"
            >
              <VCardText class="pa-4">
                <div class="d-flex align-center ga-3 mb-1">
                  <VAvatar
                    :color="stat.color"
                    variant="tonal"
                    size="36"
                  >
                    <VIcon
                      :icon="stat.icon"
                      size="18"
                    />
                  </VAvatar>

                  <span class="text-h5 font-weight-bold">{{ stat.value }}</span>
                </div>

                <div class="text-body-2 text-medium-emphasis">
                  {{ stat.label }}
                </div>
              </VCardText>
            </VCard>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- Powered By Section -->
    <VContainer class="marketing-section">
      <ScrollReveal>
      <SectionHeader
        label="Infrastructure"
        title="Built on Trusted Technology"
        highlight-word="Trusted"
      />

      <VRow justify="center">
        <VCol
          v-for="partner in techPartners"
          :key="partner.name"
          cols="6"
          sm="4"
          md="2"
        >
          <div class="text-center">
            <VAvatar
              :color="partner.color"
              variant="tonal"
              size="52"
              class="mb-3"
            >
              <VIcon
                :icon="partner.icon"
                size="26"
              />
            </VAvatar>

            <p class="text-body-2 font-weight-medium text-medium-emphasis mb-0">
              {{ partner.name }}
            </p>
          </div>
        </VCol>
      </VRow>
      </ScrollReveal>
    </VContainer>

    <!-- CTA Section -->
    <VContainer class="marketing-section">
      <VCard
        color="primary"
        class="overflow-hidden"
      >
        <VRow
          no-gutters
          align="center"
        >
          <VCol
            cols="12"
            md="7"
          >
            <VCardText class="pa-8">
              <h2 class="text-h5 font-weight-bold text-white mb-2">
                Ready to Get Started?
              </h2>

              <p
                class="text-body-1 font-weight-regular mb-5"
                style="opacity: 0.85;"
              >
                Deploy your first server in under 60 seconds. Cancel anytime. 14-day money-back guarantee.
              </p>

              <a
                :href="accountUrl + '/register'"
                class="text-decoration-none"
              >
                <VBtn
                  color="white"
                  size="large"
                  rounded="lg"
                >
                  Get Started
                  <VIcon
                    icon="tabler-arrow-right"
                    end
                    size="18"
                  />
                </VBtn>
              </a>
            </VCardText>
          </VCol>

          <VCol
            cols="12"
            md="5"
            class="d-none d-md-flex align-center justify-center"
          >
            <div class="cta-decoration">
              <VAvatar
                color="rgba(255, 255, 255, 0.15)"
                size="100"
              >
                <VIcon
                  icon="tabler-rocket"
                  size="48"
                  color="white"
                />
              </VAvatar>
            </div>
          </VCol>
        </VRow>
      </VCard>
    </VContainer>
  </div>
</template>

<style lang="scss" scoped>
.cta-decoration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;

  &::before {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 10%);
    border-radius: 50%;
    block-size: 150px;
    content: "";
    inline-size: 150px;
  }

  &::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 5%);
    border-radius: 50%;
    block-size: 200px;
    content: "";
    inline-size: 200px;
  }
}
</style>
