<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.about") }}
          </h1>
          <p class="text-lg text-foreground/60">
            {{ t("about.subtitle") }}
          </p>
        </div>

        <!-- Content -->
        <div class="space-y-8">
          <!-- Mission Section -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-4">
              {{ t("about.mission.title") }}
            </h2>
            <div class="prose prose-lg max-w-none">
              <p class="text-foreground/70">
                {{ t("about.mission.content") }}
              </p>
            </div>
          </section>

          <!-- Values Section -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("about.values.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("about.values.trust.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("about.values.trust.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("about.values.quality.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("about.values.quality.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("about.values.innovation.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("about.values.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("about.values.community.title") }}
                </h3>
                <p class="text-foreground/70">
                  {{ t("about.values.community.content") }}
                </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("about.cta.title") }}
            </h2>
            <p class="text-foreground/70 mb-6 max-w-2xl mx-auto">
              {{ t("about.cta.content") }}
            </p>
            <router-link 
              to="/contact" 
              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("footer.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.about')),
  meta: [
    { name: 'description', content: computed(() => t('about.subtitle')) }
  ]
});
</script>