/* eslint-disable @next/next/no-img-element */
"use client";
import { useState, useMemo, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import {
  ArrowRight,
  ChevronLeft,
  ShieldCheck,
  CheckCircle2,
  Clock,
  FlaskConical,
  Stethoscope,
  Info,
  CalendarDays,
  X,
  Plus,
  Minus,
  Bell,
  Sparkles,
  ChevronDown,
  ChevronUp,
  Activity,
  Heart,
  Zap,
  Star,
  ShoppingBag,
  Thermometer,
  AlertTriangle,
  AlertCircle,
  Dog,
  Cat,
  Share2,
  Phone,
  Download,
  Play,
  Film,
  Headphones,
  Volume2
} from "lucide-react";

const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
  Sparkles,
  Activity,
  ShieldCheck,
  Heart,
  Zap,
  Star
};
import { toPersian } from "../lib/utils";
import { Product } from "../lib/data/products";
import { productService } from "../lib/services/productService";
import { SCIENTIFIC_TERMS } from "../lib/data/scientificTerms";
import { useSettingsStore } from "../lib/store/settingsStore";
import { create } from "zustand";
import { useCartStore } from "../lib/store/cartStore";
import { usePetStore } from "../lib/store/usePetStore";
import { toast } from "sonner";
import api from "../lib/services/api";
import { DosageConfig } from "../lib/types";

interface CalculatorState {
  petType: "young" | "adult";
  weight: number;
  setPetType: (type: "young" | "adult") => void;
  setWeight: (weight: number) => void;
}

const useCalculatorStore = create<CalculatorState>((set) => ({
  petType: "young",
  weight: 10,
  setPetType: (petType) => set({ petType }),
  setWeight: (weight) => set({ weight }),
}));

import dynamic from 'next/dynamic';
import Tooltip from "./Tooltip";
import SafeImage from "./SafeImage";
import PodcastInlinePlayer from "./PodcastInlinePlayer";

const VideoModalPlayer = dynamic(() => import("./VideoModalPlayer"), { ssr: false });
const ProductReviews = dynamic(() => import("./ProductReviews"), { ssr: false });
const ProductImageZoomModal = dynamic(() => import("./ProductImageZoomModal"), { ssr: false });

import { useRouter } from 'next/navigation';

interface GalleryMediaItem {
  id: string;
  type: 'image' | 'video' | 'podcast';
  url: string;
  thumbnail: string;
  title: string;
  badge?: string;
  videoData?: {
    title?: string;
    doctor?: string;
    description?: string;
    videoUrl?: string;
    thumbnail?: string;
  };
  podcastData?: {
    audioUrl?: string;
    title?: string;
    description?: string;
    cover?: string;
  };
}

function isVideoUrl(url?: string): boolean {
  if (!url) return false;
  const clean = url.toLowerCase().trim();
  return (
    clean.endsWith('.mp4') ||
    clean.endsWith('.webm') ||
    clean.endsWith('.mov') ||
    clean.endsWith('.mkv') ||
    clean.endsWith('.m4v') ||
    clean.includes('aparat.com') ||
    clean.includes('youtube.com') ||
    clean.includes('youtu.be') ||
    clean.includes('vimeo.com') ||
    clean.includes('/video/') ||
    clean.startsWith('data:video')
  );
}

export default function ProductPage({ productSlug }: { productSlug: string }) {
  const router = useRouter();
  const [product, setProduct] = useState<Product | null>(null);
  const [allProducts, setAllProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [itemQuantity, setItemQuantity] = useState(1);
  const [showRefillModal, setShowRefillModal] = useState(false);
  const [isMounted, setIsMounted] = useState(false);
  const [dosageConfig, setDosageConfig] = useState<DosageConfig | null>(null);
  const [isFullDescriptionOpen, setIsFullDescriptionOpen] = useState(false);

  const [activeMediaIndex, setActiveMediaIndex] = useState(0);
  const [activeImage, setActiveImage] = useState<string | null>(null);
  const [isImageZoomOpen, setIsImageZoomOpen] = useState(false);
  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
  const [isFullVideoDescOpen, setIsFullVideoDescOpen] = useState(false);
  const [activeMediaForVideoModal, setActiveMediaForVideoModal] = useState<{
    title?: string;
    doctor?: string;
    videoUrl?: string;
    thumbnail?: string;
    description?: string;
  } | null>(null);

  useEffect(() => {
    Promise.resolve().then(() => setIsMounted(true));
  }, []);

  useEffect(() => {
    productService.getProductBySlug(productSlug)
      .then(p => {
        setProduct(p);
        if (p?.image) setActiveImage(p.image);
        return productService.getProducts({ limit: 50 });
      })
      .then(res => {
        if (res && res.data) setAllProducts(res.data);
      })
      .catch(err => console.error("Error fetching products in ProductPage:", err))
      .finally(() => setIsLoading(false));
  }, [productSlug]);

  useEffect(() => {
    if (product && product.id) {
      api.get(`/products/${product.id}/dosage-config`)
        .then(res => {
          if (res.data) {
            setDosageConfig(res.data);
          }
        })
        .catch(err => console.error('[ProductPage] Dosage config fetch error:', err));
    }
  }, [product]);

  const { pets, getActivePet } = usePetStore();
  const activePet = getActivePet();
  const { petType, weight, setPetType, setWeight } = useCalculatorStore();
  const { addItem } = useCartStore();

  const getText = useSettingsStore((state) => state.getText);
  const isCatalogMode = getText('catalog_mode', 'false') === 'true';
  const isCatalogHidePrices = getText('catalog_hide_prices', 'false') === 'true';
  const isCatalogDisableCart = getText('catalog_disable_cart', 'false') === 'true';
  const isCartDisabled = isCatalogMode || isCatalogDisableCart;
  const scientificTerms = useSettingsStore(state => state.scientificTerms);
  const termKeys = useMemo(() => {
    return Array.from(new Set([
      ...Object.keys(scientificTerms),
      ...Object.keys(SCIENTIFIC_TERMS)
    ]));
  }, [scientificTerms]);

  // Re-hydrate product
  const fullProduct = useMemo(() => {
    if (!product) return null;
    const apiProduct = allProducts.find(p => p.id === product.id) || product;
    if (!apiProduct) return null;
    
    return {
      ...apiProduct,
      packageSize: apiProduct.packageSize !== undefined && apiProduct.packageSize !== null ? Number(apiProduct.packageSize) : 100,
    };
  }, [product, allProducts]);

  useEffect(() => {
    if (activePet && activePet.weight > 0) {
      setWeight(activePet.weight);
      setPetType(activePet.age <= 1 ? "young" : "adult");
    }
  }, [activePet, setPetType, setWeight]);

  // Pet compatibility calculation matching ArchivePage logic
  const compatibility = useMemo(() => {
    if (!activePet || !fullProduct) return null;

    const sameSpecies = fullProduct.suitableFor === activePet.type || fullProduct.suitableFor === "هر دو";
    const matchedSymptom = (activePet.medicalConditions || []).find(mc =>
      (fullProduct.symptoms || []).some(s => mc.includes(s) || s.includes(mc))
    );

    if (!sameSpecies) return { type: 'alert', text: `مخصوص ${fullProduct.suitableFor}` };
    if (matchedSymptom) return { type: 'success', text: `توصیه شده برای ${matchedSymptom} ${activePet.name}` };
    if (sameSpecies) return { type: 'neutral', text: `مناسب برای ${activePet.name}` };

    return null;
  }, [fullProduct, activePet]);

  const calculation = useMemo(() => {
    if (!fullProduct) return null;

    let dailyDose = 1;
    let unit = fullProduct.unit?.includes('ml') ? "میلی‌لیتر" : fullProduct.unit?.includes('g') ? "گرم" : "قرص";
    let description = petType === "young" ? "دوز رشد روزانه" : "دوز نگهداری روزانه";

    if (dosageConfig) {
      const baseW = dosageConfig.baseWeightKg || 10;
      const baseD = dosageConfig.baseDose || 1;
      const ageMultiplier = petType === "young" ? (dosageConfig.youngMultiplier || 1.25) : 1;
      const calculated = Math.round((weight / baseW) * baseD * ageMultiplier);
      dailyDose = Math.max(1, calculated);
      if (dosageConfig.maxDailyDose && dosageConfig.maxDailyDose > 0) {
        dailyDose = Math.min(dailyDose, dosageConfig.maxDailyDose);
      }
      if (dosageConfig.unit) {
        unit = dosageConfig.unit;
      }
      if (dosageConfig.instructions) {
        description = dosageConfig.instructions;
      }
    } else if (typeof fullProduct.calculateDosage === 'function') {
      const result = fullProduct.calculateDosage(weight, petType === "young");
      dailyDose = result.quantity;
      unit = result.unit;
      description = result.description;
    } else {
      const factor = petType === "young" ? 0.2 : 0.1;
      dailyDose = Math.max(1, Math.round(weight * factor));
    }

    const packageSize = fullProduct.packageSize !== undefined && fullProduct.packageSize !== null ? Number(fullProduct.packageSize) : 100;
    const duration = Math.max(1, Math.floor((packageSize || 100) / (dailyDose || 1)));

    return {
      dailyDose,
      duration: duration || 0,
      unit,
      description
    };
  }, [fullProduct, dosageConfig, petType, weight]);

  // Suggest quantity inside useEffect to avoid render-phase state update
  useEffect(() => {
    const duration = calculation?.duration ?? 0;
    const suggestedQty = (duration < 30 && duration > 0) ? 2 : 1;
    Promise.resolve().then(() => setItemQuantity(suggestedQty));
  }, [calculation?.duration]);

  // Omnichannel Product Media Gallery (Featured Image + Gallery Images/Videos + Dedicated Video + Podcast)
  const galleryMedia = useMemo<GalleryMediaItem[]>(() => {
    if (!product) return [];
    const items: GalleryMediaItem[] = [];

    // 1. Featured Image (Always first)
    if (product.image) {
      items.push({
        id: 'featured-image',
        type: 'image',
        url: product.image,
        thumbnail: product.image,
        title: product.nameFa || product.name || 'تصویر شاخص محصول',
        badge: 'تصویر اصلی'
      });
    }

    // 2. Additional Gallery Media from product.images in custom configured order
    if (product.images && Array.isArray(product.images)) {
      product.images.forEach((mUrl, idx) => {
        if (!mUrl || mUrl === product.image) return;
        const isVid = isVideoUrl(mUrl);
        if (isVid) {
          items.push({
            id: `gallery-vid-${idx}`,
            type: 'video',
            url: mUrl,
            thumbnail: product.videoCover || product.image,
            title: `ویدیو معرفی ${idx + 1}`,
            badge: 'ویدیو',
            videoData: {
              title: `ویدیو محصول ${product.nameFa || product.name}`,
              doctor: 'کادر علمی و تخصصی کنینا',
              videoUrl: mUrl,
              thumbnail: product.videoCover || product.image,
              description: product.videoDescription || product.description,
            }
          });
        } else {
          items.push({
            id: `gallery-img-${idx}`,
            type: 'image',
            url: mUrl,
            thumbnail: mUrl,
            title: `تصویر گالری ${idx + 1}`,
            badge: 'تصویر'
          });
        }
      });
    }

    // 3. Dedicated Video (product.videoUrl) if present and not duplicated
    if (product.videoUrl && !items.some(it => it.url === product.videoUrl)) {
      items.push({
        id: 'dedicated-video',
        type: 'video',
        url: product.videoUrl,
        thumbnail: product.videoCover || product.image,
        title: product.videoTitle || 'ویدیو راهنمای مصرف و معرفی',
        badge: 'ویدیوکست',
        videoData: {
          title: product.videoTitle || `ویدیو راهنمای ${product.nameFa || product.name}`,
          doctor: 'کادر علمی و تخصصی کنینا',
          videoUrl: product.videoUrl,
          thumbnail: product.videoCover || product.image,
          description: product.videoDescription || product.description,
        }
      });
    }

    // 4. Dedicated Podcast (product.podcastUrl) if present and not duplicated
    if (product.podcastUrl && !items.some(it => it.url === product.podcastUrl)) {
      items.push({
        id: 'dedicated-podcast',
        type: 'podcast',
        url: product.podcastUrl,
        thumbnail: product.podcastCover || product.image,
        title: product.podcastTitle || 'پادکست و بررسی صوتی بالینی',
        badge: 'پادکست',
        podcastData: {
          audioUrl: product.podcastUrl,
          title: product.podcastTitle || 'پادکست و بررسی صوتی بالینی مکمل',
          description: product.podcastDescription || product.description,
          cover: product.podcastCover || product.image,
        }
      });
    }

    return items;
  }, [product]);

  const activeMedia = galleryMedia[activeMediaIndex] || galleryMedia[0];

  if (isLoading) return (
    <div className="min-h-screen bg-medical-gray-50 p-6 max-w-7xl mx-auto font-vazir" dir="rtl">
      <div className="animate-pulse space-y-6">
        <div className="h-8 bg-medical-gray-200 rounded-2xl w-48" />
        <div className="grid md:grid-cols-12 gap-8">
          <div className="md:col-span-5 h-80 bg-white border border-medical-gray-200 rounded-[2.5rem]" />
          <div className="md:col-span-7 space-y-4">
            <div className="h-10 bg-medical-gray-200 rounded-2xl w-3/4" />
            <div className="h-6 bg-medical-gray-100 rounded-xl w-1/2" />
            <div className="h-24 bg-medical-gray-100 rounded-2xl w-full" />
          </div>
        </div>
      </div>
    </div>
  );
  if (!product || !fullProduct || !calculation) return <div className="min-h-screen flex items-center justify-center">محصول یافت نشد</div>;

  const isOutOfStock = (product.packageSize !== undefined && product.packageSize !== null ? Number(product.packageSize) : 100) <= 0;

  return (
    <div className="min-h-screen bg-medical-gray-50 pt-2 pb-36 sm:pb-20 px-4 sm:px-6 lg:px-8 font-vazir" dir="rtl">
      <div className="max-w-7xl mx-auto w-full">
        {/* Standard Breadcrumb Navigation & Integrated Back Button */}
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir" dir="rtl">
          <div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 overflow-x-auto py-1 sleek-hscroll">
            <span className="cursor-pointer hover:text-canina-blue transition-colors shrink-0" onClick={() => router.push('/')}>خانه</span>
            <ChevronLeft className="w-3 h-3 text-medical-gray-300 shrink-0" />
            <span className="cursor-pointer hover:text-canina-blue transition-colors shrink-0" onClick={() => router.push('/shop')}>فروشگاه</span>
            <ChevronLeft className="w-3 h-3 text-medical-gray-300 shrink-0" />
            <span className="text-canina-blue font-black truncate">{product.nameFa || product.name}</span>
          </div>

          <div className="flex items-center justify-end gap-2 shrink-0">
            <button
              onClick={() => {
                if (typeof window !== 'undefined' && navigator.clipboard) {
                  navigator.clipboard.writeText(window.location.href);
                  toast.success("لینک مشخصات و دوز دارویی محصول کپی شد");
                }
              }}
              className="flex-1 sm:flex-none px-3.5 py-2 bg-canina-blue/5 border border-canina-blue/20 rounded-xl text-canina-blue shadow-xs flex items-center justify-center gap-1.5 font-bold text-xs hover:bg-canina-blue hover:text-white transition-all whitespace-nowrap"
            >
              <Share2 className="w-3.5 h-3.5" />
              <span>اشتراک‌گذاری دوز</span>
            </button>
            <button
              onClick={() => router.back()}
              className="flex-1 sm:flex-none px-3.5 py-2 bg-white border border-medical-gray-200 rounded-xl text-medical-gray-600 shadow-xs flex items-center justify-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
            >
              <span>بازگشت</span>
              <ChevronLeft className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>

        {/* Global Single Grid Layout - Aligns Sticky Buy Box at the Top */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-8 lg:gap-12 items-start w-full">
          
          {/* Right/Main Content Column (lg:col-span-8) */}
          <div className="w-full lg:col-span-8 space-y-4 sm:space-y-8 lg:space-y-12">
            
            {/* Above the Fold Grid */}
            <div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-8 md:gap-12 items-center md:items-start text-center md:text-right font-vazir w-full" dir="rtl">
              {/* Right Column: Omnichannel Product Media Hub & Gallery (md:col-span-5) */}
              <div className="md:col-span-5 w-full mx-auto max-w-sm md:max-w-none space-y-3 sm:space-y-4">
                <motion.div
                  key={activeMedia?.id || 'media-box'}
                  initial={{ opacity: 0, scale: 0.96 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.2 }}
                  className="bg-white rounded-2xl sm:rounded-[2.5rem] border border-medical-gray-200 shadow-xl relative group overflow-hidden h-[280px] sm:h-[390px] flex items-center justify-center p-2 sm:p-4 select-none"
                >
                  {/* Top Floating Badges */}
                  <div className="absolute top-4 left-4 sm:top-6 sm:left-6 flex flex-col gap-1.5 sm:gap-2 z-10 items-start pointer-events-none">
                    {product.specialBadge && (
                      <div className="px-2.5 py-1 bg-medical-gray-900 text-white rounded-full text-[9px] sm:text-[10px] font-black uppercase tracking-widest font-vazir whitespace-nowrap shadow-sm">
                        {product.specialBadge}
                      </div>
                    )}
                    {isOutOfStock ? (
                      <div className="px-2.5 py-1 bg-rose-500 text-white rounded-full text-[9px] sm:text-[10px] font-black uppercase tracking-widest flex items-center gap-1 font-vazir shadow-sm">
                        ناموجود در انبار
                      </div>
                    ) : (
                      <div className="px-2.5 py-1 bg-green-500 text-white rounded-full text-[9px] sm:text-[10px] font-black uppercase tracking-widest flex items-center gap-1 font-vazir shadow-sm">
                        <CheckCircle2 className="w-3 h-3" />
                        موجود در انبار
                      </div>
                    )}
                    <div className="px-2.5 py-1 bg-canina-blue text-white rounded-full text-[9px] sm:text-[10px] font-black uppercase tracking-widest font-vazir whitespace-nowrap shadow-sm">
                      گرید دارویی اختصاصی
                    </div>
                  </div>

                  {/* Species Suitable Badges (Dog / Cat) */}
                  <div className="absolute bottom-4 left-4 flex gap-1.5 z-10 pointer-events-none">
                    {(product.suitableFor === "سگ" || product.suitableFor === "هر دو") && (
                      <div className="w-7 h-7 bg-white/90 backdrop-blur-sm rounded-lg flex items-center justify-center text-medical-gray-600 border border-medical-gray-200 shadow-sm" title="مناسب برای سگ">
                        <Dog className="w-4 h-4 text-canina-blue" />
                      </div>
                    )}
                    {(product.suitableFor === "گربه" || product.suitableFor === "هر دو") && (
                      <div className="w-7 h-7 bg-white/90 backdrop-blur-sm rounded-lg flex items-center justify-center text-medical-gray-600 border border-medical-gray-200 shadow-sm" title="مناسب برای گربه">
                        <Cat className="w-4 h-4 text-canina-blue" />
                      </div>
                    )}
                  </div>

                  {/* 1. Image Viewer */}
                  {(!activeMedia || activeMedia.type === 'image') && (
                    <div
                      onClick={() => setIsImageZoomOpen(true)}
                      className="w-full h-full flex items-center justify-center cursor-zoom-in relative"
                      title="کلیک برای مشاهده تصویر بزرگتر"
                    >
                      <SafeImage
                        src={activeMedia?.url || product.image}
                        alt={product.name}
                        priority={true}
                        sizes="(max-width: 768px) 100vw, 400px"
                        className="w-full h-full"
                        imgClassName="w-full h-full object-contain drop-shadow-2xl group-hover:scale-105 transition-transform duration-700 mx-auto my-auto"
                      />
                      <div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-md text-white px-3 py-1 rounded-full text-[10px] font-black flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        <span>بزرگ‌نمایی</span>
                      </div>
                    </div>
                  )}

                  {/* 2. Video Player Frame */}
                  {activeMedia?.type === 'video' && (
                    <div
                      onClick={() => {
                        setActiveMediaForVideoModal(activeMedia.videoData || {
                          title: activeMedia.title || product.name,
                          videoUrl: activeMedia.url,
                          thumbnail: activeMedia.thumbnail,
                          description: product.description,
                        });
                        setIsVideoModalOpen(true);
                      }}
                      className="w-full h-full relative cursor-pointer overflow-hidden rounded-2xl bg-neutral-950 flex items-center justify-center group/vid"
                      title="برای پخش ویدیو کلیک کنید"
                    >
                      <SafeImage
                        src={activeMedia.thumbnail || product.image}
                        alt={activeMedia.title || product.name}
                        className="w-full h-full opacity-60 group-hover/vid:opacity-40 transition-opacity"
                        imgClassName="w-full h-full object-cover group-hover/vid:scale-105 transition-transform duration-700"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-black/50 flex flex-col items-center justify-center gap-3 p-4 text-center">
                        <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-canina-blue text-white flex items-center justify-center shadow-2xl shadow-canina-blue/60 group-hover/vid:scale-110 transition-transform">
                          <Play className="w-8 h-8 sm:w-10 sm:h-10 fill-white ml-1" />
                        </div>
                        <div className="space-y-1.5 max-w-xs">
                          <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-canina-blue text-white text-[11px] font-black rounded-full shadow-md font-vazir">
                            <Film className="w-3.5 h-3.5" />
                            <span>پخش ویدیو معرفی محصول</span>
                          </span>
                          <p className="text-xs font-bold text-white/90 truncate font-vazir">
                            {activeMedia.title || product.nameFa || product.name}
                          </p>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* 3. Podcast Player Frame */}
                  {activeMedia?.type === 'podcast' && (
                    <div
                      onClick={() => {
                        const el = document.getElementById('podcast-player-section');
                        if (el) {
                          el.scrollIntoView({ behavior: 'smooth' });
                        }
                      }}
                      className="w-full h-full relative cursor-pointer overflow-hidden rounded-2xl bg-gradient-to-br from-purple-950 via-slate-900 to-indigo-950 flex flex-col items-center justify-center p-6 text-white text-center group/pod"
                      title="مشاهده و پخش پادکست بالینی"
                    >
                      <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-purple-600/30 border border-purple-400/30 flex items-center justify-center mb-3 shadow-xl group-hover/pod:scale-105 transition-transform">
                        <Headphones className="w-8 h-8 sm:w-10 sm:h-10 text-purple-300 animate-pulse" />
                      </div>

                      {/* Animated Audio Bars */}
                      <div className="flex items-center gap-1 mb-3">
                        <span className="w-1 h-3 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
                        <span className="w-1 h-6 bg-purple-300 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
                        <span className="w-1 h-8 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
                        <span className="w-1 h-4 bg-purple-300 rounded-full animate-bounce" style={{ animationDelay: '75ms' }} />
                        <span className="w-1 h-6 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '225ms' }} />
                      </div>

                      <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-purple-600 text-white text-[11px] font-black rounded-full shadow-md font-vazir mb-1">
                        <Headphones className="w-3.5 h-3.5" />
                        <span>پادکست و بررسی صوتی بالینی</span>
                      </span>
                      <p className="text-xs font-bold text-white/90 line-clamp-2 max-w-xs font-vazir mt-1">
                        {activeMedia.title || "بررسی تخصصی اثر مکمل توسط تیم علمی"}
                      </p>
                    </div>
                  )}
                </motion.div>

                {/* Multiple Gallery Media Thumbnails Strip */}
                {galleryMedia.length > 1 && (
                  <div className="flex items-center gap-2 overflow-x-auto py-2 px-1 sleek-hscroll">
                    {galleryMedia.map((item, idx) => {
                      const isSelected = activeMediaIndex === idx;

                      return (
                        <button
                          key={item.id || idx}
                          type="button"
                          onClick={() => {
                            setActiveMediaIndex(idx);
                            if (item.type === 'image') {
                              setActiveImage(item.url);
                            }
                          }}
                          className={`relative w-16 h-16 sm:w-18 sm:h-18 rounded-2xl overflow-hidden bg-white border-2 transition-all shrink-0 p-1 cursor-pointer flex items-center justify-center ${
                            isSelected 
                              ? 'border-canina-blue shadow-lg scale-105 ring-2 ring-canina-blue/30' 
                              : 'border-medical-gray-200 hover:border-canina-blue/50 opacity-75 hover:opacity-100'
                          }`}
                        >
                          <SafeImage
                            src={item.thumbnail || item.url || product.image}
                            alt={`${product.name} - ${idx + 1}`}
                            className="w-full h-full"
                            imgClassName="w-full h-full object-contain"
                          />

                          {/* Video Overlay Badge on thumbnail */}
                          {item.type === 'video' && (
                            <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
                              <div className="w-6 h-6 rounded-full bg-canina-blue text-white flex items-center justify-center shadow-md">
                                <Play className="w-3 h-3 fill-white ml-0.5" />
                              </div>
                              <span className="absolute bottom-0.5 right-0.5 bg-blue-600 text-white text-[7px] font-bold px-1 rounded font-vazir">
                                ویدیو
                              </span>
                            </div>
                          )}

                          {/* Podcast Overlay Badge on thumbnail */}
                          {item.type === 'podcast' && (
                            <div className="absolute inset-0 bg-purple-950/60 flex items-center justify-center">
                              <div className="w-6 h-6 rounded-full bg-purple-600 text-white flex items-center justify-center shadow-md">
                                <Headphones className="w-3.5 h-3.5 text-white" />
                              </div>
                              <span className="absolute bottom-0.5 right-0.5 bg-purple-600 text-white text-[7px] font-bold px-1 rounded font-vazir">
                                صوت
                              </span>
                            </div>
                          )}
                        </button>
                      );
                    })}
                  </div>
                )}
              </div>

              {/* Left Column: Product Title & Description (md:col-span-7) */}
              <div className="md:col-span-7 space-y-4 sm:space-y-6 flex flex-col items-center md:items-start">
                <div className="w-full flex flex-col items-center md:items-start">
                  <div className="flex flex-wrap justify-center md:justify-start items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
                    <div className="px-3 py-1 bg-canina-blue text-white rounded-full text-[10px] font-black uppercase tracking-widest font-vazir whitespace-nowrap shadow-sm">
                      استاندارد صنعتی آلمان
                    </div>
                    <div className="px-3 py-1 bg-amber-500 text-white rounded-full text-[10px] font-black uppercase tracking-widest font-vazir whitespace-nowrap shadow-sm flex items-center gap-1">
                      <ShieldCheck className="w-3 h-3" />
                      کاتالوگ رسمی Canina
                    </div>
                    {product.specialBadge && (
                      <div className="px-3 py-1 bg-medical-gray-900 text-white rounded-full text-[10px] font-black uppercase tracking-widest font-vazir whitespace-nowrap shadow-sm">
                        {product.specialBadge}
                      </div>
                    )}
                    {compatibility && (
                      <div className={`px-3 py-1 text-[10px] font-black uppercase tracking-widest rounded-full shadow-sm flex items-center gap-1 whitespace-nowrap ${
                        compatibility.type === 'alert' ? 'bg-amber-100 text-amber-800 border border-amber-200' :
                        compatibility.type === 'success' ? 'bg-emerald-100 text-emerald-800 border border-emerald-200' : 
                        'bg-medical-gray-100 text-medical-gray-700 border border-medical-gray-200'
                      }`}>
                        {compatibility.type === 'alert' ? <AlertCircle className="w-3 h-3 shrink-0" /> : compatibility.type === 'success' ? <Heart className="w-3 h-3 shrink-0 text-emerald-600" /> : <Sparkles className="w-3 h-3 shrink-0 text-canina-blue" />}
                        <span>{compatibility.text}</span>
                      </div>
                    )}
                  </div>
                  <div className="flex flex-col gap-1.5 mb-4 text-center md:text-right w-full">
                    <h1 dir="rtl" className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-black text-medical-gray-900 leading-tight font-vazir">
                      {product.nameFa || product.name}
                    </h1>
                    {product.nameEn && (
                      <h2 dir="ltr" className="text-xs sm:text-base text-slate-400 font-bold italic font-sans text-center md:text-left">
                        {product.nameEn}
                      </h2>
                    )}
                  </div>
                  <p className="text-base sm:text-xl text-canina-blue font-bold italic opacity-80 leading-relaxed max-w-2xl font-vazir mb-4 text-center md:text-right" dir="rtl">
                    {isMounted && pets.length > 0 ? (
                      product.optimisticTemplate?.replace("[PetName]", activePet?.name || "").replace("[OnSet]", product.onSetOfAction || "به زودی")
                    ) : (
                      product.scientificTagline
                    )}
                  </p>
                  {fullProduct.shortDescription && (
                    <div className="w-full text-right bg-canina-blue/5 border-r-4 border-canina-blue p-4 sm:p-6 rounded-2xl">
                      <p className="text-sm sm:text-lg text-medical-gray-600 font-bold leading-relaxed font-vazir">
                        {fullProduct.shortDescription}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </div>
            {/* ─── Symptoms / Therapeutic Indications Section ─── */}
            {fullProduct.symptoms && fullProduct.symptoms.length > 0 && (
              <section className="bg-canina-blue/[0.03] border border-canina-blue/10 rounded-2xl sm:rounded-[2rem] p-4 sm:p-6 md:p-8 space-y-3 sm:space-y-4">
                <div className="flex items-center gap-2.5 sm:gap-3">
                  <div className="w-8 h-8 sm:w-9 sm:h-9 bg-canina-blue/10 text-canina-blue rounded-xl flex items-center justify-center">
                    <Stethoscope className="w-4 h-4 sm:w-5 sm:h-5" />
                  </div>
                  <h3 className="text-sm sm:text-base font-black text-medical-gray-900 font-vazir">علائم و موارد درمانی مرتبط</h3>
                </div>
                <p className="text-xs-plus sm:text-xs text-medical-gray-400 font-vazir font-bold">این محصول برای رفع علائم زیر توسط دامپزشکان توصیه می‌شود:</p>
                <div className="flex flex-wrap gap-1.5 sm:gap-2">
                  {fullProduct.symptoms.map((symptom: string, idx: number) => (
                    <a
                      key={idx}
                      href={`/shop?symptom=${encodeURIComponent(symptom)}`}
                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold bg-white border border-canina-blue/20 text-canina-blue hover:bg-canina-blue hover:text-white hover:border-canina-blue transition-all shadow-2xs cursor-pointer font-vazir whitespace-nowrap"
                    >
                      <span className="w-1.5 h-1.5 rounded-full bg-current opacity-60" />
                      {symptom}
                    </a>
                  ))}
                </div>
              </section>
            )}

            {/* Key Benefits Section */}
            {fullProduct.keyBenefits && fullProduct.keyBenefits.length > 0 && (
              <section className="space-y-4 sm:space-y-8 pt-4 sm:pt-6 border-t border-medical-gray-100">
                <div className="flex items-center gap-3 sm:gap-4">
                  <div className="w-10 h-10 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
                    <Star className="w-5 h-5 sm:w-6 sm:h-6" />
                  </div>
                  <h3 className="text-xl sm:text-3xl font-black text-medical-gray-900 italic font-vazir">چرا {fullProduct.name}؟</h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-6">
                  {fullProduct.keyBenefits.map((benefit, i) => {
                    const Icon = ICON_MAP[benefit.icon] || CheckCircle2;
                    return (
                      <div key={i} className="bg-white border border-medical-gray-200 rounded-2xl sm:rounded-[2.5rem] p-4 sm:p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all group overflow-hidden relative">
                        <div className="absolute -top-10 -left-10 w-24 h-24 bg-canina-blue/5 rounded-full group-hover:scale-150 transition-transform duration-700" />
                        <div className="w-10 h-10 sm:w-12 sm:h-12 bg-medical-gray-50 rounded-xl sm:rounded-2xl flex items-center justify-center text-canina-blue mb-3 sm:mb-6 group-hover:bg-canina-blue group-hover:text-white transition-all">
                          <Icon className="w-5 h-5 sm:w-6 sm:h-6" />
                        </div>
                        <h4 className="text-base sm:text-xl font-black text-medical-gray-900 mb-1 sm:mb-2 font-vazir">{benefit.title}</h4>
                        <p className="text-xs sm:text-sm text-medical-gray-500 font-bold font-vazir text-justify">{benefit.description}</p>
                      </div>
                    );
                  })}
                </div>
              </section>
            )}

            {/* Comprehensive Product Description Section (Below the fold) */}
            {fullProduct.description && (
              <section className="bg-white border border-medical-gray-200 rounded-[1.5rem] sm:rounded-[2.5rem] p-4 sm:p-8 md:p-10 shadow-md space-y-3 sm:space-y-6">
                <div className="flex items-center gap-3 sm:gap-4 border-b border-medical-gray-100 pb-3 sm:pb-4">
                  <div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
                    <Info className="w-5 h-5 sm:w-6 sm:h-6" />
                  </div>
                  <h3 className="text-lg sm:text-2xl font-black text-medical-gray-900 italic font-vazir">توضیحات و معرفی محصول</h3>
                </div>
                <div className="text-xs sm:text-base text-medical-gray-700 font-medium leading-relaxed sm:leading-loose font-vazir space-y-3 pt-2 relative">
                  {(() => {
                    const descText = fullProduct.description.trim();
                    const isHtml = /<[a-z][\s\S]*>/i.test(descText);
                    const formattedHtml = isHtml 
                      ? descText 
                      : descText.split('\n').filter(Boolean).map(p => `<p>${p.trim()}</p>`).join('');
                    
                    const isLongText = descText.length > 400;

                    return (
                      <>
                        <div 
                          className={`relative overflow-hidden transition-all duration-300 ${
                            isLongText && !isFullDescriptionOpen ? 'max-h-64' : 'max-h-none'
                          }`}
                        >
                          <div 
                            dangerouslySetInnerHTML={{ __html: formattedHtml }}
                            className="rich-product-description space-y-3 font-vazir text-justify leading-relaxed sm:leading-loose [&>h1]:text-lg [&>h1]:sm:text-xl [&>h1]:font-black [&>h1]:text-medical-gray-900 [&>h1]:mt-4 [&>h1]:mb-2 [&>h2]:text-base [&>h2]:sm:text-lg [&>h2]:font-black [&>h2]:text-medical-gray-900 [&>h2]:mt-3 [&>h2]:mb-1.5 [&>h3]:text-sm [&>h3]:sm:text-base [&>h3]:font-black [&>h3]:text-medical-gray-900 [&>h3]:mt-3 [&>h3]:mb-1 [&>h4]:text-xs [&>h4]:sm:text-sm [&>h4]:font-bold [&>h4]:text-medical-gray-800 [&>p]:leading-relaxed [&>p]:sm:leading-loose [&>ul]:list-disc [&>ul]:pr-5 [&>ul]:space-y-1 [&>ol]:list-decimal [&>ol]:pr-5 [&>ol]:space-y-1 [&>table]:w-full [&>table]:border-collapse [&>table]:my-3 [&>table_th]:border [&>table_th]:border-medical-gray-200 [&>table_th]:p-2 [&>table_th]:bg-medical-gray-100 [&>table_td]:border [&>table_td]:border-medical-gray-200 [&>table_td]:p-2 [&>hr]:my-4 [&>hr]:border-medical-gray-200 [&>blockquote]:border-r-4 [&>blockquote]:border-canina-blue [&>blockquote]:pr-3 [&>blockquote]:italic [&>blockquote]:bg-canina-blue/5 [&>blockquote]:p-2 [&>blockquote]:rounded-l-lg [&>img]:rounded-xl [&>img]:my-3 [&>img]:max-w-full [&>img]:shadow-sm"
                          />

                          {/* Gradient fade overlay when collapsed */}
                          {isLongText && !isFullDescriptionOpen && (
                            <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white via-white/90 to-transparent pointer-events-none" />
                          )}
                        </div>

                        {isLongText && (
                          <div className="pt-2 flex justify-center">
                            <button
                              type="button"
                              onClick={() => setIsFullDescriptionOpen(prev => !prev)}
                              className="inline-flex items-center gap-1.5 px-5 py-2.5 bg-medical-gray-50 hover:bg-canina-blue/10 text-canina-blue rounded-xl text-xs font-black transition-all border border-medical-gray-200 hover:border-canina-blue/30 cursor-pointer"
                            >
                              <span>{isFullDescriptionOpen ? 'بستن توضیحات' : 'مشاهده توضیحات کامل و بیشتر'}</span>
                              {isFullDescriptionOpen ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                            </button>
                          </div>
                        )}
                      </>
                    );
                  })()}
                </div>
              </section>
            )}

            {/* Smart Dosage Calculator Utility Section (Only for oral/dosed products, not topical products) */}
            {!(fullProduct.categorySlug === 'special-care' || 
               fullProduct.name.toLowerCase().includes('pfotenpflege') || 
               fullProduct.name.toLowerCase().includes('augenpflege') ||
               fullProduct.unit?.includes('ml Lotion') ||
               fullProduct.unit?.includes('Balsam') ||
               fullProduct.nameFa?.includes('کرم') ||
               fullProduct.nameFa?.includes('قطره تمیزکننده') ||
               fullProduct.nameFa?.includes('اسپری')) && (
              <section className="bg-white rounded-2xl sm:rounded-[2.5rem] border border-medical-gray-200 p-3.5 sm:p-6 md:p-8 shadow-md space-y-4 sm:space-y-6">
                <div className="flex items-center gap-2.5 sm:gap-4">
                  <div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
                    <Clock className="w-4 h-4 sm:w-6 sm:h-6" />
                  </div>
                  <div>
                    <h3 className="text-sm sm:text-xl font-black text-medical-gray-900 italic font-vazir whitespace-nowrap">
                      {activePet ? `ماشین حساب هوشمند مصرف برای ${activePet.name}` : 'ماشین حساب هوشمند مصرف'}
                    </h3>
                    <p className="text-[10px] sm:text-xs text-medical-gray-400 font-bold font-vazir mt-0.5 sm:mt-1">
                      {activePet 
                        ? `تخمین دقیق دوز روزانه و ماندگاری هر بسته بر اساس وزن و سن ${activePet.name}`
                        : 'تخمین دقیق دوز روزانه و ماندگاری هر بسته بر اساس مشخصات پت شما'}
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 items-center">
                  {/* Manual Slider Inputs */}
                  <div className="bg-medical-gray-50 rounded-xl sm:rounded-[2rem] p-3.5 sm:p-5 border border-medical-gray-100 space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-black text-medical-gray-500 font-vazir">
                        {activePet ? `وزن ${activePet.name} (کیلوگرم)` : 'وزن پت (کیلوگرم)'}
                      </span>
                      <span className="text-sm sm:text-base font-black text-canina-blue font-vazir">{toPersian(weight)} ک‌گ</span>
                    </div>
                    <input
                      type="range"
                      min="1" max="100"
                      value={weight}
                      onChange={(e) => setWeight(parseInt(e.target.value))}
                      className="w-full h-2 bg-medical-gray-200 rounded-lg appearance-none cursor-pointer accent-canina-blue [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-canina-blue [&::-webkit-slider-thumb]:appearance-none"
                    />
                    
                    <div className="space-y-2">
                      <span className="text-[10px] font-black text-medical-gray-400 font-vazir">
                        {activePet ? `سن ${activePet.name}` : 'سن حیوان'}
                      </span>
                      <div className="flex gap-2">
                        <button onClick={() => setPetType("young")} className={`flex-1 py-2 sm:py-2.5 rounded-xl text-xs font-black transition-all border ${petType === "young" ? 'bg-canina-blue border-canina-blue text-white shadow-md' : 'bg-white border-medical-gray-200 text-medical-gray-400'}`}>جوان</button>
                        <button onClick={() => setPetType("adult")} className={`flex-1 py-2 sm:py-2.5 rounded-xl text-xs font-black transition-all border ${petType === "adult" ? 'bg-canina-blue border-canina-blue text-white shadow-md' : 'bg-white border-medical-gray-200 text-medical-gray-400'}`}>بالغ</button>
                      </div>
                    </div>
                  </div>

                  {/* Calculation Results Output */}
                  <div className="bg-canina-blue rounded-xl sm:rounded-[2rem] p-4 sm:p-6 text-white border-b-6 border-white/20 shadow-2xl flex flex-col justify-between h-full min-h-[180px]">
                    <div className="flex items-center justify-between mb-3 opacity-90 border-b border-white/10 pb-2.5 gap-2">
                      <div className="flex flex-col gap-0.5">
                        <div className="flex items-center gap-1.5">
                          <Sparkles className="w-3.5 h-3.5 text-amber-300 shrink-0" />
                          <span className="text-[11px] font-black font-vazir text-white whitespace-nowrap">
                            {activePet ? `محاسبه‌گر دوره درمانی ${activePet.name}` : 'محاسبه‌گر دوره درمانی'}
                          </span>
                        </div>
                        <span className="text-[9px] font-bold text-white/70 font-sans tracking-wide">
                          AI Calculator
                        </span>
                      </div>
                      <span className="text-[10px] bg-white/20 px-2.5 py-1 rounded-full font-black whitespace-nowrap shrink-0">
                        پیشنهاد: {toPersian(itemQuantity)} بسته
                      </span>
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <div className="text-xl sm:text-2xl font-black font-vazir text-white">{toPersian(calculation.duration)} روز</div>
                        <div className="text-[10px] font-bold text-white/80 font-vazir whitespace-nowrap mt-0.5">مدت تامین یک بسته</div>
                      </div>
                      <div className="text-left">
                        <div className="text-lg sm:text-xl font-black font-vazir text-white">{toPersian(calculation.dailyDose)}</div>
                        <div className="text-[10px] font-bold text-white/80 font-vazir whitespace-nowrap mt-0.5">دوز روزانه ({calculation.unit === 'g' ? 'گرم' : calculation.unit})</div>
                      </div>
                    </div>

                    <div className="mt-3 pt-3 border-t border-white/10 flex items-center justify-between gap-2">
                      <span className="text-[10px] sm:text-[11px] font-bold text-white/80 whitespace-nowrap">تخمین هزینه دوره ۳۰ روزه:</span>
                      <span className="text-xs sm:text-sm font-black text-amber-300 whitespace-nowrap">
                        {toPersian((Math.ceil(30 / (calculation.duration || 30)) * (product.priceValue || 0)).toLocaleString())} تومان
                      </span>
                    </div>

                    <p className="text-[9px] sm:text-[10px] text-white/70 font-bold font-vazir mt-2 leading-relaxed">
                      {activePet 
                        ? `* دوز دقیق بر اساس وزن ${activePet.name} (${toPersian(weight)} ک‌گ) محاسبه شده است.`
                        : '* دوز دقیق بر اساس وزن پت محاسبه شده است.'}
                    </p>
                  </div>
                </div>
              </section>
            )}

            {/* Ingredients & Scientific Analysis Section (Compact & Sleek Design) */}
            {((product.main_ingredients && product.main_ingredients.length > 0) || (product.analysis && Object.keys(product.analysis).length > 0)) && (
              <section className="bg-white rounded-2xl sm:rounded-3xl border border-medical-gray-200 p-4 sm:p-6 shadow-sm space-y-4">
                <div className="flex items-center gap-2.5 sm:gap-3 border-b border-medical-gray-100 pb-3">
                  <div className="w-8 h-8 sm:w-10 sm:h-10 bg-canina-blue text-white rounded-xl flex items-center justify-center shadow-md shrink-0">
                    <FlaskConical className="w-4 h-4 sm:w-5 sm:h-5" />
                  </div>
                  <div>
                    <h3 className="text-base sm:text-lg font-black text-medical-gray-900 italic font-vazir">ترکیبات و آنالیز علمی</h3>
                    <p className="text-[10px] sm:text-xs text-medical-gray-400 font-bold font-vazir mt-0.5">آنالیز دقیق مواد مؤثره و فرمولاسیون دارویی</p>
                  </div>
                </div>

                <div className="space-y-4">
                  {/* Ingredients Pills */}
                  {product.main_ingredients && product.main_ingredients.length > 0 && (
                    <div className="space-y-2">
                      <h4 className="text-[11px] font-black text-medical-gray-400 uppercase tracking-wider font-vazir">مواد تشکیل‌دهنده برتر</h4>
                      <div className="flex flex-wrap gap-2">
                        {product.main_ingredients.map((ing, idx) => {
                          const termKey = termKeys.find(key => {
                            const termObj = scientificTerms[key] || SCIENTIFIC_TERMS[key];
                            const termName = termObj?.term || key;
                            const ingClean = ing.toLowerCase();
                            const keyClean = key.toLowerCase();
                            const termNameClean = termName.toLowerCase();
                            return ingClean.includes(keyClean) || 
                                   keyClean.includes(ingClean) || 
                                   ingClean.includes(termNameClean) || 
                                   termNameClean.includes(ingClean);
                          });
                          return (
                            <div key={idx} className="bg-medical-gray-50 border border-medical-gray-200 px-3 py-1.5 rounded-xl flex items-center gap-1.5 group hover:border-canina-blue/30 hover:bg-canina-blue/5 transition-all">
                              <span className="text-xs sm:text-sm font-bold text-medical-gray-700 font-vazir">
                                {termKey ? (
                                  <Tooltip termKey={termKey} onWikiNavigate={(id) => router.push(`/wiki?term=${id}`)}>
                                    {ing}
                                  </Tooltip>
                                ) : ing}
                              </span>
                              <Sparkles className="w-3 h-3 text-canina-blue opacity-40 group-hover:opacity-100 transition-opacity" />
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  )}

                  {/* Quantitative Analysis Cards (Responsive layout fitting 1 or multiple items naturally) */}
                  {(() => {
                    const filteredAnalysis = Object.entries(product.analysis || {}).filter(([key, val]) => {
                      const cleanKey = key.toLowerCase();
                      // Don't show duplicate ingredients here if already listed above
                      if (cleanKey.includes('مواد') || cleanKey.includes('ترکیبات') || cleanKey.includes('ingredient')) return false;
                      return Boolean(val);
                    });

                    if (filteredAnalysis.length === 0) return null;

                    return (
                      <div className="space-y-2.5 pt-3 border-t border-medical-gray-100">
                        <div className="text-[11px] font-black text-medical-gray-400 uppercase tracking-wider font-vazir">جدول آنالیز و آنالیتیکال ترکیبات</div>
                        <div className="flex flex-wrap gap-2.5">
                          {filteredAnalysis.map(([key, value]) => (
                            <div key={key} className="bg-medical-gray-50/80 border border-medical-gray-200 px-4 py-2.5 rounded-xl flex items-center justify-between gap-4 min-w-[180px] flex-1 max-w-sm hover:border-canina-blue/30 transition-all">
                              <span className="text-xs font-bold text-medical-gray-500 font-vazir truncate">{key}</span>
                              <span className="text-sm font-black font-vazir text-canina-blue whitespace-nowrap">{toPersian(value)}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    );
                  })()}
                </div>
              </section>
            )}

            {/* Feeding / Usage Instructions Section (Merged and enriched) */}
            <section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-8 md:p-10 shadow-md">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
                  <CalendarDays className="w-6 h-6" />
                </div>
                <div>
                  <h3 className="text-2xl font-black text-medical-gray-900 italic font-vazir">
                    {fullProduct.categorySlug === 'special-care' || fullProduct.name.toLowerCase().includes('pfotenpflege') || fullProduct.name.toLowerCase().includes('augenpflege')
                      ? 'دستورالعمل و نحوه استفاده موضعی' 
                      : 'توصیه غذایی و نحوه مصرف'}
                  </h3>
                  <p className="text-xs text-medical-gray-400 font-bold font-vazir mt-0.5">
                    {fullProduct.categorySlug === 'special-care' || fullProduct.name.toLowerCase().includes('pfotenpflege') || fullProduct.name.toLowerCase().includes('augenpflege')
                      ? 'فرآورده بهداشتی / موضعی (اعمال روی موضع بدون وابستگی به وزن بدن)'
                      : 'راهنمای استاندارد تغذیه بر اساس کاتالوگ دارویی آلمان'}
                  </p>
                </div>
              </div>

              {fullProduct.categorySlug === 'special-care' || 
               fullProduct.name.toLowerCase().includes('pfotenpflege') || 
               fullProduct.name.toLowerCase().includes('augenpflege') ||
               fullProduct.unit?.includes('ml Lotion') ||
               fullProduct.unit?.includes('Balsam') ||
               fullProduct.nameFa?.includes('کرم') ||
               fullProduct.nameFa?.includes('قطره تمیزکننده') ||
               fullProduct.nameFa?.includes('اسپری') ? (
                <div className="bg-canina-blue/5 border border-canina-blue/20 rounded-2xl p-5 mb-6 text-sm text-medical-gray-700 font-bold leading-relaxed">
                  <p className="mb-2">
                    {product.feedingAdvice || "چندین بار در روز روی نواحی آسیب‌دیده مالیده و به آرامی ماساژ داده شود."}
                  </p>
                  <p className="text-xs text-medical-gray-500 font-medium pt-2 border-t border-canina-blue/10">
                    ℹ️ این محصول یک فرآورده موضعی/بهداشتی است و مقدار مصرف آن به صورت موضعی (روی پوست، چشم یا پنجه) اعمال می‌شود و وابسته به وزن بدن حیوان نمی‌باشد. ماندگاری بسته بسته به میزان و تکرار مصرف روزانه شما متفاوت خواهد بود.
                  </p>
                </div>
              ) : (
                <p className="text-medical-gray-700 leading-relaxed text-sm md:text-base font-medium font-vazir mb-6">
                  {product.feedingAdvice}
                </p>
              )}

              {/* Storage & Precautions Bar */}
              <div className="grid md:grid-cols-2 gap-4 pt-6 border-t border-medical-gray-100">
                <div className="p-4 bg-medical-gray-50 rounded-2xl border border-medical-gray-100 flex items-start gap-3">
                  <Thermometer className="w-5 h-5 text-canina-blue flex-shrink-0 mt-0.5" />
                  <div>
                    <h5 className="text-xs font-black text-medical-gray-900 mb-1">شرایط نگهداری کاتالوگ آلمان</h5>
                    <p className="text-[11px] text-medical-gray-500 font-bold leading-normal">
                      {product.storage || "در جای خشک، خنک (زیر ۲۵ درجه سانتی‌گراد) و دور از تابش مستقیم نور خورشید نگهداری شود."}
                    </p>
                  </div>
                </div>

                <div className="p-4 bg-amber-50/60 rounded-2xl border border-amber-100 flex items-start gap-3">
                  <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h5 className="text-xs font-black text-amber-900 mb-1">احتیاط و منع مصرف (Contraindications)</h5>
                    <p className="text-[11px] text-amber-800 font-bold leading-normal">
                      {product.contraindications?.join(" • ") || "دور از دسترس کودکان نگهداری شود. پس از هربار مصرف درب قوطی را محکم ببندید."}
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Multimedia & Scientific Documentation (Video, Podcast & PDF Catalog) */}
            {(product.videoUrl || product.podcastUrl || product.pdfUrl) && (
              <section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-8 md:p-10 shadow-md space-y-8 font-vazir" dir="rtl">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-medical-gray-100 pb-4 sm:pb-6">
                  <div className="flex items-center gap-2.5 sm:gap-4">
                    <div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
                      <Sparkles className="w-4 h-4 sm:w-6 sm:h-6" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2 flex-wrap">
                        <h3 className="text-lg sm:text-2xl md:text-3xl font-black text-medical-gray-900 italic">رسانه و مستندات تخصصی محصول</h3>
                        <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-black bg-purple-100 border border-purple-200 text-purple-700 shadow-2xs">
                          <Sparkles className="w-3 h-3 text-purple-600 animate-pulse" />
                          <span>تحلیل هوشمند (AI-Powered)</span>
                        </span>
                      </div>
                      <p className="text-xs text-medical-gray-400 font-bold mt-0.5 sm:mt-1">ویدیو آموزشی، پادکست تحلیل علمی تولیدشده با هوش مصنوعی و دفترچه کاتالوگ کارخانه Canina</p>
                    </div>
                  </div>
                </div>

                <div className="space-y-6">
                  {/* Video Player Row */}
                  {product.videoUrl && (
                    <div className="bg-gradient-to-br from-neutral-900 via-neutral-900 to-black rounded-3xl overflow-hidden shadow-xl border border-white/10 p-6 flex flex-col md:flex-row items-center gap-6 text-white group">
                      {/* Thumbnail / Cover Box */}
                      <div 
                        onClick={() => setIsVideoModalOpen(true)}
                        className="relative w-full md:w-80 aspect-video rounded-2xl overflow-hidden cursor-pointer bg-neutral-800 border border-white/10 group-hover:border-canina-blue/50 transition-all flex items-center justify-center shrink-0"
                      >
                        <SafeImage
                          src={product.videoCover || product.image}
                          alt={product.videoTitle || product.name}
                          className="w-full h-full"
                          imgClassName="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        />
                        <div className="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                          <div className="w-12 h-12 rounded-full bg-canina-blue text-white flex items-center justify-center shadow-xl shadow-canina-blue/50 group-hover:scale-110 transition-transform">
                            <Play className="w-5 h-5 fill-white ml-0.5" />
                          </div>
                        </div>
                      </div>

                      <div className="flex-1 text-center md:text-right space-y-2">
                        <div className="flex items-center justify-center md:justify-start gap-2">
                          <span className="text-xs font-black text-blue-400 bg-blue-500/10 px-3 py-1 rounded-full border border-blue-500/20 flex items-center gap-1.5">
                            <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
                            ویدیو راهنما و معرفی
                          </span>
                        </div>
                        <h4 className="text-lg font-black text-white">
                          {product.videoTitle || "ویدیو راهنمای مصرف و معرفی مکمل"}
                        </h4>
                        {(() => {
                          const vDesc = product.videoDescription || "مشاهده ویدیوی آموزشی، دوزبندی دقیق و نحوه مصرف مکمل توسط کادر علمی کنینا";
                          const isLong = vDesc.length > 120;
                          return (
                            <div className="space-y-1.5">
                              <p className="text-xs text-white/70 font-medium leading-relaxed">
                                {isLong && !isFullVideoDescOpen ? `${vDesc.slice(0, 120)}...` : vDesc}
                              </p>
                              {isLong && (
                                <button
                                  type="button"
                                  onClick={() => setIsFullVideoDescOpen(prev => !prev)}
                                  className="text-cyan-300 hover:text-cyan-200 text-[11px] font-bold inline-flex items-center gap-1 cursor-pointer transition-colors"
                                >
                                  <span>{isFullVideoDescOpen ? 'بستن متن' : 'مشاهده متن کامل'}</span>
                                  {isFullVideoDescOpen ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
                                </button>
                              )}
                            </div>
                          );
                        })()}
                        <div className="pt-2 flex justify-center md:justify-start">
                          <button
                            type="button"
                            onClick={() => setIsVideoModalOpen(true)}
                            className="py-2.5 px-6 bg-canina-blue hover:bg-blue-600 text-white rounded-xl font-bold text-xs transition-all flex items-center gap-2 cursor-pointer shadow-md shadow-canina-blue/20"
                          >
                            <Play className="w-4 h-4 fill-white" />
                            <span>پخش ویدیو</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Podcast Player Row (Inline Direct Player with Soundcloud Waveform) */}
                  {product.podcastUrl && (
                    <div id="podcast-player-section" className="scroll-mt-24">
                      <PodcastInlinePlayer
                        podcast={{
                          audioUrl: product.podcastUrl,
                          title: product.podcastTitle || "پادکست و بررسی صوتی بالینی مکمل",
                          description: product.podcastDescription || product.description,
                          cover: product.podcastCover,
                          productName: product.name,
                          fallbackCover: product.image,
                        }}
                      />
                    </div>
                  )}

                  {/* PDF Catalog Download Row */}
                  {product.pdfUrl && (
                    <div className="bg-medical-gray-50 border border-medical-gray-200 rounded-3xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xs">
                      <div className="flex items-center gap-4 text-center sm:text-right">
                        <div className="w-14 h-14 rounded-2xl bg-red-100 text-red-600 flex items-center justify-center font-black text-sm shadow-sm shrink-0">
                          PDF
                        </div>
                        <div>
                          <h4 className="text-base font-black text-gray-900">
                            {product.pdfTitle || "بروشور و کاتالوگ علمی Canina آلمان"}
                          </h4>
                          <p className="text-xs text-gray-500 font-medium mt-0.5">
                            {product.pdfDescription || "شامل مقالات رفرنس، جدول ترکیبات دقیق و سرتیفیکیت رسمی"}
                          </p>
                        </div>
                      </div>
                      <a
                        href={product.pdfUrl}
                        target="_blank"
                        rel="noreferrer"
                        className="bg-canina-blue hover:bg-blue-700 text-white px-6 py-3.5 rounded-2xl font-black text-xs transition-all shadow-md shadow-canina-blue/20 flex items-center gap-2 shrink-0 cursor-pointer"
                      >
                        <Download className="w-4 h-4" />
                        <span>دانلود مستقیم فایل PDF</span>
                      </a>
                    </div>
                  )}
                </div>
              </section>
            )}

            {/* FAQ Section */}
            {product.faqs && product.faqs.length > 0 && (
              <section className="pt-10">
                <div className="flex items-center gap-4 mb-10">
                  <div className="w-12 h-12 bg-blue-100 text-canina-blue rounded-2xl flex items-center justify-center">
                    <Info className="w-6 h-6" />
                  </div>
                  <h3 className="text-3xl font-black text-medical-gray-900 italic font-vazir">پاسخ به ابهامات شما</h3>
                </div>
                <div className="grid md:grid-cols-1 gap-4">
                  {product.faqs.map((faq, i) => (
                    <details key={i} className="group bg-white border border-medical-gray-200 rounded-[2rem] overflow-hidden hover:border-canina-blue/30 transition-all">
                      <summary className="flex items-center justify-between p-6 cursor-pointer list-none">
                        <span className="font-bold text-medical-gray-900 font-vazir">{faq.question}</span>
                        <ChevronDown className="w-5 h-5 text-canina-blue group-open:rotate-180 transition-transform" />
                      </summary>
                      <div className="px-6 pb-6 text-sm text-medical-gray-500 font-medium leading-relaxed font-vazir border-t border-medical-gray-50 pt-4">
                        {faq.answer}
                      </div>
                    </details>
                  ))}
                </div>
              </section>
            )}

            {/* Customer Reviews & Ratings Section */}
            {product && (
              <div className="pt-8">
                <ProductReviews productId={product.id} productName={product.name} />
              </div>
            )}
          </div>

          {/* Sticky Sidebar (Clean Buy Box) - Hidden on mobile as mobile floating buy bar is active */}
          <div className="hidden lg:block lg:col-span-4 lg:sticky lg:top-48 space-y-8">
            <div className="bg-white rounded-[2.5rem] border-2 border-medical-gray-100 p-8 shadow-2xl relative overflow-hidden">
              <div className="absolute top-0 right-0 w-24 h-24 bg-canina-blue/5 rounded-full -mr-12 -mt-12" />

              <div className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-1 font-vazir">قیمت نهایی محصول</div>
              <div className="text-3xl sm:text-4xl font-black font-vazir text-medical-gray-900 tracking-tighter mb-8">
                {isCatalogHidePrices ? "استعلام قیمت" : toPersian(product.price)}
              </div>

              {isCartDisabled ? (
                <div className="space-y-3">
                  <a
                    href={getText('contact_phone_link', `tel:${getText('contact_phone', '02188884444').replace(/[^0-9+]/g, '')}`)}
                    className="w-full flex items-center justify-center gap-2 px-4 bg-canina-blue text-white rounded-2xl h-16 font-black text-sm hover:bg-canina-dark transition-all shadow-xl shadow-canina-blue/20 font-vazir"
                  >
                    <Phone className="w-5 h-5" />
                    <span>مشاوره و استعلام خرید ({getText('contact_phone', '۰۲۱-۸۸۸۸۴۴۴۴')})</span>
                  </a>
                  <p className="text-[11px] text-medical-gray-400 font-bold text-center">
                    خرید آنلاین در حالت کاتالوگ موقتاً غیرفعال است
                  </p>
                </div>
              ) : (
                <div className="flex gap-4 mb-6">
                  {/* Quantity Selector - 40% Width */}
                  <div className="flex items-center gap-4 bg-medical-gray-50 border border-medical-gray-100 rounded-2xl p-2 h-16 w-[40%]">
                    <button
                      onClick={() => setItemQuantity(Math.max(1, itemQuantity - 1))}
                      className="w-10 h-10 flex items-center justify-center rounded-xl bg-white text-medical-gray-900 border border-medical-gray-200 hover:bg-canina-blue hover:text-white hover:border-canina-blue transition-all shadow-sm"
                    >
                      <Minus className="w-4 h-4" />
                    </button>
                    <span className="text-xl font-black text-medical-gray-900 flex-1 text-center font-vazir">
                      {toPersian(itemQuantity)}
                    </span>
                    <button
                      onClick={() => setItemQuantity(itemQuantity + 1)}
                      className="w-10 h-10 flex items-center justify-center rounded-xl bg-white text-medical-gray-900 border border-medical-gray-200 hover:bg-canina-blue hover:text-white hover:border-canina-blue transition-all shadow-sm"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>

                  {/* Add to Cart / Preorder / Stock Notify Button - 60% Width */}
                  {(product as unknown as { isPreorder?: boolean; preorderDeposit?: number }).isPreorder ? (
                    <button
                      onClick={() => {
                        addItem(product, itemQuantity, { quantity: calculation.dailyDose, unit: calculation.unit });
                        toast.success(`پیش‌خرید ${toPersian(itemQuantity)} عدد ${product.name} به سبد شما اضافه شد`);
                      }}
                      className="w-[60%] flex items-center justify-center gap-1.5 px-4 bg-purple-700 text-white rounded-2xl h-16 font-black text-sm hover:bg-purple-800 transition-all shadow-xl shadow-purple-900/20 font-vazir whitespace-nowrap"
                    >
                      <Sparkles className="w-5 h-5 mb-1 text-amber-300" />
                      {((product as unknown as { preorderDeposit?: number }).preorderDeposit || 0) > 0 ? `پیش‌خرید (بیعانه: ${((product as unknown as { preorderDeposit?: number }).preorderDeposit || 0).toLocaleString('fa-IR')} تومان)` : 'ثبت پیش‌خرید (رایگان)'}
                    </button>
                  ) : (product.packageSize || 0) <= 0 ? (
                    <button
                      data-testid="product-desktop-out-of-stock-btn"
                      onClick={() => toast.info("درخواست اطلاع‌رسانی موجودی ثبت شد")}
                      className="w-[60%] flex items-center justify-center gap-1.5 px-4 bg-amber-500 text-white rounded-2xl h-16 font-black text-sm hover:bg-amber-600 transition-all shadow-xl shadow-amber-500/20 font-vazir whitespace-nowrap"
                    >
                      <Bell className="w-5 h-5 mb-1" />
                      موجود شد اطلاع بده
                    </button>
                  ) : (
                    <button
                      data-testid="product-desktop-add-to-cart-btn"
                      onClick={() => {
                        addItem(product, itemQuantity, { quantity: calculation.dailyDose, unit: calculation.unit });
                        toast.success(`${toPersian(itemQuantity)} عدد ${product.name} به سبد خرید اضافه شد`);
                      }}
                      className="w-[60%] flex items-center justify-center gap-1.5 px-4 bg-medical-gray-900 text-white rounded-2xl h-16 font-black text-sm hover:bg-canina-blue transition-all shadow-xl shadow-black/10 font-vazir whitespace-nowrap"
                    >
                      <ShoppingBag className="w-5 h-5 mb-1" />
                      افزودن به سبد خرید
                    </button>
                  )}
                </div>
              )}

              <div className="mt-6 flex flex-col gap-3 border-t border-medical-gray-50 pt-6">
                <div className="flex items-center gap-2 text-xs font-bold text-medical-gray-500 font-vazir">
                  <ShieldCheck className="w-4 h-4 text-green-500" />
                  ضمانت اصالت محصول (Made in Germany)
                </div>
                <div className="flex items-center gap-2 text-xs font-bold text-medical-gray-500 font-vazir">
                  <Clock className="w-4 h-4 text-canina-blue" />
                  آماده ارسال (تحویل حداکثر ۴۸ ساعت)
                </div>
              </div>
            </div>

            {/* expected results box */}
            {product.expectedResults && product.expectedResults.length > 0 && (
              <div className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 shadow-md">
                <h4 className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-6 font-vazir">تغییرات قابل انتظار</h4>
                <div className="space-y-4">
                  {product.expectedResults.map((res, i) => {
                    const Icon = ICON_MAP[res.icon] || Sparkles;
                    return (
                      <div key={i} className="flex items-center gap-4 group">
                        <div className="w-10 h-10 bg-medical-gray-50 rounded-xl flex items-center justify-center text-canina-blue group-hover:bg-canina-blue group-hover:text-white transition-all">
                          <Icon className="w-5 h-5" />
                        </div>
                        <span className="text-xs font-bold text-medical-gray-700 font-vazir">{res.text}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Smart Cross-sell: Recommended Combinations */}
        {product.relatedProducts && product.relatedProducts.length > 0 && (
          <section className="mt-32 pt-20 border-t border-medical-gray-200">
            <div className="flex flex-col items-center text-center mb-16 px-4">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-canina-blue/5 border border-canina-blue/10 rounded-full text-canina-blue text-xs font-black uppercase tracking-widest mb-6 font-vazir whitespace-nowrap">
                <Sparkles className="w-4 h-4" />
                فرمولاسیون ترکیبی هم‌افزا (Synergy Blend)
              </div>
              <h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-tight">
                اثربخشی <span className="text-canina-blue italic">دوبرابر</span> با ترکیب هوشمند
              </h2>
            </div>

            <div className="grid lg:grid-cols-2 gap-8">
              {product.relatedProducts.map(relId => {
                const relProduct = allProducts.find(p => p.id === relId);
                if (!relProduct) return null;
                return (
                  <motion.div
                    key={relId}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    className="bg-white rounded-[3rem] p-8 border border-medical-gray-200 flex flex-col md:flex-row gap-8 items-center cursor-pointer hover:shadow-2xl transition-all"
                    onClick={() => router.push(`/shop/${relProduct.id}`)}
                  >
                    <div className="w-40 h-40 bg-medical-gray-50 rounded-[2rem] p-4 flex items-center justify-center">
                      <SafeImage src={relProduct.image} alt={relProduct.name} className="w-full h-full drop-shadow-xl" imgClassName="object-contain" />
                    </div>
                    <div className="flex-1 text-center md:text-right">
                      <h4 className="text-xl font-black text-medical-gray-900 mb-2">{relProduct.name}</h4>
                      <p className="text-sm text-medical-gray-500 mb-6">{relProduct.shortDescription || (relProduct.description ? relProduct.description.replace(/<[^>]*>/g, '') : '')}</p>
                      <div className="flex items-center justify-center md:justify-start gap-4">
                        <span className="text-lg font-black text-canina-blue">{relProduct.price}</span>
                        <ArrowRight className="w-4 h-4 text-medical-gray-300" />
                      </div>
                    </div>
                    <div className="w-px h-24 bg-medical-gray-100 hidden md:block" />
                    <div className="flex items-center justify-center gap-1 group">
                      <span className="text-xs font-black text-medical-gray-400 group-hover:text-canina-blue transition-colors">مشاهده محصول مکمل</span>
                      <ChevronLeft className="w-4 h-4 text-medical-gray-300 group-hover:text-canina-blue group-hover:-translate-x-1 transition-all rtl:group-hover:translate-x-1" />
                    </div>
                  </motion.div>
                );
              })}
            </div>
          </section>
        )}
      </div>

      {/* Refill Automation Popup */}
      <AnimatePresence>
        {showRefillModal && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowRefillModal(false)}
              className="absolute inset-0 bg-medical-gray-900/60 backdrop-blur-md"
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="bg-white w-full max-w-lg rounded-[3rem] p-10 relative z-10 shadow-2xl overflow-hidden"
            >
              <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-canina-blue via-blue-400 to-canina-blue" />
              <button
                onClick={() => setShowRefillModal(false)}
                className="absolute top-6 left-6 text-medical-gray-400 hover:text-medical-gray-600 transition-colors"
              >
                <X className="w-6 h-6" />
              </button>

              <div className="text-center">
                <div className="w-20 h-20 bg-canina-blue/10 rounded-[2rem] flex items-center justify-center mx-auto mb-8">
                  <Bell className="w-10 h-10 text-canina-blue animate-bounce" />
                </div>
                <h3 className="text-3xl font-black text-medical-gray-900 mb-4 leading-tight italic">سیستم یادآوری هوشمند</h3>
                <div className="bg-medical-gray-50 border border-medical-gray-100 rounded-3xl p-6 mb-8 text-right">
                  <p className="text-medical-gray-700 leading-relaxed font-medium font-vazir">
                    بر اساس وزن <span className="text-canina-blue font-bold">{toPersian(weight)} کیلوگرمی</span> {activePet ? `برای ${activePet.name}` : 'سگ شما'}، این بسته {toPersian(product.packageSize)} تایی دقیقاً <span className="text-canina-blue font-bold">{toPersian(calculation.duration)} روز</span> دیگر تمام می‌شود.
                  </p>
                  <div className="mt-4 flex items-center gap-2 text-xs font-bold text-medical-gray-500 font-vazir">
                    <ShieldCheck className="w-4 h-4 text-green-500" />
                    آیا مایلید سیستم ۵ روز قبل از اتمام، به شما پیامک یادآوری ارسال کند؟
                  </div>
                </div>

                <div className="flex flex-col gap-3">
                  <button
                    onClick={() => setShowRefillModal(false)}
                    className="w-full bg-canina-blue text-white py-5 rounded-2xl font-black text-lg hover:shadow-xl hover:shadow-canina-blue/20 transition-all flex items-center justify-center gap-2"
                  >
                    <CheckCircle2 className="w-5 h-5" />
                    بله، پیامک یادآوری فعال شود
                  </button>
                  <button
                    onClick={() => setShowRefillModal(false)}
                    className="w-full py-4 text-medical-gray-400 font-bold text-sm hover:text-medical-gray-600 transition-colors"
                  >
                    خیر، فقط محصول را به سبد خرید اضافه کن
                  </button>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Mobile Floating Sticky Bottom Buy Bar */}
      <div className="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-medical-gray-200 p-3 shadow-2xl flex items-center justify-between gap-3 font-vazir" dir="rtl">
        <div>
          <span className="text-[10px] text-medical-gray-400 font-bold block">قیمت نهایی</span>
          <span className="text-base sm:text-lg font-black text-medical-gray-900 font-vazir">
            {isCatalogHidePrices ? "استعلام قیمت" : toPersian(product.price)}
          </span>
        </div>

        <div className="flex items-center gap-2 flex-1 max-w-[240px]">
          {isCartDisabled ? (
            <a
              href={getText('contact_phone_link', `tel:${getText('contact_phone', '02188884444').replace(/[^0-9+]/g, '')}`)}
              className="flex-1 bg-canina-blue text-white py-2.5 px-3 rounded-xl font-black text-xs hover:bg-canina-dark transition-all flex items-center justify-center gap-1.5 shadow-md shadow-canina-blue/20 whitespace-nowrap"
            >
              <Phone className="w-4 h-4" />
              استعلام و مشاوره
            </a>
          ) : isOutOfStock ? (
            <button
              data-testid="product-out-of-stock-btn"
              onClick={() => toast.info("درخواست اطلاع‌رسانی موجودی ثبت شد")}
              className="flex-1 bg-amber-500 text-white py-2.5 px-3 rounded-xl font-black text-xs hover:bg-amber-600 transition-all flex items-center justify-center gap-1.5 shadow-md shadow-amber-500/20 whitespace-nowrap"
            >
              <Bell className="w-4 h-4" />
              موجود شد خبر بده
            </button>
          ) : (
            <>
              <div className="flex items-center gap-1 bg-medical-gray-50 border border-medical-gray-200 rounded-xl p-1 h-11">
                <button
                  onClick={() => setItemQuantity(Math.max(1, itemQuantity - 1))}
                  className="w-7 h-7 flex items-center justify-center rounded-lg bg-white text-medical-gray-900 border border-medical-gray-200 font-bold text-xs"
                >
                  -
                </button>
                <span className="w-5 text-center font-black text-medical-gray-900 text-xs font-vazir">
                  {toPersian(itemQuantity)}
                </span>
                <button
                  onClick={() => setItemQuantity(itemQuantity + 1)}
                  className="w-7 h-7 flex items-center justify-center rounded-lg bg-white text-medical-gray-900 border border-medical-gray-200 font-bold text-xs"
                >
                  +
                </button>
              </div>

              <button
                data-testid="product-add-to-cart-btn"
                onClick={() => {
                  addItem(product, itemQuantity, { quantity: calculation.dailyDose, unit: calculation.unit });
                  toast.success(`${toPersian(itemQuantity)} عدد به سبد خرید اضافه شد`);
                }}
                className="flex-1 bg-canina-blue text-white py-2.5 px-3 rounded-xl font-black text-xs hover:bg-canina-dark transition-all flex items-center justify-center gap-1.5 shadow-md shadow-canina-blue/20 whitespace-nowrap"
              >
                <ShoppingBag className="w-4 h-4" />
                افزودن به سبد
              </button>
            </>
          )}
        </div>
      </div>

      {/* Fullscreen High-Resolution Image Zoom & Inspection Lightbox Modal */}
      <ProductImageZoomModal
        isOpen={isImageZoomOpen}
        onClose={() => setIsImageZoomOpen(false)}
        images={galleryMedia.filter(m => m.type === 'image').map(m => m.url)}
        activeImage={activeMedia?.type === 'image' ? activeMedia.url : (galleryMedia.find(m => m.type === 'image')?.url || product.image || "")}
        onSelectImage={(img) => {
          const foundIdx = galleryMedia.findIndex(m => m.url === img);
          if (foundIdx !== -1) setActiveMediaIndex(foundIdx);
        }}
        productName={product.nameFa || product.name}
      />

      {/* Dedicated Video Modal Player */}
      <VideoModalPlayer
        isOpen={isVideoModalOpen}
        onClose={() => {
          setIsVideoModalOpen(false);
          setActiveMediaForVideoModal(null);
        }}
        video={activeMediaForVideoModal || (product.videoUrl ? {
          title: product.videoTitle || product.name,
          doctor: "کادر علمی و تخصصی کنینا",
          videoUrl: product.videoUrl,
          thumbnail: product.videoCover || product.image,
          description: product.videoDescription || product.description,
        } : null)}
      />
    </div>
  );
}