558 lines
27 KiB
TypeScript
558 lines
27 KiB
TypeScript
"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;
|
||
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-slate-50 text-slate-800 p-5 md:p-7 flex flex-col justify-between select-none box-border" dir="rtl">
|
||
{/* TOC Header */}
|
||
<div className="border-b border-slate-200 pb-3 flex items-center justify-between shrink-0">
|
||
<div>
|
||
<div className="flex items-center gap-1.5 text-[10px] font-black text-canina-blue uppercase tracking-widest">
|
||
<BookOpen className="w-3.5 h-3.5" />
|
||
<span>فهرست تخصصی و راهنمای بالینی</span>
|
||
</div>
|
||
<h2 className="text-xl md:text-2xl font-black font-lalezar text-slate-900 mt-0.5">
|
||
دستهبندیهای کاتالوگ دارویی
|
||
</h2>
|
||
</div>
|
||
<div className="text-left">
|
||
<span className="text-[10px] font-black text-slate-400 block font-mono">CANINA PHARMA</span>
|
||
<span className="text-[9px] font-bold text-amber-600 uppercase">Germany</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Categories List (Compact luxury layout, perfectly fitted) */}
|
||
<div className="my-auto space-y-2.5 py-2 flex-1 flex flex-col justify-center min-h-0">
|
||
{categoriesList.map((cat, idx) => {
|
||
const IconComp = cat.icon;
|
||
return (
|
||
<div
|
||
key={cat.id}
|
||
onClick={() => onJumpToPage && onJumpToPage(cat.startPage)}
|
||
className="bg-white border border-slate-200/90 hover:border-slate-300 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"
|
||
>
|
||
<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-black 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-[9px] font-black text-slate-400 font-mono">
|
||
SECTION 0{idx + 1}
|
||
</span>
|
||
<span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: cat.color }} />
|
||
</div>
|
||
<h3 className="text-xs sm:text-sm font-black text-slate-900 group-hover:text-canina-blue transition-colors font-vazir truncate">
|
||
{cat.name}
|
||
</h3>
|
||
<p className="text-[10px] text-slate-500 font-medium 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-bold 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-canina-blue 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-amber-50/70 border border-amber-200/60 rounded-xl p-2.5 flex items-center gap-2.5 shrink-0">
|
||
<Award className="w-4 h-4 text-amber-600 shrink-0" />
|
||
<p className="text-[10px] text-amber-900 font-bold leading-relaxed">
|
||
تمامی فرآوردههای کنینا آلمان مطابق با مونوگرافهای دارویی فارماکوپه اروپا (Ph. Eur.) و تحت استاندارد GMP تولید میشوند.
|
||
</p>
|
||
</div>
|
||
|
||
{/* TOC Footer */}
|
||
<div className="border-t border-slate-200 pt-2 flex items-center justify-between text-[10px] text-slate-400 font-bold shrink-0">
|
||
<span>راهنمای جامع کاتالوگ دارویی Canina Pharma</span>
|
||
<span className="font-mono">صفحه ۰۲</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 1-PAGE LUXURY PRODUCT PRESENTATION
|
||
// (صفحه اختصاصی و لوکس هر محصول)
|
||
// ==========================================
|
||
if (!product) return null;
|
||
|
||
const formBadge = getFormBadge(product.unit, product.name);
|
||
const speciesBadge = getSpeciesBadge(product.suitableFor);
|
||
const FormIcon = formBadge.icon;
|
||
const SpeciesIcon = speciesBadge.icon;
|
||
const themeColor = categoryMeta?.color || "#0284C7";
|
||
|
||
return (
|
||
<div className="w-full h-full bg-gradient-to-b from-slate-50 via-white to-slate-50 text-slate-800 p-4 sm:p-5 md:p-6 flex flex-col justify-between select-none box-border overflow-hidden relative" dir="rtl">
|
||
{/* Decorative luxury gradient tint border on top edge */}
|
||
<div
|
||
className="absolute top-0 right-0 left-0 h-1.5 opacity-80"
|
||
style={{ backgroundColor: themeColor }}
|
||
/>
|
||
|
||
{/* 1. Header Bar: Category, Species, Form, ArtNo */}
|
||
<div className="border-b border-slate-200/80 pb-2 flex items-center justify-between gap-2 shrink-0 pt-0.5">
|
||
|
||
{/* Category Pill */}
|
||
<div className="flex items-center gap-1.5 min-w-0">
|
||
<span
|
||
className="w-2.5 h-2.5 rounded-full shrink-0 shadow-2xs"
|
||
style={{ backgroundColor: themeColor }}
|
||
/>
|
||
<span className="text-[10px] sm:text-[11px] font-black uppercase tracking-wider text-slate-800 font-vazir truncate whitespace-nowrap">
|
||
{product.category}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Product Badges (Strictly whitespace-nowrap) */}
|
||
<div className="flex items-center gap-1 sm:gap-1.5 text-[9px] font-bold shrink-0">
|
||
<span className="bg-white text-slate-700 px-2 py-0.5 rounded-md flex items-center gap-1 border border-slate-200 shadow-3xs whitespace-nowrap">
|
||
{speciesBadge.isBoth ? (
|
||
<span className="flex items-center gap-0.5">
|
||
<Dog className="w-3 h-3 text-slate-500 shrink-0" />
|
||
<Cat className="w-3 h-3 text-slate-500 shrink-0" />
|
||
</span>
|
||
) : (
|
||
<SpeciesIcon className="w-3 h-3 text-slate-500 shrink-0" />
|
||
)}
|
||
<span className="whitespace-nowrap">{speciesBadge.label}</span>
|
||
</span>
|
||
<span className="bg-white text-slate-700 px-2 py-0.5 rounded-md flex items-center gap-1 border border-slate-200 shadow-3xs whitespace-nowrap">
|
||
<FormIcon className="w-3 h-3 text-slate-500 shrink-0" />
|
||
<span className="whitespace-nowrap">{formBadge.label}</span>
|
||
</span>
|
||
<span className="bg-blue-50/90 text-canina-blue font-mono px-2 py-0.5 rounded-md border border-blue-100/90 whitespace-nowrap font-bold">
|
||
Art-Nr: {product.artNo}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 2. Main Body Content (Luxury grid fitted strictly without overflow) */}
|
||
<div className="flex-1 min-h-0 flex flex-col justify-between py-1.5 space-y-1.5">
|
||
|
||
{/* Top Product Hero Showcase (Image + Titles + Special Badge) */}
|
||
<div className="flex items-center gap-3 bg-white border border-slate-200/90 rounded-2xl p-2.5 shrink-0 shadow-2xs relative overflow-hidden">
|
||
<div
|
||
className="absolute -top-8 -right-8 w-24 h-24 rounded-full opacity-10 blur-xl pointer-events-none"
|
||
style={{ backgroundColor: themeColor }}
|
||
/>
|
||
|
||
{/* Studio Image Box */}
|
||
<div className="w-20 h-20 sm:w-24 sm:h-24 bg-slate-50/80 rounded-xl border border-slate-200/70 p-1.5 flex items-center justify-center shrink-0 relative shadow-inner">
|
||
<SafeImage
|
||
src={product.image}
|
||
alt={product.name}
|
||
className="w-full h-full"
|
||
imgClassName="object-contain max-h-16 sm:max-h-20 filter drop-shadow-md"
|
||
/>
|
||
{product.unit && (
|
||
<span className="absolute bottom-1 right-1 bg-slate-900/90 text-white font-mono text-[7px] sm:text-[8px] font-bold px-1.5 py-0.2 rounded shadow-2xs whitespace-nowrap">
|
||
{product.unit}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Title & Scientific Tagline */}
|
||
<div className="min-w-0 flex-1 space-y-0.5">
|
||
{product.specialBadge && (
|
||
<span
|
||
className="text-[8px] font-black px-2 py-0.5 rounded-full text-white inline-block shadow-2xs whitespace-nowrap mb-0.5"
|
||
style={{ backgroundColor: themeColor }}
|
||
>
|
||
★ {product.specialBadge}
|
||
</span>
|
||
)}
|
||
<h2 className="text-sm sm:text-base font-black text-slate-900 font-vazir leading-tight truncate">
|
||
{product.name}
|
||
</h2>
|
||
{product.scientificTagline && (
|
||
<p className="text-[9px] sm:text-[10px] text-slate-600 font-bold italic truncate">
|
||
{product.scientificTagline}
|
||
</p>
|
||
)}
|
||
<p className="text-[9px] text-slate-500 font-medium line-clamp-2 leading-relaxed text-justify">
|
||
{product.shortDescription || (product.description ? product.description.replace(/<[^>]*>/g, '') : '')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Clinical Indications & Symptoms */}
|
||
{product.symptoms && product.symptoms.length > 0 && (
|
||
<div className="space-y-1 shrink-0">
|
||
<span className="text-[8px] font-black text-slate-400 uppercase tracking-widest block whitespace-nowrap">
|
||
موارد مصرف و نشانههای بالینی:
|
||
</span>
|
||
<div className="flex flex-wrap gap-1">
|
||
{product.symptoms.slice(0, 4).map((symptom, i) => (
|
||
<span
|
||
key={i}
|
||
className="bg-red-50 text-red-900 border border-red-200/80 rounded-md px-1.5 py-0.5 text-[8.5px] font-bold whitespace-nowrap shadow-3xs"
|
||
>
|
||
• {symptom}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Active Ingredients & Composition Table */}
|
||
{product.main_ingredients && product.main_ingredients.length > 0 && (
|
||
<div className="bg-slate-50/90 border border-slate-200/80 rounded-xl p-2 space-y-1 shrink-0">
|
||
<div className="flex items-center gap-1 text-[8.5px] font-black text-canina-blue uppercase whitespace-nowrap">
|
||
<Layers className="w-3 h-3 shrink-0" />
|
||
<span>ترکیبات موثره و فرمولاسیون دارویی:</span>
|
||
</div>
|
||
<div className="flex flex-wrap gap-1">
|
||
{product.main_ingredients.slice(0, 4).map((ing, idx) => (
|
||
<span
|
||
key={idx}
|
||
className="bg-white text-slate-800 border border-slate-200 rounded px-1.5 py-0.5 text-[8.5px] font-bold shadow-3xs whitespace-nowrap"
|
||
>
|
||
{ing}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Clinical Dosage Protocol */}
|
||
{product.dosage_logic && (
|
||
<div className="bg-amber-50/80 border border-amber-200/80 rounded-xl p-2 space-y-0.5 shrink-0">
|
||
<div className="flex items-center gap-1 text-amber-900 font-black text-[8.5px] whitespace-nowrap">
|
||
<ShieldCheck className="w-3 h-3 text-amber-600 shrink-0" />
|
||
<span>پروتکل بالینی تجویز و دوز مصرف:</span>
|
||
</div>
|
||
<p className="text-[8.5px] text-amber-950 font-bold leading-relaxed line-clamp-2">
|
||
{product.dosage_logic}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Specialist Endorsement */}
|
||
{product.specialist && product.specialist.name && (
|
||
<div className="bg-white border border-slate-200/80 rounded-xl p-2 flex items-center gap-2 shrink-0 shadow-3xs">
|
||
<div className="w-7 h-7 rounded-full bg-canina-blue/10 border border-canina-blue/20 text-canina-blue flex items-center justify-center font-black text-xs font-mono shadow-3xs shrink-0 overflow-hidden">
|
||
{product.specialist.image ? (
|
||
<img
|
||
src={product.specialist.image}
|
||
alt={product.specialist.name}
|
||
className="w-full h-full object-cover"
|
||
onError={(e) => {
|
||
(e.target as HTMLElement).style.display = 'none';
|
||
}}
|
||
/>
|
||
) : (
|
||
<Stethoscope className="w-3.5 h-3.5" />
|
||
)}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-1 truncate">
|
||
<span className="text-[8.5px] font-black text-slate-900 truncate">{product.specialist.name}</span>
|
||
{product.specialist.title && (
|
||
<span className="text-[7.5px] text-slate-500 truncate font-medium">({product.specialist.title})</span>
|
||
)}
|
||
</div>
|
||
{product.specialist.message && (
|
||
<p className="text-[8px] text-slate-600 italic truncate mt-0.2">
|
||
«{product.specialist.message}»
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
|
||
{/* 3. Page Footer */}
|
||
<div className="border-t border-slate-200/80 pt-1.5 flex items-center justify-between text-[8.5px] text-slate-400 font-bold shrink-0">
|
||
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
||
<Award className="w-3 h-3 text-amber-500 shrink-0" />
|
||
<span>Canina Pharma Germany • استانداردهای بالینی GMP</span>
|
||
</div>
|
||
<span className="font-mono text-slate-600 bg-slate-100 px-2 py-0.2 rounded-md whitespace-nowrap font-bold">
|
||
صفحه {pageNumber < 10 ? `۰${pageNumber}` : pageNumber} از {totalPages}
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
}
|