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

interface PageProps {
  params: { lang: "en" | "ar" };
}

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

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const isAr = params.lang === "ar";
  const title = isAr
    ? "خدمات المنازل والمهنيين | مواعدي"
    : "Home Services & Trades | Mawidi";
  const description = isAr
    ? "حلول مواعدي للسباكة، الكهرباء، التنظيف، الصيانة، التجديدات والحرف"
    : "Mawidi solutions for plumbing, electrical, cleaning, maintenance, renovations and trades";

  return {
    title,
    description,
    alternates: {
      languages: {
        en: `/en/industries/home-services-trades`,
        ar: `/ar/industries/home-services-trades`,
      },
    },
    openGraph: {
      title,
      description,
      type: "website",
    },
    twitter: {
      card: "summary",
      title,
      description,
    },
  };
}

export default function HomeServicesTrades({ params }: PageProps) {
  const isAr = params.lang === "ar";
  const dir = isAr ? "rtl" : "ltr";

  const serviceTypes = [
    {
      nameEn: "Plumbing",
      nameAr: "السباكة",
      descEn: "Emergency repairs and routine maintenance",
      descAr: "إصلاحات طارئة وصيانة دورية",
    },
    {
      nameEn: "AC/HVAC",
      nameAr: "التكييف والتهوية",
      descEn: "Installation, repair, and servicing",
      descAr: "تركيب وإصلاح وصيانة",
    },
    {
      nameEn: "Electrical",
      nameAr: "الكهرباء",
      descEn: "Installations, repairs, and inspections",
      descAr: "تركيبات وإصلاحات وفحوصات",
    },
    {
      nameEn: "Appliance Repair",
      nameAr: "إصلاح الأجهزة",
      descEn: "Fix washing machines, fridges, ovens",
      descAr: "إصلاح الغسالات والثلاجات والأفران",
    },
    {
      nameEn: "Cleaning",
      nameAr: "التنظيف",
      descEn: "Deep cleaning and regular services",
      descAr: "تنظيف عميق وخدمات منتظمة",
    },
    {
      nameEn: "Pest Control",
      nameAr: "مكافحة الآفات",
      descEn: "Safe and effective pest management",
      descAr: "إدارة آمنة وفعالة للآفات",
    },
    {
      nameEn: "Carpentry & Joinery",
      nameAr: "النجارة والأعمال الخشبية",
      descEn: "Custom furniture and repairs",
      descAr: "أثاث مخصص وإصلاحات",
    },
    {
      nameEn: "Painting & Decorating",
      nameAr: "الدهان والديكور",
      descEn: "Interior and exterior painting",
      descAr: "دهان داخلي وخارجي",
    },
    {
      nameEn: "Glass/Aluminium",
      nameAr: "زجاج/ألمنيوم",
      descEn: "Windows, doors, and facades",
      descAr: "نوافذ وأبواب وواجهات",
    },
    {
      nameEn: "Landscaping/Irrigation",
      nameAr: "تنسيق الحدائق/الري",
      descEn: "Garden design and irrigation systems",
      descAr: "تصميم الحدائق وأنظمة الري",
    },
    {
      nameEn: "Handyman",
      nameAr: "الصيانة العامة",
      descEn: "General repairs and maintenance",
      descAr: "إصلاحات وصيانة عامة",
    },
    {
      nameEn: "Satellite/IT Setup",
      nameAr: "تركيب الستلايت/تقنية المعلومات",
      descEn: "TV, internet, and tech installations",
      descAr: "تركيب التلفاز والإنترنت والتقنية",
    },
  ];

  const features = [
    {
      titleEn: "WhatsApp Fault Intake",
      titleAr: "استقبال الأعطال عبر واتساب",
      descEn:
        "Customers send text, photos/video, and voice notes; the agent asks smart follow-ups and collects address & preferred time.",
      descAr:
        "يرسل العملاء النص والصور/الفيديو والرسائل الصوتية؛ يسأل الوكيل أسئلة ذكية ويجمع العنوان والوقت المفضل.",
    },
    {
      titleEn: "AI Triage (Assistive)",
      titleAr: "الفرز الذكي (مساعد)",
      descEn:
        "Extracts category, urgency, likely cause, required trade, and parts checklist (guidance, not a definitive diagnosis).",
      descAr:
        "يستخرج الفئة والإلحاح والسبب المحتمل والحرفة المطلوبة وقائمة القطع (توجيه، وليس تشخيص نهائي).",
    },
    {
      titleEn: "Instant Quotes in WhatsApp",
      titleAr: "عروض فورية في واتساب",
      descEn:
        "Line-item pricing (good/better/best), call-out fees, and ETA; customers Approve / Reject / Ask later per item.",
      descAr:
        "تسعير بنود مفصل (جيد/أفضل/الأفضل)، رسوم الخدمة، والوقت المتوقع؛ يوافق العملاء / يرفضون / يؤجلون لكل بند.",
    },
    {
      titleEn: "Secure Payments",
      titleAr: "مدفوعات آمنة",
      descEn:
        "Secure pay links (Stripe/Apple/Google Pay) for deposits, pre-auth, or full amount; automatic receipts.",
      descAr:
        "روابط دفع آمنة (Stripe/Apple/Google Pay) للعربون أو التفويض المسبق أو المبلغ الكامل؛ إيصالات تلقائية.",
    },
    {
      titleEn: "Scheduling & Dispatch",
      titleAr: "الجدولة والإرسال",
      descEn:
        "Offer time windows (e.g., 10-12, 2-4), route to the right technician, live On-my-way / Arrived updates.",
      descAr:
        "عرض نوافذ زمنية (مثل 10-12، 2-4)، توجيه للفني المناسب، تحديثات حية في الطريق / وصل.",
    },
    {
      titleEn: "Technician App",
      titleAr: "تطبيق الفني",
      descEn:
        "Job cards, checklists, photos before/after, parts used, customer signature.",
      descAr:
        "بطاقات العمل، قوائم المراجعة، صور قبل/بعد، القطع المستخدمة، توقيع العميل.",
    },
  ];

  const workflowSteps = [
    {
      titleEn: "Describe the Issue",
      titleAr: "وصف المشكلة",
      exampleEn: '"AC leaking near bedroom. Started today. Water on floor."',
      exampleAr:
        "«المكيف يسرب بجانب غرفة النوم، بدأ اليوم وهناك ماء على الأرض.»",
    },
    {
      titleEn: "Smart Follow-ups",
      titleAr: "المتابعة الذكية",
      exampleEn:
        '"Ceiling or floor unit? When was the last service? Any error codes?"',
      exampleAr: "«وحدة سقفية أم أرضية؟ آخر صيانة متى؟ هل تظهر رموز خطأ؟»",
    },
    {
      titleEn: "Triage & Quote",
      titleAr: "الفرز والتسعيرة",
      exampleEn:
        "Trade: HVAC • Likely: Clogged drain line • Priority: Within 24-48h",
      exampleAr:
        "الحرفة: تكييف • محتمل: انسداد خط التصريف • الأولوية: خلال 24-48 ساعة",
    },
    {
      titleEn: "Payment & Slot",
      titleAr: "الدفع والحجز",
      exampleEn: '"Pay QAR 150 deposit to confirm Tomorrow 2-4 PM."',
      exampleAr: "«ادفع 150 ر.ق عربون لتأكيد الغد 2-4 مساءً.»",
    },
    {
      titleEn: "Day of Service",
      titleAr: "يوم الخدمة",
      exampleEn: '"Tech Fahad is on the way, ETA 25 min."',
      exampleAr: "«الفني فهد في الطريق، الوصول المتوقع 25 دقيقة.»",
    },
    {
      titleEn: "Completion & Receipt",
      titleAr: "الإنجاز والإيصال",
      exampleEn: "Photos, checklist, signature → final invoice & warranty info",
      exampleAr: "صور، قائمة مراجعة، توقيع ← الفاتورة النهائية ومعلومات الضمان",
    },
  ];

  const templates = [
    {
      typeEn: "Estimate",
      typeAr: "التسعيرة",
      contentEn:
        '"Here\'s your estimate: {{items_table}}. Approve to proceed or choose items."',
      contentAr:
        "«هذه التسعيرة: {{items_table}}. الرجاء الاعتماد للمتابعة أو اختيار البنود.»",
    },
    {
      typeEn: "Payment",
      typeAr: "الدفع",
      contentEn:
        '"Secure deposit QAR {{amount}}: {{pay_link}} (applied to final bill)."',
      contentAr:
        "«عربون آمن {{amount}} ر.ق: {{pay_link}} (يُخصم من الفاتورة النهائية).»",
    },
    {
      typeEn: "Status",
      typeAr: "الحالة",
      contentEn: '"{{tech_name}} is en route. ETA {{eta}}."',
      contentAr: "«الفني {{tech_name}} في الطريق. الوصول المتوقع {{eta}}.»",
    },
    {
      typeEn: "Aftercare",
      typeAr: "ما بعد الخدمة",
      contentEn:
        "\"If leaking returns within 14 days, reply 'HELP'—covered under warranty.\"",
      contentAr: "«إذا عاد التسريب خلال 14 يومًا اكتب 'HELP'—مغطى بالضمان.»",
    },
  ];

  const results = [
    {
      metricEn: "70-85%",
      labelEn: "Fewer No-Shows",
      metricAr: "70-85٪",
      labelAr: "انخفاض عدم الحضور",
      reasonEn: "with deposits",
      reasonAr: "مع العربون",
    },
    {
      metricEn: "20-35%",
      labelEn: "Faster Approvals",
      metricAr: "20-35٪",
      labelAr: "موافقات أسرع",
      reasonEn: "in-chat buttons",
      reasonAr: "أزرار داخل المحادثة",
    },
    {
      metricEn: "2-4h",
      labelEn: "Saved Daily",
      metricAr: "2-4 س",
      labelAr: "توفير يومي",
      reasonEn: "on phones & scheduling",
      reasonAr: "من المكالمات والجدولة",
    },
    {
      metricEn: "10-18%",
      labelEn: "More Revenue",
      metricAr: "10-18٪",
      labelAr: "زيادة الإيرادات",
      reasonEn: "from add-ons/AMCs",
      reasonAr: "من الإضافات/عقود الصيانة",
    },
  ];

  const faqs = [
    {
      questionEn: "Is this B2B?",
      questionAr: "هل هذا B2B؟",
      answerEn:
        "Yes—Mawidi powers your flows; we don't sell services to end-users.",
      answerAr:
        "نعم—مواعدي تشغل عملياتك؛ نحن لا نبيع خدمات للمستخدمين النهائيين.",
    },
    {
      questionEn: "Multi-language support?",
      questionAr: "دعم متعدد اللغات؟",
      answerEn: "Full Arabic/English with RTL support.",
      answerAr: "دعم كامل للعربية/الإنجليزية مع RTL.",
    },
    {
      questionEn: "Emergency calls?",
      questionAr: "مكالمات الطوارئ؟",
      answerEn: "Yes—voice agent can triage and route to on-call.",
      answerAr: "نعم—الوكيل الصوتي يمكنه الفرز والتوجيه للطوارئ.",
    },
    {
      questionEn: "Site photos/videos okay?",
      questionAr: "صور/فيديوهات الموقع؟",
      answerEn:
        "Yes—customers upload via WhatsApp; large files via secure link.",
      answerAr: "نعم—العملاء يرفعون عبر واتساب؛ الملفات الكبيرة عبر رابط آمن.",
    },
    {
      questionEn: "Per-item approvals?",
      questionAr: "موافقات لكل بند؟",
      answerEn: "Supported; customer can accept only essentials.",
      answerAr: "مدعوم؛ يمكن للعميل قبول الأساسيات فقط.",
    },
    {
      questionEn: "Deposits refundable?",
      questionAr: "هل العربون قابل للاسترداد؟",
      answerEn: "Per your policy; auto-handled with audit trail.",
      answerAr: "حسب سياستك؛ معالجة تلقائية مع سجل التدقيق.",
    },
  ];

  const gettingStarted = [
    {
      stepEn: "Connect your WhatsApp & phone line",
      stepAr: "اربط واتساب وخط الهاتف",
      descEn: "Choose agent tone (AR/EN)",
      descAr: "اختر نبرة الوكيل (عربي/إنجليزي)",
    },
    {
      stepEn: "Import services & pricing",
      stepAr: "استورد الخدمات والأسعار",
      descEn: "Price list, call-out fees, and zones",
      descAr: "قائمة الأسعار، رسوم الخدمة، والمناطق",
    },
    {
      stepEn: "Set time windows & SLAs",
      stepAr: "حدد النوافذ الزمنية و SLAs",
      descEn: "Emergency escalation rules",
      descAr: "قواعد تصعيد الطوارئ",
    },
    {
      stepEn: "Enable payments",
      stepAr: "فعّل المدفوعات",
      descEn: "Quote approvals and secure pay links",
      descAr: "موافقات العروض وروابط الدفع الآمنة",
    },
    {
      stepEn: "Invite technicians",
      stepAr: "ادعُ الفنيين",
      descEn: "Publish your WhatsApp link",
      descAr: "انشر رابط واتساب الخاص بك",
    },
  ];

  const additionalFeatures = [
    {
      titleEn: "Scheduling, SLAs & Emergencies",
      titleAr: "الجدولة واتفاقيات الخدمة",
      items: [
        {
          en: "Standard windows & priority emergencies",
          ar: "نوافذ زمنية قياسية وزيارات طارئة",
        },
        {
          en: "Auto-escalate Gas/Electrical red-flags",
          ar: "تصعيد تلقائي للطوارئ",
        },
        {
          en: "City/zone routing & skills matrix",
          ar: "توجيه حسب المدينة/المنطقة",
        },
      ],
    },
    {
      titleEn: "Technician Experience",
      titleAr: "تجربة الفني",
      items: [
        {
          en: "Job cards with triage notes",
          ar: "بطاقات العمل مع ملاحظات الفرز",
        },
        {
          en: "Safety & diagnostic checklists",
          ar: "قوائم مراجعة السلامة والتشخيص",
        },
        {
          en: "Offline mode with auto-sync",
          ar: "وضع عدم الاتصال مع المزامنة التلقائية",
        },
      ],
    },
    {
      titleEn: "Quotes, Invoices & Money",
      titleAr: "العروض والمدفوعات",
      items: [
        {
          en: "Multi-option quotes with per-line approvals",
          ar: "عروض متعددة الخيارات",
        },
        { en: "Deposits to reduce no-shows", ar: "عربون لتقليل عدم الحضور" },
        {
          en: "Accounting integrations (Xero/QuickBooks)",
          ar: "تكاملات المحاسبة",
        },
      ],
    },
  ];

  const securityItems = [
    {
      en: "Encryption in transit and at rest",
      ar: "تشفير أثناء النقل وفي الراحة",
    },
    {
      en: "Role-based access & audit logs",
      ar: "صلاحيات حسب الدور وسجلات التدقيق",
    },
    { en: "No card numbers in chat", ar: "لا أرقام بطاقات في المحادثة" },
    {
      en: "AI triage is assistive, not definitive",
      ar: "الفرز الذكي مساعد وليس نهائي",
    },
  ];

  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
                ? "لشركات خدمات المنازل والمهن"
                : "For Home Services & Trades"}
            </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
                ? "إدارة حجوزات خدمات المنازل عبر واتساب"
                : "Manage Home Service Bookings via WhatsApp"}
            </h1>

            <p className="text-xl md:text-2xl text-[#64748B] mb-8 leading-relaxed max-w-3xl">
              {isAr
                ? "يصف عميلك المشكلة عبر واتساب، يتم الفرز تلقائيًا بالصور/الفيديو، تُرسل تسعيرة واضحة، يتم دفع العربون وحجز الموعد—من البداية للنهاية."
                : "Let customers tell you what's wrong on WhatsApp, auto-triage with photos/video, send a clear quote, take a deposit, and schedule the job—end to end."}
            </p>

            {/* 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 Notice:"}
                </span>{" "}
                {isAr
                  ? "مواعدي لا تقدم خدمات الصيانة للجمهور. نحن نزود أعمالك بوكلاء واتساب وصوتيين، والتسعير، والجدولة، والمدفوعات."
                  : "Mawidi doesn't provide handyman/repair services to the public. We equip your business with WhatsApp & Voice agents, quoting, scheduling, and payments."}
              </p>
            </div>

            {/* Stats Grid - Editorial Style */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-px bg-slate-200 mb-12">
              {results.map((stat, idx) => (
                <div
                  key={idx}
                  className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
                >
                  <div className="flex items-center gap-3 mb-2">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-[#64748B] text-sm">
                      {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 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]/10 transition-colors"
              >
                {isAr ? "احجز عرضًا توضيحيًا" : "Book a Demo"}
              </Link>
              <a
                href={`https://wa.me/${SITE.contact.whatsapp}`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[#1E293B] hover:bg-slate-100 transition-colors"
              >
                {isAr ? "استشارة واتساب" : "WhatsApp Consultation"}
              </a>
            </div>

            {/* Trust Badge */}
            <p className="text-sm text-[#64748B]">
              {isAr
                ? "موثوق من 300+ شركة خدمات منزلية في الخليج"
                : "Trusted by 300+ home service companies in GCC"}
            </p>
          </div>
        </div>
      </section>

      {/* Section 02: Service Types */}
      <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"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "مناسب لـ" : "Who This Is For"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "منصة واحدة لإدارة جميع أنواع خدمات المنازل"
                  : "One platform to manage all types of home services"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-px bg-slate-200">
            {serviceTypes.map((service, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 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="font-semibold text-[#1E293B] mb-2">
                  {isAr ? service.nameAr : service.nameEn}
                </h3>
                <p className="text-sm text-[#64748B]">
                  {isAr ? service.descAr : service.descEn}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 03: 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"
              >
                03
              </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 home service operations"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {features.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-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="font-semibold text-[#1E293B]">
                    {isAr ? feature.titleAr : feature.titleEn}
                  </h3>
                </div>
                <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 04: Job Flow */}
      <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"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "رحلة المهمة" : "How a Job Flows"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "من الاستفسار للإنجاز في 6 خطوات بسيطة"
                  : "From inquiry to completion in 6 simple steps"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {workflowSteps.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-3">
                  {isAr ? step.titleAr : step.titleEn}
                </h3>
                <p className="text-[#64748B] text-sm italic">
                  {isAr ? step.exampleAr : step.exampleEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 05: WhatsApp Templates */}
      <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"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "قوالب واتساب جاهزة" : "WhatsApp Templates"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "رسائل جاهزة للتخصيص والاستخدام"
                  : "Ready-to-use message templates you can customize"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {templates.map((template, 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-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="font-semibold text-[#1E293B]">
                    {isAr ? template.typeAr : template.typeEn}
                  </h3>
                </div>
                <div className="bg-[#FAFAFA] p-4 border border-slate-200">
                  <p className="text-sm text-[#64748B] font-mono">
                    {isAr ? template.contentAr : template.contentEn}
                  </p>
                </div>
                <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: Additional Features */}
      <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"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "ميزات إضافية" : "Additional Features"}
              </h2>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-slate-200">
            {additionalFeatures.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-6">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {isAr ? feature.titleAr : feature.titleEn}
                  </h3>
                </div>
                <ul className="space-y-3">
                  {feature.items.map((item, itemIdx) => (
                    <li key={itemIdx} 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] text-sm">
                        {isAr ? item.ar : item.en}
                      </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>

      {/* Section 07: Security */}
      <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"
              >
                07
              </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>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200 mb-8">
            {securityItems.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 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>
                <p className="text-[#1E293B] text-sm font-medium leading-relaxed">
                  {isAr ? item.ar : item.en}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Safety Note */}
          <div className="bg-[#10B981]/[0.05] p-6 border-l-4 border-[#10B981]">
            <p className="text-sm text-[#64748B]">
              <span className="font-semibold text-[#1E293B]">
                {isAr ? "ملاحظة أمان:" : "Safety Note:"}
              </span>{" "}
              {isAr
                ? "يرجى عدم إرسال بيانات البنك أو البطاقة في الدردشة—استخدم الرابط الآمن."
                : "Do not send bank or card details in chat—use the secure link."}
            </p>
          </div>
        </div>
      </section>

      {/* Section 08: FAQs */}
      <section className="py-24 bg-white">
        <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"
              >
                08
              </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-[#FAFAFA] 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.questionAr : faq.questionEn}
                    </h3>
                    <p className="text-[#64748B]">
                      {isAr ? faq.answerAr : faq.answerEn}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 09: Getting Started */}
      <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"
              >
                09
              </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>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "خلال 48 ساعة سيكون نظامك جاهز لاستقبال الطلبات"
                  : "Within 48 hours, your system will be ready to receive requests"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
            {gettingStarted.map((step, idx) => (
              <div
                key={idx}
                className="bg-white 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 10: 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"
            >
              10
            </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 Services Today"}
          </h2>
          <p className="text-xl text-slate-400 mb-12">
            {isAr
              ? "انضم إلى مئات مقدمي خدمات المنازل الذين يستخدمون مواعدي"
              : "Join hundreds of home service providers using Mawidi"}
          </p>

          {/* ROI Stat */}
          <div className="inline-block bg-white/5 border border-white/10 p-8 mb-12">
            <h3 className="font-semibold text-slate-300 mb-2">
              {isAr
                ? "متوسط العائد على الاستثمار"
                : "Average ROI for Our Clients"}
            </h3>
            <div className="text-6xl font-bold text-[#10B981] mb-2">310%</div>
            <p className="text-sm text-slate-400">
              {isAr ? "خلال أول 6 شهور" : "Within the first 6 months"}
            </p>
          </div>

          <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 a 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="home-services-trades" lang={params.lang} />
    </main>
  );
}