canina/frontend/application/components/Footer.tsx

"use client";
import React from "react";
import { Phone, Mail, MapPin, Instagram, ShieldCheck, Globe } from "lucide-react";

export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: { 
  onNavigate: (v: any) => void, 
  onShopNavigate: (c?: string) => void,
  onB2BOpen?: () => void 
}) {
  return (
    <footer className="bg-medical-gray-900 text-white pt-24 pb-12 font-vazir" dir="rtl">
      <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">
            <div className="flex items-center gap-4 cursor-pointer group" onClick={() => onNavigate("home")}>
              <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center p-2 group-hover:scale-105 transition-transform">
                <img src="https://canina.de/media/fb/d5/47/1683116813/Logo.png" alt="Canina Logo" className="w-full h-auto" referrerPolicy="no-referrer" />
              </div>
              <div>
                <h3 className="text-2xl font-black italic tracking-tighter">کانینا ایران</h3>
                <p className="text-[10px] text-white/40 font-bold uppercase tracking-widest">نماینده رسمی در ایران</p>
              </div>
            </div>
            <p className="text-sm text-white/60 leading-relaxed font-medium">
              تدارک هوشمندانه سلامت برای همراهان وفادار شما. واردکننده انحصاری مکمل‌های درمانی با گرید دارویی اختصاصی از آلمان با سابقه ۴۰ سال نوآوری.
            </p>
            <div className="flex gap-4">
               {[Instagram, Globe].map((Icon, i) => (
                  <a key={i} href="#" className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-white/40">
                     <Icon className="w-5 h-5" />
                  </a>
               ))}
            </div>
          </div>

          {/* Quick Links */}
          <div className="space-y-8">
            <h4 className="text-lg font-black text-canina-blue italic underline decoration-white/20 underline-offset-8">دسترسی سریع</h4>
            <ul className="space-y-4 text-sm font-bold text-white/60">
              <li onClick={() => onShopNavigate()} 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" />
                 محصولات تخصصی ۲۰۲۴
              </li>
              <li onClick={() => onNavigate("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" />
                 مجله سلامت پت (وبلاگ)
              </li>
              <li onClick={() => onNavigate("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" />
                 شناسنامه پتها
              </li>
              <li onClick={() => onNavigate("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" />
                 دانشنامه ترکیبات
              </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-300">
                 <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
                 پنل سفارش عمده (B2B)
              </li>
            </ul>
          </div>

          {/* Location & Contact */}
          <div className="space-y-8 lg:col-span-2">
            <h4 className="text-lg font-black text-canina-blue italic underline decoration-white/20 underline-offset-8">اطلاعات تماس نمایندگی</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-canina-blue group-hover:scale-110 transition-transform flex-shrink-0">
                        <Phone className="w-6 h-6" />
                     </div>
                     <div>
                        <p className="text-[10px] text-white/40 font-black uppercase mb-1">خط ویژه فروش</p>
                        <p className="text-lg font-black tracking-widest text-left" dir="ltr">۰۲۱-۸۸۸۸ ۴۴۴۴</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-canina-blue group-hover:scale-110 transition-transform flex-shrink-0">
                        <Mail className="w-6 h-6" />
                     </div>
                     <div>
                        <p className="text-[10px] text-white/40 font-black uppercase mb-1">مکاتبات رسمی</p>
                        <p className="text-sm font-bold">info@canino-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-canina-blue group-hover:scale-110 transition-transform flex-shrink-0">
                     <MapPin className="w-6 h-6" />
                  </div>
                  <div>
                     <p className="text-[10px] text-white/40 font-black uppercase mb-1">دفتر مرکزی</p>
                     <p className="text-sm font-bold leading-relaxed">تهران، جردن، خیابان سعیدی، ساختمان کانینا، طبقه ۵، واحد ۱۹</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-black">اصالت کالا تضمین می‌شود</h5>
                    <p className="text-[10px] text-white/40 font-bold">تمامی محصولات دارای لیبل اصالت وزارت بهداشت و QR Code اختصاصی هستند.</p>
                  </div>
                </div>
                <div className="text-xs font-black italic text-white/20">اصالت آلمانی کانینا</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-black text-white/20 uppercase tracking-[0.3em]">
          <div>© ۲۰۲۶ کانینا ایران. تمامی حقوق محفوظ است.</div>
          <div className="flex gap-8 font-vazir">
            <button onClick={() => onNavigate("home")} className="hover:text-white transition-colors">درباره ما</button>
            <button onClick={() => onNavigate("home")} className="hover:text-white transition-colors">تماس با ما</button>
            <button className="hover:text-white transition-colors">حریم خصوصی</button>
          </div>
        </div>
      </div>
    </footer>
  );
}