<script lang="ts" setup>
import { Head, Link } from '@inertiajs/vue3'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'

defineOptions({ layout: MarketingLayout })

const effectiveDate = 'March 16, 2026'
const companyName = 'EZSCALE LLC'

interface Section {
  id: string
  title: string
}

const sections: Section[] = [
  { id: 'overview', title: '1. Overview' },
  { id: 'uptime', title: '2. Uptime Guarantees' },
  { id: 'credits', title: '3. Service Credit Calculation' },
  { id: 'exclusions', title: '4. Exclusions' },
  { id: 'monitoring', title: '5. Monitoring and Reporting' },
  { id: 'claiming', title: '6. How to Claim SLA Credits' },
  { id: 'remedies', title: '7. Remedies' },
  { id: 'changes', title: '8. Changes to This SLA' },
  { id: 'contact', title: '9. Contact Information' },
]

interface UptimeGuarantee {
  service: string
  uptime: string
  monthly: string
  color: string
}

const uptimeGuarantees: UptimeGuarantee[] = [
  { service: 'VPS Hosting', uptime: '99.9%', monthly: '43 min 50 sec', color: 'success' },
  { service: 'Dedicated Servers', uptime: '99.9%', monthly: '43 min 50 sec', color: 'success' },
  { service: 'Web Hosting', uptime: '99.9%', monthly: '43 min 50 sec', color: 'primary' },
  { service: 'Game Servers', uptime: '99.9%', monthly: '43 min 50 sec', color: 'primary' },
  { service: 'MySQL Hosting', uptime: '99.9%', monthly: '43 min 50 sec', color: 'primary' },
]

interface CreditTier {
  uptime: string
  credit: string
}

const creditTiers: CreditTier[] = [
  { uptime: '99.00% - 99.98%', credit: '10x downtime' },
  { uptime: '95.00% - 98.99%', credit: '25x downtime' },
  { uptime: '90.00% - 94.99%', credit: '50x downtime' },
  { uptime: 'Below 90.00%', credit: '100x downtime' },
]
</script>

<template>
  <Head title="Service Level Agreement | EZSCALE" />
  <div>
    <VContainer class="py-16">
      <!-- Header -->
      <VRow justify="center">
        <VCol cols="12" md="10" lg="8">
          <div class="text-center mb-12">
            <h1 class="text-h3 font-weight-bold mb-3">Service Level Agreement</h1>
            <p class="text-body-1 text-medium-emphasis">
              Effective Date: {{ effectiveDate }}
            </p>
          </div>

          <VCard variant="outlined">
            <VCardText class="pa-6 pa-md-10">
              <!-- Introduction -->
              <p class="text-body-1 mb-6">
                This Service Level Agreement ("SLA") is part of the
                <Link href="/terms-of-service" class="text-primary text-decoration-none font-weight-medium">Terms of Service</Link>
                between you and {{ companyName }} ("EZSCALE," "we," "us," or "our"). This SLA describes our
                uptime commitments and the remedies available to you if we fail to meet them.
              </p>

              <!-- Table of Contents -->
              <VCard variant="tonal" color="primary" class="mb-8">
                <VCardText>
                  <h2 class="text-h6 font-weight-bold mb-3">Table of Contents</h2>
                  <div class="d-flex flex-column ga-1">
                    <a
                      v-for="section in sections"
                      :key="section.id"
                      :href="`#${section.id}`"
                      class="text-body-2 text-primary text-decoration-none"
                    >
                      {{ section.title }}
                    </a>
                  </div>
                </VCardText>
              </VCard>

              <!-- 1. Overview -->
              <div id="overview" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">1. Overview</h2>
                <p class="text-body-1 mb-3">
                  EZSCALE is committed to providing reliable, high-performance hosting infrastructure. This SLA
                  defines our uptime guarantees and the service credits we provide when we fail to meet those
                  commitments.
                </p>
                <p class="text-body-1">
                  "Uptime" is defined as the percentage of time during a calendar month that your service is
                  accessible and operational, as measured by our monitoring systems. "Downtime" is any period
                  during which your service is inaccessible due to causes within our control.
                </p>
              </div>

              <!-- 2. Uptime Guarantees -->
              <div id="uptime" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">2. Uptime Guarantees</h2>
                <p class="text-body-1 mb-4">
                  The following uptime guarantees apply to each service category:
                </p>

                <VCard variant="outlined" class="mb-4">
                  <VTable>
                    <thead>
                      <tr>
                        <th class="text-subtitle-2 font-weight-bold">Service</th>
                        <th class="text-subtitle-2 font-weight-bold">Uptime Guarantee</th>
                        <th class="text-subtitle-2 font-weight-bold">Max Downtime / Month</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item in uptimeGuarantees" :key="item.service">
                        <td class="font-weight-medium">{{ item.service }}</td>
                        <td>
                          <VChip :color="item.color" size="small" variant="tonal">
                            {{ item.uptime }}
                          </VChip>
                        </td>
                        <td class="text-medium-emphasis">{{ item.monthly }}</td>
                      </tr>
                    </tbody>
                  </VTable>
                </VCard>

                <p class="text-body-1">
                  Uptime is calculated on a monthly basis using the formula:
                </p>
                <VCard variant="tonal" class="mt-3">
                  <VCardText class="text-center">
                    <code class="text-body-1">
                      Uptime % = ((Total Minutes in Month - Downtime Minutes) / Total Minutes in Month) x 100
                    </code>
                  </VCardText>
                </VCard>
              </div>

              <!-- 3. Service Credit Calculation -->
              <div id="credits" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">3. Service Credit Calculation</h2>
                <p class="text-body-1 mb-3">
                  If we fail to meet the uptime guarantee for your service, you are eligible for service credits.
                  Credits are calculated based on the duration of downtime and applied as a multiplier:
                </p>

                <VCard variant="outlined" class="mb-4">
                  <VTable>
                    <thead>
                      <tr>
                        <th class="text-subtitle-2 font-weight-bold">Monthly Uptime</th>
                        <th class="text-subtitle-2 font-weight-bold">Credit Amount</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="tier in creditTiers" :key="tier.uptime">
                        <td class="font-weight-medium">{{ tier.uptime }}</td>
                        <td>
                          <VChip color="primary" size="small" variant="tonal">
                            {{ tier.credit }}
                          </VChip>
                        </td>
                      </tr>
                    </tbody>
                  </VTable>
                </VCard>

                <h3 class="text-subtitle-1 font-weight-bold mb-2">Credit Calculation Example</h3>
                <VCard variant="tonal" class="mb-3">
                  <VCardText>
                    <p class="text-body-2 mb-2">
                      <strong>Scenario:</strong> Your VPS plan costs $50/month. The service experienced 2 hours of
                      downtime in a month, resulting in 99.72% uptime.
                    </p>
                    <p class="text-body-2 mb-2">
                      <strong>Credit tier:</strong> 99.00% - 99.98% = 10x downtime credit
                    </p>
                    <p class="text-body-2 mb-2">
                      <strong>Hourly rate:</strong> $50 / 720 hours = $0.069/hour
                    </p>
                    <p class="text-body-2 mb-0">
                      <strong>Credit:</strong> 2 hours x $0.069 x 10 = <strong>$1.39 service credit</strong>
                    </p>
                  </VCardText>
                </VCard>

                <p class="text-body-1">
                  Service credits are applied to your account balance and can be used toward future invoices.
                  Credits cannot be converted to cash refunds. The maximum credit for any single month shall
                  not exceed 100% of your monthly service fee for the affected service.
                </p>
              </div>

              <!-- 4. Exclusions -->
              <div id="exclusions" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">4. Exclusions</h2>
                <p class="text-body-1 mb-3">
                  The following situations are excluded from our uptime guarantee and do not qualify for service credits:
                </p>
                <ul class="text-body-1 mb-3 ml-6">
                  <li class="mb-2">
                    <strong>Scheduled Maintenance:</strong> Planned maintenance windows announced at least 48 hours
                    in advance via email and/or dashboard notification. We schedule maintenance during low-traffic
                    hours (typically 2:00 AM - 6:00 AM ET) and aim for zero-downtime maintenance whenever possible.
                  </li>
                  <li class="mb-2">
                    <strong>Force Majeure:</strong> Events beyond our reasonable control, including but not limited
                    to natural disasters, acts of war, terrorism, pandemics, government actions, power grid failures,
                    or widespread internet outages.
                  </li>
                  <li class="mb-2">
                    <strong>Customer-Caused Issues:</strong> Downtime resulting from your actions, configurations,
                    or software, including misconfigured firewalls, resource exhaustion from your applications,
                    or software bugs in your code.
                  </li>
                  <li class="mb-2">
                    <strong>DDoS Attacks:</strong> Downtime caused by distributed denial-of-service attacks targeting
                    your services, though we will make reasonable efforts to mitigate such attacks.
                  </li>
                  <li class="mb-2">
                    <strong>Third-Party Services:</strong> Outages of third-party services, DNS providers, or upstream
                    network providers outside of our direct control.
                  </li>
                  <li class="mb-2">
                    <strong>Account Suspension:</strong> Downtime resulting from suspension of your account due to
                    policy violations, non-payment, or other breaches of our Terms of Service.
                  </li>
                  <li class="mb-2">
                    <strong>Beta/Preview Services:</strong> Services labeled as beta, preview, or experimental are
                    not covered by this SLA.
                  </li>
                </ul>
              </div>

              <!-- 5. Monitoring and Reporting -->
              <div id="monitoring" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">5. Monitoring and Reporting</h2>
                <p class="text-body-1 mb-3">
                  We continuously monitor our infrastructure using multiple monitoring systems to detect and
                  respond to service disruptions:
                </p>
                <ul class="text-body-1 ml-6">
                  <li class="mb-1"><strong>Network Monitoring:</strong> Real-time monitoring of network connectivity, latency, and packet loss across all data centers.</li>
                  <li class="mb-1"><strong>Server Monitoring:</strong> Continuous monitoring of server health, including CPU, memory, disk, and service availability.</li>
                  <li class="mb-1"><strong>Status Page:</strong> Our public status page provides real-time information about service status, active incidents, and scheduled maintenance.</li>
                  <li class="mb-1"><strong>Incident Response:</strong> Our operations team is available 24/7 to respond to service disruptions. We aim to acknowledge incidents within 15 minutes and provide updates every 30 minutes during active incidents.</li>
                </ul>
              </div>

              <!-- 6. How to Claim SLA Credits -->
              <div id="claiming" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">6. How to Claim SLA Credits</h2>
                <p class="text-body-1 mb-3">
                  To request an SLA credit, follow these steps:
                </p>
                <VCard variant="outlined" class="mb-4">
                  <VList lines="three">
                    <VListItem>
                      <template #prepend>
                        <VAvatar color="primary" variant="tonal" size="36">
                          <span class="text-body-2 font-weight-bold">1</span>
                        </VAvatar>
                      </template>
                      <VListItemTitle class="font-weight-bold">Submit a Support Ticket</VListItemTitle>
                      <VListItemSubtitle class="text-wrap">
                        Open a support ticket through your account dashboard or email support@ezscale.cloud
                        with the subject line "SLA Credit Request."
                      </VListItemSubtitle>
                    </VListItem>
                    <VListItem>
                      <template #prepend>
                        <VAvatar color="primary" variant="tonal" size="36">
                          <span class="text-body-2 font-weight-bold">2</span>
                        </VAvatar>
                      </template>
                      <VListItemTitle class="font-weight-bold">Provide Details</VListItemTitle>
                      <VListItemSubtitle class="text-wrap">
                        Include your account ID, affected service(s), date and time of the downtime, duration,
                        and a description of the impact.
                      </VListItemSubtitle>
                    </VListItem>
                    <VListItem>
                      <template #prepend>
                        <VAvatar color="primary" variant="tonal" size="36">
                          <span class="text-body-2 font-weight-bold">3</span>
                        </VAvatar>
                      </template>
                      <VListItemTitle class="font-weight-bold">Timeframe</VListItemTitle>
                      <VListItemSubtitle class="text-wrap">
                        Credit requests must be submitted within 30 days of the incident. Requests submitted
                        after 30 days will not be eligible for credits.
                      </VListItemSubtitle>
                    </VListItem>
                    <VListItem>
                      <template #prepend>
                        <VAvatar color="primary" variant="tonal" size="36">
                          <span class="text-body-2 font-weight-bold">4</span>
                        </VAvatar>
                      </template>
                      <VListItemTitle class="font-weight-bold">Review and Issuance</VListItemTitle>
                      <VListItemSubtitle class="text-wrap">
                        We will review your request within 5 business days. If approved, the credit will be
                        applied to your next billing cycle.
                      </VListItemSubtitle>
                    </VListItem>
                  </VList>
                </VCard>
              </div>

              <!-- 7. Remedies -->
              <div id="remedies" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">7. Remedies</h2>
                <p class="text-body-1 mb-3">
                  Service credits as described in this SLA are your sole and exclusive remedy for any failure
                  by EZSCALE to meet the uptime guarantees. This SLA does not entitle you to any additional
                  damages, refunds, or other remedies beyond the service credits described herein.
                </p>
                <p class="text-body-1">
                  Nothing in this SLA limits or excludes liability that cannot be limited or excluded under
                  applicable law.
                </p>
              </div>

              <!-- 8. Changes to This SLA -->
              <div id="changes" class="mb-8">
                <h2 class="text-h5 font-weight-bold mb-4">8. Changes to This SLA</h2>
                <p class="text-body-1">
                  We may update this SLA from time to time. We will notify you of material changes by posting
                  the updated SLA on our website and updating the "Effective Date." Changes will not apply
                  retroactively. If we reduce our uptime guarantees, we will provide at least 30 days' advance
                  notice. Your continued use of the Services after changes take effect constitutes acceptance
                  of the revised SLA.
                </p>
              </div>

              <!-- 9. Contact Information -->
              <div id="contact">
                <h2 class="text-h5 font-weight-bold mb-4">9. Contact Information</h2>
                <p class="text-body-1 mb-3">
                  If you have questions about this Service Level Agreement or need to submit a credit request, please contact us:
                </p>
                <VCard variant="tonal" class="mb-0">
                  <VCardText>
                    <div class="d-flex flex-column ga-2">
                      <div class="d-flex align-center ga-2">
                        <VIcon icon="tabler-building" size="20" class="text-medium-emphasis" />
                        <span class="text-body-1">{{ companyName }}</span>
                      </div>
                      <div class="d-flex align-center ga-2">
                        <VIcon icon="tabler-mail" size="20" class="text-medium-emphasis" />
                        <a href="mailto:support@ezscale.cloud" class="text-body-1 text-primary text-decoration-none">support@ezscale.cloud</a>
                      </div>
                      <div class="d-flex align-center ga-2">
                        <VIcon icon="tabler-world" size="20" class="text-medium-emphasis" />
                        <a href="/" class="text-body-1 text-primary text-decoration-none">ezscale.cloud</a>
                      </div>
                    </div>
                  </VCardText>
                </VCard>
              </div>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
    </VContainer>
  </div>
</template>
