<script lang="ts" setup>
import { Head, useForm } from '@inertiajs/vue3'
import { ref } from 'vue'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
import HeroSection from '@/Components/Marketing/HeroSection.vue'

defineOptions({ layout: MarketingLayout })

const form = useForm({
  name: '',
  email: '',
  subject: '',
  message: '',
})

const subjects = [
  'General Inquiry',
  'Sales',
  'Technical Support',
  'Billing',
  'Partnership',
  'Other',
]

const submitSuccess = ref(false)

function submit(): void {
  form.post('/contact', {
    preserveScroll: true,
    onSuccess: () => {
      form.reset()
      submitSuccess.value = true
      setTimeout(() => { submitSuccess.value = false }, 5000)
    },
  })
}

const contactInfo = [
  { icon: 'tabler-mail', title: 'Email', detail: 'support@ezscale.cloud', href: 'mailto:support@ezscale.cloud' },
  { icon: 'tabler-clock', title: 'Support Hours', detail: 'Best Effort (Tickets)', href: null },
  { icon: 'tabler-ticket', title: 'Tickets', detail: 'Submit via dashboard', href: null },
]
</script>

<template>
  <Head title="Contact | EZSCALE" />
  <div>
    <HeroSection>
      <template #content>
        <h1 class="text-h3 text-md-h2 font-weight-bold mb-3">
          Get in <span class="hero-gradient-text">Touch</span>
        </h1>
        <p class="text-body-1 text-medium-emphasis font-weight-regular" style="max-inline-size: 540px;">
          Have a question? We'd love to hear from you.
        </p>
      </template>
    </HeroSection>

    <VContainer class="marketing-section">
      <VRow>
        <!-- Contact Form -->
        <VCol cols="12" md="7">
          <VCard variant="outlined">
            <VCardText class="pa-6">
              <h2 class="text-h5 font-weight-bold mb-6">Send us a message</h2>

              <VAlert
                v-if="submitSuccess"
                type="success"
                variant="tonal"
                class="mb-4"
              >
                Your message has been sent. We'll get back to you soon!
              </VAlert>

              <form @submit.prevent="submit">
                <VRow>
                  <VCol cols="12" sm="6">
                    <VTextField
                      v-model="form.name"
                      label="Name"
                      placeholder="John Doe"
                      prepend-inner-icon="tabler-user"
                      :error-messages="form.errors.name"
                      required
                    />
                  </VCol>
                  <VCol cols="12" sm="6">
                    <VTextField
                      v-model="form.email"
                      label="Email"
                      type="email"
                      placeholder="john@example.com"
                      prepend-inner-icon="tabler-mail"
                      :error-messages="form.errors.email"
                      required
                    />
                  </VCol>
                  <VCol cols="12">
                    <VSelect
                      v-model="form.subject"
                      :items="subjects"
                      label="Subject"
                      prepend-inner-icon="tabler-tag"
                      :error-messages="form.errors.subject"
                      required
                    />
                  </VCol>
                  <VCol cols="12">
                    <VTextarea
                      v-model="form.message"
                      label="Message"
                      rows="5"
                      placeholder="How can we help you?"
                      prepend-inner-icon="tabler-message"
                      :error-messages="form.errors.message"
                      required
                    />
                  </VCol>
                  <VCol cols="12">
                    <VBtn
                      type="submit"
                      color="primary"
                      size="large"
                      :loading="form.processing"
                      :disabled="form.processing"
                    >
                      Send Message
                      <VIcon icon="tabler-send" end />
                    </VBtn>
                  </VCol>
                </VRow>
              </form>
            </VCardText>
          </VCard>
        </VCol>

        <!-- Contact Info -->
        <VCol cols="12" md="5">
          <div class="d-flex flex-column ga-4">
            <VCard
              v-for="info in contactInfo"
              :key="info.title"
              variant="outlined"
              class="feature-card-hover"
            >
              <VCardText class="d-flex align-center ga-4">
                <VAvatar color="primary" variant="tonal" size="44">
                  <VIcon :icon="info.icon" size="22" />
                </VAvatar>
                <div>
                  <div class="text-subtitle-2 text-medium-emphasis">{{ info.title }}</div>
                  <a
                    v-if="info.href"
                    :href="info.href"
                    class="text-body-1 font-weight-medium text-decoration-none text-primary"
                  >
                    {{ info.detail }}
                  </a>
                  <div v-else class="text-body-1 font-weight-medium">{{ info.detail }}</div>
                </div>
              </VCardText>
            </VCard>

            <VCard variant="outlined" color="primary">
              <VCardText class="pa-6">
                <h3 class="text-h6 font-weight-bold mb-2">Need help?</h3>
                <p class="text-body-2 mb-3">
                  Check our knowledge base for quick answers, or open a support ticket through your dashboard.
                </p>
                <VBtn variant="outlined" size="small" href="https://ezscale.support/en/knowledgebase" target="_blank">
                  Visit Knowledge Base
                  <VIcon icon="tabler-external-link" end size="16" />
                </VBtn>
              </VCardText>
            </VCard>
          </div>
        </VCol>
      </VRow>
    </VContainer>
  </div>
</template>
