---
import BaseLayout from "../../layouts/BaseLayout.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import CTA from "../../components/CTA.astro";
import { t } from '../../utils/i18n';

const pageTitle = `${t('nav.about', 'en')} | ${t('meta.title', 'en')}`;
const pageDescription = t('meta.description', 'en');
---

<BaseLayout 
  title={pageTitle}
  description={pageDescription}
>
  <Header />
  <main>
    <!-- About Hero -->
    <section class="py-20 bg-gradient-to-br from-background via-background to-muted">
      <div class="container-custom">
        <div class="text-center max-w-4xl mx-auto animate-on-scroll">
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6">
            {t('about.title', 'en')}
          </h1>
          <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
            {t('about.subtitle', 'en')}
          </p>
        </div>
      </div>
    </section>

    <!-- Company Story -->
    <section class="py-20 bg-background">
      <div class="container-custom">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- Content -->
          <div class="animate-on-scroll">
            <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-6">
              {t('about.story.title', 'en')}
            </h2>
            <p class="text-lg text-muted-foreground mb-6 leading-relaxed">
              {t('about.story.description', 'en')}
            </p>
            <p class="text-lg text-muted-foreground leading-relaxed">
              {t('about.story.mission', 'en')}
            </p>
          </div>
        </div>
      </div>
    </section>

    <CTA />
  </main>
  <Footer />
</BaseLayout> 