src/components/Hero.astro

---
import { getLangFromUrl, useTranslations } from '../i18n/ui';
import { ArrowRight, MessageCircle } from 'lucide-astro';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const isRtl = lang === 'ar' || lang === 'ur' || lang === 'ps';
---

<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-blueprint-primary via-blueprint-primary to-blue-900 dark:from-blueprint-primary dark:via-slate-900 dark:to-blueprint-primary">
  <!-- Animated Background -->
  <div class="absolute inset-0">
    <div class="floating-shapes"></div>
    <div class="blueprint-pattern opacity-10"></div>
  </div>
  
  <!-- Animated Blueprint Lines -->
  <div class="absolute inset-0 overflow-hidden">
    <svg class="absolute top-1/4 left-1/4 w-96 h-96 opacity-5" viewBox="0 0 400 400">
      <defs>
        <pattern id="blueprint-grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#C69C49" stroke-width="1"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#blueprint-grid)" />
      <rect x="50" y="50" width="300" height="200" fill="none" stroke="#C69C49" stroke-width="2" opacity="0.6">
        <animate attributeName="stroke-dasharray" values="0 800;800 0;0 800" dur="8s" repeatCount="indefinite"/>
      </rect>
    </svg>
  </div>

  <div class="container-custom relative z-10">
    <div class="text-center px-4" data-aos="fade-up" data-aos-duration="1000">
      <!-- Logo Animation -->
      <div class="mb-8" data-aos="zoom-in" data-aos-delay="200">
        <div class="inline-flex items-center justify-center mb-6">
          <img src="/logo.jpg" alt="Blueprint Engineering Consultancy Logo" class="h-28 w-auto animate-pulse-slow" />
        </div>
      </div>

      <!-- Hero Title -->
      <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight" data-aos="fade-up" data-aos-delay="400">
        <span class="block text-blueprint-accent animate-fade-in">{t('hero.title')}</span>
        <span class="block text-2xl md:text-3xl lg:text-4xl font-normal mt-2 text-blueprint-accent">شركة بلو برينت للاستشارات الهندسية</span>
      </h1>

      <!-- Hero Description -->
      <p class="text-xl md:text-2xl text-blueprint-light max-w-4xl mx-auto mb-8 leading-relaxed" data-aos="fade-up" data-aos-delay="600">
        {t('hero.description')}
      </p>

      <!-- CTA Buttons -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="800">
        <a href="#contact" class="btn-primary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse group">
          <MessageCircle class="w-5 h-5" />
          <span>{t('hero.cta.consultation')}</span>
        </a>
        <a href="#services" class="btn-secondary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse text-white border-white hover:bg-white hover:text-blueprint-primary group">
          <span>{t('hero.cta.services')}</span>
          <ArrowRight class={`w-5 h-5 transition-transform group-hover:translate-x-1 ${isRtl ? 'rtl-flip' : ''}`} />
        </a>
      </div>

      <!-- Scroll Indicator -->
      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2" data-aos="fade-up" data-aos-delay="1000">
        <div class="w-6 h-10 border-2 border-white/50 rounded-full flex justify-center">
          <div class="w-1 h-3 bg-blueprint-accent rounded-full mt-2 animate-bounce"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  
  .typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 4s steps(40, end) 1s 1 normal both;
  }
</style>