<script lang="ts" setup>
import { 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'

defineOptions({ layout: MarketingLayout })

interface PageProps {
  domains: { marketing: string; account: string; admin: string }
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const accountUrl = computed(() => `https://${props.value.domains?.account}`)

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

const products: Product[] = [
  { icon: 'tabler-server', title: 'VPS Hosting', description: 'SSD VPS with VirtFusion panel, instant provisioning, and full root access. Starting at $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 $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 $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.99% Uptime', description: 'Enterprise-grade infrastructure with redundant power, cooling, and networking ensures your services stay online around the clock.', color: 'success' },
  { icon: 'tabler-headset', title: '24/7 Expert Support', description: 'Our team of experienced engineers is available day and night to help you resolve issues and optimize your infrastructure.', 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: Stat[] = [
  { value: '10,000+', label: 'Active Customers', icon: 'tabler-users', color: 'primary' },
  { value: '99.99%', label: 'Uptime SLA', icon: 'tabler-arrow-up', color: 'success' },
  { value: '50+', label: 'Server Locations', icon: 'tabler-map-pin', color: 'warning' },
  { value: '24/7', label: 'Expert Support', icon: 'tabler-headset', color: 'error' },
]

interface Testimonial {
  quote: string
  name: string
  company: string
  rating: number
  avatarColor: string
}

const testimonials: Testimonial[] = [
  {
    quote: 'EZSCALE\'s VPS hosting is incredibly fast and reliable. Migration was seamless.',
    name: 'Alex Turner',
    company: 'DevOps Lead',
    rating: 5,
    avatarColor: 'primary',
  },
  {
    quote: 'Best dedicated server hosting we\'ve used. The SynergyCP panel is fantastic.',
    name: 'Sarah Chen',
    company: 'CTO at TechVentures',
    rating: 5,
    avatarColor: 'success',
  },
  {
    quote: 'Their support team resolved our issue in minutes, not hours. Impressive!',
    name: 'Marcus Rodriguez',
    company: 'Founder at LaunchPad',
    rating: 5,
    avatarColor: 'warning',
  },
]
</script>

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

        <p
          class="text-h6 text-medium-emphasis font-weight-regular mb-8"
          style="max-inline-size: 600px;"
        >
          VPS, Dedicated Servers, Web Hosting, and Game Servers. Deploy in minutes with enterprise-grade infrastructure.
        </p>

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

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

        <p class="text-body-2 text-disabled">
          No credit card required. Deploy in 60 seconds.
        </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-delay-${index + 1}`"
            :href="product.href"
          >
            <VCardText class="text-center pa-6">
              <VAvatar
                :color="product.color"
                variant="tonal"
                size="64"
                class="mb-4"
              >
                <VIcon
                  :icon="product.icon"
                  size="32"
                />
              </VAvatar>

              <h3 class="text-h6 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-delay-${index + 1}`"
            >
              <VCardText class="text-center pa-8">
                <VAvatar
                  :color="prop.color"
                  variant="tonal"
                  size="64"
                  class="mb-5"
                >
                  <VIcon
                    :icon="prop.icon"
                    size="32"
                  />
                </VAvatar>

                <h3 class="text-h6 font-weight-bold mb-3">
                  {{ prop.title }}
                </h3>

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

    <!-- Stats Section -->
    <div 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-5">
                <div class="d-flex align-center ga-3 mb-2">
                  <VAvatar
                    :color="stat.color"
                    variant="tonal"
                    size="40"
                  >
                    <VIcon
                      :icon="stat.icon"
                      size="22"
                    />
                  </VAvatar>

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

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

    <!-- Testimonials Section -->
    <VContainer class="marketing-section">
      <ScrollReveal>
      <SectionHeader
        label="Testimonials"
        title="Trusted by Thousands of Customers"
        highlight-word="Thousands"
        subtitle="See what our customers have to say about their experience with EZSCALE."
      />

      <VRow>
        <VCol
          v-for="(testimonial, index) in testimonials"
          :key="testimonial.name"
          cols="12"
          md="4"
        >
          <VCard
            class="h-100 feature-card-hover fade-in-up"
            :class="`stagger-delay-${index + 1}`"
          >
            <VCardText class="pa-6 d-flex flex-column h-100">
              <VRating
                :model-value="testimonial.rating"
                readonly
                color="warning"
                density="compact"
                class="mb-4"
              />

              <p class="text-body-1 font-italic text-medium-emphasis flex-grow-1 mb-4">
                "{{ testimonial.quote }}"
              </p>

              <VDivider class="mb-4" />

              <div class="d-flex align-center ga-3">
                <VAvatar
                  :color="testimonial.avatarColor"
                  variant="tonal"
                  size="40"
                >
                  <VIcon
                    icon="tabler-user"
                    size="22"
                  />
                </VAvatar>

                <div>
                  <div class="font-weight-bold text-body-1">
                    {{ testimonial.name }}
                  </div>
                  <div class="text-body-2 text-medium-emphasis">
                    {{ testimonial.company }}
                  </div>
                </div>
              </div>
            </VCardText>
          </VCard>
        </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-12">
              <h2 class="text-h3 font-weight-bold text-white mb-3">
                Ready to Get Started?
              </h2>

              <p
                class="text-h6 font-weight-regular mb-6"
                style="opacity: 0.85;"
              >
                Deploy your first server in under 60 seconds. No credit card required, cancel anytime.
              </p>

              <a
                :href="accountUrl + '/register'"
                class="text-decoration-none"
              >
                <VBtn
                  color="white"
                  size="x-large"
                  rounded="lg"
                >
                  Create Free Account
                  <VIcon
                    icon="tabler-arrow-right"
                    end
                  />
                </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="140"
              >
                <VIcon
                  icon="tabler-rocket"
                  size="72"
                  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: 200px;
    content: "";
    inline-size: 200px;
  }

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