radionica3d/src/pages/Contact.vue

<template>
  <div class="min-h-screen bg-white">
    <div class="container mx-auto px-4 py-12">
      <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="mb-12">
          <h1 class="text-4xl md:text-5xl font-display font-bold text-foreground mb-4">
            {{ t("footer.contact") }}
          </h1>
          <p class="text-lg text-foreground/60">
            {{ t("contact.subtitle") }}
          </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-12">
          <!-- Contact Information -->
          <div>
            <h2 class="text-2xl font-display font-bold text-foreground mb-8">
              {{ t("contact.info.title") }}
            </h2>
            
            <div class="space-y-6">
              <!-- Email -->
              <div class="flex items-start gap-4">
                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </div>
                <div>
                  <h3 class="font-display font-bold text-foreground mb-1">
                    {{ t("contact.info.email.title") }}
                  </h3>
                  <a href="mailto:hello@radionica3d.com" class="text-foreground/70 hover:text-primary transition-colors">
                    hello@radionica3d.com
                  </a>
                  <p class="text-sm text-foreground/60 mt-1">
                    {{ t("contact.info.email.description") }}
                  </p>
                </div>
              </div>

              <!-- Location -->
              <div class="flex items-start gap-4">
                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </div>
                <div>
                  <h3 class="font-display font-bold text-foreground mb-1">
                    {{ t("contact.info.location.title") }}
                  </h3>
                  <p class="text-foreground/70">
                    Herceg Novi, Montenegro
                  </p>
                  <p class="text-sm text-foreground/60 mt-1">
                    {{ t("contact.info.location.description") }}
                  </p>
                </div>
              </div>

              <!-- Hours -->
              <div class="flex items-start gap-4">
                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div>
                  <h3 class="font-display font-bold text-foreground mb-1">
                    {{ t("contact.info.hours.title") }}
                  </h3>
                  <p class="text-foreground/70">
                    {{ t("contact.info.hours.schedule") }}
                  </p>
                  <p class="text-sm text-foreground/60 mt-1">
                    {{ t("contact.info.hours.description") }}
                  </p>
                </div>
              </div>

              <!-- Social Media -->
              <div class="flex items-start gap-4">
                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </div>
                <div>
                  <h3 class="font-display font-bold text-foreground mb-1">
                    {{ t("contact.info.social.title") }}
                  </h3>
                  <div class="flex gap-4 mt-2">
                    <a href="#" class="text-foreground/70 hover:text-primary transition-colors">
                      {{ t("contact.info.social.linkedin") }}
                    </a>
                    <a href="#" class="text-foreground/70 hover:text-primary transition-colors">
                      {{ t("contact.info.social.instagram") }}
                    </a>
                    <a href="#" class="text-foreground/70 hover:text-primary transition-colors">
                      {{ t("contact.info.social.facebook") }}
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <!-- Map Placeholder -->
            <div class="mt-8 bg-gray-100 rounded-xl h-64 flex items-center justify-center">
              <p class="text-foreground/60">
                {{ t("contact.map.placeholder") }}
              </p>
            </div>
          </div>

          <!-- Contact Form -->
          <div>
            <h2 class="text-2xl font-display font-bold text-foreground mb-8">
              {{ t("contact.form.title") }}
            </h2>
            
            <form @submit.prevent="handleSubmit" class="space-y-6">
              <!-- Name -->
              <div>
                <label class="block text-sm font-bold text-foreground mb-2">
                  {{ t("contact.form.name.label") }}
                </label>
                <input 
                  type="text" 
                  v-model="form.name"
                  :placeholder="t('contact.form.name.placeholder')"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary"
                  required
                />
              </div>

              <!-- Email -->
              <div>
                <label class="block text-sm font-bold text-foreground mb-2">
                  {{ t("contact.form.email.label") }}
                </label>
                <input 
                  type="email" 
                  v-model="form.email"
                  :placeholder="t('contact.form.email.placeholder')"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary"
                  required
                />
              </div>

              <!-- Subject -->
              <div>
                <label class="block text-sm font-bold text-foreground mb-2">
                  {{ t("contact.form.subject.label") }}
                </label>
                <select 
                  v-model="form.subject"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary"
                  required
                >
                  <option value="">{{ t("contact.form.subject.placeholder") }}</option>
                  <option value="general">{{ t("contact.form.subject.options.general") }}</option>
                  <option value="quote">{{ t("contact.form.subject.options.quote") }}</option>
                  <option value="support">{{ t("contact.form.subject.options.support") }}</option>
                  <option value="careers">{{ t("contact.form.subject.options.careers") }}</option>
                  <option value="other">{{ t("contact.form.subject.options.other") }}</option>
                </select>
              </div>

              <!-- Message -->
              <div>
                <label class="block text-sm font-bold text-foreground mb-2">
                  {{ t("contact.form.message.label") }}
                </label>
                <textarea 
                  v-model="form.message"
                  :placeholder="t('contact.form.message.placeholder')"
                  rows="6"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary resize-none"
                  required
                ></textarea>
              </div>

              <!-- File Upload -->
              <div>
                <label class="block text-sm font-bold text-foreground mb-2">
                  {{ t("contact.form.file.label") }}
                </label>
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary/50 transition-colors">
                  <input 
                    type="file" 
                    ref="fileInput"
                    @change="handleFileUpload"
                    class="hidden"
                    accept=".stl,.obj,.step,.3mf"
                  />
                  <div class="mb-3">
                    <svg class="w-12 h-12 text-gray-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                    </svg>
                  </div>
                  <p class="text-foreground/70 mb-2">
                    {{ t("contact.form.file.description") }}
                  </p>
                  <button 
                    type="button"
                    @click="$refs.fileInput.click()"
                    class="px-4 py-2 bg-gray-100 text-foreground font-bold rounded-lg hover:bg-gray-200 transition-colors"
                  >
                    {{ t("contact.form.file.button") }}
                  </button>
                  <p v-if="form.file" class="text-sm text-foreground/60 mt-3">
                    {{ t("contact.form.file.selected", { fileName: form.file.name }) }}
                  </p>
                </div>
              </div>

              <!-- Submit Button -->
              <button 
                type="submit"
                :disabled="isSubmitting"
                class="w-full px-6 py-4 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ isSubmitting ? t("contact.form.submitting") : t("contact.form.submit") }}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const form = ref({
  name: "",
  email: "",
  subject: "",
  message: "",
  file: null as File | null,
});

const isSubmitting = ref(false);

const handleFileUpload = (event: Event) => {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files[0]) {
    form.value.file = input.files[0];
  }
};

const handleSubmit = async () => {
  isSubmitting.value = true;
  
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1500));
  
  alert(t("contact.form.success"));
  form.value = { name: "", email: "", subject: "", message: "", file: null };
  isSubmitting.value = false;
};
</script>