190 lines
12 KiB
TypeScript
190 lines
12 KiB
TypeScript
"use client";
|
||
import React, { useState, useEffect } from "react";
|
||
import { Phone, Mail, MapPin, Instagram, ShieldCheck, Globe, ArrowUp, Download } from "lucide-react";
|
||
import { useSettingsStore } from "../lib/store/settingsStore";
|
||
import Link from "next/link";
|
||
|
||
export default function Footer({
|
||
onNavigate = () => {},
|
||
onShopNavigate = () => {},
|
||
onB2BOpen
|
||
}: {
|
||
onNavigate?: (v: any) => void;
|
||
onShopNavigate?: (c?: string) => void;
|
||
onB2BOpen?: () => void;
|
||
}) {
|
||
const getText = useSettingsStore(state => state.getText);
|
||
const [showScroll, setShowScroll] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const checkScroll = () => {
|
||
if (window.scrollY > 300) {
|
||
setShowScroll(true);
|
||
} else {
|
||
setShowScroll(false);
|
||
}
|
||
};
|
||
window.addEventListener('scroll', checkScroll);
|
||
return () => window.removeEventListener('scroll', checkScroll);
|
||
}, []);
|
||
|
||
const scrollToTop = () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
};
|
||
|
||
return (
|
||
<footer className="bg-medical-gray-900 text-white pt-24 pb-36 sm:pb-12 font-shabnam relative" dir="rtl">
|
||
{/* Floating Back-to-Top Button */}
|
||
{showScroll && (
|
||
<button
|
||
onClick={scrollToTop}
|
||
className="fixed bottom-24 left-6 sm:bottom-8 sm:left-8 z-40 bg-canina-blue text-white p-3 rounded-full shadow-2xl hover:bg-canina-dark hover:scale-110 transition-all border border-white/20 group flex items-center gap-2 font-vazir text-xs font-black"
|
||
title="بازگشت به بالای صفحه"
|
||
>
|
||
<ArrowUp className="w-5 h-5 group-hover:-translate-y-1 transition-transform" />
|
||
<span className="hidden sm:inline">بازگشت به بالا</span>
|
||
</button>
|
||
)}
|
||
|
||
<div className="max-w-7xl mx-auto px-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20">
|
||
|
||
{/* Brand Presence */}
|
||
<div className="space-y-8">
|
||
<Link href="/" className="flex items-center gap-3 cursor-pointer group">
|
||
<div className="w-12 h-12 bg-canina-blue rounded-2xl flex items-center justify-center text-white font-bold text-2xl group-hover:bg-medical-gray-900 transition-all shadow-xl shadow-canina-blue/20 italic">C</div>
|
||
<div className="flex flex-col">
|
||
<span className="text-white font-extrabold text-2xl tracking-tighter leading-none italic font-sans">Canina <span className="text-sm not-italic font-medium border-l-2 border-white/20 pl-2 ml-2 font-shabnam">{getText('brand_name_fa', "ایران")}</span></span>
|
||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest leading-none mt-1.5 font-shabnam">{getText('brand_subtitle', "نماینده رسمی Canina Pharma GmbH آلمان")}</span>
|
||
</div>
|
||
</Link>
|
||
<p className="text-sm text-slate-300 leading-relaxed font-medium">
|
||
{getText('footer_brand_desc', "تدارک هوشمندانه سلامت برای همراهان وفادار شما. واردکننده انحصاری مکملهای درمانی با گرید دارویی اختصاصی از آلمان با سابقه ۴۰ سال نوآوری.")}
|
||
</p>
|
||
<div className="flex gap-4">
|
||
{[Instagram, Globe].map((Icon, i) => (
|
||
<a key={i} href="#" className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
|
||
<Icon className="w-5 h-5" />
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div className="space-y-8">
|
||
<h4 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_links_title', "دسترسی سریع")}</h4>
|
||
<ul className="space-y-4 text-sm font-bold text-slate-300">
|
||
<li>
|
||
<Link href="/shop" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
|
||
{getText('footer_link_products', "محصولات تخصصی ۲۰۲۴")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/blog" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
|
||
{getText('footer_link_blog', "مجله سلامت پت (وبلاگ)")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/profile" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
|
||
{getText('footer_link_profiles', "شناسنامه پتها")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/wiki" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
|
||
{getText('footer_link_wiki', "دانشنامه ترکیبات")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="/trust-seals"
|
||
className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group text-emerald-400"
|
||
>
|
||
<ShieldCheck className="w-4 h-4 text-emerald-400" />
|
||
<span>نمادهای اعتماد و مجوزهای رسمی</span>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="/catalog"
|
||
className="inline-flex items-center gap-3 px-6 py-3 bg-canina-blue/10 border border-canina-blue/20 rounded-2xl text-canina-blue text-xs font-black hover:bg-canina-blue hover:text-white transition-all shadow-sm group"
|
||
>
|
||
<Download className="w-4 h-4 group-hover:-translate-y-0.5 transition-transform" />
|
||
<span>مشاهده و دانلود کاتالوگ آنلاین محصولات</span>
|
||
</Link>
|
||
</li>
|
||
<li onClick={onB2BOpen} className="hover:text-canina-blue hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group text-blue-200">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
|
||
{getText('footer_link_b2b', "همکاری با کلینیکها و پتشاپها (B2B)")}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Location & Contact */}
|
||
<div className="space-y-8 lg:col-span-2">
|
||
<h4 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h4>
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
<div className="space-y-6">
|
||
<div className="flex gap-4 group">
|
||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
|
||
<Phone className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<p className="text-[11px] text-slate-400 font-extrabold uppercase mb-1">{getText('footer_phone_label', "خط ویژه فروش")}</p>
|
||
<p className="text-lg font-extrabold tracking-widest text-left text-slate-200" dir="ltr">{getText('footer_phone', "۰۲۱-۸۸۸۸ ۴۴۴۴")}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4 group">
|
||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
|
||
<Mail className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<p className="text-[11px] text-slate-400 font-extrabold uppercase mb-1">{getText('footer_email_label', "مکاتبات رسمی")}</p>
|
||
<p className="text-sm font-bold text-slate-300">{getText('footer_email', "info@canina-iran.com")}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4 group">
|
||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
|
||
<MapPin className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<p className="text-[11px] text-slate-400 font-extrabold uppercase mb-1">{getText('footer_address_label', "دفتر مرکزی")}</p>
|
||
<p className="text-sm font-bold leading-relaxed text-slate-300">{getText('footer_address', "تهران، جردن، خیابان سعیدی، ساختمان کانینا، طبقه ۵، واحد ۱۹")}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-10 p-6 bg-white/5 rounded-[2rem] border border-white/10 flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-10 h-10 bg-green-500/20 text-green-500 rounded-full flex items-center justify-center">
|
||
<ShieldCheck className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h5 className="text-sm font-bold text-white">{getText('footer_auth_title', "اصالت کالا تضمین میشود")}</h5>
|
||
<p className="text-[10px] text-slate-400 font-bold">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت وزارت بهداشت و QR Code اختصاصی هستند.")}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-sm font-bold text-slate-200 self-center font-lalezar tracking-wide">{getText('footer_auth_badge', "اصالت آلمانی کانینا")}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="pt-12 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-6 text-[10px] font-bold uppercase tracking-[0.3em] font-shabnam">
|
||
<div className="text-slate-400 font-shabnam">{getText('footer_copyright', "© ۲۰۲۶ کانینا ایران. تمامی حقوق محفوظ است.")}</div>
|
||
<div className="flex gap-4 sm:gap-8 font-shabnam text-slate-400 items-center">
|
||
<Link href="/about" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_about', "درباره ما")}</Link>
|
||
<Link href="/contact" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_contact', "تماس با ما")}</Link>
|
||
<Link href="/privacy" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_privacy', "حریم خصوصی")}</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|