<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 ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'

defineOptions({ layout: MarketingLayout })

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

const page = usePage()
const pageProps = computed(() => page.props as unknown as PageProps)

const values = [
  { icon: 'tabler-heart', title: 'Customer First', description: 'Every decision we make starts with what\'s best for our customers.', color: 'error' },
  { icon: 'tabler-shield-check', title: 'Reliability', description: 'We engineer our infrastructure for maximum uptime and performance.', color: 'success' },
  { icon: 'tabler-eye', title: 'Transparency', description: 'No hidden fees, no surprise charges. What you see is what you pay.', color: 'primary' },
  { icon: 'tabler-rocket', title: 'Innovation', description: 'We continuously invest in the latest hardware and software technologies.', color: 'warning' },
]

const milestones = [
  { year: '2024', event: 'EZSCALE founded to simplify hosting for developers and small teams.', icon: 'tabler-flag', color: 'primary' },
  { year: '2024', event: 'Launched VPS and Dedicated Server hosting on Dell PowerEdge hardware.', icon: 'tabler-server', color: 'success' },
  { year: '2025', event: 'Added Web Hosting, MySQL Hosting, and Veeam Backup services.', icon: 'tabler-world', color: 'warning' },
  { year: '2025', event: 'Built custom billing platform to replace WHMCS.', icon: 'tabler-code', color: 'info' },
]

const stats = computed(() => [
  { value: `${pageProps.value.customerCount || 0}+`, label: 'Customers', color: 'primary' },
  { value: '99.9%', label: 'Uptime Target', color: 'success' },
  { value: '1', label: 'Datacenter (Atlanta, GA)', color: 'warning' },
  { value: 'Best Effort', label: 'Support', color: 'error' },
])

interface InfraItem {
  icon: string
  name: string
  description: string
  color: string
}

const infrastructure: InfraItem[] = [
  { icon: 'tabler-server-2', name: 'Dell PowerEdge', description: 'Enterprise server hardware', color: 'primary' },
  { icon: 'tabler-cloud', name: 'VirtFusion', description: 'VPS management platform', color: 'info' },
  { icon: 'tabler-server', name: 'SynergyCP', description: 'Dedicated server panel', color: 'success' },
  { icon: 'tabler-world', name: 'Enhance', description: 'Web hosting control panel', color: 'warning' },
  { icon: 'tabler-shield-check', name: 'Cloudflare', description: 'DNS and DDoS protection', color: 'orange' },
]
</script>

<template>
  <Head title="About | EZSCALE" />
  <div>
    <!-- Hero -->
    <HeroSection>
      <template #content>
        <h1 class="text-h3 text-md-h2 font-weight-bold mb-3">
          About <span class="hero-gradient-text">EZSCALE</span>
        </h1>
        <p class="text-body-1 text-medium-emphasis font-weight-regular" style="max-inline-size: 540px;">
          We're a small hosting company focused on providing solid infrastructure at fair prices. No corporate fluff — just reliable servers and honest service.
        </p>
      </template>
    </HeroSection>

    <!-- Values -->
    <div class="section-alt-bg py-16">
      <VContainer>
        <ScrollReveal>
          <SectionHeader
            label="Our Values"
            title="What We Stand For"
          />

          <VRow>
            <VCol v-for="(value, index) in values" :key="value.title" cols="12" sm="6" md="3">
              <VCard
                variant="flat"
                :class="`h-100 feature-card-hover fade-in-up stagger-${index + 1}`"
                :style="`border-inline-start: 3px solid rgb(var(--v-theme-${value.color}))`"
              >
                <VCardText class="pa-5">
                  <VAvatar :color="value.color" variant="tonal" size="44" class="mb-4">
                    <VIcon :icon="value.icon" size="22" />
                  </VAvatar>
                  <h3 class="text-h6 font-weight-bold mb-2">{{ value.title }}</h3>
                  <p class="text-body-2 text-medium-emphasis mb-0">{{ value.description }}</p>
                </VCardText>
              </VCard>
            </VCol>
          </VRow>
        </ScrollReveal>
      </VContainer>
    </div>

    <!-- Timeline -->
    <VContainer class="py-16">
      <ScrollReveal>
        <SectionHeader
          label="Our Journey"
          title="Milestones Along the Way"
        />

        <VRow justify="center">
          <VCol cols="12" md="8">
            <VTimeline side="end" density="compact">
              <VTimelineItem
                v-for="(milestone, index) in milestones"
                :key="index"
                :dot-color="milestone.color"
                size="small"
              >
                <template #icon>
                  <VIcon :icon="milestone.icon" size="14" />
                </template>
                <VCard variant="outlined" class="feature-card-hover">
                  <VCardText>
                    <div :class="`text-caption text-${milestone.color} font-weight-bold mb-1`">{{ milestone.year }}</div>
                    <div class="text-body-1">{{ milestone.event }}</div>
                  </VCardText>
                </VCard>
              </VTimelineItem>
            </VTimeline>
          </VCol>
        </VRow>
      </ScrollReveal>
    </VContainer>

    <!-- Stats -->
    <div v-if="(pageProps.customerCount || 0) >= 5 || (pageProps.serviceCount || 0) >= 5" class="section-alt-bg py-16">
      <VContainer>
        <VRow>
          <VCol v-for="stat in stats" :key="stat.label" cols="6" md="3">
            <VCard flat class="pa-4" :style="`border-inline-start: 4px solid rgb(var(--v-theme-${stat.color}));`">
              <div :class="`text-h4 font-weight-bold text-${stat.color}`">{{ stat.value }}</div>
              <div class="text-body-1 text-medium-emphasis mt-1">{{ stat.label }}</div>
            </VCard>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- What We Use -->
    <VContainer class="py-16">
      <ScrollReveal>
        <SectionHeader
          label="Infrastructure"
          title="What We Use"
          subtitle="The tools and platforms that power EZSCALE."
        />

        <VRow justify="center">
          <VCol v-for="(item, index) in infrastructure" :key="item.name" cols="6" sm="4" md="2">
            <div :class="`text-center fade-in-up stagger-${index + 1}`">
              <VAvatar :color="item.color" variant="tonal" size="52" class="mb-3">
                <VIcon :icon="item.icon" size="26" />
              </VAvatar>
              <p class="text-body-2 font-weight-bold mb-0">{{ item.name }}</p>
              <p class="text-caption text-medium-emphasis mb-0">{{ item.description }}</p>
            </div>
          </VCol>
        </VRow>
      </ScrollReveal>
    </VContainer>
  </div>
</template>
