import { type Metadata } from "next";
import { SITE } from "@/lib/config";
import { LangParams } from "@/types";
import Link from "next/link";
import IndustryJsonLd from "@/components/IndustryJsonLd";

export function generateStaticParams() {
  return [{ lang: "en" }, { lang: "ar" }];
}

export const revalidate = 3600;

export async function generateMetadata({
  params,
}: LangParams): Promise<Metadata> {
  const title =
    params.lang === "ar"
      ? "حلول تأجير المركبات والسائقين الخاصين | مويدي"
      : "Vehicle Rental & Chauffeur Solutions | Mawidi";

  const description =
    params.lang === "ar"
      ? "حلول واتساب متكاملة لشركات تأجير السيارات والسائقين الخاصين. أتمتة الحجوزات وإدارة الأسطول وتتبع السائقين"
      : "Complete WhatsApp solutions for vehicle rental and chauffeur service companies. Automate bookings, fleet management, and driver coordination";

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      locale: params.lang,
      alternateLocale: params.lang === "ar" ? "en" : "ar",
      type: "website",
      siteName: SITE.brand,
    },
  };
}

const content = {
  ar: {
    hero: {
      title: "حلول واتساب الذكية لشركات تأجير المركبات والسائقين",
      subtitle: "أتمتة كاملة لعمليات الحجز وإدارة الأسطول وتنسيق السائقين",
      cta: "احجز عرض تجريبي",
    },
    challenges: {
      badge: "التحديات",
      title: "تحديات الصناعة",
      subtitle: "حلول مصممة للتغلب على تحديات قطاع النقل",
      items: [
        {
          icon: "📅",
          title: "إدارة الحجوزات المعقدة",
          description:
            "صعوبة في تنسيق الحجوزات المتعددة والتعامل مع التغييرات والإلغاءات",
        },
        {
          icon: "👥",
          title: "تنسيق السائقين",
          description: "تحديات في جدولة السائقين وتتبع المواقع وإدارة المهام",
        },
        {
          icon: "🚗",
          title: "إدارة الأسطول",
          description: "صعوبة في تتبع المركبات وجدولة الصيانة ومراقبة الأداء",
        },
        {
          icon: "⏰",
          title: "الاستجابة السريعة",
          description: "ضغط لتوفير خدمة فورية على مدار الساعة للعملاء",
        },
      ],
    },
    solutions: {
      badge: "الحلول",
      title: "حلول واتساب المتكاملة",
      subtitle: "أتمتة ذكية لكل جانب من جوانب أعمالك",
      items: [
        {
          title: "نظام الحجز الفوري",
          description: "حجوزات فورية عبر واتساب مع التأكيد التلقائي",
          features: [
            "حجز فوري بدون تطبيقات",
            "اختيار نوع المركبة والخدمة",
            "حساب الأسعار التلقائي",
            "تأكيد وإشعارات فورية",
          ],
        },
        {
          title: "إدارة السائقين الذكية",
          description: "تنسيق كامل للسائقين وتوزيع المهام",
          features: [
            "توزيع المهام التلقائي",
            "تتبع مواقع السائقين",
            "إشعارات المهام الجديدة",
            "تقارير الأداء اليومية",
          ],
        },
        {
          title: "مراقبة الأسطول",
          description: "نظام متكامل لإدارة وتتبع المركبات",
          features: [
            "حالة المركبات اللحظية",
            "جدولة الصيانة الذكية",
            "تتبع استهلاك الوقود",
            "تقارير الاستخدام",
          ],
        },
        {
          title: "خدمة العملاء الآلية",
          description: "دعم على مدار الساعة بالذكاء الاصطناعي",
          features: [
            "رد فوري على الاستفسارات",
            "معلومات الأسعار والتوفر",
            "تعديل وإلغاء الحجوزات",
            "دعم متعدد اللغات",
          ],
        },
      ],
    },
    useCases: {
      badge: "حالات الاستخدام",
      title: "حالات الاستخدام",
      subtitle: "كيف تستفيد شركات النقل من حلولنا",
      items: [
        {
          icon: "✈️",
          title: "خدمات المطار",
          description:
            "حجوزات النقل من وإلى المطار مع تتبع الرحلات وتنسيق السائقين",
        },
        {
          icon: "👔",
          title: "النقل التنفيذي",
          description: "خدمات الليموزين والسيارات الفاخرة للشركات والأفراد",
        },
        {
          icon: "💒",
          title: "تأجير المناسبات",
          description: "سيارات الزفاف والمناسبات الخاصة مع باقات مخصصة",
        },
        {
          icon: "🌍",
          title: "الرحلات السياحية",
          description: "جولات سياحية وخدمات نقل للمجموعات السياحية",
        },
        {
          icon: "📋",
          title: "التأجير طويل الأمد",
          description: "عقود تأجير شهرية وسنوية للأفراد والشركات",
        },
        {
          icon: "🚚",
          title: "خدمات التوصيل",
          description: "توصيل المركبات للعملاء واستلامها من مواقعهم",
        },
      ],
    },
    features: {
      badge: "المميزات",
      title: "مميزات متقدمة",
      items: [
        {
          icon: "🤖",
          title: "مساعد ذكي بالذكاء الاصطناعي",
          description: "يفهم طلبات العملاء ويقدم توصيات ذكية للمركبات والخدمات",
        },
        {
          icon: "💳",
          title: "مدفوعات متعددة",
          description: "قبول جميع طرق الدفع مع فوترة تلقائية وإيصالات رقمية",
        },
        {
          icon: "📊",
          title: "تحليلات متقدمة",
          description: "تقارير مفصلة عن الأداء والإيرادات واستخدام الأسطول",
        },
        {
          icon: "📱",
          title: "تطبيق السائقين",
          description: "واجهة خاصة للسائقين لاستلام المهام وتحديث الحالة",
        },
      ],
    },
    benefits: {
      badge: "الفوائد",
      title: "الفوائد الرئيسية",
      items: [
        { value: "300%", label: "زيادة الحجوزات" },
        { value: "70%", label: "توفير وقت الموظفين" },
        { value: "24/7", label: "خدمة عملاء" },
        { value: "40%", label: "تحسين استغلال الأسطول" },
        { value: "95%", label: "تقليل الأخطاء في الحجوزات" },
        { value: "85%", label: "زيادة رضا العملاء" },
      ],
    },
    fleetAvailability: {
      badge: "استعلام الأسطول",
      title: "استعلام فوري عن الأسطول المتاح",
      subtitle: "اسأل عن السيارات المتاحة واحصل على معلومات فورية",
      description:
        "يمكن للعملاء الاستفسار عن السيارات المتاحة في أي تاريخ محدد عبر واتساب",
      features: [
        "عرض السيارات المتاحة حسب التاريخ",
        "معلومات كاملة عن كل سيارة (الموديل، السنة، المواصفات)",
        "الصور والتفاصيل الفنية للمركبات",
        "حالة التوفر الفورية لكل سيارة",
        "خيارات بديلة في حالة عدم التوفر",
      ],
      sampleQuery: "مثال على الاستفسار",
      queries: [
        "ما السيارات المتاحة يوم السبت القادم؟",
        "هل يوجد سيارة SUV متاحة للإيجار الشهري؟",
        "أريد سيارة فاخرة لحفل زفاف بتاريخ 15 ديسمبر",
      ],
    },
    pricing: {
      badge: "التسعير",
      title: "نظام تسعير مرن وشفاف",
      subtitle: "أسعار واضحة لجميع فترات الإيجار",
      description: "احصل على الأسعار الفورية لأي سيارة حسب مدة الإيجار",
      options: [
        {
          title: "إيجار يومي",
          description: "السعر اليومي للإيجار قصير المدى",
          features: [
            "أسعار تنافسية",
            "شامل التأمين الأساسي",
            "كيلومترات محددة",
          ],
        },
        {
          title: "عروض نهاية الأسبوع",
          description: "أسعار خاصة للجمعة والسبت",
          features: [
            "خصم 15% على الأيام العادية",
            "كيلومترات إضافية",
            "خدمة توصيل مجانية",
          ],
        },
        {
          title: "إيجار أسبوعي",
          description: "خصومات للإيجار الأسبوعي",
          features: [
            "خصم 20% على السعر اليومي",
            "صيانة مجانية",
            "تبديل السيارة متاح",
          ],
        },
        {
          title: "إيجار شهري",
          description: "أفضل قيمة للإيجار طويل المدى",
          features: [
            "خصم 35% على السعر اليومي",
            "صيانة وتأمين شامل",
            "سيارة بديلة عند الحاجة",
          ],
        },
      ],
    },
    bookingProcess: {
      badge: "عملية الحجز",
      title: "عملية حجز سهلة وآمنة",
      subtitle: "احجز سيارتك في دقائق عبر واتساب",
      steps: [
        {
          icon: "📄",
          title: "إرسال رخصة القيادة",
          description: "صورة واضحة من رخصة القيادة السارية",
        },
        {
          icon: "💳",
          title: "دفع العربون",
          description:
            "عربون 100 جنيه استرليني غير قابل للاسترداد لتأكيد الحجز",
        },
        {
          icon: "✓",
          title: "تأكيد الحجز",
          description: "تأكيد فوري مع تفاصيل الاستلام",
        },
        {
          icon: "💰",
          title: "خيارات الدفع",
          description:
            "ادفع الباقي عند الاستلام أو ادفع كامل المبلغ واحصل على خصم 10%",
        },
      ],
      paymentOptions: {
        title: "خيارات الدفع المرنة",
        option1: {
          title: "الدفع المرحلي",
          description: "عربون 100 جنيه + الباقي عند الاستلام",
          discount: "بدون خصم إضافي",
        },
        option2: {
          title: "الدفع الكامل مقدماً",
          description: "ادفع كامل المبلغ عند الحجز",
          discount: "احصل على خصم 10%",
        },
      },
    },
    returnProcess: {
      badge: "عملية الإرجاع",
      title: "نظام إرجاع ذكي مع التذكيرات",
      subtitle: "نذكرك بموعد الإرجاع ونرشدك خلال العملية",
      features: [
        {
          icon: "🔔",
          title: "تذكيرات استباقية",
          description: "رسائل تذكير قبل 24 و 12 و 3 ساعات من موعد الإرجاع",
        },
        {
          icon: "📋",
          title: "قائمة فحص الإرجاع",
          description: "قائمة مفصلة بالنقاط التي يجب فحصها قبل الإرجاع",
        },
        {
          icon: "🔄",
          title: "استرداد العربون",
          description:
            "استرداد فوري للعربون بعد الفحص والتأكد من سلامة السيارة",
        },
      ],
      checklist: {
        title: "قائمة الفحص قبل الإرجاع",
        items: [
          "تنظيف السيارة من الداخل",
          "إعادة مستوى الوقود كما كان عند الاستلام",
          "فحص السيارة من الخارج لأي أضرار",
          "إرجاع جميع المستندات والملحقات",
          "التأكد من عدم نسيان أي متعلقات شخصية",
          "التقاط صور للسيارة عند الإرجاع",
        ],
      },
      depositReturn: {
        title: "استرداد العربون",
        process:
          "بعد فحص السيارة والتأكد من سلامتها، يتم إرجاع العربون فوراً إلى نفس طريقة الدفع المستخدمة",
        conditions: [
          "السيارة في نفس حالة الاستلام",
          "عدم وجود مخالفات مرورية",
          "إرجاع السيارة في الموعد المحدد",
        ],
      },
    },
    cta: {
      title: "ابدأ رحلة التحول الرقمي لشركتك",
      subtitle: "انضم إلى مئات شركات النقل التي تستخدم مويدي",
      button: "احجز استشارة مجانية",
      demo: "شاهد النظام",
      contact: "تواصل معنا",
    },
  },
  en: {
    hero: {
      title: "Smart WhatsApp Solutions for Vehicle Rental & Chauffeur Services",
      subtitle:
        "Complete automation for bookings, fleet management, and driver coordination",
      cta: "Book a Demo",
    },
    challenges: {
      badge: "Challenges",
      title: "Industry Challenges",
      subtitle:
        "Solutions designed to overcome transportation sector challenges",
      items: [
        {
          icon: "📅",
          title: "Complex Booking Management",
          description:
            "Difficulty coordinating multiple bookings and handling changes and cancellations",
        },
        {
          icon: "👥",
          title: "Driver Coordination",
          description:
            "Challenges in scheduling drivers, tracking locations, and managing assignments",
        },
        {
          icon: "🚗",
          title: "Fleet Management",
          description:
            "Difficulty tracking vehicles, scheduling maintenance, and monitoring performance",
        },
        {
          icon: "⏰",
          title: "Quick Response Times",
          description: "Pressure to provide instant 24/7 service to customers",
        },
      ],
    },
    solutions: {
      badge: "Solutions",
      title: "Integrated WhatsApp Solutions",
      subtitle: "Smart automation for every aspect of your business",
      items: [
        {
          title: "Instant Booking System",
          description:
            "Instant bookings via WhatsApp with automatic confirmation",
          features: [
            "Instant booking without apps",
            "Vehicle and service selection",
            "Automatic price calculation",
            "Instant confirmation and notifications",
          ],
        },
        {
          title: "Smart Driver Management",
          description: "Complete driver coordination and task distribution",
          features: [
            "Automatic task assignment",
            "Driver location tracking",
            "New task notifications",
            "Daily performance reports",
          ],
        },
        {
          title: "Fleet Monitoring",
          description: "Integrated system for vehicle management and tracking",
          features: [
            "Real-time vehicle status",
            "Smart maintenance scheduling",
            "Fuel consumption tracking",
            "Usage reports",
          ],
        },
        {
          title: "Automated Customer Service",
          description: "24/7 AI-powered support",
          features: [
            "Instant inquiry responses",
            "Pricing and availability info",
            "Booking modifications and cancellations",
            "Multi-language support",
          ],
        },
      ],
    },
    useCases: {
      badge: "Use Cases",
      title: "Use Cases",
      subtitle: "How transportation companies benefit from our solutions",
      items: [
        {
          icon: "✈️",
          title: "Airport Services",
          description:
            "Airport transfer bookings with flight tracking and driver coordination",
        },
        {
          icon: "👔",
          title: "Executive Transport",
          description:
            "Limousine and luxury car services for businesses and individuals",
        },
        {
          icon: "💒",
          title: "Event Rentals",
          description: "Wedding and special event cars with custom packages",
        },
        {
          icon: "🌍",
          title: "Tourist Tours",
          description:
            "Sightseeing tours and transportation services for tourist groups",
        },
        {
          icon: "📋",
          title: "Long-term Rentals",
          description:
            "Monthly and yearly rental contracts for individuals and companies",
        },
        {
          icon: "🚚",
          title: "Delivery Services",
          description:
            "Vehicle delivery to customers and pickup from their locations",
        },
      ],
    },
    features: {
      badge: "Features",
      title: "Advanced Features",
      items: [
        {
          icon: "🤖",
          title: "AI-Powered Assistant",
          description:
            "Understands customer requests and provides smart vehicle and service recommendations",
        },
        {
          icon: "💳",
          title: "Multiple Payment Options",
          description:
            "Accept all payment methods with automatic invoicing and digital receipts",
        },
        {
          icon: "📊",
          title: "Advanced Analytics",
          description:
            "Detailed reports on performance, revenue, and fleet utilization",
        },
        {
          icon: "📱",
          title: "Driver App",
          description:
            "Dedicated interface for drivers to receive tasks and update status",
        },
      ],
    },
    benefits: {
      badge: "Benefits",
      title: "Key Benefits",
      items: [
        { value: "300%", label: "increase in bookings" },
        { value: "70%", label: "staff time savings" },
        { value: "24/7", label: "customer service" },
        { value: "40%", label: "improved fleet utilization" },
        { value: "95%", label: "reduction in booking errors" },
        { value: "85%", label: "increase in customer satisfaction" },
      ],
    },
    fleetAvailability: {
      badge: "Fleet Inquiry",
      title: "Instant Fleet Availability Inquiry",
      subtitle: "Ask about available cars and get immediate information",
      description:
        "Customers can inquire about available cars on any specific date via WhatsApp",
      features: [
        "Display available cars by date",
        "Complete information about each car (model, year, specifications)",
        "Vehicle photos and technical details",
        "Real-time availability status for each car",
        "Alternative options if unavailable",
      ],
      sampleQuery: "Sample Queries",
      queries: [
        "What cars are available next Saturday?",
        "Is there an SUV available for monthly rental?",
        "I need a luxury car for a wedding on December 15th",
      ],
    },
    pricing: {
      badge: "Pricing",
      title: "Flexible and Transparent Pricing System",
      subtitle: "Clear prices for all rental periods",
      description: "Get instant pricing for any car based on rental duration",
      options: [
        {
          title: "Daily Rental",
          description: "Daily rate for short-term rental",
          features: [
            "Competitive prices",
            "Basic insurance included",
            "Set kilometers",
          ],
        },
        {
          title: "Weekend Deals",
          description: "Special prices for Friday and Saturday",
          features: [
            "15% discount on regular days",
            "Extra kilometers",
            "Free delivery service",
          ],
        },
        {
          title: "Weekly Rental",
          description: "Discounts for weekly rental",
          features: [
            "20% discount on daily rate",
            "Free maintenance",
            "Car swap available",
          ],
        },
        {
          title: "Monthly Rental",
          description: "Best value for long-term rental",
          features: [
            "35% discount on daily rate",
            "Full insurance and maintenance",
            "Replacement car when needed",
          ],
        },
      ],
    },
    bookingProcess: {
      badge: "Booking Process",
      title: "Easy and Secure Booking Process",
      subtitle: "Book your car in minutes via WhatsApp",
      steps: [
        {
          icon: "📄",
          title: "Send Driving License",
          description: "Clear photo of valid driving license",
        },
        {
          icon: "💳",
          title: "Pay Deposit",
          description: "£100 non-refundable deposit to confirm booking",
        },
        {
          icon: "✓",
          title: "Booking Confirmation",
          description: "Instant confirmation with pickup details",
        },
        {
          icon: "💰",
          title: "Payment Options",
          description:
            "Pay remaining on pickup or pay full amount for 10% discount",
        },
      ],
      paymentOptions: {
        title: "Flexible Payment Options",
        option1: {
          title: "Partial Payment",
          description: "£100 deposit + remaining on pickup",
          discount: "No additional discount",
        },
        option2: {
          title: "Full Payment Upfront",
          description: "Pay full amount at booking",
          discount: "Get 10% discount",
        },
      },
    },
    returnProcess: {
      badge: "Return Process",
      title: "Smart Return System with Reminders",
      subtitle:
        "We remind you of return time and guide you through the process",
      features: [
        {
          icon: "🔔",
          title: "Proactive Reminders",
          description:
            "Reminder messages 24, 12, and 3 hours before return time",
        },
        {
          icon: "📋",
          title: "Return Checklist",
          description: "Detailed list of points to check before return",
        },
        {
          icon: "🔄",
          title: "Deposit Refund",
          description:
            "Instant deposit refund after inspection and car safety confirmation",
        },
      ],
      checklist: {
        title: "Pre-Return Checklist",
        items: [
          "Clean the car interior",
          "Return fuel level as at pickup",
          "Check car exterior for any damage",
          "Return all documents and accessories",
          "Ensure no personal belongings left",
          "Take photos of the car at return",
        ],
      },
      depositReturn: {
        title: "Deposit Return",
        process:
          "After car inspection and safety confirmation, deposit is returned immediately to the same payment method used",
        conditions: [
          "Car in same condition as pickup",
          "No traffic violations",
          "Car returned on scheduled time",
        ],
      },
    },
    cta: {
      title: "Start Your Company's Digital Transformation",
      subtitle: "Join hundreds of transportation companies using Mawidi",
      button: "Book Free Consultation",
      demo: "View System",
      contact: "Contact Us",
    },
  },
};

export default function VehicleRentalChauffeurPage({ params }: LangParams) {
  const t = content[params.lang];
  const isAr = params.lang === "ar";
  const dir = isAr ? "rtl" : "ltr";

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* Hero Section - Editorial Style */}
      <section className="relative bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        {/* Subtle grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage:
              "linear-gradient(to right, #10B981 1px, transparent 1px), linear-gradient(to bottom, #10B981 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-28">
          <div className="max-w-4xl">
            {/* Badge */}
            <div className="flex items-center gap-3 mb-8">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                01
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-3xl">🚗</span>
              <span className="text-[#64748B] text-sm font-medium">
                {isAr
                  ? "تأجير المركبات والسائقين"
                  : "Vehicle Rental & Chauffeur"}
              </span>
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1E293B] tracking-tight mb-6 leading-[1.1]">
              {t.hero.title}
            </h1>

            <p className="text-xl text-[#64748B] mb-10 leading-relaxed max-w-3xl">
              {t.hero.subtitle}
            </p>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href={`/${params.lang}/demo`}
                className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden transition-all"
              >
                <span className="relative z-10">{t.hero.cta}</span>
                <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${params.lang}/contact`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold border-2 border-[#1E293B] text-[#1E293B] hover:bg-[#1E293B] hover:text-white transition-colors"
              >
                {t.cta.contact}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Challenges Section */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-red-50 text-red-600 text-sm font-medium mb-3">
                {t.challenges.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.challenges.title}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.challenges.subtitle}
              </p>
            </div>
          </div>

          {/* Challenges Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {t.challenges.items.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-red-50/50 transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-red-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-2xl">{item.icon}</span>
                </div>
                <h3 className="font-semibold text-[#1E293B] mb-2">
                  {item.title}
                </h3>
                <p className="text-sm text-[#64748B]">{item.description}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-red-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Solutions Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-sm font-medium mb-3">
                {t.solutions.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.solutions.title}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.solutions.subtitle}
              </p>
            </div>
          </div>

          {/* Solutions Grid */}
          <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
            {t.solutions.items.map((solution, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F0FDF4] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B] mb-3">
                  {solution.title}
                </h3>
                <p className="text-[#64748B] mb-6">{solution.description}</p>
                <ul className="space-y-3">
                  {solution.features.map((feature, fIdx) => (
                    <li key={fIdx} className="flex items-start gap-3">
                      <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span className="text-sm text-[#64748B]">{feature}</span>
                    </li>
                  ))}
                </ul>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Use Cases Section */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium mb-3">
                {t.useCases.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.useCases.title}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.useCases.subtitle}
              </p>
            </div>
          </div>

          {/* Use Cases Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.useCases.items.map((useCase, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-blue-50/50 transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-blue-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-2xl">{useCase.icon}</span>
                </div>
                <h3 className="font-bold text-[#1E293B] mb-2">
                  {useCase.title}
                </h3>
                <p className="text-sm text-[#64748B]">{useCase.description}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-blue-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Advanced Features Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-indigo-50 text-indigo-600 text-sm font-medium mb-3">
                {t.features.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                {t.features.title}
              </h2>
            </div>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {t.features.items.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-indigo-50/50 transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-indigo-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-2xl">{feature.icon}</span>
                </div>
                <h3 className="font-bold text-[#1E293B] mb-2">
                  {feature.title}
                </h3>
                <p className="text-sm text-[#64748B]">{feature.description}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-indigo-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-sm font-medium mb-3">
                {t.benefits.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                {t.benefits.title}
              </h2>
            </div>
          </div>

          {/* Benefits Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.benefits.items.map((benefit, idx) => (
              <div key={idx} className="bg-white p-8 text-center">
                <div className="text-4xl font-bold text-[#10B981] mb-2">
                  {benefit.value}
                </div>
                <p className="text-[#64748B]">{benefit.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fleet Availability Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium mb-3">
                {t.fleetAvailability.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.fleetAvailability.title}
              </h2>
              <p className="text-lg text-[#64748B]">
                {t.fleetAvailability.subtitle}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
            {/* Features */}
            <div className="bg-white p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.fleetAvailability.description}
              </h3>
              <ul className="space-y-3">
                {t.fleetAvailability.features.map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-blue-500 mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Sample Queries */}
            <div className="bg-white p-8">
              <h3 className="font-bold text-[#1E293B] mb-4">
                {t.fleetAvailability.sampleQuery}
              </h3>
              <div className="space-y-3">
                {t.fleetAvailability.queries.map((query, idx) => (
                  <div key={idx} className="bg-blue-50 p-4">
                    <p className="text-[#64748B] italic">
                      &ldquo;{query}&rdquo;
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-sm font-medium mb-3">
                {t.pricing.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.pricing.title}
              </h2>
              <p className="text-lg text-[#64748B]">{t.pricing.subtitle}</p>
            </div>
          </div>

          <p className="text-[#64748B] mb-8 max-w-2xl">
            {t.pricing.description}
          </p>

          {/* Pricing Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {t.pricing.options.map((option, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-[#F0FDF4] transition-colors duration-300"
              >
                <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <h3 className="font-bold text-[#1E293B] mt-3 mb-2">
                  {option.title}
                </h3>
                <p className="text-sm text-[#64748B] mb-4">
                  {option.description}
                </p>
                <ul className="space-y-2">
                  {option.features.map((feature, fIdx) => (
                    <li key={fIdx} className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span className="text-sm text-[#64748B]">{feature}</span>
                    </li>
                  ))}
                </ul>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Booking Process Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium mb-3">
                {t.bookingProcess.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.bookingProcess.title}
              </h2>
              <p className="text-lg text-[#64748B]">
                {t.bookingProcess.subtitle}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            {/* Steps */}
            <div>
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {isAr ? "خطوات الحجز" : "Booking Steps"}
              </h3>
              <div className="space-y-4">
                {t.bookingProcess.steps.map((step, idx) => (
                  <div key={idx} className="flex gap-4">
                    <div className="w-10 h-10 bg-blue-50 flex items-center justify-center flex-shrink-0">
                      <span className="text-xl">{step.icon}</span>
                    </div>
                    <div>
                      <h4 className="font-bold text-[#1E293B]">
                        {idx + 1}. {step.title}
                      </h4>
                      <p className="text-[#64748B] text-sm">
                        {step.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Payment Options */}
            <div>
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.bookingProcess.paymentOptions.title}
              </h3>
              <div className="space-y-4">
                <div className="bg-[#FAFAFA] p-6 border border-slate-200">
                  <h4 className="font-bold text-[#1E293B] mb-2">
                    {t.bookingProcess.paymentOptions.option1.title}
                  </h4>
                  <p className="text-[#64748B] text-sm mb-2">
                    {t.bookingProcess.paymentOptions.option1.description}
                  </p>
                  <p className="text-sm text-[#64748B]">
                    {t.bookingProcess.paymentOptions.option1.discount}
                  </p>
                </div>

                <div className="bg-[#F0FDF4] p-6 border-2 border-[#10B981]">
                  <h4 className="font-bold text-[#1E293B] mb-2">
                    {t.bookingProcess.paymentOptions.option2.title}
                  </h4>
                  <p className="text-[#64748B] text-sm mb-2">
                    {t.bookingProcess.paymentOptions.option2.description}
                  </p>
                  <p className="text-[#059669] font-bold">
                    ✨ {t.bookingProcess.paymentOptions.option2.discount}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Return Process Section */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                10
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-orange-50 text-orange-600 text-sm font-medium mb-3">
                {t.returnProcess.badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.returnProcess.title}
              </h2>
              <p className="text-lg text-[#64748B]">
                {t.returnProcess.subtitle}
              </p>
            </div>
          </div>

          {/* Return Features */}
          <div className="grid lg:grid-cols-3 gap-px bg-slate-200 mb-12">
            {t.returnProcess.features.map((feature, idx) => (
              <div key={idx} className="group bg-white p-6">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-orange-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-2xl">{feature.icon}</span>
                </div>
                <h3 className="font-bold text-[#1E293B] mb-2">
                  {feature.title}
                </h3>
                <p className="text-sm text-[#64748B]">{feature.description}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-orange-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

          <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
            {/* Checklist */}
            <div className="bg-white p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-4">
                {t.returnProcess.checklist.title}
              </h3>
              <ul className="space-y-3">
                {t.returnProcess.checklist.items.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <span
                      className="text-orange-500 font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-[#64748B]">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Deposit Return */}
            <div className="bg-[#F0FDF4] p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-4">
                {t.returnProcess.depositReturn.title}
              </h3>
              <p className="text-[#64748B] mb-4">
                {t.returnProcess.depositReturn.process}
              </p>
              <h4 className="font-semibold text-[#1E293B] mb-2">
                {isAr ? "الشروط:" : "Conditions:"}
              </h4>
              <ul className="space-y-2">
                {t.returnProcess.depositReturn.conditions.map(
                  (condition, idx) => (
                    <li key={idx} className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span className="text-sm text-[#64748B]">
                        {condition}
                      </span>
                    </li>
                  ),
                )}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-24 bg-[#1E293B]">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="flex items-center justify-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              11
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            {t.cta.title}
          </h2>
          <p className="text-xl text-slate-300 mb-12">{t.cta.subtitle}</p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center justify-center px-10 py-5 text-xl font-semibold bg-[#10B981] text-white overflow-hidden transition-all"
            >
              <span className="relative z-10">{t.cta.button}</span>
              <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="inline-flex items-center justify-center px-10 py-5 text-xl font-semibold border-2 border-white/20 text-white hover:bg-white/10 transition-colors"
            >
              {t.cta.demo}
            </Link>
          </div>
        </div>
      </section>

      {/* Structured Data */}
      <IndustryJsonLd industry="vehicle-rental-chauffeur" lang={params.lang} />
    </main>
  );
}
