'use client';

/**
 * ServiceDetailView Component
 * 
 * "Airbnb Luxe" split-column Service Details Page (PDP) architecture.
 * Left: SEO narrative engine (Breadcrumbs, H1, Trust Badges, Single Hero Image,
 *       About Treatment Description, Enhance Your Experience with Inline Quantity Steppers,
 *       Accordion FAQ, Real Reviews).
 * Right: Sticky Booking Card (Massive Price with Strikethrough Discount Bar flush with Primary Service Quantity Stepper,
 *        Interactive BNPL 4-Month Split Payment Card, Custom Package Breakdown, Trust Guarantees, Big CTA).
 * Bottom: SEO-driven "You might also like" Related Services grid.
 * Mobile: 2-Row Stack Mobile Bottom Bar with Shadcn Expandable Cart Breakdown Drawer.
 */

import React, { useState, useMemo, useRef, useEffect } from 'react';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Star,
  Clock,
  ShieldCheck,
  ChevronRight,
  CalendarCheck,
  Award,
  Lock,
  ThumbsUp,
  Minus,
  Plus,
  Info,
  X,
  ChevronUp,
  AlertTriangle,
  LayoutDashboard,
} from 'lucide-react';
import { PriceDisplay } from '@/components/PriceDisplay';
import { TabbyBadge, TamaraBadge } from '@/components/BNPLPriceDisplay';
import { ServiceCard } from '@/components/ServiceCard';
import { useAuthStore } from '@/lib/stores/useAuthStore';
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@/components/ui/accordion';
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
} from '@/components/ui/drawer';
import { ImageWithFallback } from '@/components/ui/ImageWithFallback';
import { cn, formatDuration } from '@/lib/utils';
import type { Service } from '@shinecode/api-client/types';

export interface ServiceAddon {
  id: string;
  nameEn: string;
  nameAr: string;
  descEn?: string;
  descAr?: string;
  price: number;
  image?: string;
}

export interface RelatedServiceItem {
  id: number;
  slug: string;
  nameEn: string;
  nameAr: string;
  price: number;
  originalPrice?: number;
  image: string;
  descEn: string;
  descAr: string;
  rating: number;
  reviewCount: number;
  feature1TitleEn?: string;
  feature1TitleAr?: string;
  feature1SubEn?: string;
  feature1SubAr?: string;
  feature2TitleEn?: string;
  feature2TitleAr?: string;
  feature2SubEn?: string;
  feature2SubAr?: string;
  isFeatured?: boolean;
}

export interface ServiceDetailData {
  id: number;
  slug: string;
  nameEn: string;
  nameAr: string;
  categorySlug: string;
  categoryNameEn: string;
  categoryNameAr: string;
  price: number;
  originalPrice?: number;
  durationMinutes: number;
  rating: number;
  reviewCount: number;
  heroImage: string;
  descriptionEn: string;
  descriptionAr: string;
  addons?: ServiceAddon[];
  faqsEn: { question: string; answer: string }[];
  faqsAr: { question: string; answer: string }[];
  reviews: {
    id: number;
    author: string;
    dateEn: string;
    dateAr: string;
    rating: number;
    textEn: string;
    textAr: string;
  }[];
}

const DEFAULT_RELATED_SERVICES: RelatedServiceItem[] = [
  {
    id: 101,
    slug: 'signature-gel-manicure',
    nameEn: 'Signature Gel Manicure',
    nameAr: 'مانيكير جل روسي فاخر',
    price: 180,
    originalPrice: 240,
    image: 'https://images.unsplash.com/photo-1632345031435-8727f6897d53?w=600&auto=format&fit=crop&q=85',
    descEn: 'Precision Russian cuticle care, long-lasting diamond gel polish, and organic cuticle hydration delivered to your door.',
    descAr: 'عناية دقيقة بالزوائد الجلدية، طلاء جل ألماسي يدوم طويلاً ومساج مرطب بالزيوت العضوية في منزلك.',
    rating: 4.9,
    reviewCount: 168,
    feature1TitleEn: 'Sterilized Kit',
    feature1TitleAr: 'حقيبة معقمة',
    feature1SubEn: 'Hospital-grade',
    feature1SubAr: 'معايير طبية',
    feature2TitleEn: 'Top 1% Pros',
    feature2TitleAr: 'خبير معتمد',
    feature2SubEn: 'Vetted & verified',
    feature2SubAr: 'فحص أمني معتمد',
  },
  {
    id: 401,
    slug: 'hydrafacial-deep-glow',
    nameEn: 'HydraFacial Deep Glow',
    nameAr: 'هيدرا فيشل نضارة عميقة',
    price: 290,
    originalPrice: 380,
    image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=600&auto=format&fit=crop&q=85',
    descEn: 'Vortex suction pore extraction, antioxidant serum infusion, and LED phototherapy for an effortless radiant glow.',
    descAr: 'تنظيف مسام بتقنية الشفط، توريد سيروم مضادات الأكسدة وجلسة علاج ضوئي لنضارة فورية.',
    rating: 5.0,
    reviewCount: 194,
    feature1TitleEn: 'Vortex Clean',
    feature1TitleAr: 'شفط المسام',
    feature1SubEn: 'Painless',
    feature1SubAr: 'تنظيف لطيف',
    feature2TitleEn: 'LED Boost',
    feature2TitleAr: 'علاج ضوئي',
    feature2SubEn: 'Instant glow',
    feature2SubAr: 'نضارة فورية',
  },
  {
    id: 301,
    slug: 'deep-tissue-hot-stone',
    nameEn: 'Deep Tissue Hot Stone',
    nameAr: 'مساج أحجار ساخنة عميق',
    price: 320,
    originalPrice: 420,
    image: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=600&auto=format&fit=crop&q=85',
    descEn: 'Heated volcanic basalt stones and organic lavender aromatherapy to relieve muscular tension in your living room.',
    descAr: 'أحجار بركانية ساخنة وزيوت لافندر عضوية لتخفيف آلام العضلات وتجديد الطاقة في راحة منزلك.',
    rating: 4.95,
    reviewCount: 230,
    feature1TitleEn: 'Volcanic Stone',
    feature1TitleAr: 'أحجار بركانية',
    feature1SubEn: 'Deep heat',
    feature1SubAr: 'علاج حراري',
    feature2TitleEn: 'Certified Pro',
    feature2TitleAr: 'معالج معتمد',
    feature2SubEn: 'Licensed',
    feature2SubAr: 'مرخص ومحترف',
  },
  {
    id: 201,
    slug: 'signature-blowout-style',
    nameEn: 'Signature Blowout & Style',
    nameAr: 'سشوار وتصفيف شعر بريميوم',
    price: 195,
    originalPrice: 260,
    image: 'https://images.unsplash.com/photo-1562322140-8baeececf3df?w=600&auto=format&fit=crop&q=85',
    descEn: 'Voluminous red-carpet blowout and heat-protected styling by top Dubai salon-trained master hairstylists.',
    descAr: 'سشوار احترافي بحجم مذهل وحماية من الحرارة بواسطة أمهر مصففي الشعر في دبي.',
    rating: 4.85,
    reviewCount: 112,
    feature1TitleEn: 'Salon Tools',
    feature1TitleAr: 'أدوات احترافية',
    feature1SubEn: 'Dyson & GHD',
    feature1SubAr: 'دايسون وجي إتش دي',
    feature2TitleEn: 'Top Stylists',
    feature2TitleAr: 'مصففون خبراء',
    feature2SubEn: 'Experienced',
    feature2SubAr: 'خبرة صالونات دبي',
  },
];

export interface ServiceDetailViewProps {
  service: ServiceDetailData;
  relatedServices?: (Service | RelatedServiceItem)[];
  locale?: string;
}

export function ServiceDetailView({
  service,
  relatedServices = DEFAULT_RELATED_SERVICES,
  locale = 'en',
}: ServiceDetailViewProps) {
  const isAr = locale === 'ar';

  // ── Independent State Management ──
  const [serviceQuantity, setServiceQuantity] = useState(1);
  const [addonQuantities, setAddonQuantities] = useState<Record<string, number>>({});
  const [isBnplModalOpen, setIsBnplModalOpen] = useState(false);
  const [isCartDrawerOpen, setIsCartDrawerOpen] = useState(false);
  const [isDescExpanded, setIsDescExpanded] = useState(false);
  const bnplCardRef = useRef<HTMLDivElement>(null);

  const displayRating = service.rating > 0 ? service.rating : 5.0;

  const addons = useMemo(() => service.addons || [], [service.addons]);

  // Close BNPL popup on outside click
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (bnplCardRef.current && !bnplCardRef.current.contains(event.target as Node)) {
        setIsBnplModalOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // Addon Stepper Handlers
  const handleAddAddon = (id: string) => {
    setAddonQuantities((prev) => ({
      ...prev,
      [id]: (prev[id] || 0) + 1,
    }));
  };

  const handleIncrementAddon = (id: string) => {
    setAddonQuantities((prev) => ({
      ...prev,
      [id]: Math.min(10, (prev[id] || 0) + 1),
    }));
  };

  const handleDecrementAddon = (id: string) => {
    setAddonQuantities((prev) => {
      const current = prev[id] || 0;
      if (current <= 1) {
        const next = { ...prev };
        delete next[id];
        return next;
      }
      return {
        ...prev,
        [id]: current - 1,
      };
    });
  };

  // Primary Service Quantity Handlers
  const handleIncrementService = () => {
    setServiceQuantity((prev) => Math.min(10, prev + 1));
  };

  const handleDecrementService = () => {
    setServiceQuantity((prev) => Math.max(1, prev - 1));
  };

  // ── Synchronized Pricing & Duration Math ──
  const baseServiceTotal = service.price * serviceQuantity;

  const addonsTotal = useMemo(() => {
    return Object.entries(addonQuantities).reduce((sum, [id, qty]) => {
      if (qty <= 0) return sum;
      const addon = addons.find((a) => a.id === id);
      return sum + (addon ? addon.price * qty : 0);
    }, 0);
  }, [addonQuantities, addons]);

  const grandTotal = baseServiceTotal + addonsTotal;
  const totalDuration = service.durationMinutes * serviceQuantity;
  const bnplHeroSplit = (grandTotal / 4).toFixed(2);
  const bnplMonthAmount = parseFloat(bnplHeroSplit);

  // Active addons list for summary breakdown
  const activeAddonsList = useMemo(() => {
    return Object.entries(addonQuantities)
      .filter(([, qty]) => qty > 0)
      .map(([id, qty]) => {
        const addon = addons.find((a) => a.id === id);
        return {
          id,
          qty,
          nameEn: addon?.nameEn || id,
          nameAr: addon?.nameAr || id,
          unitPrice: addon?.price || 0,
          totalPrice: (addon?.price || 0) * qty,
        };
      });
  }, [addonQuantities, addons]);

  const { user, isAuthenticated } = useAuthStore();
  const userType = String(user?.user_type || 'user').toLowerCase();
  const isNonClientRole = Boolean(
    isAuthenticated &&
    user &&
    ['provider', 'handyman', 'admin', 'demo_admin', 'agent'].includes(userType)
  );

  const bookingUrl = useMemo(() => {
    const params = new URLSearchParams({
      id: String(service.id),
      slug: service.slug,
      quantity: String(serviceQuantity),
    });
    const formattedAddons = activeAddonsList.map((a) => (a.qty > 1 ? `${a.id}:${a.qty}` : a.id));
    if (formattedAddons.length > 0) {
      params.append('addons', formattedAddons.join(','));
    }
    return `/${locale}/checkout?${params.toString()}`;
  }, [service.id, service.slug, locale, serviceQuantity, activeAddonsList]);

  const handleBookClick = () => {
    if (isNonClientRole) {
      window.location.href = '/home';
      return;
    }
    window.location.href = bookingUrl;
  };

  const name = isAr ? service.nameAr : service.nameEn;
  const categoryName = isAr ? service.categoryNameAr : service.categoryNameEn;
  const description = isAr ? service.descriptionAr : service.descriptionEn;
  const faqs = isAr ? service.faqsAr : service.faqsEn;

  // Filter out the current service from related items & map real API fields
  const displayRelatedServices = useMemo(() => {
    return (relatedServices || [])
      .filter((s) => s.slug !== service.slug && s.id !== service.id)
      .slice(0, 4)
      .map((item) => {
        // If item is a real API Service
        if ('name' in item && typeof item.name === 'string') {
          const s = item as Service;
          let img = 'https://images.unsplash.com/photo-1632345031435-8727f6897d53?w=600&auto=format&fit=crop&q=85';
          if (Array.isArray(s.attchments) && s.attchments.length > 0) {
            const first = s.attchments[0];
            img = typeof first === 'string' ? first : (first?.url || img);
          } else if (Array.isArray(s.attchments_array) && s.attchments_array.length > 0) {
            img = s.attchments_array[0].url || img;
          } else if (s.provider_image) {
            img = s.provider_image;
          }

          const rawRating = Number(s.total_rating ?? s.rating ?? 0);
          const rating = rawRating > 0 ? rawRating : 5.0;
          const reviewCount = Number(s.total_review ?? s.review_count ?? 0);
          const formattedDuration = formatDuration(s.duration, locale);
          const isFeatured = Boolean(s.is_featured);

          return {
            id: s.id,
            slug: s.slug,
            name: s.name,
            price: s.discount_price ?? s.price,
            originalPrice: s.discount_price ? s.price : (s.discount ? s.price : undefined),
            discount: s.discount ?? undefined,
            image: img,
            description: s.description || (isAr ? 'علاج تجميلي فاخر يقدم في منزلك في دبي' : 'Premium at-home beauty treatment in Dubai.'),
            rating,
            reviewCount,
            formattedDuration: formattedDuration || (isAr ? '30 دقيقة' : '30 mins'),
            isFeatured,
          };
        }

        // If item is legacy RelatedServiceItem
        const rel = item as RelatedServiceItem;
        return {
          id: rel.id,
          slug: rel.slug,
          name: isAr ? rel.nameAr : rel.nameEn,
          price: rel.price,
          originalPrice: rel.originalPrice,
          discount: undefined,
          image: rel.image,
          description: isAr ? rel.descAr : rel.descEn,
          rating: rel.rating,
          reviewCount: rel.reviewCount,
          formattedDuration: isAr ? (rel.feature2TitleAr || '45 دقيقة') : (rel.feature2TitleEn || '45 mins'),
          isFeatured: rel.isFeatured,
        };
      });
  }, [relatedServices, service.slug, service.id, locale, isAr]);

  return (
    <div className="min-h-screen bg-zinc-50/50 dark:bg-zinc-950 pb-32 lg:pb-24 transition-colors duration-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 md:py-16">

        {/* ── 1. SEO Breadcrumbs ── */}
        <nav aria-label="Breadcrumb" className="mb-6">
          <ol className="flex items-center gap-2 text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 flex-wrap">
            <li>
              <Link href={`/${locale}`} className="hover:text-zinc-900 dark:hover:text-white transition-colors">
                {isAr ? 'الرئيسية' : 'Home'}
              </Link>
            </li>
            <li aria-hidden="true" className="text-zinc-400 dark:text-zinc-600">
              <ChevronRight className="w-3.5 h-3.5 rtl:rotate-180" />
            </li>
            <li>
              <Link href={`/${locale}/services`} className="hover:text-zinc-900 dark:hover:text-white transition-colors">
                {isAr ? 'الخدمات' : 'Services'}
              </Link>
            </li>
            <li aria-hidden="true" className="text-zinc-400 dark:text-zinc-600">
              <ChevronRight className="w-3.5 h-3.5 rtl:rotate-180" />
            </li>
            <li>
              <Link
                href={`/${locale}/services?category=${service.categorySlug}`}
                className="hover:text-zinc-900 dark:hover:text-white transition-colors"
              >
                {categoryName}
              </Link>
            </li>
            <li aria-hidden="true" className="text-zinc-400 dark:text-zinc-600">
              <ChevronRight className="w-3.5 h-3.5 rtl:rotate-180" />
            </li>
            <li className="font-semibold text-zinc-900 dark:text-white truncate max-w-[200px] sm:max-w-none" aria-current="page">
              {name}
            </li>
          </ol>
        </nav>

        {/* ── 2. "Airbnb Luxe" 2-Column Split Grid ── */}
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] xl:grid-cols-[1fr_420px] gap-12 lg:gap-16 items-start relative">

          {/* ────────────────── LEFT COLUMN: Narrative & SEO Engine ────────────────── */}
          <div className="min-w-0 space-y-10 sm:space-y-12">

            {/* Header Block & Social Proof */}
            <div className="space-y-4 pb-2 sm:pb-4">
              <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-zinc-900 dark:text-white tracking-tight leading-tight">
                {name}
              </h1>

              <div className="flex items-center gap-3.5 flex-wrap text-sm sm:text-base pt-1">
                <div className="flex items-center gap-1 font-bold text-zinc-900 dark:text-white">
                  <Star className="w-4 h-4 fill-amber-500 text-amber-500" />
                  <span>{displayRating.toFixed(1)}</span>
                </div>
                {service.reviewCount > 0 && (
                  <>
                    <span className="text-zinc-300 dark:text-zinc-700">•</span>
                    <span className="text-zinc-600 dark:text-zinc-300 underline font-medium cursor-pointer">
                      {service.reviewCount} {isAr ? 'تقييم موثق' : 'verified reviews'}
                    </span>
                  </>
                )}
                <span className="text-zinc-300 dark:text-zinc-700">•</span>
                <div className="inline-flex items-center gap-1 text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/50 border border-emerald-200/70 dark:border-emerald-800/70 px-2.5 py-0.5 rounded-full text-xs font-bold">
                  <Award className="w-3.5 h-3.5" />
                  <span>{isAr ? 'خبير معتمد 1%' : 'Top 1% Rated Pro'}</span>
                </div>
              </div>
            </div>

            {/* Single Individual Hero Image */}
            <div className="h-[340px] sm:h-[440px] md:h-[480px] w-full rounded-3xl overflow-hidden bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 relative flex items-center justify-center shadow-xs">
              <ImageWithFallback
                src={service.heroImage}
                fallbackSrc="/images/fallback-placeholder.svg"
                alt={name}
                fill
                priority
                className="object-cover"
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 60vw, 700px"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-zinc-950/20 via-transparent to-transparent pointer-events-none" />
            </div>

            {/* ── Section 1: Details Section (SEO Paragraph with Read More) ── */}
            <section aria-labelledby="about-treatment-heading" className="pt-8 border-t border-zinc-200 dark:border-zinc-800">
              <h2 id="about-treatment-heading" className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight mb-4">
                {isAr ? 'عن هذا العلاج والخدمة' : 'About this treatment'}
              </h2>
              <div className="max-w-3xl text-zinc-600 dark:text-zinc-300 leading-relaxed text-base sm:text-lg space-y-3">
                <p className={cn(!isDescExpanded && description.length > 220 && 'line-clamp-3 leading-relaxed')}>
                  {description}
                </p>
                {description.length > 220 && (
                  <button
                    type="button"
                    onClick={() => setIsDescExpanded(!isDescExpanded)}
                    className="inline-flex items-center gap-1 text-sm font-bold text-zinc-900 dark:text-white hover:text-brand-500 dark:hover:text-brand-400 transition-colors cursor-pointer pt-1"
                  >
                    <span>{isDescExpanded ? (isAr ? 'عرض أقل' : 'Read less') : (isAr ? 'اقرأ المزيد' : 'Read more')}</span>
                  </button>
                )}
              </div>
            </section>

            {/* ── Section 2: Enhance Your Experience (Visual Add-on Cards with Generous Spacing & Inline Steppers) ── */}
            {addons.length > 0 && (
              <section aria-labelledby="enhancements-heading" className="pt-8 border-t border-zinc-200 dark:border-zinc-800">
                <div className="flex items-center justify-between mb-6">
                  <div>
                    <h2 id="enhancements-heading" className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">
                      {isAr ? 'عززي تجربتك بإضافات فاخرة' : 'Enhance your experience'}
                    </h2>
                    <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                      {isAr ? 'إضافات مخصصة ترفع من جودة واسترخاء جلستك' : 'Custom enhancements to elevate your treatment'}
                    </p>
                  </div>
                  {activeAddonsList.length > 0 && (
                    <span className="text-xs font-bold text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/50 border border-emerald-200/80 dark:border-emerald-800/80 px-3 py-1 rounded-full shrink-0">
                      {isAr ? `${activeAddonsList.length} محددة` : `${activeAddonsList.length} selected`}
                    </span>
                  )}
                </div>

                <div className="flex flex-col gap-4">
                  {addons.map((addon) => {
                    const currentQty = addonQuantities[addon.id] || 0;
                    const isSelected = currentQty > 0;

                    return (
                      <div
                        key={addon.id}
                        className={cn(
                          'flex items-center justify-between p-4 sm:p-5 bg-white dark:bg-zinc-900 border rounded-2xl transition-all shadow-2xs group',
                          isSelected
                            ? 'border-zinc-900 dark:border-zinc-100 bg-zinc-50/80 dark:bg-zinc-800/60 shadow-xs'
                            : 'border-zinc-200 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700'
                        )}
                      >
                        {/* Left: Prominent Large Image & Descriptive Content with Ample Spacing */}
                        <div className="flex items-center min-w-0 flex-1 gap-4 sm:gap-5 mr-4 sm:mr-5 rtl:mr-0 rtl:ml-4 rtl:sm:ml-5">
                          <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl bg-zinc-100 dark:bg-zinc-800 shrink-0 overflow-hidden relative border border-zinc-200/80 dark:border-zinc-700 shadow-2xs">
                            <ImageWithFallback
                              src={addon.image || 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=400&auto=format&fit=crop&q=85'}
                              fallbackSrc="/images/fallback-placeholder.svg"
                              alt={isAr ? addon.nameAr : addon.nameEn}
                              fill
                              className="object-cover rounded-xl"
                              sizes="(max-width: 640px) 64px, 80px"
                            />
                          </div>

                          <div className="min-w-0 flex-1 py-0.5">
                            <h3 className={cn(
                              'font-bold text-sm sm:text-base leading-snug transition-colors',
                              isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-900 dark:text-zinc-100'
                            )}>
                              {isAr ? addon.nameAr : addon.nameEn}
                            </h3>
                            <p className="text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 mt-1 leading-relaxed line-clamp-2">
                              {isAr ? addon.descAr || addon.nameAr : addon.descEn || addon.nameEn}
                            </p>
                          </div>
                        </div>

                        {/* Right: Price Vertically Aligned Next to Flush Stepper */}
                        <div className="flex items-center gap-3 shrink-0">
                          <span className="text-sm sm:text-base font-bold text-zinc-900 dark:text-white whitespace-nowrap">
                            + AED {addon.price}
                          </span>

                          {isSelected ? (
                            /* Active State: Compact Inline Stepper */
                            <div className="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-full px-2.5 py-1.5 shadow-2xs">
                              <button
                                type="button"
                                onClick={() => handleDecrementAddon(addon.id)}
                                aria-label="Decrease quantity"
                                className="p-1 hover:bg-zinc-200/70 dark:hover:bg-zinc-700 rounded-full text-zinc-600 dark:text-zinc-300 transition-colors cursor-pointer"
                              >
                                <Minus className="w-3.5 h-3.5" />
                              </button>

                              <span className="w-4 text-center font-bold text-zinc-900 dark:text-white text-xs select-none">
                                {currentQty}
                              </span>

                              <button
                                type="button"
                                onClick={() => handleIncrementAddon(addon.id)}
                                aria-label="Increase quantity"
                                className="p-1 hover:bg-zinc-200/70 dark:hover:bg-zinc-700 rounded-full text-zinc-600 dark:text-zinc-300 transition-colors cursor-pointer"
                              >
                                <Plus className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          ) : (
                            /* Default Unselected State: Clean Add Button */
                            <button
                              type="button"
                              onClick={() => handleAddAddon(addon.id)}
                              aria-label={`Add ${addon.nameEn}`}
                              className="border border-zinc-200 dark:border-zinc-700 rounded-full p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-600 dark:text-zinc-300 flex items-center justify-center cursor-pointer shadow-2xs group-hover:border-zinc-300 dark:group-hover:border-zinc-600"
                            >
                              <Plus className="w-4 h-4" />
                            </button>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </section>
            )}

            {/* ── Section 3: FAQ Section (Accordion Component for SEO) ── */}
            <section aria-labelledby="faq-heading" className="pt-8 border-t border-zinc-200 dark:border-zinc-800">
              <h2 id="faq-heading" className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight mb-6">
                {isAr ? 'الأسئلة الشائعة حول الخدمة' : 'Frequently Asked Questions'}
              </h2>
              <div className="max-w-3xl">
                <Accordion type="single" defaultValue="item-0">
                  {faqs.map((faq, idx) => (
                    <AccordionItem key={idx} value={`item-${idx}`}>
                      <AccordionTrigger>{faq.question}</AccordionTrigger>
                      <AccordionContent>{faq.answer}</AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            </section>

            {/* ── Section 4: Real Customer Reviews ── */}
            <section aria-labelledby="reviews-heading" className="pt-8 border-t border-zinc-200 dark:border-zinc-800">
              <div className="flex items-center justify-between mb-6">
                <h2 id="reviews-heading" className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">
                  {isAr ? 'تقييمات العملاء' : 'Customer Reviews'}
                </h2>
                <div className="flex items-center gap-1.5 text-sm font-bold text-zinc-900 dark:text-white">
                  <Star className="w-4 h-4 fill-amber-500 text-amber-500" />
                  <span>{displayRating.toFixed(1)}</span>
                  {service.reviewCount > 0 && (
                    <span className="text-zinc-500 dark:text-zinc-400 font-normal">({service.reviewCount})</span>
                  )}
                </div>
              </div>

              {service.reviews && service.reviews.length > 0 ? (
                <div className="space-y-4 max-w-3xl">
                  {service.reviews.map((rev) => {
                    const reviewText = (isAr ? rev.textAr : rev.textEn) || '';
                    return (
                      <div
                        key={rev.id}
                        className="p-5 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl space-y-3 shadow-2xs"
                      >
                        <div className="flex items-center justify-between flex-wrap gap-2">
                          <div className="flex items-center gap-2">
                            <div className="w-9 h-9 rounded-full bg-zinc-900 dark:bg-zinc-800 text-white font-bold text-xs flex items-center justify-center">
                              {rev.author.charAt(0)}
                            </div>
                            <div>
                              <div className="font-bold text-sm text-zinc-900 dark:text-white flex items-center gap-1.5">
                                <span>{rev.author}</span>
                                <span className="text-[10px] text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/50 px-1.5 py-0.5 rounded font-semibold">
                                  {isAr ? 'حجز موثق' : 'Verified'}
                                </span>
                              </div>
                              <div className="text-xs text-zinc-400 dark:text-zinc-500">{isAr ? rev.dateAr : rev.dateEn}</div>
                            </div>
                          </div>

                          <div className="flex items-center gap-0.5 text-amber-500">
                            {[...Array(5)].map((_, i) => (
                              <Star
                                key={i}
                                className="w-3.5 h-3.5 fill-current text-amber-500"
                              />
                            ))}
                          </div>
                        </div>

                        {reviewText.trim().length > 0 && (
                          <p className="text-sm text-zinc-600 dark:text-zinc-300 leading-relaxed">
                            {reviewText}
                          </p>
                        )}
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="p-6 sm:p-8 bg-white dark:bg-zinc-900 border border-zinc-200/80 dark:border-zinc-800 rounded-2xl text-center max-w-3xl space-y-3 shadow-2xs">
                  <div className="flex items-center justify-center gap-1 text-amber-500">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" />
                    ))}
                  </div>
                  <p className="text-xs sm:text-sm text-zinc-500 dark:text-zinc-400">
                    {isAr
                      ? 'لا توجد تقييمات مكتوبة بعد. احجز جلستك وكن أول من يشارك تجربته المميزة.'
                      : 'No written reviews yet. Book your treatment and be the first to share your experience.'}
                  </p>
                </div>
              )}
            </section>

          </div>

          {/* ────────────────── RIGHT COLUMN: Desktop Sticky Booking Card ────────────────── */}
          <aside className="hidden lg:block sticky top-28 h-fit">
            <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-black/30 space-y-6">

              {/* ── Massive Price with Strikethrough Bar & Flush Primary Quantity Stepper ── */}
              <div className="border-b border-zinc-100 dark:border-zinc-800 pb-6 space-y-4">
                <div className="flex justify-between items-center mb-6">
                  {/* Left: Massive Price + Original Price with Strikethrough */}
                  <div>
                    <div className="text-xs font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 mb-1">
                      {serviceQuantity > 1
                        ? isAr ? `المجموع لـ ${serviceQuantity} جلسات` : `Total for ${serviceQuantity} Treatments`
                        : activeAddonsList.length > 0
                          ? isAr ? 'السعر مع الإضافات' : 'Total with Enhancements'
                          : isAr ? 'السعر' : 'Price'}
                    </div>

                    <div className="flex items-baseline gap-2.5">
                      <span itemProp="price" content={String(grandTotal)}>
                        <PriceDisplay
                          amount={grandTotal}
                          className="text-3xl sm:text-4xl font-extrabold text-zinc-900 dark:text-white tracking-tight"
                        />
                      </span>
                      {service.originalPrice && (
                        <PriceDisplay
                          amount={service.originalPrice * serviceQuantity}
                          className="text-base text-zinc-400 dark:text-zinc-500 line-through font-semibold"
                        />
                      )}
                    </div>
                  </div>

                  {/* Right: Primary Service Quantity Stepper */}
                  <div className="bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-full px-3 py-1.5 flex items-center gap-4 text-lg font-semibold shadow-2xs shrink-0">
                    <button
                      type="button"
                      onClick={handleDecrementService}
                      disabled={serviceQuantity <= 1}
                      aria-label="Decrease primary service quantity"
                      className="p-1 hover:bg-zinc-200/70 dark:hover:bg-zinc-700 rounded-full text-zinc-600 dark:text-zinc-300 transition-colors disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
                    >
                      <Minus className="w-4 h-4" />
                    </button>

                    <span className="w-5 text-center font-bold text-zinc-900 dark:text-white text-base select-none">
                      {serviceQuantity}
                    </span>

                    <button
                      type="button"
                      onClick={handleIncrementService}
                      disabled={serviceQuantity >= 10}
                      aria-label="Increase primary service quantity"
                      className="p-1 hover:bg-zinc-200/70 dark:hover:bg-zinc-700 rounded-full text-zinc-600 dark:text-zinc-300 transition-colors disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                </div>

                {/* Duration Tag & Interactive BNPL Split Modal Trigger */}
                <div className="flex items-center justify-between gap-2 pt-1">
                  <div className="flex items-center gap-1.5 text-xs font-semibold text-zinc-600 dark:text-zinc-300 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200/80 dark:border-zinc-700 px-2.5 py-1 rounded-xl">
                    <Clock className="w-3.5 h-3.5 text-zinc-500 dark:text-zinc-400 shrink-0" />
                    <span>{totalDuration} {isAr ? 'دقيقة' : 'mins'}</span>
                  </div>

                  {/* BNPL Split Button (Price First, then x 4) */}
                  <div ref={bnplCardRef} className="relative">
                    <button
                      type="button"
                      onClick={() => setIsBnplModalOpen((prev) => !prev)}
                      onMouseEnter={() => setIsBnplModalOpen(true)}
                      className="group flex items-center gap-1.5 px-2.5 py-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200/90 dark:border-zinc-700 rounded-full text-xs font-medium text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition-all cursor-pointer select-none shadow-2xs"
                      aria-expanded={isBnplModalOpen}
                      aria-haspopup="dialog"
                    >
                      <span className="font-bold text-zinc-900 dark:text-white">
                        {isAr ? `${bnplHeroSplit} د.إ × 4` : `AED ${bnplHeroSplit} x 4`}
                      </span>
                      <span className="text-zinc-500 dark:text-zinc-400 font-normal">
                        {isAr ? 'مع' : 'with'}
                      </span>
                      <div className="flex items-center gap-1">
                        <TabbyBadge />
                        <TamaraBadge />
                      </div>
                      <Info className="w-3.5 h-3.5 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-700 dark:group-hover:text-zinc-300 transition-colors shrink-0" />
                    </button>

                    {/* ── 4-Month Split Payment Card Popup ── */}
                    <AnimatePresence>
                      {isBnplModalOpen && (
                        <motion.div
                          initial={{ opacity: 0, y: 8, scale: 0.96 }}
                          animate={{ opacity: 1, y: 0, scale: 1 }}
                          exit={{ opacity: 0, y: 6, scale: 0.96 }}
                          transition={{ duration: 0.18, ease: 'easeOut' }}
                          onMouseLeave={() => setIsBnplModalOpen(false)}
                          className="absolute end-0 mt-2 w-80 sm:w-88 p-5 bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-zinc-200 dark:border-zinc-800 z-50 text-start space-y-4"
                          role="dialog"
                          aria-label="BNPL Details"
                        >
                          {/* Header */}
                          <div className="flex items-start justify-between gap-2">
                            <div>
                              <h4 className="text-sm font-bold text-zinc-900 dark:text-white leading-snug">
                                {isAr
                                  ? 'قسّميها على 4 دفعات بدون فوائد'
                                  : 'Split into 4 interest-free payments'}
                              </h4>
                              <div className="flex items-center gap-1.5 mt-1">
                                <TabbyBadge />
                                <TamaraBadge />
                              </div>
                            </div>
                            <button
                              type="button"
                              onClick={(e) => {
                                e.stopPropagation();
                                setIsBnplModalOpen(false);
                              }}
                              className="p-1 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
                            >
                              <X className="w-4 h-4" />
                            </button>
                          </div>

                          {/* Description */}
                          <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">
                            {isAr
                              ? `ادفع ${bnplHeroSplit} د.إ اليوم، والمتبقي على 3 أشهر. بدون أي فوائد أو رسوم مخفية. اختر Tabby أو Tamara عند الدفع.`
                              : `Pay AED ${bnplHeroSplit} today, and the rest over 3 months. Zero interest, zero hidden fees. Select Tabby or Tamara at checkout.`}
                          </p>

                          {/* Visual 4-Step Month Timeline */}
                          <div className="pt-2">
                            <div className="relative flex items-center justify-between">
                              {/* Connecting Line */}
                              <div className="absolute top-3.5 start-3 end-3 h-0.5 bg-zinc-200 dark:bg-zinc-700 -z-0" />

                              {/* Timeline Nodes */}
                              {[
                                { labelEn: 'Today', labelAr: 'اليوم', active: true },
                                { labelEn: 'Month 1', labelAr: 'الشهر 1', active: false },
                                { labelEn: 'Month 2', labelAr: 'الشهر 2', active: false },
                                { labelEn: 'Month 3', labelAr: 'الشهر 3', active: false },
                              ].map((step, idx) => (
                                <div key={idx} className="relative z-10 flex flex-col items-center text-center">
                                  <div
                                    className={cn(
                                      'w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold border transition-all',
                                      step.active
                                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 border-zinc-900 dark:border-white ring-4 ring-zinc-900/10 dark:ring-white/10'
                                        : 'bg-white dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-300 dark:border-zinc-700'
                                    )}
                                  >
                                    {idx + 1}
                                  </div>
                                  <span className="text-[10px] font-semibold text-zinc-700 dark:text-zinc-300 mt-1.5">
                                    {isAr ? step.labelAr : step.labelEn}
                                  </span>
                                  <span className="text-[10px] text-zinc-400 font-mono font-medium">
                                    AED {bnplMonthAmount}
                                  </span>
                                </div>
                              ))}
                            </div>
                          </div>

                          {/* Trust Footer */}
                          <div className="pt-3 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between text-[11px] text-zinc-500 dark:text-zinc-400">
                            <div className="flex items-center gap-1 text-emerald-700 dark:text-emerald-400 font-medium">
                              <ShieldCheck className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" />
                              <span>{isAr ? 'متوافق مع الشريعة' : 'Sharia-compliant'}</span>
                            </div>
                            <span className="text-zinc-400">{isAr ? 'الموافقة فورية' : 'Instant approval'}</span>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </div>
              </div>

              {/* ── Subtotal & Package Breakdown ── */}
              <div className="p-4 bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200/70 dark:border-zinc-700/70 rounded-2xl space-y-3 text-xs">
                <div className="font-bold text-zinc-900 dark:text-white flex items-center justify-between">
                  <span>{isAr ? 'تفاصيل باقتك المخصصة' : 'Your Custom Package'}</span>
                  <span className="text-[11px] text-zinc-500 font-normal">
                    {serviceQuantity} {serviceQuantity === 1 ? (isAr ? 'جلسة' : 'Treatment') : (isAr ? 'جلسات' : 'Treatments')}
                  </span>
                </div>

                <div className="space-y-2 text-zinc-600 dark:text-zinc-300 pt-1.5 border-t border-zinc-200/60 dark:border-zinc-700/60">
                  <div className="flex justify-between font-medium">
                    <span>{name} {serviceQuantity > 1 && `(x${serviceQuantity})`}</span>
                    <span>AED {service.price * serviceQuantity}</span>
                  </div>

                  {activeAddonsList.map((addon) => (
                    <div key={addon.id} className="flex justify-between text-zinc-700 dark:text-zinc-300">
                      <span className="truncate max-w-[200px]">
                        + {isAr ? addon.nameAr : addon.nameEn} {addon.qty > 1 && `(x${addon.qty})`}
                      </span>
                      <span>+ AED {addon.totalPrice}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Trust Guarantees */}
              <div className="space-y-3 py-1">
                <div className="flex items-center gap-2.5 text-xs font-medium text-zinc-700 dark:text-zinc-300">
                  <ShieldCheck className="w-4 h-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
                  <span>{isAr ? 'خبراء معتمدون ومفحوصون أمنياً 100%' : '100% Vetted & Verified Master Pros'}</span>
                </div>
                <div className="flex items-center gap-2.5 text-xs font-medium text-zinc-700 dark:text-zinc-300">
                  <ThumbsUp className="w-4 h-4 text-zinc-900 dark:text-zinc-100 shrink-0" />
                  <span>{isAr ? 'شامل رسوم المواصلات والخدمة في دبي' : 'No Hidden Travel or Parking Surcharges'}</span>
                </div>
                <div className="flex items-center gap-2.5 text-xs font-medium text-zinc-700 dark:text-zinc-300">
                  <Lock className="w-4 h-4 text-zinc-900 dark:text-zinc-100 shrink-0" />
                  <span>{isAr ? 'دفع آمن بعد اكتمال الخدمة' : 'Pay After Treatment Completion'}</span>
                </div>
              </div>

              {/* Massive CTA Button with Primary Hover Color / Role Guard */}
              <div className="pt-2">
                {isNonClientRole ? (
                  <div className="space-y-3">
                    <div className="p-3.5 bg-amber-50 dark:bg-amber-950/40 border border-amber-300 dark:border-amber-700 rounded-2xl text-amber-900 dark:text-amber-200 text-xs flex items-start gap-2.5">
                      <AlertTriangle className="w-4 h-4 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" />
                      <span>
                        {isAr
                          ? `حسابك الحالي (${user?.user_type}) غير مخصص لحجز الخدمات. حجز المواعيد متاح لحسابات العملاء فقط.`
                          : `Your active profile (${user?.user_type}) cannot book services. Bookings are reserved for customer profiles.`}
                      </span>
                    </div>
                    <button
                      type="button"
                      onClick={() => {
                        window.location.href = '/home';
                      }}
                      className="w-full h-14 bg-zinc-900 hover:bg-brand-500 active:bg-brand-600 dark:bg-white dark:text-zinc-950 dark:hover:bg-brand-500 dark:hover:text-white text-white rounded-2xl text-base font-bold shadow-none transition-colors flex items-center justify-center gap-2 cursor-pointer select-none"
                    >
                      <LayoutDashboard className="w-5 h-5" />
                      <span>{isAr ? 'الانتقال إلى لوحة التحكم' : 'Go to Dashboard'}</span>
                    </button>
                  </div>
                ) : (
                  <>
                    <button
                      type="button"
                      onClick={handleBookClick}
                      className="w-full h-14 bg-zinc-900 hover:bg-brand-500 active:bg-brand-600 dark:bg-white dark:text-zinc-950 dark:hover:bg-brand-500 dark:hover:text-white text-white rounded-2xl text-base font-bold shadow-none transition-colors flex items-center justify-center gap-2 cursor-pointer select-none"
                    >
                      <CalendarCheck className="w-5 h-5" />
                      <span>
                        {isAr
                          ? `احجز الآن • ${grandTotal} د.إ`
                          : `Book Treatment • AED ${grandTotal}`}
                      </span>
                    </button>

                    <p className="text-[11px] text-zinc-400 dark:text-zinc-500 text-center mt-3">
                      {isAr
                        ? 'إلغاء وإعادة جدولة مجانية حتى 4 ساعات قبل الموعد'
                        : 'Free cancellation up to 4 hours before your booking'}
                    </p>
                  </>
                )}
              </div>

            </div>
          </aside>

        </div>

        {/* ── Related Services Grid (SEO-driven "You might also like") ── */}
        {displayRelatedServices.length > 0 && (
          <section aria-labelledby="related-services-heading" className="border-t border-zinc-200 dark:border-zinc-800 py-16 mt-16">
            <div className="flex items-end justify-between mb-8">
              <div>
                <h2 id="related-services-heading" className="text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white tracking-tight">
                  {isAr ? 'خدمات أخرى قد تنال إعجابك' : 'You might also like'}
                </h2>
                <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                  {isAr ? 'علاجات منزلية شهيرة متناسقة مع حجزك' : 'Curated at-home treatments to complement your session'}
                </p>
              </div>
              <Link
                href={`/${locale}/services`}
                className="text-xs sm:text-sm font-semibold text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors pb-1"
              >
                {isAr ? 'عرض الكل' : 'View All'}
              </Link>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {displayRelatedServices.map((item) => (
                <ServiceCard
                  key={item.id}
                  id={item.id}
                  slug={item.slug}
                  name={item.name}
                  price={item.price}
                  originalPrice={item.originalPrice}
                  discount={item.discount}
                  image={item.image}
                  description={item.description}
                  rating={item.rating}
                  reviewCount={item.reviewCount}
                  formattedDuration={item.formattedDuration}
                  isFeatured={item.isFeatured}
                  locale={locale}
                />
              ))}
            </div>
          </section>
        )}

      </div>

      {/* ────────────────── MOBILE STICKY BOTTOM BAR (2-Row Stack) ────────────────── */}
      <div className="lg:hidden fixed bottom-0 left-0 w-full z-40 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl border-t border-zinc-200 dark:border-zinc-800 shadow-xl">
        {/* Row 1 (Full Width): BNPL Micro-Banner */}
        <div className="bg-zinc-50 dark:bg-zinc-900/90 border-b border-zinc-100 dark:border-zinc-800/80 py-1.5 px-4 flex justify-center items-center gap-1.5 text-[10px] text-zinc-500 dark:text-zinc-400 select-none">
          <span>
            {isAr
              ? `قسّميها على 4 دفعات بقيمة ${bnplHeroSplit} د.إ مع`
              : `Split in 4 payments of AED ${bnplHeroSplit} with`}
          </span>
          <div className="flex items-center gap-1">
            <TabbyBadge />
            <TamaraBadge />
          </div>
        </div>

        {/* Row 2: Main Actions (Price Trigger + Wide Command CTA) */}
        <div className="px-4 pt-3 pb-6 sm:pb-7 flex justify-between items-center gap-4">
          {/* Left Side: Clickable Total Price & Expand Indicator */}
          <button
            type="button"
            onClick={() => setIsCartDrawerOpen(true)}
            aria-label="View booking breakdown"
            className="flex flex-col text-start group cursor-pointer focus:outline-none select-none"
          >
            <div className="text-[10px] font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider flex items-center gap-1 group-hover:text-zinc-900 dark:group-hover:text-white transition-colors">
              <span>{isAr ? 'الإجمالي' : 'TOTAL'}</span>
              <ChevronUp className="w-3 h-3 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-900 dark:group-hover:text-white group-hover:-translate-y-0.5 transition-all" />
            </div>
            <div className="text-xl font-extrabold text-zinc-900 dark:text-white tracking-tight">
              AED {grandTotal}
            </div>
          </button>

          {/* Right Side: Command CTA Button */}
          <button
            type="button"
            onClick={handleBookClick}
            className="bg-zinc-900 hover:bg-brand-500 active:bg-brand-600 dark:bg-white dark:text-zinc-950 dark:hover:bg-brand-500 dark:hover:text-white text-white rounded-xl px-7 sm:px-8 py-3.5 font-bold flex items-center gap-2 shadow-md cursor-pointer transition-colors select-none text-sm shrink-0"
          >
            {isNonClientRole ? (
              <>
                <LayoutDashboard className="w-4 h-4" />
                <span>{isAr ? 'لوحة التحكم' : 'Dashboard'}</span>
              </>
            ) : (
              <>
                <CalendarCheck className="w-4 h-4" />
                <span>{isAr ? 'احجز الآن' : 'Book Treatment'}</span>
              </>
            )}
          </button>
        </div>
      </div>

      {/* ────────────────── MOBILE EXPANDABLE CART BREAKDOWN DRAWER ────────────────── */}
      <Drawer open={isCartDrawerOpen} onOpenChange={setIsCartDrawerOpen}>
        <DrawerContent className="space-y-5 pb-8 sm:pb-10">
          <DrawerHeader className="text-start space-y-1 mb-2">
            <div className="text-xs font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
              {isAr ? 'ملخص الحجز' : 'Booking Summary'}
            </div>
            <DrawerTitle className="text-xl font-extrabold text-zinc-900 dark:text-white">
              {name}
            </DrawerTitle>
            <DrawerDescription className="text-xs text-zinc-500 dark:text-zinc-400 flex items-center gap-2">
              <Clock className="w-3.5 h-3.5" />
              <span>{totalDuration} {isAr ? 'دقيقة إجمالية' : 'mins total duration'}</span>
              <span>•</span>
              <span>{serviceQuantity} {serviceQuantity === 1 ? (isAr ? 'جلسة' : 'Treatment') : (isAr ? 'جلسات' : 'Treatments')}</span>
            </DrawerDescription>
          </DrawerHeader>

          {/* Itemized breakdown card */}
          <div className="bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200/80 dark:border-zinc-700/80 rounded-2xl p-4 space-y-3 text-sm">
            {/* Primary treatment */}
            <div className="flex justify-between items-center font-semibold text-zinc-900 dark:text-white">
              <span>
                {name} {serviceQuantity > 1 && <span className="text-zinc-500 font-normal">({serviceQuantity}x)</span>}
              </span>
              <span className="font-bold">AED {baseServiceTotal}</span>
            </div>

            {/* Selected Addons */}
            {activeAddonsList.length > 0 && (
              <div className="pt-2 border-t border-zinc-200/70 dark:border-zinc-700/70 space-y-2">
                <div className="text-xs font-bold text-zinc-400 uppercase tracking-wider">
                  {isAr ? 'الإضافات المحددة' : 'Selected Enhancements'}
                </div>
                {activeAddonsList.map((addon) => (
                  <div key={addon.id} className="flex justify-between items-center text-xs text-zinc-700 dark:text-zinc-300">
                    <span className="truncate max-w-[220px]">
                      + {isAr ? addon.nameAr : addon.nameEn} {addon.qty > 1 && <span className="font-semibold">({addon.qty}x)</span>}
                    </span>
                    <span className="font-semibold text-zinc-900 dark:text-white">+ AED {addon.totalPrice}</span>
                  </div>
                ))}
              </div>
            )}

            {/* Grand Total */}
            <div className="pt-3 border-t border-zinc-200 dark:border-zinc-700 flex justify-between items-baseline font-extrabold text-base text-zinc-900 dark:text-white">
              <span>{isAr ? 'المبلغ الإجمالي' : 'Grand Total'}</span>
              <span className="text-lg">AED {grandTotal}</span>
            </div>
          </div>

          {/* BNPL Split pill inside drawer */}
          <div className="flex items-center justify-between text-xs text-zinc-600 dark:text-zinc-400 bg-zinc-100/70 dark:bg-zinc-800/80 px-3.5 py-2.5 rounded-xl">
            <div className="flex items-center gap-1.5 font-medium">
              <ShieldCheck className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
              <span>{isAr ? `أو 4 دفعات بقيمة ${bnplHeroSplit} د.إ` : `Or 4x AED ${bnplHeroSplit}`}</span>
            </div>
            <div className="flex items-center gap-1">
              <TabbyBadge />
              <TamaraBadge />
            </div>
          </div>

          {/* Big CTA Inside Drawer */}
          <div className="pt-1 pb-2">
            <button
              type="button"
              onClick={handleBookClick}
              className="w-full h-14 bg-zinc-900 hover:bg-brand-500 active:bg-brand-600 dark:bg-white dark:text-zinc-950 dark:hover:bg-brand-500 dark:hover:text-white text-white rounded-2xl text-base font-bold shadow-none transition-colors flex items-center justify-center gap-2 cursor-pointer"
            >
              <CalendarCheck className="w-5 h-5" />
              <span>
                {isAr
                  ? `احجز الآن • ${grandTotal} د.إ`
                  : `Book Treatment • AED ${grandTotal}`}
              </span>
            </button>
          </div>
        </DrawerContent>
      </Drawer>

    </div>
  );
}

export default ServiceDetailView;