---
import { getLangFromUrl, useTranslations } from '../i18n/ui';
import { 
  MessageCircle, 
  Package, 
  FileText, 
  MapPin, 
  Drafting, 
  Eye, 
  CheckCircle, 
  Building, 
  FileCheck, 
  Calculator, 
  Handshake, 
  HardHat, 
  Award, 
  Wrench, 
  ClipboardCheck 
} from 'lucide-astro';

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

const workflowSteps = [
  {
    number: '1',
    icon: MessageCircle,
    title: lang === 'ar' ? 'طلب الاستشارة الأولية' : 'Initial Consultation Request',
    description: lang === 'ar' 
      ? 'نستمع لرؤيتك، نُحلل احتياجاتك، ونقدم لك استشارة مهنية أولية توجهك للبداية الصحيحة.'
      : 'We listen to your vision, analyze your needs, and provide you with an initial professional consultation to guide you to the right start.'
  },
  {
    number: '2',
    icon: Package,
    title: lang === 'ar' ? 'اختيار الباقة المناسبة (تصميم + إشراف)' : 'Choosing the Right Package (Design + Supervision)',
    description: lang === 'ar' 
      ? 'نُقدّم لك خيارات باقات التصميم والإشراف حسب طبيعة مشروعك وميزانيتك، مع شرح الخدمات التي تتضمنها كل باقة.'
      : 'We offer you design and supervision package options according to your project nature and budget, with explanation of services included in each package.'
  },
  {
    number: '3',
    icon: FileText,
    title: lang === 'ar' ? 'توقيع عقد التصميم' : 'Design Contract Signing',
    description: lang === 'ar' 
      ? 'توقيع عقد رسمي شامل يوضح نطاق العمل، المخرجات، والجدول الزمني.'
      : 'Signing a comprehensive official contract that clarifies the scope of work, deliverables, and timeline.'
  },
  {
    number: '4',
    icon: MapPin,
    title: lang === 'ar' ? 'زيارة الموقع والرفع المساحي' : 'Site Visit and Survey',
    description: lang === 'ar' 
      ? 'إجراء رفع مساحي دقيق باستخدام أجهزة معتمدة وتوثيق معلومات الموقع.'
      : 'Conducting accurate surveying using certified equipment and documenting site information.'
  },
  {
    number: '5',
    icon: Drafting,
    title: lang === 'ar' ? 'إعداد التصاميم والمخططات الهندسية' : 'Preparing Designs and Engineering Plans',
    description: lang === 'ar' 
      ? 'تصميم معماري، إنشائي، كهربائي وميكانيكي متكامل، وفق كودات البلدية والاشتراطات البيئية والاستدامة.'
      : 'Comprehensive architectural, structural, electrical and mechanical design, according to municipal codes and environmental and sustainability requirements.'
  },
  {
    number: '6',
    icon: Eye,
    title: lang === 'ar' ? 'مراجعة المالك للمخططات' : 'Owner Review of Plans',
    description: lang === 'ar' 
      ? 'عرض المخططات للمالك لمراجعتها وإبداء الملاحظات الفنية والجمالية.'
      : 'Presenting plans to the owner for review and providing technical and aesthetic comments.'
  },
  {
    number: '7',
    icon: CheckCircle,
    title: lang === 'ar' ? 'الاعتماد النهائي من المالك' : 'Final Approval from Owner',
    description: lang === 'ar' 
      ? 'اعتماد نهائي للتصاميم المعدلة تمهيدًا للتقديم على الجهات المختصة.'
      : 'Final approval of modified designs in preparation for submission to relevant authorities.'
  },
  {
    number: '8',
    icon: Building,
    title: lang === 'ar' ? 'اعتماد الجهات الرسمية (بلدية رأس الخيمة)' : 'Official Authority Approval (Ras Al Khaimah Municipality)',
    description: lang === 'ar' 
      ? 'تقديم الملف الهندسي الكامل للبلدية ومتابعة الإجراءات حتى إصدار رخصة البناء.'
      : 'Submitting the complete engineering file to the municipality and following up procedures until building permit issuance.'
  },
  {
    number: '9',
    icon: FileCheck,
    title: lang === 'ar' ? 'إعداد وثائق المناقصة وطرحها' : 'Preparing and Issuing Tender Documents',
    description: lang === 'ar' 
      ? 'إعداد مستندات الطرح (مخططات تنفيذية، BOQ، مواصفات)، وتوزيعها على مقاولين معتمدين.'
      : 'Preparing tender documents (shop drawings, BOQ, specifications), and distributing them to certified contractors.'
  },
  {
    number: '10',
    icon: Calculator,
    title: lang === 'ar' ? 'تحليل العطاءات واختيار المقاول' : 'Bid Analysis and Contractor Selection',
    description: lang === 'ar' 
      ? 'تحليل العروض فنيًا وماليًا، وتقديم توصية مهنية للمالك لاختيار الأنسب.'
      : 'Technical and financial analysis of offers, and providing professional recommendation to the owner for selecting the most suitable.'
  },
  {
    number: '11',
    icon: Handshake,
    title: lang === 'ar' ? 'توقيع عقد التنفيذ وتسليم الموقع' : 'Execution Contract Signing and Site Handover',
    description: lang === 'ar' 
      ? 'توقيع عقد المقاولة، ثم إصدار محضر تسليم الموقع الرسمي بحضور الاستشاري.'
      : 'Signing the contracting agreement, then issuing official site handover minutes in the presence of the consultant.'
  },
  {
    number: '12',
    icon: HardHat,
    title: lang === 'ar' ? 'الإشراف الهندسي خلال التنفيذ' : 'Engineering Supervision During Execution',
    description: lang === 'ar' 
      ? 'متابعة التنفيذ ميدانيًا، إصدار تقارير إشراف، اعتماد المواد، والمطابقة مع كود البناء والسلامة.'
      : 'Field monitoring of execution, issuing supervision reports, material approval, and compliance with building and safety codes.'
  },
  {
    number: '13',
    icon: Award,
    title: lang === 'ar' ? 'استخراج شهادة الإنجاز' : 'Completion Certificate Issuance',
    description: lang === 'ar' 
      ? 'إعداد وتقديم طلب شهادة الإنجاز من بلدية رأس الخيمة، والتي تُستخدم لتوصيل الكهرباء، المياه، والاتصالات.'
      : 'Preparing and submitting completion certificate application from Ras Al Khaimah Municipality, which is used for electricity, water, and telecommunications connection.'
  },
  {
    number: '14',
    icon: Wrench,
    title: lang === 'ar' ? 'متابعة أعمال الصيانة خلال الضمان' : 'Maintenance Work Follow-up During Warranty',
    description: lang === 'ar' 
      ? 'الإشراف على تنفيذ الملاحظات المسجلة في الاستلام الابتدائي، والتأكد من جاهزية الموقع.'
      : 'Supervising the implementation of observations recorded in preliminary handover, and ensuring site readiness.'
  },
  {
    number: '15',
    icon: ClipboardCheck,
    title: lang === 'ar' ? 'الاستلام النهائي للمشروع' : 'Final Project Handover',
    description: lang === 'ar' 
      ? 'إصدار محضر استلام نهائي رسمي، وإغلاق الملف الهندسي للمشروع.'
      : 'Issuing official final handover minutes, and closing the engineering file for the project.'
  }
];
---

<section id="workflow" class="section-padding bg-white dark:bg-blueprint-primary">
  <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('workflow.title')}
      </h2>
      <h3 class="text-2xl md:text-3xl font-semibold text-blueprint-accent mb-6">
        {t('workflow.subtitle')}
      </h3>
      <div class="w-24 h-1 bg-blueprint-accent mx-auto mb-8"></div>
      <p class="text-xl text-blueprint-dark dark:text-blueprint-light max-w-4xl mx-auto">
        {t('workflow.description')}
      </p>
    </div>

    <!-- Timeline -->
    <div class="relative">
      <!-- Timeline Line -->
      <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-blueprint-accent/30 h-full hidden lg:block"></div>
      
      <!-- Steps -->
      <div class="space-y-12">
        {workflowSteps.map((step, index) => (
          <div 
            class={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:space-x-8 rtl:lg:space-x-reverse`}
            data-aos="fade-up"
            data-aos-delay={index * 100}
          >
            <!-- Content -->
            <div class={`flex-1 ${index % 2 === 0 ? 'lg:text-right rtl:lg:text-left' : 'lg:text-left rtl:lg:text-right'} text-center lg:text-left`}>
              <div class="bg-blueprint-light dark:bg-slate-800 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 border border-blueprint-accent/10">
                <div class="flex items-center justify-center lg:hidden mb-4">
                  <div class="flex items-center justify-center w-16 h-16 bg-blueprint-accent rounded-full text-white font-bold text-xl">
                    {step.number}
                  </div>
                </div>
                
                <h3 class="text-xl font-bold text-blueprint-primary dark:text-white mb-3">
                  {step.title}
                </h3>
                <p class="text-blueprint-dark dark:text-blueprint-light leading-relaxed">
                  {step.description}
                </p>
              </div>
            </div>

            <!-- Timeline Node -->
            <div class="relative flex-shrink-0 hidden lg:flex">
              <div class="flex items-center justify-center w-20 h-20 bg-blueprint-accent rounded-full text-white font-bold text-xl shadow-lg z-10">
                {step.number}
              </div>
              <div class="absolute inset-0 flex items-center justify-center w-20 h-20 bg-blueprint-accent/20 rounded-full animate-pulse"></div>
            </div>

            <!-- Empty space for alternating layout -->
            <div class="flex-1 hidden lg:block"></div>
          </div>
        ))}
      </div>
    </div>

    <!-- Bottom CTA -->
    <div class="text-center mt-16" data-aos="fade-up" data-aos-delay="800">
      <div class="bg-blueprint-accent/10 rounded-2xl p-8 border border-blueprint-accent/20">
        <h3 class="text-2xl font-bold text-blueprint-primary dark:text-white mb-4">
          {t('workflow.cta.title')}
        </h3>
        <p class="text-lg text-blueprint-dark dark:text-blueprint-light mb-6">
          {t('workflow.cta.subtitle')}
        </p>
        <a href="#contact" class="btn-primary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse">
          <MessageCircle class="w-5 h-5" />
          <span>{t('workflow.cta.button')}</span>
        </a>
      </div>
    </div>
  </div>
</section>