@ -1,6 +1,6 @@
"use client" ;
import React , { useState , useRef , useEffect } from "react" ;
import { Search , ChevronDown , Menu , X , Pill , ShieldCheck , HeartPulse , Sparkles , ShoppingBag , User , PlusCircle , Check , Building2 , LogIn , Wallet , LogOut , MapPin , FileHeart , Dog , Cat } from "lucide-react" ;
import { Search , ChevronDown , Menu , X , Pill , ShieldCheck , HeartPulse , Sparkles , ShoppingBag , User , PlusCircle , Check , Building2 , LogIn , Wallet , LogOut , MapPin , FileHeart , Dog , Cat , BookOpen , FileText , Video , Award , PhoneCall , HelpCircle , Activity } from "lucide-react" ;
import { motion , AnimatePresence } from "motion/react" ;
import Link from "next/link" ;
import { useCartStore } from "../lib/store/cartStore" ;
@ -37,13 +37,14 @@ export default function Header({
onB2BOpen : ( ) = > void
} ) {
const [ isMegaMenuOpen , setIsMegaMenuOpen ] = useState ( false ) ;
const [ activeDropdown , setActiveDropdown ] = useState < string | null > ( null ) ;
const [ isSearchFocused , setIsSearchFocused ] = useState ( false ) ;
const [ isAuthModalOpen , setIsAuthModalOpen ] = useState ( false ) ;
const [ isPrescriptionModalOpen , setIsPrescriptionModalOpen ] = useState ( false ) ;
const [ isPetSwitcherOpen , setIsPetSwitcherOpen ] = useState ( false ) ;
const [ searchQuery , setSearchQuery ] = useState ( "" ) ;
const [ isMobileMenuOpen , setIsMobileMenuOpen ] = useState ( false ) ;
const [ isMobileSolutionsOpen , setIsMobileSolutionsOpen ] = useState ( false ) ;
const [ menuItems , setMenuItems ] = useState < {
id : string ;
title : string ;
@ -75,8 +76,8 @@ export default function Header({
solutions : [ "ریزش مو" , "خشکی پوست" , "خارش" , "جرم دندان" , "سوزش چشم" ]
}
] ) ;
const petMenuRef = useRef < HTMLDivElement > ( null ) ;
const petMenuRef = useRef < HTMLDivElement > ( null ) ;
const { getTotalItems } = useCartStore ( ) ;
const { pets , activePetId , setActivePet , getActivePet } = usePetStore ( ) ;
const { role , isLoggedIn , logout , profile } = useUserStore ( ) ;
@ -103,7 +104,6 @@ export default function Header({
loadNavFilters ( ) ;
} , [ ] ) ;
// Click Outside logic
useEffect ( ( ) = > {
function handleClickOutside ( event : MouseEvent ) {
if ( petMenuRef . current && ! petMenuRef . current . contains ( event . target as Node ) ) {
@ -127,511 +127,313 @@ export default function Header({
< AuthModal isOpen = { isAuthModalOpen } onClose = { ( ) = > setIsAuthModalOpen ( false ) } / >
< PrescriptionUploadModal isOpen = { isPrescriptionModalOpen } onClose = { ( ) = > setIsPrescriptionModalOpen ( false ) } / >
< div className = "sticky top-0 z-50 w-full shadow-sm" >
< div className = "bg-canina-gold text-canina-dark text-xs font-black py-2 text-center font-vazir tracking-wider flex items-center justify-center gap-2" >
< div className = "sticky top-0 z-50 w-full shadow-md font-vazir" dir = "rtl" >
{ /* Top Free Shipping Notice */ }
< div className = "bg-canina-gold text-canina-dark text-xs font-black py-1.5 text-center tracking-wider flex items-center justify-center gap-2" >
< span > 🚚 < / span >
< span > { getText ( 'shipping_notice' , "ارسال رایگان برای سفارشهای بالای ۱ ۵ ۰ ") } < / span >
< span > { getText ( 'shipping_notice' , "ارسال رایگان برای سفارشهای بالای ۱ ۵ ۰ — گارانتی اصالت کانینا آلمان ") } < / span >
< / div >
< header className = "bg-white/95 backdrop-blur-md border-b border-medical-gray-100" >
< div className = "max-w-7xl mx-auto h-16 sm:h-20 md:h-24 flex items-center justify-between gap-1 sm:gap-4 px-2 sm:px-6 lg:px-8" dir = "rtl" >
{ /* Logo & Mobile Toggle Area */ }
< div className = "flex items-center gap-1.5 sm:gap-2 min-w-0" >
{ /* Mobile Menu Toggle */ }
< button
onClick = { ( ) = > setIsMobileMenuOpen ( ! isMobileMenuOpen ) }
className = "min-[800px]:hidden p-1.5 sm:p-2 rounded-xl text-medical-gray-600 hover:bg-medical-gray-50 transition-all flex-shrink-0"
aria - label = "منو"
>
{ isMobileMenuOpen ? < X className = "w-5 h-5 sm:w-6 sm:h-6" / > : < Menu className = "w-5 h-5 sm:w-6 sm:h-6" / > }
< / button >
{ /* Logo Section */ }
< Link
href = "/"
className = "flex items-center gap-1.5 sm:gap-3 cursor-pointer group min-w-0"
onClick = { ( ) = > setIsMobileMenuOpen ( false ) }
>
< div className = "w-8 h-8 sm:w-12 sm:h-12 bg-canina-blue rounded-xl sm:rounded-2xl flex items-center justify-center text-white font-bold text-base sm:text-2xl group-hover:bg-medical-gray-900 transition-all shadow-md sm:shadow-xl shadow-canina-blue/20 italic flex-shrink-0" > C < / div >
< div className = "flex flex-col justify-center min-w-0" >
< span className = "text-canina-blue font-black text-xs sm:text-2xl tracking-tighter italic font-sans flex items-center gap-1 leading-none whitespace-nowrap" >
Canina
< span className = "text-[10px] sm:text-sm not-italic font-medium border-r border-medical-gray-200 pr-1 font-vazir" >
{ getText ( 'brand_name_fa' , "ایران" ) }
< / span >
< / span >
< span className = "text-[7px] sm:text-[9px] text-medical-gray-400 font-bold uppercase tracking-wider font-vazir leading-tight whitespace-nowrap mt-0.5" >
ن م ا ی ن د ه ر س م ی < span className = "block sm:inline text-[6px] sm:text-[9px]" > CANINA PHARMA GMBH < / span >
< / span >
< / div >
< / Link >
< / div >
{ /* Navigation Items: Centered on XL screens (1224px+) */ }
< nav className = "hidden xl:flex items-center gap-1 flex-grow justify-center h-full" >
< div
className = "relative h-full flex items-center group"
onMouseEnter = { ( ) = > setIsMegaMenuOpen ( true ) }
onMouseLeave = { ( ) = > setIsMegaMenuOpen ( false ) }
>
< button className = { ` flex items-center justify-center gap-1.5 px-3 xl:px-4 py-3 rounded-xl text-xs xl:text-sm font-black transition-all whitespace-nowrap focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none min-h-[48px] ${ isMegaMenuOpen ? 'bg-medical-gray-50 text-canina-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canina-blue' } font-vazir ` } >
{ getText ( 'nav_solutions' , "دسته بندی درمانی" ) }
< ChevronDown className = { ` w-4 h-4 transition-transform duration-300 ${ isMegaMenuOpen ? 'rotate-180' : '' } ` } / >
< header className = "bg-white border-b border-medical-gray-200" >
{ /* TOP ROW: Logo + Search + Primary Actions */ }
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4" >
{ /* Mobile Menu Toggle & Logo */ }
< div className = "flex items-center gap-3" >
< button
onClick = { ( ) = > setIsMobileMenuOpen ( ! isMobileMenuOpen ) }
className = "lg:hidden p-2 rounded-xl text-medical-gray-600 hover:bg-medical-gray-100 transition-all"
aria - label = "منو"
>
{ isMobileMenuOpen ? < X className = "w-6 h-6" / > : < Menu className = "w-6 h-6" / > }
< / button >
< AnimatePresence >
{ isMegaMenuOpen && (
< motion.div
initial = { { opacity : 0 , y : 15 , scale : 0.98 } }
animate = { { opacity : 1 , y : 0 , scale : 1 } }
exit = { { opacity : 0 , y : 15 , scale : 0.98 } }
className = "absolute top-[80%] right-0 w-[680px] bg-white border border-medical-gray-100 shadow-2xl rounded-[2.5rem] p-8 grid grid-cols-2 gap-8 z-50 pointer-events-auto"
>
{ menuItems . map ( ( item , idx ) = > (
< div key = { idx } className = "group/item" >
< Link
href = { ` /shop?category= ${ item . id } ` }
onClick = { ( ) = > setIsMegaMenuOpen ( false ) }
className = "flex items-center gap-3 mb-4 cursor-pointer block"
>
< div className = "p-2.5 bg-medical-gray-50 rounded-xl text-canina-blue group-hover/item:bg-canina-blue group-hover/item:text-white transition-all shadow-sm" >
{ item . icon }
< / div >
< h4 className = "font-black text-medical-gray-900 text-sm font-vazir" > { item . title } < / h4 >
< / Link >
{ item . solutions . length > 0 ? (
< div className = "flex flex-wrap gap-1.5 border-r-2 border-medical-gray-100 pr-3" >
{ item . solutions . slice ( 0 , 8 ) . map ( ( sol , sIdx ) = > (
< Link href = "/" className = "flex items-center gap-3 group" >
< div className = "w-10 h-10 sm:w-12 sm:h-12 bg-canina-blue rounded-2xl flex items-center justify-center text-white font-bold text-xl sm:text-2xl group-hover:bg-medical-gray-900 transition-all shadow-md italic" > C < / div >
< div className = "flex flex-col justify-center" >
< span className = "text-canina-blue font-black text-lg sm:text-2xl tracking-tighter italic font-sans flex items-center gap-1 leading-none" >
Canina
< span className = "text-xs sm:text-sm not-italic font-medium border-r border-medical-gray-300 pr-1.5 font-vazir text-medical-gray-700" >
{ getText ( 'brand_name_fa' , "ایران" ) }
< / span >
< / span >
< span className = "text-[9px] text-medical-gray-400 font-bold uppercase tracking-wider leading-tight mt-0.5" >
ن م ا ی ن د ه ر س م ی CANINA PHARMA GMBH GERMANY
< / span >
< / div >
< / Link >
< / div >
{ /* Center Search Input (Desktop) */ }
< div className = "hidden md:flex flex-1 max-w-md mx-4" >
< form onSubmit = { handleSearch } className = "w-full relative" >
< input
type = "text"
placeholder = "جستجوی محصول، ترکیب دارویی یا بیماری پت..."
value = { searchQuery }
onChange = { ( e ) = > setSearchQuery ( e . target . value ) }
className = "w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl py-2.5 pr-10 pl-4 text-xs font-bold text-medical-gray-900 focus:outline-none focus:ring-2 focus:ring-canina-blue/20 focus:bg-white transition-all"
/ >
< button type = "submit" className = "absolute right-3 top-1/2 -translate-y-1/2 text-medical-gray-400 hover:text-canina-blue" >
< Search className = "w-4 h-4" / >
< / button >
< / form >
< / div >
{ /* Left Action Buttons */ }
< div className = "flex items-center gap-2 sm:gap-3" >
{ /* Prescription Upload Button */ }
< button
onClick = { ( ) = > setIsPrescriptionModalOpen ( true ) }
className = "hidden sm:flex items-center gap-1.5 px-3 py-2 bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 rounded-xl text-xs font-black transition-all shadow-xs"
>
< FileHeart className = "w-4 h-4 text-emerald-600" / >
< span > ث ب ت ن س خ ه د ا م پ ز ش ک < / span >
< / button >
{ /* User Account Button */ }
{ isLoggedIn ? (
< Link
href = "/dashboard"
className = "flex items-center gap-2 px-3 py-2 bg-medical-gray-50 hover:bg-medical-gray-100 border border-medical-gray-200 rounded-xl text-xs font-black text-medical-gray-900 transition-all"
>
< User className = "w-4 h-4 text-canina-blue" / >
< span className = "hidden sm:inline" > { profile . firstName || 'حساب کاربری' } < / span >
< / Link >
) : (
< button
onClick = { ( ) = > setIsAuthModalOpen ( true ) }
className = "flex items-center gap-2 px-3.5 py-2 bg-medical-gray-900 text-white hover:bg-canina-blue rounded-xl text-xs font-black transition-all shadow-xs"
>
< LogIn className = "w-4 h-4" / >
< span > و ر و د / ث ب ت ن ا م < / span >
< / button >
) }
{ /* Shopping Cart Button */ }
< button
onClick = { onCartOpen }
className = "relative px-3.5 py-2 bg-canina-blue text-white rounded-xl text-xs font-black hover:bg-medical-gray-900 transition-all flex items-center gap-2 shadow-sm"
>
< ShoppingBag className = "w-4 h-4" / >
< span className = "hidden sm:inline" > س ب د خ ر ی د < / span >
{ getTotalItems ( ) > 0 && (
< span className = "w-5 h-5 bg-canina-gold text-canina-dark rounded-full text-[10px] font-black flex items-center justify-center" >
{ getTotalItems ( ) }
< / span >
) }
< / button >
< / div >
< / div >
{ /* BOTTOM ROW: Clean Organized Dropdown Navigation Bar (Desktop) */ }
< div className = "hidden lg:block border-t border-medical-gray-100 bg-medical-gray-50/50" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-1 py-1 text-xs font-black" >
{ /* Dropdown 1: Category Mega-Menu */ }
< div
className = "relative group py-2"
onMouseEnter = { ( ) = > setIsMegaMenuOpen ( true ) }
onMouseLeave = { ( ) = > setIsMegaMenuOpen ( false ) }
>
< button className = { ` flex items-center gap-1.5 px-3 py-2 rounded-xl transition-all ${ isMegaMenuOpen ? 'bg-canina-blue text-white' : 'text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue' } ` } >
< Pill className = "w-4 h-4" / >
< span > د س ت ه ب ن د ی د ر م ا ن ی م ح ص و ل ا ت < / span >
< ChevronDown className = { ` w-3.5 h-3.5 transition-transform ${ isMegaMenuOpen ? 'rotate-180' : '' } ` } / >
< / button >
< AnimatePresence >
{ isMegaMenuOpen && (
< motion.div
initial = { { opacity : 0 , y : 10 } }
animate = { { opacity : 1 , y : 0 } }
exit = { { opacity : 0 , y : 10 } }
className = "absolute top-full right-0 w-[640px] bg-white border border-medical-gray-200 shadow-2xl rounded-2xl p-6 grid grid-cols-2 gap-6 z-50"
>
{ menuItems . map ( ( item , idx ) = > (
< div key = { idx } className = "group/item" >
< Link
href = { ` /shop?category= ${ item . id } ` }
onClick = { ( ) = > setIsMegaMenuOpen ( false ) }
className = "flex items-center gap-3 mb-3 cursor-pointer"
>
< div className = "p-2 bg-canina-blue/10 rounded-xl text-canina-blue group-hover/item:bg-canina-blue group-hover/item:text-white transition-all" >
{ item . icon }
< / div >
< h4 className = "font-black text-medical-gray-900 text-sm" > { item . title } < / h4 >
< / Link >
< div className = "flex flex-wrap gap-1 border-r-2 border-medical-gray-100 pr-2" >
{ item . solutions . slice ( 0 , 6 ) . map ( ( sol , sIdx ) = > (
< Link
key = { sIdx }
href = { ` /shop?category= ${ item . id } &symptom= ${ encodeURIComponent ( sol ) } ` }
className = "inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-medical-gray-50 border border-medical-gray-200 text-medical-gray-500 hover:bg-canina-blue/5 hover:border-canina-blue/30 hover:text-canina-blue transition-all cursor-pointer font-vazir whitespace-nowrap"
className = "inline- block px-2 py-0.5 rounded-md text-[10px] font-bold bg-medical-gray-50 hover:bg-canina-blue hover:text-white transition-all text-medical-gray-600 "
onClick = { ( ) = > setIsMegaMenuOpen ( false ) }
>
{ sol }
< / Link >
) ) }
{ item . solutions . length > 8 && (
< Link
href = { ` /shop?category= ${ item . id } ` }
className = "inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold text-canina-blue hover:underline font-vazir whitespace-nowrap"
onClick = { ( ) = > setIsMegaMenuOpen ( false ) }
>
+ { item . solutions . length - 8 } ب ی ش ت ر
< / Link >
) }
< / div >
) : (
< p className = "text-[11px] text-medical-gray-400 border-r-2 border-medical-gray-100 pr-3 font-vazir" > م ش ا ه د ه ه م ه م ح ص و ل ا ت < / p >
) }
< / div >
) ) }
< / motion.div >
) }
< / AnimatePresence >
< / div >
{ [
{ id : 'shop' , label : getText ( 'nav_products' , 'محصولات تخصصی' ) , href : '/shop' } ,
{ id : 'catalog' , label : getText ( 'nav_catalog' , 'کاتالوگ آنلاین' ) , href : '/catalog' } ,
{ id : 'wiki' , label : getText ( 'nav_wiki' , 'دانشنامه علمی' ) , href : '/wiki' } ,
{ id : 'blog' , label : getText ( 'nav_blog' , 'مجله سلامت پت' ) , href : '/blog' } ,
{ id : 'profile' , label : getText ( 'nav_pet_profiles' , 'شناسنامه پت' ) , href : '/profile' }
] . map ( ( item ) = > (
< Link
key = { item . id }
href = { item . href }
className = { ` px-3 xl:px-4 py-3 rounded-xl text-xs xl:text-sm font-black transition-all font-vazir whitespace-nowrap focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none min-h-[48px] flex items-center justify-center ${ currentView === item . id ? 'bg-canina-blue/5 text-canina-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canina-blue' } ` }
>
{ item . label }
< / Link >
) ) }
< / nav >
{ /* Action Area */ }
< div className = "flex items-center gap-2 sm:gap-4 flex-shrink-0 justify-end h-auto md:h-16 pl-1 sm:pl-2" >
{ /* Quick Prescription Upload Button */ }
< button
onClick = { ( ) = > setIsPrescriptionModalOpen ( true ) }
className = "hidden lg:flex items-center gap-1.5 px-3 py-2 bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 rounded-xl text-xs font-black transition-all shadow-xs"
>
< FileHeart className = "w-4 h-4 text-emerald-600" / >
< span > ث ب ت ن س خ ه د ا م پ ز ش ک < / span >
< / button >
{ /* Elastic Search */ }
{ /* Elastic Search */ }
< div className = "relative flex items-center justify-end z-30" >
< AnimatePresence >
{ isSearchFocused && (
< motion.div
initial = { { width : 0 , opacity : 0 } }
animate = { { width : 220 , opacity : 1 } }
exit = { { width : 0 , opacity : 0 } }
transition = { { type : "spring" , damping : 25 , stiffness : 220 } }
className = "absolute left-full sm:right-0 top-1/2 -translate-y-1/2 bg-white border border-canina-blue/30 rounded-2xl shadow-2xl overflow-hidden h-10 sm:h-12 flex items-center pr-10 pl-3 z-30"
style = { { transformOrigin : "right center" } }
>
< form onSubmit = { handleSearch } className = "w-full flex items-center" >
< input
autoFocus
type = "text"
value = { searchQuery }
onChange = { e = > setSearchQuery ( e . target . value ) }
onBlur = { ( ) = > ! searchQuery && setIsSearchFocused ( false ) }
placeholder = "جستجو…"
dir = "rtl"
className = "w-full bg-transparent py-2 pr-2 text-[12px] font-black outline-none font-vazir text-medical-gray-900 text-right placeholder:text-medical-gray-400 placeholder:text-right"
/ >
< input type = "submit" className = "hidden" / >
< / form >
< / motion.div >
) }
< / AnimatePresence >
< HeaderButton
variant = { isSearchFocused ? "primary" : "secondary" }
className = { cn (
"w-10 h-10 sm:w-12 sm:h-12 transition-all duration-300" ,
isSearchFocused
? "z-30 bg-canina-blue text-white rounded-r-2xl rounded-l-none border border-canina-blue border-l-0 shadow-none"
: "rounded-2xl"
) }
onClick = { ( ) = > {
if ( isSearchFocused && searchQuery . trim ( ) ) {
onSearch ( searchQuery ) ;
setIsSearchFocused ( false ) ;
} else {
setIsSearchFocused ( ! isSearchFocused ) ;
}
} }
>
< Search className = { cn ( "w-4 h-4 sm:w-5 sm:h-5" , isSearchFocused ? "text-white" : "text-canina-blue" ) } / >
< / HeaderButton >
< / div >
< div className = "flex gap-1.5 sm:gap-2 items-center h-12" >
{ isLoggedIn ? (
< div className = "flex items-center h-full gap-1 sm:gap-2 p-1 bg-medical-gray-50/50 border border-medical-gray-100 rounded-3xl" >
{ /* User Icon/Name (Direct link to dashboard) */ }
< div
className = "flex items-center gap-1 sm:gap-2.5 px-2 sm:px-4 py-2 hover:bg-white rounded-2xl cursor-pointer transition-all border border-transparent hover:border-medical-gray-200 min-w-0"
onClick = { ( ) = > onNavigate ( "user-dashboard" ) }
>
< User className = "w-4 h-4 sm:w-5 sm:h-5 text-canina-blue flex-shrink-0" / >
< span className = "hidden sm:inline text-[14px] font-black font-vazir text-medical-gray-900 leading-none truncate max-w-[80px]" >
{ profile . firstName }
< / span >
< / div >
{ /* Separator Line */ }
< div className = "w-[1.5px] h-4 sm:h-5 bg-medical-gray-200 flex-shrink-0" / >
{ /* Pet Icon & Switcher */ }
< div className = "relative h-full flex items-center" ref = { petMenuRef } >
< div
className = { cn (
"flex items-center gap-1 sm:gap-2.5 px-2 sm:px-4 py-2 rounded-2xl transition-all cursor-pointer min-w-0" ,
isPetSwitcherOpen ? "bg-canina-blue text-white shadow-lg shadow-canina-blue/20" : "text-canina-blue hover:bg-white"
) }
onClick = { ( ) = > setIsPetSwitcherOpen ( ! isPetSwitcherOpen ) }
>
{ activePet ? . type === "گربه" ? (
< Cat className = { cn ( "w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" , isPetSwitcherOpen ? "text-white" : "text-canina-blue/60" ) } / >
) : (
< Dog className = { cn ( "w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" , isPetSwitcherOpen ? "text-white" : "text-canina-blue/60" ) } / >
) }
< span className = { cn ( "hidden sm:inline text-[14px] font-black font-vazir leading-none truncate max-w-[80px]" , isPetSwitcherOpen ? "text-white" : "text-canina-blue" ) } >
{ activePet ? . name || "بدون پت" }
< / span >
< ChevronDown className = { cn ( "w-3 h-3 sm:w-4 sm:h-4 transition-transform flex-shrink-0" , isPetSwitcherOpen ? "rotate-180" : "" ) } / >
< / div >
< AnimatePresence >
{ isPetSwitcherOpen && (
< motion.div
initial = { { opacity : 0 , y : 10 , scale : 0.95 } }
animate = { { opacity : 1 , y : 0 , scale : 1 } }
exit = { { opacity : 0 , y : 10 , scale : 0.95 } }
className = "absolute top-[125%] left-0 w-72 bg-white border border-medical-gray-100 shadow-2xl rounded-[1.5rem] p-5 z-50 pointer-events-auto"
>
< div className = "text-[9px] font-black text-medical-gray-400 uppercase tracking-[0.2em] mb-4 pr-1" > { getText ( 'nav_pet_switcher_title' , "تغییر پت یا مدیریت حساب" ) } < / div >
< div className = "space-y-1 mb-4" >
{ pets . map ( pet = > (
< div
key = { pet . id }
className = { cn (
"w-full flex items-center justify-between p-3 rounded-xl transition-all group/item" ,
activePetId === pet . id ? "bg-canina-blue/5 text-canina-blue" : "hover:bg-medical-gray-50 text-medical-gray-600"
) }
>
< div
className = "flex items-center gap-3 flex-1 cursor-pointer"
onClick = { ( ) = > {
setActivePet ( pet . id ) ;
setIsPetSwitcherOpen ( false ) ;
toast . success ( ` پت فعال به ${ pet . name } تغییر یافت ` ) ;
} }
>
< div className = { cn (
"w-8 h-8 rounded-lg flex items-center justify-center text-[11px] font-black transition-colors" ,
activePetId === pet . id ? "bg-canina-blue text-white" : "bg-medical-gray-100 text-medical-gray-400 group-hover/item:bg-medical-gray-200"
) } >
{ pet . name [ 0 ] }
< / div >
< span className = "text-[13px] font-bold font-vazir" > { pet . name } < / span >
< / div >
< div className = "flex items-center gap-1" >
{ activePetId === pet . id && < Check className = "w-4 h-4 ml-2" / > }
< button
onClick = { ( e ) = > {
e . stopPropagation ( ) ;
setActivePet ( pet . id ) ;
onNavigate ( { view : "profile" , subview : "detail" } ) ;
setIsPetSwitcherOpen ( false ) ;
} }
className = "p-1.5 rounded-lg hover:bg-canina-blue hover:text-white transition-all text-medical-gray-300 hover:shadow-lg"
title = "مشاهده شناسنامه سلامت"
>
< FileHeart className = "w-4 h-4" / >
< / button >
< / div >
< / div >
) ) }
< / div >
< div className = "pt-4 border-t border-medical-gray-100 space-y-1" >
< button
onClick = { ( ) = > { onNavigate ( { view : "profile" , subview : "add" } ) ; setIsPetSwitcherOpen ( false ) ; } }
className = "w-full flex items-center gap-3 p-3 text-canina-blue hover:bg-canina-blue/5 rounded-xl transition-all text-[12px] font-black font-vazir"
>
< PlusCircle className = "w-5 h-5" / >
{ getText ( 'nav_register_pet' , "ثبت همدم (Pet) جدید" ) }
< / button >
< button
onClick = { ( ) = > { onNavigate ( { view : "user-dashboard" } ) ; setIsPetSwitcherOpen ( false ) ; } }
className = "w-full flex items-center gap-3 p-3 text-medical-gray-600 hover:bg-medical-gray-50 rounded-xl transition-all text-[12px] font-bold font-vazir"
>
< Wallet className = "w-5 h-5" / >
{ getText ( 'nav_wallet_orders' , "کیف پول و سفارشات" ) }
< / button >
< button
onClick = { ( ) = > { logout ( ) ; setIsPetSwitcherOpen ( false ) ; } }
className = "w-full flex items-center gap-3 p-3 text-red-500 hover:bg-red-50 rounded-xl transition-all text-[12px] font-bold font-vazir mt-1"
>
< LogOut className = "w-5 h-5" / >
{ getText ( 'nav_logout' , "خروج از حساب کانینا" ) }
< / button >
< / div >
< / motion.div >
) }
< / AnimatePresence >
< / div >
< / div >
) : (
< HeaderButton
variant = "outline"
layout = "row"
className = "px-3 sm:px-6 h-10 sm:h-12 text-xs sm:text-sm font-black flex items-center justify-center"
onClick = { ( ) = > setIsAuthModalOpen ( true ) }
icon = { < LogIn className = "w-4 h-4 sm:w-5 sm:h-5 text-canina-blue" / > }
>
< span className = "hidden xs:inline" > { getText ( 'nav_login' , "ورود / ثبتنام" ) } < / span >
< span className = "xs:hidden" > و ر و د < / span >
< / HeaderButton >
) }
< HeaderButton
variant = "primary"
className = "w-12 sm:w-16 h-10 sm:h-12"
onClick = { onCartOpen }
badge = { getTotalItems ( ) }
icon = { < ShoppingBag className = "w-5 h-5 sm:w-6 sm:h-6" / > }
>
< div className = "hidden sm:block text-[8px] font-black tracking-tight whitespace-nowrap mt-0.5" > { getText ( 'nav_cart' , "سبد خرید" ) } < / div >
< / HeaderButton >
< / div >
< / div >
< / div >
{ /* Medium Screen Sub-Navbar (Visible only between 800px and 1224px) */ }
< div className = "hidden min-[800px]:flex xl:hidden border-t border-medical-gray-100 bg-medical-gray-50/50 py-2 px-6 justify-center items-center gap-2 font-vazir relative" dir = "rtl" >
< div className = "relative" >
< button
onClick = { ( ) = > setIsMegaMenuOpen ( ! isMegaMenuOpen ) }
className = { ` px-3 py-1.5 rounded-lg text-xs font-black transition-all flex items-center gap-1.5 whitespace-nowrap ${ isMegaMenuOpen ? 'bg-canina-blue text-white shadow-sm' : 'text-medical-gray-700 hover:bg-white' } ` }
>
{ getText ( 'nav_solutions' , "دسته بندی درمانی" ) }
< ChevronDown className = { ` w-3.5 h-3.5 transition-transform ${ isMegaMenuOpen ? 'rotate-180 text-white' : 'text-canina-blue' } ` } / >
< / button >
< AnimatePresence >
{ isMegaMenuOpen && (
< motion.div
initial = { { opacity : 0 , y : 10 , scale : 0.98 } }
animate = { { opacity : 1 , y : 0 , scale : 1 } }
exit = { { opacity : 0 , y : 10 , scale : 0.98 } }
className = "absolute top-[120%] right-0 w-[600px] max-w-[90vw] bg-white border border-medical-gray-100 shadow-2xl rounded-[2rem] p-6 grid grid-cols-2 gap-6 z-50 pointer-events-auto"
>
{ menuItems . map ( ( item , idx ) = > (
< div key = { idx } className = "group/item" >
< Link
href = { ` /shop?category= ${ item . id } ` }
onClick = { ( ) = > setIsMegaMenuOpen ( false ) }
className = "flex items-center gap-3 mb-3 cursor-pointer block"
>
< div className = "p-2 bg-medical-gray-50 rounded-xl text-canina-blue group-hover/item:bg-canina-blue group-hover/item:text-white transition-all shadow-sm" >
{ item . icon }
< / div >
< h4 className = "font-black text-medical-gray-900 text-xs font-vazir" > { item . title } < / h4 >
< / Link >
{ item . solutions . length > 0 && (
< div className = "flex flex-wrap gap-1 border-r-2 border-medical-gray-100 pr-2" >
{ item . solutions . slice ( 0 , 6 ) . map ( ( sol , sIdx ) = > (
< Link
key = { sIdx }
href = { ` /shop?category= ${ item . id } &symptom= ${ encodeURIComponent ( sol ) } ` }
className = "inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold bg-medical-gray-50 border border-medical-gray-200 text-medical-gray-500 hover:bg-canina-blue/5 hover:border-canina-blue/30 hover:text-canina-blue transition-all cursor-pointer font-vazir whitespace-nowrap"
onClick = { ( ) = > setIsMegaMenuOpen ( false ) }
>
{ sol }
< / Link >
) ) }
< / div >
) }
< / div >
) ) }
< / motion.div >
) }
< / AnimatePresence >
< / div >
< div className = "w-[1px] h-4 bg-medical-gray-200" / >
{ [
{ id : 'shop' , label : getText ( 'nav_products' , 'محصولات تخصصی' ) , href : '/shop' } ,
{ id : 'wiki' , label : getText ( 'nav_wiki' , 'دانشنامه علمی' ) , href : '/wiki' } ,
{ id : 'blog' , label : getText ( 'nav_blog' , 'مجله سلامت پت' ) , href : '/blog' } ,
{ id : 'profile' , label : getText ( 'nav_pet_profiles' , 'شناسنامه پت' ) , href : '/profile' }
] . map ( ( item ) = > (
< Link
key = { item . id }
href = { item . href }
className = { ` px-3 py-1.5 rounded-lg text-xs font-black transition-all whitespace-nowrap ${ currentView === item . id ? 'bg-canina-blue text-white shadow-sm' : 'text-medical-gray-600 hover:bg-white hover:text-canina-blue' } ` }
>
{ item . label }
< / Link >
) ) }
< / div >
< / header >
< / div >
{ /* Mobile Drawer Menu */ }
< AnimatePresence >
{ isMobileMenuOpen && (
< >
{ /* Backdrop */ }
< motion.div
initial = { { opacity : 0 } }
animate = { { opacity : 0.5 } }
exit = { { opacity : 0 } }
onClick = { ( ) = > setIsMobileMenuOpen ( false ) }
className = "fixed inset-0 bg-black z-40 min-[800px]:hidden"
/ >
{ /* Drawer */ }
< motion.div
initial = { { x : "100%" } }
animate = { { x : 0 } }
exit = { { x : "100%" } }
transition = { { type : "spring" , damping : 25 , stiffness : 200 } }
className = "fixed top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white z-50 shadow-2xl p-6 flex flex-col gap-6 overflow-y-auto min-[800px]:hidden"
dir = "rtl"
>
< div className = "flex items-center justify-between border-b border-medical-gray-100 pb-4" >
< Link href = "/" className = "flex items-center gap-3" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } >
< div className = "w-10 h-10 bg-canina-blue rounded-xl flex items-center justify-center text-white font-bold text-xl italic" > C < / div >
< span className = "text-canina-blue font-black text-xl italic font-sans" > Canina < / span >
< / Link >
< button
onClick = { ( ) = > setIsMobileMenuOpen ( false ) }
className = "p-2 rounded-xl hover:bg-medical-gray-50 text-medical-gray-600 transition-all"
>
< X className = "w-6 h-6" / >
< / button >
) ) }
< / motion.div >
) }
< / AnimatePresence >
< / div >
{ /* Navigation Links */ }
< nav className = "flex flex-col gap-2" >
{ /* Treatment Solutions accordion */ }
< div className = "flex flex-col" >
< button
onClick = { ( ) = > setIsMobileSolutionsOpen ( ! isMobileSolutionsOpen ) }
className = "w-full flex items-center justify-between px-4 py-3 rounded-xl text-sm font-black text-medical-gray-600 hover:bg-medical-gray-50 transition-all font-vazir"
>
< span > { getText ( 'nav_solutions' , "دسته بندی درمانی" ) } < / span >
< ChevronDown className = { ` w-4 h-4 transition-transform duration-300 ${ isMobileSolutionsOpen ? 'rotate-180' : '' } ` } / >
< / button >
< AnimatePresence >
{ isMobileSolutionsOpen && (
< motion.div
initial = { { height : 0 , opacity : 0 } }
animate = { { height : "auto" , opacity : 1 } }
exit = { { height : 0 , opacity : 0 } }
className = "overflow-hidden mr-4 pr-2 border-r-2 border-medical-gray-100 mt-1 space-y-3"
>
{ menuItems . map ( ( item , idx ) = > (
< div key = { idx } className = "py-1" >
< Link
href = { ` /shop?category= ${ item . id } ` }
onClick = { ( ) = > setIsMobileMenuOpen ( false ) }
className = "text-[13px] font-bold text-medical-gray-800 font-vazir hover:text-canina-blue cursor-pointer flex items-center gap-2 block"
>
< span className = "text-canina-blue/80" > { item . icon } < / span >
< span > { item . title } < / span >
< / Link >
< ul className = "mt-1 space-y-1 mr-6" >
{ item . solutions . map ( ( sol , sIdx ) = > (
< li key = { sIdx } >
< Link
href = { ` /shop?category= ${ item . id } &symptoms= ${ sol } ` }
className = "text-[11px] text-medical-gray-500 hover:text-canina-blue cursor-pointer py-1 font-vazir block"
onClick = { ( ) = > setIsMobileMenuOpen ( false ) }
>
{ sol }
< / Link >
< / li >
) ) }
< / ul >
< / div >
) ) }
< / motion.div >
) }
< / AnimatePresence >
< / div >
{ /* Dropdown 2: Products & Catalog */ }
< div
className = "relative group py-2"
onMouseEnter = { ( ) = > setActiveDropdown ( 'products' ) }
onMouseLeave = { ( ) = > setActiveDropdown ( null ) }
>
< button className = "flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all" >
< span > م ح ص و ل ا ت و ک ا ت ا ل و گ < / span >
< ChevronDown className = "w-3.5 h-3.5" / >
< / button >
{ activeDropdown === 'products' && (
< div className = "absolute top-full right-0 w-52 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs" >
< Link href = "/shop" className = "block px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
ک ا ت ا ل و گ ج ا م ع م ح ص و ل ا ت
< / Link >
< Link href = "/catalog" className = "block px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
ک ا ت ا ل و گ آ ن ل ا ی ن و د و ز م ص ر ف ی
< / Link >
< / div >
) }
< / div >
{ [
{ id : 'shop' , label : getText ( 'nav_products' , 'محصولات تخصصی' ) , href : '/shop' } ,
{ id : 'wiki' , label : getText ( 'nav_wiki' , 'دانشنامه علمی' ) , href : '/wiki' } ,
{ id : 'blog' , label : getText ( 'nav_blog' , 'مجله سلامت پت' ) , href : '/blog' } ,
{ id : 'profile' , label : getText ( 'nav_pet_profiles' , 'شناسنامه پت' ) , href : '/profile' }
] . map ( ( item ) = > (
< Link
key = { item . id }
href = { item . href }
onClick = { ( ) = > setIsMobileMenuOpen ( false ) }
className = { ` w-full block text-right px-4 py-3 rounded-xl text-sm font-black transition-all font-vazir ${ currentView === item . id
? 'bg-canina-blue/5 text-canina-blue'
: 'text-medical-gray-600 hover:bg-medical-gray-50'
} ` }
>
{ item . label }
< / Link >
) ) }
< / nav >
{ /* Dropdown 3: Science & Academy */ }
< div
className = "relative group py-2"
onMouseEnter = { ( ) = > setActiveDropdown ( 'science' ) }
onMouseLeave = { ( ) = > setActiveDropdown ( null ) }
>
< button className = "flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all" >
< span > د ا ن ش ن ا م ه و آ ک ا د م ی < / span >
< ChevronDown className = "w-3.5 h-3.5" / >
< / button >
{ activeDropdown === 'science' && (
< div className = "absolute top-full right-0 w-56 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs" >
< Link href = "/wiki" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< BookOpen className = "w-4 h-4 text-canina-blue" / >
د ا ن ش ن ا م ه ع ل م ی ک ا ن ی ن ا
< / Link >
< Link href = "/blog" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< FileText className = "w-4 h-4 text-canina-blue" / >
م ج ل ه س ل ا م ت پ ت ( و ب ل ا گ )
< / Link >
< Link href = "/videos" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< Video className = "w-4 h-4 text-canina-blue" / >
آ ک ا د م ی و ی د ئ و ی ی و م ش ا و ر ه د ا م پ ز ش ک
< / Link >
< / div >
) }
< / div >
{ /* Dropdown 4: Smart Tools & Pet Profile */ }
< div
className = "relative group py-2"
onMouseEnter = { ( ) = > setActiveDropdown ( 'tools' ) }
onMouseLeave = { ( ) = > setActiveDropdown ( null ) }
>
< button className = "flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all" >
< span > ا ب ز ا ر ه ا ی ه و ش م ن د < / span >
< ChevronDown className = "w-3.5 h-3.5" / >
< / button >
{ activeDropdown === 'tools' && (
< div className = "absolute top-full right-0 w-56 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs" >
< Link href = "/profile" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< Dog className = "w-4 h-4 text-canina-blue" / >
ش ن ا س ن ا م ه و س و ا ب ق س ل ا م ت پ ت
< / Link >
< Link href = "/dashboard" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< Activity className = "w-4 h-4 text-canina-blue" / >
پ ا ی ش ه و ش م ن د م ص ر ف م ک م ل ه ا
< / Link >
< / div >
) }
< / div >
{ /* Dropdown 5: Company & B2B */ }
< div
className = "relative group py-2"
onMouseEnter = { ( ) = > setActiveDropdown ( 'company' ) }
onMouseLeave = { ( ) = > setActiveDropdown ( null ) }
>
< button className = "flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all" >
< span > د ر ب ا ر ه ک ا ن ی ن ا و ت م ا س < / span >
< ChevronDown className = "w-3.5 h-3.5" / >
< / button >
{ activeDropdown === 'company' && (
< div className = "absolute top-full right-0 w-56 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs" >
< Link href = "/about" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< Award className = "w-4 h-4 text-canina-blue" / >
د ر ب ا ر ه ک م پ ا ن ی ک ا ن ی ن ا آ ل م ا ن
< / Link >
< button
onClick = { onB2BOpen }
className = "w-full text-right flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold"
>
< Building2 className = "w-4 h-4 text-canina-blue" / >
د ر خ و ا س ت ن م ا ی ن د گ ی B2B
< / button >
< Link href = "/contact" className = "flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold" >
< PhoneCall className = "w-4 h-4 text-canina-blue" / >
ت م ا س ب ا م ر ک ز پ ش ت ی ب ا ن ی
< / Link >
< / div >
) }
< / div >
< / div >
< / div >
< / header >
{ /* Mobile Navigation Drawer */ }
< AnimatePresence >
{ isMobileMenuOpen && (
< motion.div
initial = { { opacity : 0 , height : 0 } }
animate = { { opacity : 1 , height : "auto" } }
exit = { { opacity : 0 , height : 0 } }
className = "lg:hidden bg-white border-b border-medical-gray-200 px-4 py-6 space-y-4"
>
< form onSubmit = { handleSearch } className = "relative mb-4" >
< input
type = "text"
placeholder = "جستجو در محصولات..."
value = { searchQuery }
onChange = { ( e ) = > setSearchQuery ( e . target . value ) }
className = "w-full bg-medical-gray-50 border border-medical-gray-200 rounded-xl py-3 pr-10 pl-4 text-xs font-bold"
/ >
< Search className = "w-4 h-4 text-medical-gray-400 absolute right-3 top-1/2 -translate-y-1/2" / >
< / form >
< div className = "space-y-2 text-sm font-black" >
< Link href = "/shop" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } className = "block p-3 rounded-xl bg-medical-gray-50 text-medical-gray-900" >
🛒 م ح ص و ل ا ت ت خ ص ص ی ک ا ن ی ن ا
< / Link >
< Link href = "/catalog" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } className = "block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800" >
📑 ک ا ت ا ل و گ آ ن ل ا ی ن و د و ز م ص ر ف ی
< / Link >
< Link href = "/wiki" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } className = "block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800" >
🧬 د ا ن ش ن ا م ه ع ل م ی
< / Link >
< Link href = "/blog" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } className = "block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800" >
📰 م ج ل ه س ل ا م ت پ ت
< / Link >
< Link href = "/videos" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } className = "block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800" >
🎥 آ ک ا د م ی و ی د ئ و ی ی و م ش ا و ر ه د ا م پ ز ش ک
< / Link >
< Link href = "/profile" onClick = { ( ) = > setIsMobileMenuOpen ( false ) } className = "block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800" >
🐾 ش ن ا س ن ا م ه و س و ا ب ق س ل ا م ت پ ت
< / Link >
< / div >
< / motion.div >
< / >
) }
< / AnimatePresence >
) }
< / AnimatePresence >
< / div >
< / >
) ;
}
parsa aghaei