canina/frontend/application/components/Footer.tsx

"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import { Phone, Mail, MapPin, Instagram, ShieldCheck, Globe, ArrowUp, Download, ChevronDown, ChevronUp } from "lucide-react";
import { useSettingsStore } from "../lib/store/settingsStore";
import BrandLogo from "./BrandLogo";
import Link from "next/link";

import { NavigationTarget } from "../lib/types";

export default function Footer({ 
  onB2BOpen 
}: { 
  onNavigate?: (v: NavigationTarget) => void; 
  onShopNavigate?: (c?: string) => void; 
  onB2BOpen?: () => void; 
}) {
  const getText = useSettingsStore(state => state.getText);
  const isB2BEnabled = useSettingsStore((s) => s.getBoolean('b2bRegistrationOpen', true) && s.getBoolean('b2b_enabled', true));
  const [showScroll, setShowScroll] = useState(false);
  const [footerCol1, setFooterCol1] = useState<Array<{ id?: string; label: string; href: string }>>([]);
  const [isDescExpanded, setIsDescExpanded] = useState(false);

  useEffect(() => {
    fetch(`${process.env.NEXT_PUBLIC_API_URL || '/api'}/menu/type/FOOTER_COL1`)
      .then((r) => r.json())
      .then((data) => {
        if (Array.isArray(data) && data.length > 0) {
          setFooterCol1(data);
        }
      })
      .catch(() => {});
  }, []);

  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' });
  };

  const brandDesc = getText('footer_brand_desc', "تدارک هوشمندانه سلامت برای همراهان وفادار شما. واردکننده انحصاری مکمل‌های درمانی با گرید دارویی اختصاصی از آلمان با سابقه ۴۰ سال نوآوری.");
  const isLongDesc = brandDesc.length > 120;

  return (
    <footer className="bg-medical-gray-900 text-white pt-10 sm:pt-24 pb-28 sm:pb-12 font-shabnam relative" dir="rtl">
      {/* Floating Back-to-Top Button */}
      {showScroll && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-20 left-4 sm:bottom-8 sm:left-8 z-40 bg-canina-blue text-white p-2.5 sm: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-4 h-4 sm:w-5 sm:h-5 group-hover:-translate-y-1 transition-transform" />
          <span className="hidden sm:inline">بازگشت به بالا</span>
        </button>
      )}

      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-16 mb-8 sm:mb-20">
          
          {/* Brand Presence */}
          <div className="space-y-4 sm:space-y-6">
            <div className="flex items-center justify-between">
              <BrandLogo isDarkBackground size="lg" />
              <div className="flex gap-2.5 sm:hidden">
                {getText('contact_instagram', '') && (
                  <a href={getText('contact_instagram', '#')} target="_blank" rel="noopener noreferrer" aria-label="صفحه اینستاگرام رسمی کنینا ایران" className="w-9 h-9 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
                    <Instagram className="w-4 h-4" />
                  </a>
                )}
                {getText('contact_telegram', '') && (
                  <a href={getText('contact_telegram', '#')} target="_blank" rel="noopener noreferrer" aria-label="کانال تلگرام رسمی کنینا ایران" className="w-9 h-9 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
                    <Globe className="w-4 h-4" />
                  </a>
                )}
              </div>
            </div>

            {/* Expandable SEO-friendly Brand Description */}
            <div className="relative">
              <div
                className={`text-xs sm:text-sm text-slate-300 leading-relaxed font-medium transition-all duration-500 overflow-hidden ${
                  !isDescExpanded && isLongDesc
                    ? "max-h-[5rem] sm:max-h-[5.5rem] [mask-image:linear-gradient(to_bottom,black_50%,transparent_100%)]"
                    : "max-h-[1000px]"
                }`}
              >
                <p className="whitespace-pre-line">{brandDesc}</p>
              </div>

              {isLongDesc && (
                <button
                  type="button"
                  onClick={() => setIsDescExpanded(!isDescExpanded)}
                  className="mt-1.5 inline-flex items-center gap-1 text-[11px] sm:text-xs font-bold text-canina-teal hover:text-white transition-colors cursor-pointer"
                >
                  {isDescExpanded ? (
                    <>
                      <span>بستن توضیحات</span>
                      <ChevronUp className="w-3.5 h-3.5" />
                    </>
                  ) : (
                    <>
                      <span>مشاهده بیشتر</span>
                      <ChevronDown className="w-3.5 h-3.5" />
                    </>
                  )}
                </button>
              )}
            </div>

            <div className="hidden sm:flex gap-4 pt-1">
               {getText('contact_instagram', '') && (
                 <a href={getText('contact_instagram', '#')} target="_blank" rel="noopener noreferrer" aria-label="صفحه اینستاگرام رسمی کنینا ایران" 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">
                    <Instagram className="w-5 h-5" />
                 </a>
               )}
               {getText('contact_telegram', '') && (
                 <a href={getText('contact_telegram', '#')} target="_blank" rel="noopener noreferrer" aria-label="کانال تلگرام رسمی کنینا ایران" 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">
                    <Globe className="w-5 h-5" />
                 </a>
               )}
            </div>
          </div>

          {/* Quick Links / Menu Column 1 */}
          <div className="space-y-4 sm:space-y-8">
            <h3 className="text-base sm:text-xl font-bold text-white border-b-2 border-canina-blue pb-1.5 sm:pb-2 max-w-max font-lalezar">{getText('footer_links_title', "دسترسی سریع")}</h3>
            <ul className="grid grid-cols-2 sm:grid-cols-1 gap-x-3 gap-y-2.5 sm:gap-y-4 text-xs sm:text-sm font-bold text-slate-300">
              {footerCol1.length > 0 ? (
                footerCol1.map((item) => (
                  <li key={item.id || item.href}>
                    <Link href={item.href} className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
                      <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
                      <span className="truncate">{item.label}</span>
                    </Link>
                  </li>
                ))
              ) : (
                <>
                  <li>
                    <Link href="/shop" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
                      <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
                      <span className="truncate">{getText('footer_link_products', "محصولات تخصصی ۲۰۲۴")}</span>
                    </Link>
                  </li>
                  <li>
                    <Link href="/blog" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
                      <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
                      <span className="truncate">{getText('footer_link_blog', "مجله سلامت پت (وبلاگ)")}</span>
                    </Link>
                  </li>
                  <li>
                    <Link href="/profile" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
                      <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
                      <span className="truncate">{getText('footer_link_profiles', "شناسنامه پت‌ها")}</span>
                    </Link>
                  </li>
                  <li>
                    <Link href="/wiki" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
                      <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
                      <span className="truncate">{getText('footer_link_wiki', "دانشنامه ترکیبات")}</span>
                    </Link>
                  </li>
                </>
              )}
              <li className="col-span-2 sm:col-span-1">
                <Link 
                  href="/trust-seals" 
                  className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group text-emerald-400"
                >
                  <ShieldCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400 flex-shrink-0" />
                  <span>نمادهای اعتماد و مجوزهای رسمی</span>
                </Link>
              </li>
              <li className="col-span-2 sm:col-span-1">
                <Link 
                  href="/catalog" 
                  className="w-full inline-flex items-center justify-center gap-2 px-3 py-2 sm:px-5 sm:py-3 bg-canina-blue hover:bg-blue-600 text-white rounded-xl sm:rounded-2xl text-[11px] sm:text-xs font-black transition-all shadow-md shadow-canina-blue/30 hover:scale-[1.02] border border-blue-400/30 group cursor-pointer"
                >
                  <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-amber-300 group-hover:-translate-y-0.5 transition-transform" />
                  <span>مشاهده و دانلود کاتالوگ آنلاین محصولات</span>
                </Link>
              </li>
              {isB2BEnabled && (
                <li className="col-span-2 sm:col-span-1">
                  <Link href="/b2b" className="hover:text-canina-blue hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm: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 flex-shrink-0" />
                    <span>{getText('footer_link_b2b', "همکاری با کلینیک‌ها و پت‌شاپ‌ها (B2B)")}</span>
                  </Link>
                </li>
              )}
            </ul>
          </div>

          {/* Location & Contact */}
          <div className="space-y-4 sm:space-y-8 lg:col-span-2">
            <h3 className="text-base sm:text-xl font-bold text-white border-b-2 border-canina-blue pb-1.5 sm:pb-2 max-w-max font-lalezar">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-8">
               <div className="flex flex-col sm:space-y-6 gap-2.5 sm:gap-0">
                  <a href={getText('contact_phone_link', `tel:${getText('contact_phone', '02188884444').replace(/[^0-9+]/g, '')}`)} className="flex items-center sm:items-start gap-2.5 sm:gap-4 group hover:opacity-90 transition-opacity bg-white/[0.04] sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none border border-white/5 sm:border-0">
                     <div className="w-9 h-9 sm:w-12 sm:h-12 bg-white/5 rounded-xl sm:rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
                        <Phone className="w-4 h-4 sm:w-6 sm:h-6" />
                     </div>
                     <div className="min-w-0">
                        <p className="text-[10px] sm:text-[11px] text-slate-400 font-extrabold uppercase mb-0.5">{getText('footer_phone_label', "خط ویژه فروش")}</p>
                        <p className="text-xs sm:text-lg font-extrabold tracking-wider sm:tracking-widest text-left text-slate-200" dir="ltr">{getText('contact_phone', "۰۲۱-۸۸۸۸۴۴۴۴")}</p>
                     </div>
                  </a>
                  <a href={`mailto:${getText('contact_email', 'info@canina.ir')}`} className="flex items-center sm:items-start gap-2.5 sm:gap-4 group hover:opacity-90 transition-opacity bg-white/[0.04] sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none border border-white/5 sm:border-0">
                     <div className="w-9 h-9 sm:w-12 sm:h-12 bg-white/5 rounded-xl sm:rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
                        <Mail className="w-4 h-4 sm:w-6 sm:h-6" />
                     </div>
                     <div className="min-w-0">
                        <p className="text-[10px] sm:text-[11px] text-slate-400 font-extrabold uppercase mb-0.5">{getText('footer_email_label', "مکاتبات رسمی")}</p>
                        <p className="text-xs sm:text-sm font-bold text-slate-300 truncate">{getText('contact_email', "info@canina.ir")}</p>
                     </div>
                  </a>
               </div>
               
               <div className="flex items-start gap-2.5 sm:gap-4 group bg-white/[0.04] sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none border border-white/5 sm:border-0">
                  <div className="w-9 h-9 sm:w-12 sm:h-12 bg-white/5 rounded-xl sm:rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
                     <MapPin className="w-4 h-4 sm:w-6 sm:h-6" />
                  </div>
                  <div className="min-w-0">
                      <p className="text-[10px] sm:text-[11px] text-slate-400 font-extrabold uppercase mb-0.5">{getText('footer_address_label', "دفتر مرکزی")}</p>
                      <p className="text-xs sm:text-sm font-bold leading-relaxed text-slate-300">{getText('contact_address', "تهران، جردن، خیابان سعیدی، ساختمان کنینا، طبقه ۵، واحد ۱۹")}</p>
                  </div>
               </div>
            </div>

            {/* Trust and Verification Banner */}
            <div className="mt-4 sm:mt-10 p-3.5 sm:p-6 bg-white/5 rounded-2xl sm:rounded-[2rem] border border-white/10 flex flex-col sm:flex-row items-center justify-between gap-3.5 sm:gap-6 text-center sm:text-right">
                <div className="flex items-center gap-2.5 sm:gap-4 w-full sm:w-auto">
                  <div className="w-9 h-9 sm:w-10 sm:h-10 bg-green-500/20 text-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                    <ShieldCheck className="w-4 h-4 sm:w-6 sm:h-6" />
                  </div>
                  <div className="text-right min-w-0 flex-1">
                    <h3 className="text-xs sm:text-sm font-bold text-white truncate">{getText('footer_auth_title', "اصالت کالا تضمین می‌شود")}</h3>
                    <p className="text-[10px] text-slate-400 font-bold leading-relaxed">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت سازمان دامپزشکی و نماد اعتماد الکترونیکی هستند.")}</p>
                  </div>
                </div>
                
                <div className="flex items-center justify-center gap-3 shrink-0 pt-2 sm:pt-0 border-t border-white/10 sm:border-0 w-full sm:w-auto">
                  {/* Official eNamad Clickable Seal */}
                  <div 
                    className="bg-white p-1 sm:p-2 rounded-lg sm:rounded-xl shadow-md flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform [&_img]:!w-[48px] [&_img]:!h-[48px] sm:[&_img]:!w-[65px] sm:[&_img]:!h-[65px]"
                    dangerouslySetInnerHTML={{
                      __html: getText('ENAMAD_HTML_CODE', `<a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=765218&Code=dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=765218&Code=dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny' alt='اینماد رسمی کنینا' style='cursor:pointer; width: 65px; height: 65px;' code='dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny'></a>`)
                    }}
                  />

                  {/* Official Zibal IPG Trust Seal */}
                  <div className="bg-white p-1 sm:p-2 rounded-lg sm:rounded-xl shadow-md flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform">
                    <a
                      href="https://gateway.zibal.ir/trustMe/canina.ir"
                      target="_blank"
                      rel="noopener noreferrer"
                      title="درگاه پرداخت امن و معتبر زیبال"
                      className="block"
                    >
                      <Image
                        src="https://zibal.ir/trust/assets/2.png"
                        alt="نماد اعتماد درگاه پرداخت زیبال"
                        width={65}
                        height={65}
                        unoptimized
                        className="max-w-[48px] h-[48px] sm:max-w-[65px] sm:h-[65px] object-contain"
                      />
                    </a>
                  </div>
                </div>
            </div>
          </div>

        </div>

        <div className="pt-6 sm:pt-12 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-6 text-[10px] font-bold uppercase tracking-[0.2em] sm:tracking-[0.3em] font-shabnam text-center sm:text-right">
          <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>
  );
}