"use client";
import React from "react";
import Image from "next/image";
import SafeImage from "../SafeImage";
import { Product } from "../../lib/data/products";
import { useSettingsStore } from "../../lib/store/settingsStore";
import { 
  Sparkles, 
  ChevronLeft, 
  ShieldCheck, 
  Dog, 
  Cat, 
  Pill, 
  Droplet, 
  Package, 
  Award, 
  Activity, 
  BookOpen,
  CheckCircle2,
  Stethoscope,
  Heart,
  Layers,
  Check
} from "lucide-react";

export interface CategoryMeta {
  id: string;
  name: string;
  color: string; // پایه تیره
  lightBg: string; // پنل روشن
  borderBg: string; // اکسنت
  accentColor?: string;
  secondaryColor?: string;
  icon: React.ElementType;
  tagline: string;
  startPage: number;
}

interface CatalogPageSpreadProps {
  pageNumber: number;
  totalPages: number;
  pageType: "cover" | "toc" | "product" | "backcover" | "category";
  categoryMeta?: CategoryMeta;
  product?: Product;
  products?: Product[];
  onSelectProduct?: (product: Product) => void;
  onJumpToPage?: (pageNum: number) => void;
  categoriesList?: CategoryMeta[];
}

// Helper to determine product form icon & label
const getFormBadge = (unit?: string, name?: string) => {
  const str = ((unit || "") + " " + (name || "")).toLowerCase();
  if (str.includes("paste") || str.includes("خمیر")) return { label: "خمیر دارویی", icon: Droplet };
  if (str.includes("tab") || str.includes("قرص")) return { label: "قرص خوراکی", icon: Pill };
  if (str.includes("öl") || str.includes("روغن")) return { label: "روغن خالص", icon: Droplet };
  if (str.includes("pulver") || str.includes("پودر") || str.includes("mehl")) return { label: "پودر خوراکی", icon: Package };
  if (str.includes("gel") || str.includes("ژل")) return { label: "ژل بهداشتی", icon: Droplet };
  if (str.includes("spray") || str.includes("اسپری") || str.includes("shocker")) return { label: "اسپری موضعی", icon: Droplet };
  return { label: "مکمل دارویی", icon: Package };
};

// Helper for pet target species icon
const getSpeciesBadge = (suitableFor?: string) => {
  const s = (suitableFor || "").trim().toLowerCase();
  const isDog = s === "سگ" || s.includes("سگ") || s.includes("dog");
  const isCat = s === "گربه" || s.includes("گربه") || s.includes("cat");
  const isBoth = s.includes("هر دو") || s.includes("both") || (isDog && isCat);

  if (isBoth) return { label: "سگ و گربه", isBoth: true, icon: Dog, iconCat: Cat };
  if (isCat) return { label: "مخصوص گربه", isBoth: false, icon: Cat };
  return { label: "مخصوص سگ", isBoth: false, icon: Dog };
};

export default function CatalogPageSpread({
  pageNumber,
  totalPages,
  pageType,
  categoryMeta,
  product,
  onJumpToPage,
  categoriesList = [],
}: CatalogPageSpreadProps) {
  const logoUrl = useSettingsStore(state => state.getText('site_logo', ''));

  // ==========================================
  // 1. LUXURY FRONT COVER (طراحی لوکس جلد)
  // ==========================================
  if (pageType === "cover") {
    return (
      <div className="w-full h-full bg-gradient-to-br from-slate-950 via-[#0a192f] to-[#040d1a] text-white p-6 md:p-8 flex flex-col justify-between relative overflow-hidden select-none box-border" dir="rtl">
        {/* Luxury Background Accents & Gold Borders */}
        <div className="absolute inset-0 bg-[radial-gradient(#d4af37_1px,transparent_1px)] [background-size:28px_28px] opacity-[0.07] pointer-events-none" />
        <div className="absolute -top-20 -right-20 w-80 h-80 bg-blue-600/15 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute -bottom-20 -left-20 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
        
        {/* Outer Gold Border Frame */}
        <div className="absolute inset-3 border border-amber-400/20 rounded-2xl pointer-events-none" />
        <div className="absolute inset-4 border border-white/5 rounded-xl pointer-events-none" />

        {/* Top Header */}
        <div className="relative z-10 flex items-center justify-between border-b border-white/10 pb-3">
          <div className="flex items-center gap-3">
            {logoUrl ? (
              <Image
                src={logoUrl}
                alt="Canina Pharma"
                width={120}
                height={40}
                className="h-9 w-auto object-contain shrink-0"
                unoptimized={typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'))}
              />
            ) : (
              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 text-slate-950 flex items-center justify-center font-black text-base shadow-lg font-mono">
                CANINA
              </div>
            )}
            <div>
              <span className="text-base sm:text-lg font-black font-lalezar tracking-wide text-white block">
                Canina Pharma Germany
              </span>
              <span className="text-[8px] sm:text-[9px] text-amber-300 font-bold uppercase tracking-widest block font-mono">
                🇩🇪 100% Made in Germany • Est. 1984
              </span>
            </div>
          </div>

          <div className="px-2.5 py-1 bg-white/10 rounded-full text-[9px] sm:text-[10px] font-bold text-amber-300 border border-amber-400/30 flex items-center gap-1.5 whitespace-nowrap">
            <Award className="w-3 h-3 text-amber-400 shrink-0" />
            <span>نسخه رسمی ۲۰۲۶</span>
          </div>
        </div>

        {/* Center Hero Title & Visual */}
        <div className="relative z-10 my-auto text-center space-y-3 py-1">
          
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-400/10 border border-amber-400/30 text-amber-300 text-[9px] sm:text-[10px] font-black whitespace-nowrap">
            <Sparkles className="w-3.5 h-3.5" />
            <span>OFFICIAL VETERINARY & CLINICAL CATALOG</span>
          </div>

          <div className="space-y-1.5">
            <h1 className="text-xl sm:text-2xl md:text-3xl font-black font-lalezar leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-100 via-white to-amber-300">
              کاتالوگ تخصصی و راهنمای بالینی مکمل‌های دارویی کنینا
            </h1>
            <p className="text-[10px] sm:text-[11px] text-slate-300 font-medium max-w-md mx-auto leading-relaxed">
              مرجع رسمی مکمل‌های درمانی حیوانات خانگی با استانداردهای داروسازی آلمان (GMP) و تاییدیه‌های ارتوپدی و پوست
            </p>
          </div>

          {/* Hero Render Frame: Brand Identity with dynamic logo */}
          <div className="pt-1 flex justify-center">
            <div className="w-36 h-36 md:w-44 md:h-44 rounded-2xl bg-gradient-to-b from-white/10 to-white/5 border border-white/15 backdrop-blur-md p-4 flex flex-col items-center justify-center shadow-2xl relative">
              {logoUrl ? (
                <Image
                  src={logoUrl}
                  alt="Canina Pharma"
                  width={140}
                  height={140}
                  className="max-h-16 w-auto object-contain mb-2 drop-shadow-xl"
                  unoptimized={typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'))}
                />
              ) : (
                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-500 text-slate-950 flex items-center justify-center font-black text-2xl font-mono shadow-xl mb-2">
                  CANINA
                </div>
              )}
              <span className="text-base sm:text-lg font-black font-lalezar text-white tracking-wide">
                Canina Pharma
              </span>
              <span className="text-[8px] sm:text-[9px] text-amber-300 font-bold uppercase tracking-widest font-mono mt-0.5">
                Germany • Est. 1984
              </span>
              <div className="absolute -bottom-2.5 bg-gradient-to-r from-amber-400 to-amber-500 text-slate-950 font-black text-[8px] sm:text-[9px] px-3 py-0.5 rounded-full shadow-md whitespace-nowrap">
                Pharma Grade Certified
              </div>
            </div>
          </div>

          {/* Highlights Pills */}
          <div className="flex flex-wrap items-center justify-center gap-2 pt-1 text-[10px] text-slate-300">
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">🦴 مفاصل و اسکلت</span>
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">✨ پوست و مو</span>
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">🛡️ ایمنی و گوارش</span>
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">⚡ ویتامین‌ها</span>
          </div>
        </div>

        {/* Bottom Footer */}
        <div className="relative z-10 border-t border-white/10 pt-3 flex items-center justify-between text-[10px] text-slate-400 font-bold">
          <div className="flex items-center gap-1.5">
            <ShieldCheck className="w-3.5 h-3.5 text-amber-400" />
            <span>نمایندگی انحصاری Canina Pharma Germany در ایران</span>
          </div>
          <span className="font-mono text-slate-400">صفحه ۰۱</span>
        </div>
      </div>
    );
  }

  // ==========================================
  // 2. TABLE OF CONTENTS (فهرست دسته‌بندی‌ها)
  // ==========================================
  if (pageType === "toc") {
    return (
      <div className="w-full h-full bg-[#FAF8F5] text-slate-900 p-5 md:p-7 flex flex-col justify-between select-none box-border" dir="rtl" style={{ fontFamily: "'Vazirmatn', sans-serif" }}>
        {/* TOC Header */}
        <div className="border-b pb-3 flex items-center justify-between shrink-0" style={{ borderColor: "rgba(18,33,31,0.1)" }}>
          <div>
            <div className="flex items-center gap-1.5 text-[9.5px] font-black uppercase tracking-widest text-[#C88A3F]">
              <BookOpen className="w-3.5 h-3.5" />
              <span>فهرست تخصصی و راهنمای بالینی</span>
            </div>
            <h2 className="text-xl md:text-2xl font-black text-slate-900 mt-0.5 tracking-tight font-vazir">
              دسته‌بندی‌های کاتالوگ دارویی
            </h2>
          </div>
          <div className="text-left">
            <span className="text-[10px] font-medium text-slate-400 block font-mono tracking-wider">CANINA PHARMA</span>
            <span className="text-[9px] font-medium text-[#C88A3F] uppercase">Germany</span>
          </div>
        </div>

        {/* Categories List (Compact luxury layout, perfectly fitted) */}
        <div className="my-auto space-y-2 py-2 flex-1 flex flex-col justify-center min-h-0">
          {categoriesList.map((cat, idx) => {
            const IconComp = cat.icon;
            const accent = cat.accentColor || cat.borderBg || "#C88A3F";
            const sec = cat.secondaryColor || "#6B8F71";
            return (
              <div
                key={cat.id}
                onClick={() => onJumpToPage && onJumpToPage(cat.startPage)}
                className="bg-white border rounded-xl p-2.5 sm:p-3 flex items-center justify-between gap-3 shadow-2xs hover:shadow-md transition-all cursor-pointer group"
                style={{ borderColor: "rgba(18,33,31,0.08)" }}
              >
                <div className="flex items-center gap-3 min-w-0">
                  {/* Category Color Icon */}
                  <div
                    className="w-9 h-9 rounded-lg flex items-center justify-center text-white font-medium shadow-xs shrink-0 group-hover:scale-105 transition-transform"
                    style={{ backgroundColor: cat.color }}
                  >
                    <IconComp className="w-4 h-4" />
                  </div>

                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span className="text-[8.5px] font-medium font-mono" style={{ color: sec }}>
                        SECTION 0{idx + 1}
                      </span>
                      <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: accent }} />
                    </div>
                    <h3 className="text-xs sm:text-sm font-black text-slate-900 group-hover:text-[#C88A3F] transition-colors font-vazir truncate">
                      {cat.name}
                    </h3>
                    <p className="text-[9.5px] text-slate-500 font-normal truncate mt-0.5">
                      {cat.tagline}
                    </p>
                  </div>
                </div>

                <div className="flex items-center gap-2 shrink-0">
                  <div className="text-left">
                    <span className="text-[8px] text-slate-400 font-normal block">صفحه</span>
                    <span className="text-xs font-black text-slate-900 font-mono">
                      {cat.startPage < 10 ? `۰${cat.startPage}` : cat.startPage}
                    </span>
                  </div>
                  <div className="w-6 h-6 rounded-full bg-slate-100 group-hover:bg-slate-900 group-hover:text-white text-slate-400 flex items-center justify-center transition-colors">
                    <ChevronLeft className="w-3.5 h-3.5" />
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Quality Seal Note */}
        <div className="bg-[#FAF0DE]/60 border border-[#D97D3D]/20 rounded-xl p-2.5 flex items-center gap-2.5 shrink-0">
          <Award className="w-4 h-4 text-[#D97D3D] shrink-0" />
          <p className="text-[9.5px] text-[#2B1810] font-medium leading-relaxed">
            تمامی فرآورده‌های کنینا آلمان مطابق با مونوگراف‌های دارویی فارماکوپه اروپا (Ph. Eur.) و تحت استاندارد GMP تولید می‌شوند.
          </p>
        </div>

        {/* TOC Footer */}
        <div className="border-t pt-2 flex items-center justify-between text-[9.5px] text-slate-400 font-normal shrink-0" style={{ borderColor: "rgba(18,33,31,0.08)" }}>
          <span>راهنمای جامع کاتالوگ دارویی Canina Pharma</span>
          <span className="font-mono text-[#C88A3F]">صفحه ۰۲</span>
        </div>
      </div>
    );
  }

  // ==========================================
  // 3. LUXURY BACK COVER (شناسنامه پشت جلد)
  // ==========================================
  if (pageType === "backcover") {
    return (
      <div className="w-full h-full bg-gradient-to-br from-slate-950 via-[#0a192f] to-[#040d1a] text-white p-6 md:p-8 flex flex-col justify-between relative overflow-hidden select-none box-border" dir="rtl">
        <div className="absolute inset-3 border border-amber-400/20 rounded-2xl pointer-events-none" />
        <div className="absolute -top-24 -left-24 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />

        <div className="relative z-10 border-b border-white/10 pb-3 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Award className="w-4 h-4 text-amber-400" />
            <span className="text-[10px] font-black uppercase tracking-widest text-amber-400">شناسنامه و استانداردهای دارویی</span>
          </div>
          <span className="text-[10px] font-mono text-slate-400">صفحه {totalPages}</span>
        </div>

        <div className="relative z-10 my-auto space-y-5 text-center max-w-sm mx-auto">
          <div className="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-amber-400 to-amber-500 text-slate-950 flex items-center justify-center font-black text-2xl shadow-xl font-mono">
            CP
          </div>

          <div className="space-y-1">
            <h2 className="text-2xl font-black font-lalezar text-white">Canina Pharma GmbH</h2>
            <p className="text-[10px] text-slate-400 font-mono">Made in Germany • Quality Guarantee</p>
          </div>

          {/* Credentials Card */}
          <div className="grid grid-cols-2 gap-3 text-right bg-white/5 border border-white/10 p-4 rounded-xl text-[10px] space-y-1">
            <div>
              <span className="text-slate-400 block">کشور سازنده:</span>
              <span className="font-black text-amber-300 font-mono">Germany (آلمان)</span>
            </div>
            <div>
              <span className="text-slate-400 block">گواهی کیفیت:</span>
              <span className="font-black text-amber-300 font-mono">GMP & Vet Certified</span>
            </div>
            <div>
              <span className="text-slate-400 block">وبسایت بین‌المللی:</span>
              <span className="font-black text-white font-mono">canina.de</span>
            </div>
            <div>
              <span className="text-slate-400 block">واردکننده انحصاری:</span>
              <span className="font-black text-white">کنینا فارما ایران</span>
            </div>
          </div>

          <div className="flex items-center justify-center gap-3 text-[10px] text-slate-400">
            <span className="flex items-center gap-1"><Check className="w-3 h-3 text-emerald-400" /> ۱۰۰٪ طبیعی</span>
            <span className="flex items-center gap-1"><Check className="w-3 h-3 text-emerald-400" /> بدون افزودنی شیمیایی</span>
            <span className="flex items-center gap-1"><Check className="w-3 h-3 text-emerald-400" /> بدون تست روی حیوانات</span>
          </div>
        </div>

        <div className="relative z-10 border-t border-white/10 pt-3 text-center text-[9px] text-slate-500 font-mono">
          © 2026 Canina Pharma GmbH. All Rights Reserved.
        </div>
      </div>
    );
  }

  // ==========================================
  // 4. DEDICATED LUXURY PHARMACEUTICAL MONOGRAPH PRODUCT PRESENTATION
  // (صفحه اختصاصی، لوکس و مونوگراف کاتالوگ دارویی اروپایی)
  // ==========================================
  if (!product) return null;

  const formBadge = getFormBadge(product.unit, product.name);
  const speciesBadge = getSpeciesBadge(product.suitableFor);

  // Locked 5-category European luxury palette
  const baseDark = categoryMeta?.color || "#12211F";
  const panelLight = categoryMeta?.lightBg || "#F3EEE0";
  const accentColor = categoryMeta?.accentColor || categoryMeta?.borderBg || "#C88A3F";
  const secondaryColor = categoryMeta?.secondaryColor || "#6B8F71";
  const CategoryIcon = categoryMeta?.icon || Activity;

  // Alternating layout dynamics based on page number (odd vs even pages)
  const isEvenPage = pageNumber % 2 === 0;

  // Clean description without HTML
  const cleanDescription = (product.shortDescription || (product.description ? product.description.replace(/<[^>]*>/g, '') : '')).trim();

  // Parse dosage into sequential steps if available
  const dosageRaw = (product.dosage_logic || product.feedingAdvice || "").trim();
  const dosageSteps = dosageRaw
    ? dosageRaw
        .split(/(?:؛|\. |\n| - )/g)
        .map(s => s.trim())
        .filter(s => s.length > 5)
        .slice(0, 3)
    : [];

  return (
    <div 
      className="w-full h-full flex flex-col justify-between select-none box-border overflow-hidden relative"
      style={{
        backgroundColor: panelLight,
        color: "#18201E",
        fontFamily: "'Vazirmatn', sans-serif",
        direction: "rtl"
      }}
    >
      {/* Category Delicate Line Watermark in Background */}
      <div 
        className="absolute -bottom-14 -left-14 w-64 h-64 pointer-events-none opacity-[0.04] transition-all"
        style={{ color: baseDark }}
      >
        <CategoryIcon className="w-full h-full" strokeWidth={1} />
      </div>

      {/* Subtle Luxury Gradient Ambient Aura */}
      <div 
        className="absolute top-0 right-0 w-72 h-72 rounded-full pointer-events-none blur-3xl opacity-[0.08]"
        style={{ background: `radial-gradient(circle, ${accentColor} 0%, transparent 70%)` }}
      />

      {/* Top Accent Rim (Ultra-thin luxury rule) */}
      <div 
        className="h-1 w-full shrink-0"
        style={{ backgroundColor: accentColor }}
      />

      {/* 1. Header Bar: Minimal Monograph Classification */}
      <div className="px-5 pt-3 pb-2 flex items-center justify-between border-b shrink-0" style={{ borderColor: "rgba(0,0,0,0.06)" }}>
        <div className="flex items-center gap-2.5">
          <div 
            className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 border"
            style={{ 
              borderColor: `${accentColor}55`, 
              backgroundColor: `${accentColor}12`,
              color: accentColor 
            }}
          >
            <CategoryIcon className="w-3.5 h-3.5" />
          </div>
          <div>
            <span className="text-[10px] font-medium block leading-none" style={{ color: secondaryColor }}>
              {product.category}
            </span>
            <span className="text-[8px] font-mono tracking-widest opacity-40 block mt-0.5" style={{ color: baseDark }}>
              CANINA VETERINARY DOSSIER
            </span>
          </div>
        </div>

        <div className="flex items-center gap-2 text-left">
          <span 
            className="text-[9px] font-mono font-medium px-2 py-0.5 rounded-full border"
            style={{ 
              borderColor: `${accentColor}40`, 
              color: accentColor,
              backgroundColor: `${accentColor}08`
            }}
          >
            Art-Nr: {product.artNo}
          </span>
          <span className="text-[9px] font-medium opacity-60 hidden sm:inline" style={{ color: baseDark }}>
            {speciesBadge.label}
          </span>
        </div>
      </div>

      {/* 2. Main Body Content: Asymmetric editorial composition */}
      <div className="flex-1 min-h-0 px-5 py-2 flex flex-col justify-between">
        
        {/* Hero Product Stage: Studio Lighting Mockup + Three-Tier Typography */}
        <div className={`flex items-center gap-4 py-1 shrink-0 ${isEvenPage ? 'flex-row' : 'flex-row-reverse'}`}>
          
          {/* Studio Packshot with Realistic Lighting & Depth */}
          <div className="relative w-28 h-28 sm:w-32 sm:h-32 shrink-0 flex items-center justify-center">
            {/* Ambient Studio Spotlight Aura */}
            <div 
              className="absolute inset-0 rounded-full blur-xl pointer-events-none opacity-20"
              style={{ background: `radial-gradient(circle, ${accentColor} 0%, transparent 70%)` }}
            />
            {/* Thin Aesthetic Ring behind product */}
            <div 
              className="absolute w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-dashed pointer-events-none opacity-30"
              style={{ borderColor: accentColor }}
            />
            
            <div className="relative z-10 w-full h-full flex items-center justify-center">
              <SafeImage
                src={product.image}
                alt={product.name}
                className="w-full h-full"
                imgClassName="object-contain max-h-24 sm:max-h-28 filter drop-shadow-[0_12px_18px_rgba(0,0,0,0.22)]"
              />
            </div>
            
            {product.unit && (
              <span 
                className="absolute bottom-0 right-1 text-[8px] font-mono font-medium px-1.5 py-0.5 rounded shadow-xs"
                style={{ backgroundColor: baseDark, color: panelLight }}
              >
                {product.unit}
              </span>
            )}
          </div>

          {/* Three-Tier Typography: Black Name, Advertising Subtitle, Editorial Body */}
          <div className="min-w-0 flex-1 space-y-1">
            {product.specialBadge && (
              <span 
                className="text-[8px] font-medium tracking-wide inline-block px-2 py-0.5 rounded-full mb-0.5 border"
                style={{ 
                  color: baseDark,
                  borderColor: `${accentColor}60`,
                  backgroundColor: `${accentColor}18`
                }}
              >
                {product.specialBadge}
              </span>
            )}

            <h2 
              className="text-base sm:text-lg font-black leading-tight truncate font-vazir tracking-tight"
              style={{ color: baseDark }}
            >
              {product.name}
            </h2>

            <p 
              className="text-[10px] sm:text-[11px] font-medium leading-snug line-clamp-2"
              style={{ color: accentColor }}
            >
              {product.scientificTagline || "فرمولاسیون دارویی استاندارد جهت ارتقای سلامت زیستی و بالینی پت"}
            </p>

            <p 
              className="text-[9px] font-normal leading-relaxed opacity-75 line-clamp-2 text-justify"
              style={{ color: baseDark }}
            >
              {cleanDescription}
            </p>
          </div>
        </div>

        {/* Section 1: Clinical Indications (Flowing text with refined dot separators, no colored badges) */}
        {product.symptoms && product.symptoms.length > 0 && (
          <div className="pt-1 pb-0.5 shrink-0 border-t" style={{ borderColor: "rgba(0,0,0,0.06)" }}>
            <span className="text-[9px] font-black block mb-0.5" style={{ color: accentColor }}>
              موارد مصرف بالینی
            </span>
            <p className="text-[9px] font-normal leading-relaxed text-justify m-0" style={{ color: "#2B3633" }}>
              {product.symptoms.map((symptom, i) => (
                <React.Fragment key={i}>
                  {i > 0 && (
                    <span 
                      className="inline-block w-1.5 h-1.5 rounded-full mx-1.5 align-middle"
                      style={{ backgroundColor: accentColor }}
                    />
                  )}
                  <span>{symptom}</span>
                </React.Fragment>
              ))}
            </p>
          </div>
        )}

        {/* Section 2: Active Formulation (Short elegant paragraph, no tables) */}
        {product.main_ingredients && product.main_ingredients.length > 0 && (
          <div className="pt-1 pb-0.5 shrink-0 border-t" style={{ borderColor: "rgba(0,0,0,0.06)" }}>
            <span className="text-[9px] font-black block mb-0.5" style={{ color: accentColor }}>
              ترکیبات و فرمولاسیون
            </span>
            <p className="text-[9px] font-normal leading-relaxed text-justify m-0" style={{ color: "#2B3633" }}>
              {product.main_ingredients.join("، ")}.
            </p>
          </div>
        )}

        {/* Section 3: Clinical Dosage Protocol (Refined sequential numbering ۰۱, ۰۲ or single note) */}
        {dosageRaw && (
          <div className="pt-1 pb-1 shrink-0 border-t" style={{ borderColor: "rgba(0,0,0,0.06)" }}>
            <span className="text-[9px] font-black block mb-1" style={{ color: accentColor }}>
              پروتکل دوز و نحوه مصرف
            </span>
            {dosageSteps.length > 1 ? (
              <div className="space-y-0.5">
                {dosageSteps.map((step, idx) => {
                  const numStr = idx === 0 ? "۰۱" : idx === 1 ? "۰۲" : "۰۳";
                  return (
                    <div key={idx} className="flex items-baseline gap-1.5 text-[8.5px] leading-relaxed">
                      <span className="font-mono font-bold shrink-0 text-[9px]" style={{ color: secondaryColor }}>
                        {numStr}
                      </span>
                      <span className="font-normal opacity-90" style={{ color: "#2B3633" }}>
                        {step}
                      </span>
                    </div>
                  );
                })}
              </div>
            ) : (
              <p className="text-[8.5px] font-normal leading-relaxed text-justify m-0" style={{ color: "#2B3633" }}>
                {dosageRaw}
              </p>
            )}
          </div>
        )}

      </div>

      {/* 3. Page Footer: Minimal luxury accreditation & page number */}
      <div 
        className="px-5 py-2 border-t flex items-center justify-between text-[8.5px] font-normal shrink-0"
        style={{ borderColor: "rgba(0,0,0,0.06)", color: "rgba(24, 32, 30, 0.6)" }}
      >
        <span>
          Canina Pharma Germany • Ph. Eur. & GMP Certified
        </span>
        <span className="font-mono font-medium" style={{ color: accentColor }}>
          صفحه {pageNumber < 10 ? `۰${pageNumber}` : pageNumber} از {totalPages}
        </span>
      </div>

    </div>
  );
}