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

export const revalidate = SITE.revalidateSeconds;

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

interface PageProps {
  params: { lang: Lang };
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const isAr = params.lang === "ar";
  const title = isAr
    ? "خدمات الحيوانات الأليفة | مواعدي"
    : "Pet Services | Mawidi";
  const description = isAr
    ? "حلول مواعدي لخدمات الحيوانات الأليفة، إدارة الحجوزات، التسعير، والمدفوعات عبر واتساب"
    : "Mawidi solutions for pet services, bookings management, quoting, and payments via WhatsApp";

  return {
    title: `${title} | ${SITE.brand}`,
    description,
    alternates: {
      languages: {
        en: `/en/industries/pet-services`,
        ar: `/ar/industries/pet-services`,
      },
    },
    openGraph: {
      title,
      description,
      type: "website",
    },
    twitter: {
      card: "summary",
      title,
      description,
    },
  };
}

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

  const targetMarkets = [
    {
      nameEn: "Grooming & Spa",
      nameAr: "العناية والسبا",
      descEn: "Bath, haircut, de-shedding, nails",
      descAr: "حمام، قص شعر، إزالة الشعر الزائد، أظافر",
    },
    {
      nameEn: "Vet Clinics",
      nameAr: "العيادات البيطرية",
      descEn: "Appointments, vaccinations, wellness checks",
      descAr: "مواعيد، تطعيمات، فحوصات صحية",
    },
    {
      nameEn: "Boarding & Daycare",
      nameAr: "الإقامة والحضانة",
      descEn: "Kennels, suites, half/full day care",
      descAr: "أقفاص، أجنحة، رعاية نصف/كامل اليوم",
    },
    {
      nameEn: "Training & Behavior",
      nameAr: "التدريب والسلوك",
      descEn: "1:1 sessions, classes, evaluations",
      descAr: "جلسات فردية، دروس، تقييمات",
    },
    {
      nameEn: "Pet Transport",
      nameAr: "نقل الحيوانات",
      descEn: "Pet taxi with live ETA",
      descAr: "تاكسي للحيوانات مع الوقت المتوقع",
    },
  ];

  const features = [
    {
      titleEn: "WhatsApp Booking Agent",
      titleAr: "وكيل الحجز عبر واتساب",
      descEn:
        "Answers FAQs, checks availability, offers slots, collects deposits, and confirms instantly in English & Arabic.",
      descAr:
        "يجيب على الأسئلة، يتحقق من التوفر، يعرض الأوقات، يجمع العربون، ويؤكد فورًا بالعربية والإنجليزية.",
    },
    {
      titleEn: "Voice Agent",
      titleAr: "الوكيل الصوتي",
      descEn:
        "Answers calls in EN/AR, books/reschedules, sends payment links via SMS/WhatsApp.",
      descAr:
        "يجيب على المكالمات بالعربية/الإنجليزية، يحجز/يعدل المواعيد، يرسل روابط الدفع عبر SMS/واتساب.",
    },
    {
      titleEn: "Quotes & Add-ons",
      titleAr: "التسعيرات والإضافات",
      descEn:
        "Line-item quotes for grooming packages, vaccines, training blocks with Approve/Ask later buttons.",
      descAr:
        "تسعيرات مفصلة لباقات العناية، التطعيمات، كتل التدريب مع أزرار الموافقة/السؤال لاحقًا.",
    },
    {
      titleEn: "Secure Payments",
      titleAr: "مدفوعات آمنة",
      descEn:
        "Stripe/Apple/Google Pay links for deposits, balances, packages with instant receipts.",
      descAr:
        "روابط Stripe/Apple/Google Pay للعربون، الأرصدة، الباقات مع إيصالات فورية.",
    },
    {
      titleEn: "Pet & Owner CRM",
      titleAr: "إدارة علاقات الحيوانات والمالكين",
      descEn:
        "Multi-pet profiles, breed/weight, allergies, behavior flags, vaccine expiry, consent & language.",
      descAr:
        "ملفات متعددة للحيوانات، السلالة/الوزن، الحساسيات، علامات السلوك، انتهاء التطعيم، الموافقة واللغة.",
    },
    {
      titleEn: "Reminders & Follow-ups",
      titleAr: "التذكيرات والمتابعات",
      descEn:
        "T-24h/T-2h reminders, after-care tips, review requests sent via WhatsApp.",
      descAr:
        "تذكيرات قبل 24ساعة/2ساعة، نصائح العناية اللاحقة، طلبات التقييم عبر واتساب.",
    },
  ];

  const customerFlows = [
    {
      titleEn: "Book an Appointment",
      titleAr: "حجز موعد",
      stepsEn: [
        'Parent: "Full groom for Luna (Golden Retriever) this weekend?"',
        'Agent: "Available Fri 3:30 PM or Sat 11:00 AM. Deposit QAR 40 to confirm."',
        "Collected: pet name, breed/weight, coat condition, allergies, behavior notes",
      ],
      stepsAr: [
        "ولي الأمر: «تنظيف كامل لـ لونا (جولدن ريتريفر) نهاية الأسبوع؟»",
        "الوكيل: «متاح الجمعة 3:30 م أو السبت 11:00 ص. عربون 40 ر.ق للتأكيد.»",
        "تم جمع: اسم الحيوان، السلالة/الوزن، حالة الشعر، الحساسيات، ملاحظات السلوك",
      ],
    },
    {
      titleEn: "Get a Quote",
      titleAr: "عرض سعر",
      stepsEn: [
        "Bath & Brush — QAR 120",
        "Full Groom (Large) — QAR 260",
        "Add-ons: De-shedding (+QAR 60), Nail Trim (+QAR 25), Teeth Clean (+QAR 30)",
        "Buttons: Approve all • Approve essentials • Ask later",
      ],
      stepsAr: [
        "حمام وتمشيط — 120 ر.ق",
        "عناية كاملة (كبير) — 260 ر.ق",
        "إضافات: إزالة الشعر الزائد (+60 ر.ق)، تقليم أظافر (+25 ر.ق)، تنظيف أسنان (+30 ر.ق)",
        "أزرار: اعتماد الكل • اعتماد الأساسيات • السؤال لاحقًا",
      ],
    },
    {
      titleEn: "Boarding/Daycare",
      titleAr: "الإقامة/الحضانة",
      stepsEn: [
        "Availability by kennel type/run size",
        "Add feeding/medication schedules",
        "Pre-check: vaccination proof, emergency contact, temperament notes",
        'Waitlist: "A Large Suite opened Sep 12–15. Claim within 30 min."',
      ],
      stepsAr: [
        "التوفر حسب نوع القفص/حجم المساحة",
        "إضافة جداول التغذية/الأدوية",
        "فحص مسبق: إثبات التطعيم، جهة اتصال للطوارئ، ملاحظات المزاج",
        "قائمة الانتظار: «توفرت غرفة كبيرة 12–15 سبتمبر. احجز خلال 30 دقيقة.»",
      ],
    },
    {
      titleEn: "Training",
      titleAr: "التدريب",
      stepsEn: [
        "Book evaluations, class packs (e.g., 6 sessions), or courses",
        "Behavior goals, environment notes",
        "Attendance via QR; progress cards shared on WhatsApp",
      ],
      stepsAr: [
        "حجز تقييمات، حزم الدروس (مثلاً 6 جلسات)، أو دورات",
        "أهداف السلوك، ملاحظات البيئة",
        "الحضور عبر QR؛ بطاقات التقدم مشاركة على واتساب",
      ],
    },
  ];

  const messagingTemplates = [
    {
      typeEn: "Reminder",
      typeAr: "تذكير",
      exampleEn: '"Luna\'s grooming tomorrow 3:30 PM. Reschedule: {{link}}."',
      exampleAr: "«موعد تنظيف لونا غدًا 3:30 م. لتعديل الموعد: {{link}}.»",
    },
    {
      typeEn: "Status",
      typeAr: "الحالة",
      exampleEn: '"Luna is in grooming; ready in ~60 min."',
      exampleAr: "«لونا قيد العناية؛ الاستلام خلال ~60 دقيقة.»",
    },
    {
      typeEn: "After-care",
      typeAr: "العناية اللاحقة",
      exampleEn: '"Avoid swimming for 24h. If redness persists, reply HELP."',
      exampleAr: "«تجنّب السباحة لمدة 24 ساعة. إذا استمر الاحمرار اكتب HELP.»",
    },
    {
      typeEn: "Review",
      typeAr: "التقييم",
      exampleEn: '"How was your visit? 1–5 stars — it helps us improve."',
      exampleAr: "«كيف كانت زيارتكم؟ من 1 إلى 5 نجوم — رأيكم يهمنا.»",
    },
  ];

  const operations = [
    {
      titleEn: "Scheduler",
      titleAr: "المجدول",
      descEn: "Groomers/vets/rooms/kennels with capacity & buffers",
      descAr: "مصففو الشعر/الأطباء البيطريون/الغرف/الأقفاص مع السعة والعوازل",
    },
    {
      titleEn: "Job Cards",
      titleAr: "بطاقات العمل",
      descEn:
        "Intake notes, checklist (ears/anal glands/teeth), before/after photos, meds given",
      descAr:
        "ملاحظات الاستقبال، قائمة المراجعة (الأذنين/غدد الشرج/الأسنان)، صور قبل/بعد، الأدوية المقدمة",
    },
    {
      titleEn: "Incidents & Follow-ups",
      titleAr: "الحوادث والمتابعات",
      descEn: "Internal notes, owner acknowledgment, warranty windows",
      descAr: "ملاحظات داخلية، إقرار المالك، نوافذ الضمان",
    },
    {
      titleEn: "Packages & Memberships",
      titleAr: "الباقات والعضويات",
      descEn: "Rollover rules, freeze, auto-renew with reminders",
      descAr: "قواعد التمديد، التجميد، التجديد التلقائي مع التذكيرات",
    },
  ];

  const results = [
    {
      metricEn: "40-60%",
      metricAr: "40-60٪",
      labelEn: "Fewer Calls",
      labelAr: "مكالمات أقل",
      reasonEn: "with WhatsApp booking & FAQs",
      reasonAr: "مع الحجز عبر واتساب والأسئلة الشائعة",
    },
    {
      metricEn: "25-40%",
      metricAr: "25-40٪",
      labelEn: "Faster Approvals",
      labelAr: "موافقات أسرع",
      reasonEn: "in-chat approval buttons",
      reasonAr: "أزرار الموافقة في المحادثة",
    },
    {
      metricEn: "15-25%",
      metricAr: "15-25٪",
      labelEn: "More Add-on Revenue",
      labelAr: "إيرادات إضافية",
      reasonEn: "smart upselling prompts",
      reasonAr: "تحفيزات البيع الإضافي الذكية",
    },
    {
      metricEn: "3-5h",
      metricAr: "3-5 ساعات",
      labelEn: "Saved Weekly",
      labelAr: "توفير أسبوعياً",
      reasonEn: "on scheduling & reminders",
      reasonAr: "في الجدولة والتذكيرات",
    },
  ];

  const faqs = [
    {
      questionEn: "Is this B2B only?",
      questionAr: "هل هذا B2B فقط؟",
      answerEn:
        "Yes—Mawidi powers your flows; we don't sell services to pet owners.",
      answerAr:
        "نعم—مواعدي تشغل تدفقاتكم؛ نحن لا نبيع الخدمات لمالكي الحيوانات الأليفة.",
    },
    {
      questionEn: "Deposits & refunds?",
      questionAr: "العربون والمبالغ المستردة؟",
      answerEn: "Configurable per service/slot; automated with audit trail.",
      answerAr: "قابل للتهيئة لكل خدمة/فترة؛ تلقائي مع سجل التدقيق.",
    },
    {
      questionEn: "Multi-pet bookings?",
      questionAr: "حجوزات متعددة للحيوانات؟",
      answerEn: "Supported; select pets and allocate time accordingly.",
      answerAr: "مدعوم؛ اختر الحيوانات وخصص الوقت وفقًا لذلك.",
    },
    {
      questionEn: "Medical uploads?",
      questionAr: "تحميل الملفات الطبية؟",
      answerEn: "Via secure links; not stored in WhatsApp.",
      answerAr: "عبر روابط آمنة؛ غير مخزنة في واتساب.",
    },
    {
      questionEn: "Arabic/English?",
      questionAr: "العربية/الإنجليزية؟",
      answerEn: "Full bilingual support with RTL.",
      answerAr: "دعم ثنائي اللغة كامل مع RTL.",
    },
  ];

  const gettingStarted = [
    {
      stepEn: "Connect WhatsApp & phone",
      stepAr: "اربط واتساب والهاتف",
      descEn: "Choose agent tone (AR/EN)",
      descAr: "اختر نبرة الوكيل (العربية/الإنجليزية)",
    },
    {
      stepEn: "Add services & staff",
      stepAr: "أضف الخدمات والموظفين",
      descEn: "Services, durations, resources, kennel types",
      descAr: "الخدمات، المدد، الموارد، أنواع الأقفاص",
    },
    {
      stepEn: "Set deposits & policies",
      stepAr: "حدد العربون والسياسات",
      descEn: "Deposits, cancellation rules, add-ons/packages",
      descAr: "العربون، قواعد الإلغاء، الإضافات/الباقات",
    },
    {
      stepEn: "Turn on reminders & waitlists",
      stepAr: "فعّل التذكيرات وقوائم الانتظار",
      descEn: "Automated reminders, waitlist fills, feedback",
      descAr: "تذكيرات تلقائية، ملء قوائم الانتظار، التقييمات",
    },
    {
      stepEn: "Share your WhatsApp link",
      stepAr: "شارك رابط واتساب الخاص بك",
      descEn: "QR at reception, social media, website",
      descAr: "QR في الاستقبال، وسائل التواصل، الموقع",
    },
  ];

  const securityItems = [
    {
      en: "Encryption in transit & at rest",
      ar: "تشفير أثناء النقل وفي حالة السكون",
    },
    {
      en: "Role-based access; audit logs",
      ar: "وصول قائم على الأدوار؛ سجلات التدقيق",
    },
    {
      en: "No medical docs in chat—use secure upload links",
      ar: "لا توجد مستندات طبية في المحادثة—استخدم روابط آمنة",
    },
    {
      en: "Consent & quiet hours respected",
      ar: "احترام الموافقة والساعات الهادئة",
    },
    { en: "Arabic/English with RTL", ar: "العربية/الإنجليزية مع RTL" },
    {
      en: "AI guidance assistive only; medical concerns routed to licensed staff",
      ar: "إرشاد AI مساعد فقط؛ المخاوف الطبية توجه للموظفين المرخصين",
    },
  ];

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* Section 01: Hero */}
      <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: "40px 40px",
          }}
        />

        <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 Pet Service Providers"}
            </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
                ? "وفّر لمالكي الحيوانات حجز سهل ودفع آمن"
                : "Let Pet Parents Book & Pay Seamlessly"}
            </h1>

            <p className="text-xl md:text-2xl text-[#64748B] mb-8 leading-relaxed max-w-3xl">
              {isAr
                ? "وفّر لمالكي الحيوانات الحجز عبر واتساب، الحصول على تسعيرة، والدفع الآمن مع التحديثات—وفريقك يدير الجداول والتذكيرات والإضافات من مكان واحد."
                : "Let pet parents book on WhatsApp, get quotes, pay securely, and receive updates—while your team manages schedules, reminders, and add-ons from one place."}
            </p>

            {/* B2B Notice */}
            <div className="bg-[#10B981]/[0.05] p-6 mb-8 border border-[#10B981]/20">
              <div className="flex items-start gap-3">
                <span
                  className="text-[#10B981] font-mono text-xs mt-1"
                  dir="ltr"
                >
                  B2B
                </span>
                <p className="text-[#64748B]">
                  {isAr
                    ? "مواعدي لا تقدم خدمات الحيوانات الأليفة للجمهور. نحن نزود عملك بأدوات لتمكين حجوزات واتساب/الصوت، التسعيرات، العربون والمدفوعات، التذكيرات، ورسائل العملاء لعملائك."
                    : "Mawidi doesn't provide pet services to the public. We equip your business with tools to enable WhatsApp/Voice bookings, quotes, deposits & payments, reminders, and customer messaging for your clients."}
                </p>
              </div>
            </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-sm text-[#64748B]">
                    {isAr ? stat.reasonAr : stat.reasonEn}
                  </p>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                </div>
              ))}
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <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"
              >
                <span className="relative z-10">
                  {isAr ? "احجز عرض توضيحي" : "Book a Demo"}
                </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}/signup`}
                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 ? "ابدأ مجانًا" : "Start Free"}
              </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 ? "تحدث إلى المبيعات" : "Talk to Sales"}
              </a>
            </div>

            {/* Trust Badge */}
            <p className="text-sm text-[#64748B]">
              {isAr
                ? "موثوق من مئات مقدمي خدمات الحيوانات الأليفة في الخليج"
                : "Trusted by hundreds of pet service providers in GCC"}
            </p>
          </div>
        </div>
      </section>

      {/* Section 02: Who This Is For */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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
                  ? "حل شامل لجميع أنواع خدمات الحيوانات الأليفة"
                  : "Complete solution for all types of pet services"}
              </p>
            </div>
          </div>

          {/* Target Markets Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-px bg-slate-200">
            {targetMarkets.map((market, 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="text-lg font-semibold text-[#1E293B]">
                    {isAr ? market.nameAr : market.nameEn}
                  </h3>
                </div>
                <p className="text-sm text-[#64748B]">
                  {isAr ? market.descAr : market.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
                  ? "قدرات تفعلها لعملك؛ مواعدي لا تبيع خدمات للعملاء النهائيين"
                  : "Capabilities you turn on for your business; Mawidi does not sell services to end-clients"}
              </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="text-xl font-semibold text-[#1E293B]">
                    {isAr ? feature.titleAr : feature.titleEn}
                  </h3>
                </div>
                <p className="text-[#64748B]">
                  {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: Core Customer Flows */}
      <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 ? "تجارب العميل الأساسية" : "Core Customer Flows"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "كيف يتفاعل عملاؤك مع نظامك"
                  : "How your customers interact with your system"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {customerFlows.map((flow, idx) => (
              <div key={idx} className="bg-white p-8">
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                    04.{idx + 1}
                  </span>
                  <h3 className="text-2xl font-bold text-[#1E293B]">
                    {isAr ? flow.titleAr : flow.titleEn}
                  </h3>
                </div>
                <ul className="space-y-3">
                  {(isAr ? flow.stepsAr : flow.stepsEn).map((step, stepIdx) => (
                    <li key={stepIdx} 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]">{step}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 05: Messaging 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 ? "قوالب واتساب جاهزة" : "Messaging Templates"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "رسائل جاهزة تُرسل تلقائياً لعملائك"
                  : "Pre-built messages sent automatically to your clients"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {messagingTemplates.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="text-lg font-semibold text-[#1E293B]">
                    {isAr ? template.typeAr : template.typeEn}
                  </h3>
                </div>
                <p className="text-[#64748B] italic text-sm">
                  &ldquo;{isAr ? template.exampleAr : template.exampleEn}&rdquo;
                </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 06: Operations & Staff Tools */}
      <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 ? "تشغيل وأدوات الفريق" : "Operations & Staff Tools"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "أدوات لإدارة فريقك وعملياتك اليومية"
                  : "Tools to manage your team and daily operations"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {operations.map((operation, 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="text-lg font-semibold text-[#1E293B]">
                    {isAr ? operation.titleAr : operation.titleEn}
                  </h3>
                </div>
                <p className="text-sm text-[#64748B]">
                  {isAr ? operation.descAr : operation.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 07: Security & Privacy */}
      <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 & Safety"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "بياناتك وبيانات عملائك محمية دائماً"
                  : "Your data and your clients' data is always protected"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {securityItems.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-start gap-3">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <p className="text-[#64748B]">{isAr ? item.ar : item.en}</p>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </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: Get 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 Simple Steps"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "خلال 48 ساعة سيكون نظامك جاهز لاستقبال الحجوزات"
                  : "Within 48 hours, your system will be ready to accept bookings"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-6">
            {gettingStarted.map((step, idx) => (
              <div
                key={idx}
                className="bg-white p-8 border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-4xl 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.stepAr : step.stepEn}
                </h3>
                <p className="text-[#64748B] text-sm">
                  {isAr ? step.descAr : step.descEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 10: Final CTA */}
      <section className="py-24 bg-white">
        <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-[#1E293B] mb-6">
            {isAr
              ? "جاهز لأتمتة خدمات حيواناتك الأليفة؟"
              : "Ready to Automate Your Pet Services?"}
          </h2>
          <p className="text-xl text-[#64748B] mb-12">
            {isAr
              ? "انضم لمئات مقدمي خدمات الحيوانات الأليفة الذين ينمون مع مواعدي"
              : "Join hundreds of pet service providers growing with Mawidi"}
          </p>

          {/* ROI Stat */}
          <div className="inline-block bg-[#10B981]/[0.05] p-8 mb-12">
            <h3 className="font-semibold text-[#1E293B] mb-2">
              {isAr ? "متوسط التوفير الأسبوعي" : "Average Weekly Time Saved"}
            </h3>
            <div className="text-6xl font-bold text-[#10B981] mb-2">3-5h</div>
            <p className="text-sm text-[#64748B]">
              {isAr ? "على الجدولة والتذكيرات" : "On scheduling & reminders"}
            </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 ? "ابدأ تجربة مجانية 14 يوم" : "Start 14-Day Free Trial"}
              </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 ? "شاهد 10 دقائق عرض" : "Watch 10-Min Demo"}
            </Link>
          </div>

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

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