import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";
import IndustryJsonLd from "@/components/IndustryJsonLd";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const isAr = params.lang === "ar";
  const title = isAr
    ? `قطاع السيارات — الورش، الميكانيكا والإنقاذ | ${SITE.brand}`
    : `Mobility & Automotive — Mechanics, Garages & Recovery | ${SITE.brand}`;
  const description = isAr
    ? "حوّل استفسارات واتساب والمكالمات إلى مهام محجوزة، عروض أسعار معتمدة، وفواتير مدفوعة—بشكل تلقائي."
    : "Turn WhatsApp and phone enquiries into booked jobs, approved quotes, and paid invoices—automatically.";

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      type: "website",
    },
  };
}

export default function MobilityIndustryPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const isAr = params.lang === "ar";
  const dir = UI[params.lang].dir;

  const stats = [
    {
      metricEn: "60%",
      metricAr: "٦٠٪",
      labelEn: "Fewer Phone Calls",
      labelAr: "تقليل المكالمات",
      reasonEn: "with WhatsApp automation",
      reasonAr: "مع أتمتة واتساب",
    },
    {
      metricEn: "40%",
      metricAr: "٤٠٪",
      labelEn: "Faster Approvals",
      labelAr: "موافقات أسرع",
      reasonEn: "in-chat quote buttons",
      reasonAr: "أزرار العروض في المحادثة",
    },
    {
      metricEn: "25%",
      metricAr: "٢٥٪",
      labelEn: "More Revenue",
      labelAr: "زيادة الإيرادات",
      reasonEn: "from add-ons",
      reasonAr: "من الإضافات",
    },
    {
      metricEn: "5hrs",
      metricAr: "٥ س",
      labelEn: "Saved Weekly",
      labelAr: "توفير أسبوعي",
      reasonEn: "per service advisor",
      reasonAr: "لكل مستشار خدمة",
    },
  ];

  const whatMawidiEnables = [
    {
      titleEn: "WhatsApp Booking",
      titleAr: "حجز واتساب تلقائي",
      descEn:
        "Checks service due dates and books appointments instantly via WhatsApp.",
      descAr: "يتحقق من موعد الخدمة المستحق ويحجز المواعيد فوراً عبر واتساب.",
    },
    {
      titleEn: "Interactive Quotes",
      titleAr: "عروض الأسعار التفاعلية",
      descEn:
        "Line-item quotes with photos; customers approve, reject, or defer per item.",
      descAr:
        "عروض أسعار مفصلة مع صور؛ يعتمد العملاء أو يرفضون أو يؤجلون لكل بند.",
    },
    {
      titleEn: "Secure Payment Links",
      titleAr: "روابط الدفع الآمنة",
      descEn: "One-tap payment with Stripe, Apple Pay, and Google Pay.",
      descAr: "دفع بنقرة واحدة مع Stripe وApple/Google Pay.",
    },
    {
      titleEn: "Real-Time Status Updates",
      titleAr: "تحديثات الحالة الفورية",
      descEn: "Updates with photos, test results, and ETAs sent automatically.",
      descAr: "تحديثات بالصور ونتائج الفحص والوقت المتوقع تُرسل تلقائياً.",
    },
    {
      titleEn: "AI Voice Agent",
      titleAr: "وكيل صوتي ذكي",
      descEn: "Answers calls in Arabic/English, handles bookings and FAQs.",
      descAr:
        "يجيب على المكالمات بالعربية/الإنجليزية، يتعامل مع الحجوزات والأسئلة.",
    },
    {
      titleEn: "Recovery Management",
      titleAr: "إدارة الإنقاذ",
      descEn: "Location capture via WhatsApp with live customer tracking.",
      descAr: "التقاط الموقع عبر واتساب مع تتبع مباشر للعملاء.",
    },
  ];

  const useCases = [
    {
      titleEn: "Workshops & Mechanics",
      titleAr: "الورش والميكانيكا",
      descEn: "Bay scheduling, job cards, and parts management",
      descAr: "جدولة الورشة، بطاقات المهام، وإدارة القطع",
    },
    {
      titleEn: "Quick Service Centers",
      titleAr: "مراكز الصيانة السريعة",
      descEn: "Fast services with instant booking",
      descAr: "خدمات سريعة مع حجز فوري",
    },
    {
      titleEn: "Tire Shops",
      titleAr: "محلات الإطارات",
      descEn: "Seasonal checks and replacement alerts",
      descAr: "فحص موسمي وتنبيهات الاستبدال",
    },
    {
      titleEn: "Recovery Services",
      titleAr: "خدمات الإنقاذ",
      descEn: "Location capture and live tracking",
      descAr: "التقاط الموقع وتتبع مباشر",
    },
    {
      titleEn: "Auto Electrical",
      titleAr: "كهرباء السيارات",
      descEn: "Diagnostics and specialist appointments",
      descAr: "تشخيص ومواعيد متخصصة",
    },
    {
      titleEn: "Body & Paint",
      titleAr: "ورش الدهان",
      descEn: "Damage assessments and quote approvals",
      descAr: "تقييمات الأضرار وموافقات العروض",
    },
  ];

  const smartgenixManages = [
    { en: "Bay scheduling", ar: "جدولة الورشة" },
    { en: "Job cards", ar: "بطاقات المهام" },
    { en: "Parts & stock", ar: "القطع والمخزون" },
    { en: "EPOS", ar: "نقاط البيع" },
    { en: "Technician time", ar: "وقت الفنيين" },
  ];

  const mawidiHandles = [
    { en: "WhatsApp & Voice conversations", ar: "محادثات واتساب والصوت" },
    { en: "Due-date checks", ar: "فحص الاستحقاقات" },
    { en: "Bookings", ar: "الحجوزات" },
    { en: "Quote approvals", ar: "اعتماد العروض" },
    { en: "Pay links", ar: "روابط الدفع" },
  ];

  const integrationFeatures = [
    {
      en: "Jobs & quotes sync both ways",
      ar: "مزامنة المهام والعروض في الاتجاهين",
    },
    {
      en: "Parts availability & pricing in WhatsApp",
      ar: "توفر القطع والأسعار في واتساب",
    },
    {
      en: "Bay load & slots in real time",
      ar: "حمولة الورشة والمواعيد بشكل فوري",
    },
    {
      en: "Invoices & payments to Smartgenix",
      ar: "الفواتير والمدفوعات إلى Smartgenix",
    },
  ];

  const securityFeatures = [
    {
      titleEn: "Data Encryption",
      titleAr: "تشفير البيانات",
      descEn: "End-to-end encryption in transit and at rest",
      descAr: "تشفير شامل أثناء النقل والتخزين",
    },
    {
      titleEn: "Role-Based Access",
      titleAr: "الوصول حسب الدور",
      descEn: "Owner / Service Advisor / Tech with audit logs",
      descAr: "المالك / مستشار الخدمة / الفني مع سجلات المراجعة",
    },
    {
      titleEn: "Secure Payments",
      titleAr: "مدفوعات آمنة",
      descEn: "No card numbers in chat—secure pay links only",
      descAr: "لا أرقام بطاقات في المحادثة—روابط دفع آمنة فقط",
    },
  ];

  const faqs = [
    {
      qEn: "Can customers approve per line item?",
      qAr: "هل يمكن اعتماد كل بند على حدة؟",
      aEn: "Yes—approve, reject, or ask later per item.",
      aAr: "نعم—اعتماد/رفض/لاحقًا لكل بند.",
    },
    {
      qEn: "Do you support Arabic?",
      qAr: "هل تدعمون العربية؟",
      aEn: "Yes—full AR/EN with RTL and voice.",
      aAr: "نعم—عربي/إنجليزي مع RTL وصوت.",
    },
    {
      qEn: "Deposits & pre-auth?",
      qAr: "العربون والتفويض المسبق؟",
      aEn: "Configurable by job type; auto-applied to final invoice.",
      aAr: "قابلة للضبط حسب نوع الخدمة؛ تُخصم من الفاتورة النهائية.",
    },
    {
      qEn: "Smartgenix Integration?",
      qAr: "التكامل مع Smartgenix؟",
      aEn: "Jobs, parts, invoices, and bays stay in sync automatically.",
      aAr: "تبقى المهام والقطع والفواتير والورشة متزامنة تلقائياً.",
    },
  ];

  const getStartedSteps = [
    {
      stepEn: "Connect WhatsApp & phone line",
      stepAr: "ربط واتساب والخط الهاتفي",
      descEn: "Choose agent tone (AR/EN)",
      descAr: "اختر أسلوب الوكيل (عربي/إنجليزي)",
    },
    {
      stepEn: "Import services & pricing",
      stepAr: "استيراد الخدمات والأسعار",
      descEn: "Labour ops and due rules",
      descAr: "عمليات العمل وقواعد الاستحقاق",
    },
    {
      stepEn: "Enable Smartgenix connector",
      stepAr: "تفعيل موصل Smartgenix",
      descEn: "Bays, parts, jobs, invoices",
      descAr: "الورشة، القطع، المهام، الفواتير",
    },
    {
      stepEn: "Turn on quote approvals",
      stepAr: "تفعيل اعتماد العروض",
      descEn: "And secure pay links",
      descAr: "وروابط الدفع الآمنة",
    },
    {
      stepEn: "Launch reminders",
      stepAr: "تشغيل التذكيرات",
      descEn: "And owner digest",
      descAr: "وملخص المالك",
    },
  ];

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

        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-28">
          {/* 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-[#64748B] text-sm font-medium">
              {isAr ? "قطاع السيارات" : "Mobility & Automotive"}
            </span>
          </div>

          <div className="max-w-4xl">
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] tracking-tight mb-6">
              {isAr
                ? "الورش، الميكانيكا والإنقاذ"
                : "Mechanics, Garages & Recovery"}
            </h1>

            <p className="text-xl md:text-2xl text-[#64748B] mb-8 leading-relaxed max-w-3xl">
              {isAr
                ? "حوّل استفسارات واتساب والمكالمات إلى مهام محجوزة، عروض أسعار معتمدة، وفواتير مدفوعة—بشكل تلقائي."
                : "Turn WhatsApp and phone enquiries into booked jobs, approved quotes, and paid invoices—automatically."}
            </p>

            {/* Partnership Badge - Editorial */}
            <div className="flex items-center gap-4 mb-8 p-4 bg-[#FAFAFA] border border-slate-200 inline-flex">
              <span className="text-sm text-[#64748B]">
                {isAr ? "مدعوم من" : "Powered by"}
              </span>
              <div className="flex items-center gap-3">
                <span className="font-bold text-[#1E293B] px-3 py-1 bg-white border border-slate-200 text-sm">
                  Smartgenix
                </span>
                <span className="text-[#64748B]">×</span>
                <span className="font-bold text-white bg-[#10B981] px-3 py-1 text-sm">
                  Mawidi
                </span>
              </div>
              <span className="text-sm text-[#64748B]">
                {isAr ? "التكامل" : "Integration"}
              </span>
            </div>

            {/* B2B Notice */}
            <div className="bg-[#10B981]/[0.05] p-6 mb-8 border-l-4 border-[#10B981]">
              <p className="text-sm text-[#64748B]">
                <span className="font-semibold text-[#1E293B]">
                  {isAr ? "منصة B2B:" : "B2B Platform:"}
                </span>{" "}
                {isAr
                  ? "مواعدي لا تقدم خدمات السيارات مباشرة. نحن نزود ورشتك بأدوات لتمكين عملائك من الحجز والدفع والتواصل عبر واتساب."
                  : "Mawidi doesn't provide automotive services directly. We equip your workshop with tools to enable your customers to book, pay, and communicate via WhatsApp."}
              </p>
            </div>

            {/* Stats Grid - Editorial Style */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-200 mb-12">
              {stats.map((stat, idx) => (
                <div
                  key={idx}
                  className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
                >
                  <div className="flex items-center gap-2 mb-2">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-[#64748B] text-xs">
                      {isAr ? stat.labelAr : stat.labelEn}
                    </span>
                  </div>
                  <div className="text-3xl font-bold text-[#1E293B] mb-1">
                    {isAr ? stat.metricAr : stat.metricEn}
                  </div>
                  <p className="text-xs text-[#64748B]">
                    {isAr ? stat.reasonAr : stat.reasonEn}
                  </p>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-3 transition-all duration-300" />
                </div>
              ))}
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href={`/${params.lang}/signup`}
                className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
              >
                <span className="relative z-10">
                  {isAr ? "ابدأ الآن" : "Get Started"}
                </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-8 py-4 text-lg font-semibold border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
              >
                {isAr ? "احجز عرضاً" : "Book Demo"}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Section 02: What Mawidi Enables */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "ما تتيحه مواعدي" : "What Mawidi Enables"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "أدوات قوية لأتمتة عمليات ورش السيارات"
                  : "Powerful tools to automate automotive workshop operations"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {whatMawidiEnables.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span
                    className="text-[#10B981] font-mono text-sm font-bold"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-8 h-px bg-[#10B981]" />
                </div>
                <h3 className="text-xl font-semibold text-[#1E293B] mb-3">
                  {isAr ? item.titleAr : item.titleEn}
                </h3>
                <p className="text-[#64748B] text-sm leading-relaxed">
                  {isAr ? item.descAr : item.descEn}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 03: Who Uses Mawidi */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "من يستخدم مواعدي" : "Who Uses Mawidi"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "حلول شاملة لجميع أنواع خدمات السيارات"
                  : "Complete solutions for all automotive service types"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {useCases.map((useCase, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span
                    className="text-[#10B981] font-mono text-sm font-bold"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-8 h-px bg-[#10B981]" />
                </div>
                <h3 className="text-xl font-semibold text-[#1E293B] mb-3">
                  {isAr ? useCase.titleAr : useCase.titleEn}
                </h3>
                <p className="text-[#64748B] text-sm">
                  {isAr ? useCase.descAr : useCase.descEn}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 04: Smartgenix Integration */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "تكامل Smartgenix × Mawidi"
                  : "Smartgenix × Mawidi Integration"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "مُصمم للميكانيكيين، مستشاري الخدمة، وفرق الإنقاذ"
                  : "Built for mechanics, service advisors, and recovery teams"}
              </p>
            </div>
          </div>

          {/* Two-column integration breakdown */}
          <div className="grid md:grid-cols-2 gap-px bg-slate-200 mb-8">
            {/* Smartgenix Column */}
            <div className="bg-white p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="font-bold text-[#1E293B] px-4 py-2 bg-[#FAFAFA] border border-slate-200">
                  Smartgenix
                </span>
                <span className="text-[#64748B] text-sm">
                  {isAr ? "يدير" : "manages"}
                </span>
              </div>
              <ul className="space-y-4">
                {smartgenixManages.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#1E293B] mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">
                      {isAr ? item.ar : item.en}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Mawidi Column */}
            <div className="bg-white p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="font-bold text-white bg-[#10B981] px-4 py-2">
                  Mawidi
                </span>
                <span className="text-[#64748B] text-sm">
                  {isAr ? "يتولى" : "handles"}
                </span>
              </div>
              <ul className="space-y-4">
                {mawidiHandles.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">
                      {isAr ? item.ar : item.en}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Integration Features */}
          <div className="bg-white p-8 border border-slate-200">
            <h3 className="text-lg font-semibold text-[#1E293B] mb-6">
              {isAr ? "مزايا التكامل" : "Integration Features"}
            </h3>
            <div className="grid md:grid-cols-2 gap-4">
              {integrationFeatures.map((item, idx) => (
                <div
                  key={idx}
                  className="flex items-start gap-3 p-4 bg-[#FAFAFA]"
                >
                  <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                  <span className="text-[#64748B] text-sm">
                    {isAr ? item.ar : item.en}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Note */}
          <div className="mt-8 bg-[#10B981]/[0.05] p-6 border-l-4 border-[#10B981]">
            <p className="text-sm text-[#64748B]">
              <span className="font-semibold text-[#1E293B]">
                {isAr ? "ملاحظة:" : "Note:"}
              </span>{" "}
              {isAr
                ? "اطلب منا تفعيل موصل Smartgenix لحسابك."
                : "Ask us to enable the Smartgenix connector for your account."}
            </p>
          </div>
        </div>
      </section>

      {/* Section 05: Security & Privacy */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "الأمان والخصوصية" : "Security & Privacy"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "حماية على مستوى المؤسسات لبيانات ورشتك"
                  : "Enterprise-grade protection for your workshop data"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-slate-200">
            {securityFeatures.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span
                    className="text-[#10B981] font-mono text-sm font-bold"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-8 h-px bg-[#10B981]" />
                </div>
                <h3 className="text-xl font-semibold text-[#1E293B] mb-3">
                  {isAr ? feature.titleAr : feature.titleEn}
                </h3>
                <p className="text-[#64748B] text-sm">
                  {isAr ? feature.descAr : feature.descEn}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 06: FAQs */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {isAr ? "الأسئلة الشائعة" : "FAQs"}
            </h2>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, idx) => (
              <div key={idx} className="bg-white p-6 border border-slate-200">
                <div className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {isAr ? faq.qAr : faq.qEn}
                    </h3>
                    <p className="text-[#64748B]">{isAr ? faq.aAr : faq.aEn}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 07: Get Started */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "ابدأ في 5 خطوات" : "Get Started in 5 Steps"}
              </h2>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-6 mb-12">
            {getStartedSteps.map((step, idx) => (
              <div
                key={idx}
                className="bg-[#FAFAFA] p-6 border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-3xl font-bold"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <h3 className="text-lg font-semibold text-[#1E293B] mt-4 mb-2">
                  {isAr ? step.stepAr : step.stepEn}
                </h3>
                <p className="text-[#64748B] text-sm">
                  {isAr ? step.descAr : step.descEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 08: Final CTA - Dark Editorial */}
      <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"
            >
              08
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
            {isAr
              ? "ابدأ في أتمتة ورشتك اليوم"
              : "Start Automating Your Workshop Today"}
          </h2>
          <p className="text-xl text-slate-400 mb-12">
            {isAr
              ? "انضم إلى مئات الورش التي تستخدم مواعدي"
              : "Join hundreds of workshops using Mawidi"}
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
            >
              <span className="relative z-10">
                {isAr ? "ابدأ مجانًا" : "Start Free"}
              </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-8 py-4 text-lg font-semibold border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/20 transition-colors"
            >
              {isAr ? "احجز عرضاً" : "Book Demo"}
            </Link>
            <Link
              href={`/${params.lang}/contact`}
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white hover:bg-white/10 transition-colors"
            >
              {isAr ? "تحدث إلى المبيعات" : "Talk to Sales"}
            </Link>
          </div>

          <p className="text-sm text-slate-400">
            {isAr
              ? "لا يلزم بطاقة ائتمان • إعداد فوري • دعم 24/7"
              : "No credit card required • Instant setup • 24/7 support"}
          </p>
        </div>
      </section>

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