---
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';
---

<BaseLayout 
  title={`${t('nav.about')} | ${t('meta.title')}`}
  description="Learn about Tiber365 - your trusted IT partner specializing in Microsoft 365, networking, and comprehensive IT solutions for small businesses."
>
  <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')}
          </h1>
          <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
            {t('about.subtitle')}
          </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">
              Our Story
            </h2>
            <p class="text-lg text-muted-foreground mb-6 leading-relaxed">
              {t('about.description')}
            </p>
            <p class="text-lg text-muted-foreground leading-relaxed">
              {t('about.mission')}
            </p>
          </div>
          
          <!-- Visual -->
          <div class="animate-on-scroll" style="animation-delay: 0.2s">
            <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
              <div class="text-center">
                <div class="text-6xl mb-6">🚀</div>
                <h3 class="text-xl font-semibold text-foreground mb-4">Modern IT Solutions</h3>
                <p class="text-muted-foreground">
                  Empowering businesses with cutting-edge technology and reliable support.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Stats -->
    <section class="py-20 bg-muted/30">
      <div class="container-custom">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
          <div class="animate-on-scroll">
            <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">5+</div>
            <div class="text-muted-foreground">{t('about.experience')}</div>
          </div>
          <div class="animate-on-scroll" style="animation-delay: 0.1s">
            <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">100+</div>
            <div class="text-muted-foreground">{t('about.clients')}</div>
          </div>
          <div class="animate-on-scroll" style="animation-delay: 0.2s">
            <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">200+</div>
            <div class="text-muted-foreground">{t('about.projects')}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Values -->
    <section class="py-20 bg-background">
      <div class="container-custom">
        <div class="text-center mb-16 animate-on-scroll">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
            Our Values
          </h2>
          <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
            The principles that guide everything we do
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="card p-6 text-center animate-on-scroll">
            <div class="text-4xl mb-4">🔒</div>
            <h3 class="text-xl font-semibold text-foreground mb-3">Security First</h3>
            <p class="text-muted-foreground">
              We prioritize the security and privacy of your business data above all else.
            </p>
          </div>
          
          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s">
            <div class="text-4xl mb-4">🤝</div>
            <h3 class="text-xl font-semibold text-foreground mb-3">Reliability</h3>
            <p class="text-muted-foreground">
              Count on us for consistent, dependable service that keeps your business running.
            </p>
          </div>
          
          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s">
            <div class="text-4xl mb-4">💡</div>
            <h3 class="text-xl font-semibold text-foreground mb-3">Innovation</h3>
            <p class="text-muted-foreground">
              We stay ahead of technology trends to bring you the best solutions.
            </p>
          </div>
          
          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.3s">
            <div class="text-4xl mb-4">📞</div>
            <h3 class="text-xl font-semibold text-foreground mb-3">Support</h3>
            <p class="text-muted-foreground">
              Dedicated support when you need it, with real people who understand your business.
            </p>
          </div>
          
          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.4s">
            <div class="text-4xl mb-4">⚡</div>
            <h3 class="text-xl font-semibold text-foreground mb-3">Efficiency</h3>
            <p class="text-muted-foreground">
              Streamlined processes and quick resolutions to minimize downtime.
            </p>
          </div>
          
          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.5s">
            <div class="text-4xl mb-4">🎯</div>
            <h3 class="text-xl font-semibold text-foreground mb-3">Focus</h3>
            <p class="text-muted-foreground">
              Laser-focused on small business needs and cost-effective solutions.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Team Section -->
    <section class="py-20 bg-muted/30">
      <div class="container-custom">
        <div class="text-center mb-16 animate-on-scroll">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
            Our Expertise
          </h2>
          <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
            Specialized knowledge in the technologies that matter to your business
          </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
          <div class="card p-4 text-center animate-on-scroll">
            <div class="text-3xl mb-2">🏢</div>
            <div class="text-sm font-medium text-foreground">Microsoft 365</div>
          </div>
          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.1s">
            <div class="text-3xl mb-2">☁️</div>
            <div class="text-sm font-medium text-foreground">Cloud Services</div>
          </div>
          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.2s">
            <div class="text-3xl mb-2">🌐</div>
            <div class="text-sm font-medium text-foreground">Networking</div>
          </div>
          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.3s">
            <div class="text-3xl mb-2">🔒</div>
            <div class="text-sm font-medium text-foreground">Security</div>
          </div>
          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.4s">
            <div class="text-3xl mb-2">🚀</div>
            <div class="text-sm font-medium text-foreground">Web Hosting</div>
          </div>
          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.5s">
            <div class="text-3xl mb-2">⚙️</div>
            <div class="text-sm font-medium text-foreground">Automation</div>
          </div>
        </div>
      </div>
    </section>

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