<template>
  <div class="contact-container q-py-xl">
    <div
      class="row full-height items-center q-col-gutter-xl items-center justify-center q-pa-md"
    >
      <!-- Left Column - Contact Info -->
      <div class="col-12 col-md-4">
        <h1 class="text-h3 q-mb-lg contact-title">Liên Hệ Với Chúng Tôi</h1>

        <!-- <p class="address q-mb-xl">
          500 Terry Francois Street, 6th Floor. San Francisco, CA 94158
        </p> -->

        <p class="email q-mb-md">
          <a href="" class="email-link">lacacity.co@gmail.com</a>
        </p>
      </div>

      <!-- Right Column - Form -->
      <div class="col-12 col-md-8">
        <form @submit.prevent="submitForm">
          <div class="row q-col-gutter-md">
            <!-- Name Field -->
            <div class="col-12 col-sm-6 q-mb-md">
              <div class="field-label required">Tên</div>
              <q-input
                v-model="formData.name"
                class="custom-input"
                placeholder="Nhập thông tin tên của bạn"
                :rules="[(val) => !!val || 'Tên không để trống']"
              />
            </div>

            <!-- Email Field -->
            <div class="col-12 col-sm-6 q-mb-md">
              <div class="field-label required">Email</div>
              <q-input
                v-model="formData.email"
                class="custom-input"
                placeholder="Nhập thông tin email của bạn"
                :rules="[(val) => !!val || 'Email không để trống']"
              />
            </div>

            <!-- Phone Field -->
            <div class="col-12 col-sm-6 q-mb-md">
              <div class="field-label">Số Điện Thoại</div>
              <q-input
                v-model="formData.phone"
                class="custom-input"
                placeholder="Số điện thoại của bạn"
              />
            </div>

            <!-- Address Field -->
            <div class="col-12 col-sm-6 q-mb-md">
              <div class="field-label">Địa chỉ</div>
              <q-input
                v-model="formData.address"
                class="custom-input"
                placeholder="Nhập địa chỉ liên hệ của bạn"
              />
            </div>

            <!-- Message Field -->
            <div class="col-12 q-mb-xl">
              <div class="field-label">Nội Dung</div>
              <q-input
                v-model="formData.message"
                type="textarea"
                class="custom-input"
                placeholder="Nội dung đóng góp của bạn"
                rows="10"
              />
            </div>

            <!-- Submit Button -->
            <div class="col-12 text-right">
              <q-btn
                type="submit"
                color="black"
                label="Liên Hệ"
                class="submit-btn"
                unelevated
              />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <footer class="footer text-center q-py-lg">
    <div class="container">
      <p class="text-caption q-mb-none">©2025 LACA. All rights reserved.</p>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  subject: '',
  message: '',
});

const submitForm = () => {
  // Handle form submission logic here
  console.log('Form submitted:', formData.value);
};
</script>

<style scoped>
.contact-container {
  height: calc(100vh - 86px); /* Adjust height based on your layout */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: 'Helvetica', 'Arial', sans-serif;
}

.contact-title {
  font-weight: 500;
  color: #000;
}

.address {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

.email-link {
  color: #0066cc;
  text-decoration: none;
  font-size: 16px;
}

.phone-link {
  color: #ff6600;
  text-decoration: none;
  font-size: 16px;
}

.field-label {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}

.required {
  color: #000;
}

.custom-input {
  width: 100%;
}

.custom-input :deep(.q-field__control) {
  padding: 0;
  height: 40px;
}

.custom-input :deep(.q-field__native) {
  padding: 8px 0;
}

.custom-input :deep(.q-field__bottom) {
  padding: 0;
}

.custom-input :deep(.q-field__control:before) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.custom-input :deep(.q-field__control:hover:before) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

.custom-input :deep(.q-field__control:after) {
  height: 1px;
  background-color: #000;
}

.submit-btn {
  width: 100%;
  max-width: 400px;
  height: 48px;
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  .contact-container {
    padding: 0 16px;
  }

  .submit-btn {
    max-width: 100%;
  }
}
</style>
