<template>
  <div class="min-h-screen bg-background flex flex-col">
    <Header />
    <main class="flex-grow pt-24 pb-20">
    <div class="container mx-auto px-4 py-12">
      <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-12">
          <h1 class="text-4xl md:text-5xl font-display font-bold text-foreground mb-4">
            {{ t("footer.careers") }}
          </h1>
          <p class="text-lg text-foreground/60">
            {{ t("careers.subtitle") }}
          </p>
        </div>

        <!-- Content -->
        <div class="space-y-8">
          <!-- Why Work With Us -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("careers.whyWork.title") }}
            </h2>
            <div class="grid md:grid-cols-2 gap-6">
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="text-xl font-display font-bold text-foreground mb-3">
                  {{ t("careers.whyWork.innovation.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("careers.whyWork.innovation.content") }}
                </p>
              </div>
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="text-xl font-display font-bold text-foreground mb-3">
                  {{ t("careers.whyWork.growth.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("careers.whyWork.growth.content") }}
                </p>
              </div>
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="text-xl font-display font-bold text-foreground mb-3">
                  {{ t("careers.whyWork.team.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("careers.whyWork.team.content") }}
                </p>
              </div>
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="text-xl font-display font-bold text-foreground mb-3">
                  {{ t("careers.whyWork.impact.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("careers.whyWork.impact.content") }}
                </p>
              </div>
            </div>
          </section>

          <!-- Open Positions -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("careers.openPositions.title") }}
            </h2>
            <div class="space-y-4">
              <div class="border border-gray-200 rounded-xl p-6 hover:border-primary/30 transition-colors">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                  <div>
                    <h3 class="text-xl font-display font-bold text-foreground mb-2">
                      {{ t("careers.openPositions.position1.title") }}
                    </h3>
                    <div class="flex flex-wrap gap-2 mb-3">
                      <span class="px-3 py-1 bg-gray-100 text-foreground/70 text-xs font-bold rounded-full">
                        {{ t("careers.openPositions.position1.type") }}
                      </span>
                      <span class="px-3 py-1 bg-gray-100 text-foreground/70 text-xs font-bold rounded-full">
                        {{ t("careers.openPositions.position1.location") }}
                      </span>
                    </div>
                    <p class="text-foreground/70">
                      {{ t("careers.openPositions.position1.description") }}
                    </p>
                  </div>
                  <router-link 
                    to="/contact?subject=3D%20Printing%20Technician%20Application"
                    class="inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors whitespace-nowrap"
                  >
                    {{ t("careers.apply") }}
                  </router-link>
                </div>
              </div>

              <div class="border border-gray-200 rounded-xl p-6 hover:border-primary/30 transition-colors">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                  <div>
                    <h3 class="text-xl font-display font-bold text-foreground mb-2">
                      {{ t("careers.openPositions.position2.title") }}
                    </h3>
                    <div class="flex flex-wrap gap-2 mb-3">
                      <span class="px-3 py-1 bg-gray-100 text-foreground/70 text-xs font-bold rounded-full">
                        {{ t("careers.openPositions.position2.type") }}
                      </span>
                      <span class="px-3 py-1 bg-gray-100 text-foreground/70 text-xs font-bold rounded-full">
                        {{ t("careers.openPositions.position2.location") }}
                      </span>
                    </div>
                    <p class="text-foreground/70">
                      {{ t("careers.openPositions.position2.description") }}
                    </p>
                  </div>
                  <router-link 
                    to="/contact?subject=Customer%20Support%20Specialist%20Application"
                    class="inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors whitespace-nowrap"
                  >
                    {{ t("careers.apply") }}
                  </router-link>
                </div>
              </div>
            </div>
          </section>

          <!-- Application Process -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("careers.process.title") }}
            </h2>
            <div class="grid md:grid-cols-4 gap-6">
              <div class="text-center">
                <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                  1
                </div>
                <h3 class="font-display font-bold text-foreground mb-2">
                  {{ t("careers.process.step1.title") }}
                </h3>
                <p class="text-sm text-foreground/70">
                  {{ t("careers.process.step1.description") }}
                </p>
              </div>
              <div class="text-center">
                <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                  2
                </div>
                <h3 class="font-display font-bold text-foreground mb-2">
                  {{ t("careers.process.step2.title") }}
                </h3>
                <p class="text-sm text-foreground/70">
                  {{ t("careers.process.step2.description") }}
                </p>
              </div>
              <div class="text-center">
                <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                  3
                </div>
                <h3 class="font-display font-bold text-foreground mb-2">
                  {{ t("careers.process.step3.title") }}
                </h3>
                <p class="text-sm text-foreground/70">
                  {{ t("careers.process.step3.description") }}
                </p>
              </div>
              <div class="text-center">
                <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                  4
                </div>
                <h3 class="font-display font-bold text-foreground mb-2">
                  {{ t("careers.process.step4.title") }}
                </h3>
                <p class="text-sm text-foreground/70">
                  {{ t("careers.process.step4.description") }}
                </p>
              </div>
            </div>
          </section>

          <!-- Contact CTA -->
          <section class="bg-primary/5 rounded-2xl p-8 text-center">
            <h2 class="text-2xl font-display font-bold text-foreground mb-4">
              {{ t("careers.cta.title") }}
            </h2>
            <p class="text-foreground/70 mb-6 max-w-2xl mx-auto">
              {{ t("careers.cta.content") }}
            </p>
            <router-link 
              to="/contact?subject=General%20Career%20Inquiry"
              class="inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors"
            >
              {{ t("careers.contact") }}
            </router-link>
          </section>
        </div>
      </div>
    </div>
  </main>
  <Footer />
</div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useHead } from "@unhead/vue";
import { computed } from "vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

const { t } = useI18n();

useHead({
  title: computed(() => t('footer.careers')),
  meta: [
    { name: 'description', content: computed(() => t('careers.subtitle')) }
  ]
});
</script>
