616 lines
29 KiB
TypeScript
616 lines
29 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; // اکسنت
|
||
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>
|
||
);
|
||
}
|