---
import { getLangFromUrl, useTranslations } from '../i18n/ui';
import { Target, Eye, Heart, Award } from 'lucide-astro';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);

const values = [
  {
    icon: Target,
    title: t('about.values.precision.title'),
    description: t('about.values.precision.description')
  },
  {
    icon: Heart,
    title: t('about.values.innovation.title'),
    description: t('about.values.innovation.description')
  },
  {
    icon: Award,
    title: t('about.values.quality.title'),
    description: t('about.values.quality.description')
  }
];
---

<section id="about" class="section-padding bg-blueprint-light dark:bg-slate-900">
  <div class="container-custom">
    <!-- Section Header -->
    <div class="text-center mb-16" data-aos="fade-up">
      <h2 class="text-4xl md:text-5xl font-bold text-blueprint-primary dark:text-white mb-6">
        {t('about.title')}
      </h2>
      <div class="w-24 h-1 bg-blueprint-accent mx-auto mb-8"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
      <!-- Left Content -->
      <div data-aos="fade-right">
        <h3 class="text-3xl font-bold text-blueprint-primary dark:text-white mb-6">
          {t('about.subtitle')}
        </h3>
        
        <div class="space-y-6 text-lg text-blueprint-dark dark:text-blueprint-light leading-relaxed">
          <p>{t('about.description.1')}</p>
          <p>{t('about.description.2')}</p>
          <p>{t('about.description.3')}</p>
        </div>

        <!-- Vision & Mission -->
        <div class="mt-12 space-y-8">
          <div class="flex items-start space-x-4 rtl:space-x-reverse">
            <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
              <Eye class="w-6 h-6 text-blueprint-accent" />
            </div>
            <div>
              <h4 class="text-xl font-bold text-blueprint-primary dark:text-white mb-2">
                {t('about.vision.title')}
              </h4>
              <p class="text-blueprint-dark dark:text-blueprint-light">
                {t('about.vision.description')}
              </p>
            </div>
          </div>

          <div class="flex items-start space-x-4 rtl:space-x-reverse">
            <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
              <Target class="w-6 h-6 text-blueprint-accent" />
            </div>
            <div>
              <h4 class="text-xl font-bold text-blueprint-primary dark:text-white mb-2">
                {t('about.mission.title')}
              </h4>
              <p class="text-blueprint-dark dark:text-blueprint-light">
                {t('about.mission.description')}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Content - Values -->
      <div data-aos="fade-left">
        <!-- Values -->
        <div class="space-y-6">
          <h4 class="text-2xl font-bold text-blueprint-primary dark:text-white text-center mb-8">
            {t('about.values.title')}
          </h4>
          
          {values.map((value, index) => (
            <div 
              class="flex items-center space-x-4 rtl:space-x-reverse p-6 bg-white dark:bg-blueprint-primary rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
              data-aos="fade-up"
              data-aos-delay={index * 150}
            >
              <div class="flex items-center justify-center w-16 h-16 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
                <value.icon class="w-8 h-8 text-blueprint-accent" />
              </div>
              <div>
                <h5 class="text-xl font-bold text-blueprint-primary dark:text-white mb-2">
                  {value.title}
                </h5>
                <p class="text-blueprint-dark dark:text-blueprint-light">
                  {value.description}
                </p>
              </div>
            </div>
          ))}
        </div>

        <!-- Why Choose Blueprint -->
        <div class="mt-12 p-6 bg-blueprint-accent/10 rounded-xl border border-blueprint-accent/20" data-aos="fade-up" data-aos-delay="600">
          <h4 class="text-xl font-bold text-blueprint-primary dark:text-white mb-4">
            {t('about.why.title')}
          </h4>
          <ul class="space-y-2 text-blueprint-dark dark:text-blueprint-light">
            <li class="flex items-start space-x-2 rtl:space-x-reverse">
              <span class="text-blueprint-accent mt-1">•</span>
              <span>{t('about.why.point1')}</span>
            </li>
            <li class="flex items-start space-x-2 rtl:space-x-reverse">
              <span class="text-blueprint-accent mt-1">•</span>
              <span>{t('about.why.point2')}</span>
            </li>
            <li class="flex items-start space-x-2 rtl:space-x-reverse">
              <span class="text-blueprint-accent mt-1">•</span>
              <span>{t('about.why.point3')}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>