<script lang="ts" setup>
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'

defineOptions({ layout: MarketingLayout })

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 with a mission to simplify cloud hosting.', color: 'primary' },
  { year: '2024', event: 'Launched VPS and Dedicated Server product lines.', color: 'success' },
  { year: '2025', event: 'Expanded to 50+ data center locations worldwide.', color: 'warning' },
  { year: '2025', event: 'Surpassed 10,000 active customers.', color: 'error' },
]

const stats = [
  { value: '10K+', label: 'Customers', color: 'primary' },
  { value: '99.99%', label: 'Uptime', color: 'success' },
  { value: '50+', label: 'Locations', color: 'warning' },
  { value: '24/7', label: 'Support', color: 'error' },
]
</script>

<template>
  <div>
    <!-- Hero -->
    <VContainer class="py-16">
      <VRow align="center">
        <VCol cols="12" md="8" class="mx-auto text-center">
          <h1 class="text-h2 font-weight-bold mb-4">
            About <span class="hero-gradient-text">EZSCALE</span>
          </h1>
          <p class="text-h6 text-medium-emphasis font-weight-regular">
            We're on a mission to make cloud hosting simple, affordable, and accessible to everyone.
            From individual developers to growing businesses, EZSCALE provides the infrastructure you need to succeed.
          </p>
        </VCol>
      </VRow>
    </VContainer>

    <!-- Values -->
    <div class="section-alt-bg py-16">
      <VContainer>
        <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="`text-center pa-6 h-100 bg-transparent feature-card-hover fade-in-up stagger-delay-${index + 1}`"
            >
              <VAvatar :color="value.color" variant="tonal" size="64" class="mb-4">
                <VIcon :icon="value.icon" size="32" />
              </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>
            </VCard>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- Timeline -->
    <VContainer class="py-16">
      <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"
            >
              <VCard variant="outlined">
                <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>
    </VContainer>

    <!-- Stats -->
    <div 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-h3 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>
  </div>
</template>
