ESIM/EsimLao/esim-vite/src/components/Footer.tsx

import React, { useEffect, useState } from "react";
import logo from "../assets/img/getgo.svg";
import { useTranslation } from "react-i18next";
import { getWithExpiry } from "../logic/loigicUtils";
import { Area } from "../services/product/type";
import { useNavigate } from "react-router-dom";
import { DataCacheKey, staleTime } from "../global/constants";
import { startLoading, stopLoading } from "../features/loading/loadingSlice";
import { useAppDispatch } from "../hooks/useRedux";
import { useQuery } from "@tanstack/react-query";
import { productApi } from "../apis/productApi";
const Footer: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const { data: loadArea = [] } = useQuery<Area[]>({
    queryKey: [DataCacheKey.AREAS_FOOTER],
    queryFn: async (): Promise<Area[]> => {
      try {
        dispatch(startLoading({}));
        const res = await productApi.loadArea({
          isCountry: "1",
          isPopular: "1",
        });
        // save to redux store
        console.log("Get area response data:", res);
        return res.data as Area[];
      } catch (error) {
        console.error(error);
        return []; // 🔴 bắt buộc
      } finally {
        dispatch(stopLoading());
      }
    },
    staleTime: staleTime,
  });

  const popularAreas = React.useMemo(() => loadArea.slice(0, 3), [loadArea]);

  return (
    <footer className="bg-white border-t border-slate-100 pt-16 pb-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Info Columns */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 mb-16">
          <div className="space-y-6">
            <div className="flex items-center space-x-2">
              {/* <svg
                className="w-8 h-8 text-[#EE0434]"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
              </svg> */}
              <img
                src={logo}
                alt="SkySimHub Logo"
                className="text-[#EE0434] mr-0"
                style={{ width: "150px" }}
              />
              {/* <span className="text-xl font-black text-[#EE0434]">etgo</span> */}
            </div>
            <p className="text-sm font-bold text-[#EE0434] leading-tight">
              Công ty TNHH Phát triển toàn cầu VIETTECH
            </p>
            <p className="text-sm font-medium text-slate-600">
              Mã số thuế: 0901210362
            </p>
            <p className="text-sm font-medium text-slate-600">
              Ngày cấp: 09/01/2026
            </p>
            <p className="text-sm font-medium text-slate-600">
              Nơi cấp: Phòng Đăng Ký Kinh Doanh Tỉnh Hưng Yên - Sở Tài Chính
              Tỉnh Hưng Yên
            </p>
            <div className="space-y-3 text-sm text-slate-500">
              <p className="flex items-start">
                <svg
                  className="w-4 h-4 mr-2 mt-0.5 text-[#EE0434]"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                  />
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                </svg>{" "}
                218 Đảo Dừa 1, Khu đô thị Vinhomes Oceanpark 2, Xã Nghĩa Trụ,
                Tỉnh Hưng Yên, Việt Nam
              </p>
              <p className="flex items-center">
                <svg
                  className="w-4 h-4 mr-2 text-[#EE0434]"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>{" "}
                klinhnguyen@viettech.asia
              </p>
              <p className="flex items-center">
                <svg
                  className="w-4 h-4 mr-2 text-[#EE0434]"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>{" "}
                Zalo/Whatsapp: +84336548007
              </p>
            </div>
          </div>
          <div>
            <h3 className="text-base font-bold text-slate-900 mb-6">
              SkySimHub
            </h3>
            <ul className="space-y-4 text-sm text-slate-500">
              <li>
                <a href="#" className="hover:text-[#EE0434] transition-colors">
                  {t("aboutUs")}
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="hover:text-[#EE0434] transition-colors"
                  onClick={() => navigate("/terms")}
                >
                  {t("termsService")}
                </a>
              </li>
              {/* <li>
                <a href="#" className="hover:text-[#EE0434] transition-colors">
                  {t("privacyPolicy")}
                </a>
              </li> */}
            </ul>
          </div>
          <div>
            <h3 className="text-base font-bold text-slate-900 mb-6">
              Travel {t("sim")}
            </h3>
            <ul className="space-y-4 text-sm text-slate-500">
              {popularAreas.map((area) => (
                <li>
                  <a
                    href="#"
                    className="hover:text-[#EE0434] transition-colors"
                    onClick={() =>
                      navigate(`/product-detail/${area.id}`, {
                        state: {
                          ...area,
                        },
                      })
                    }
                  >
                    {area.areaName1}
                  </a>
                </li>
              ))}
              {/* <li>
                <a
                  href="#"
                  className="hover:text-[#EE0434] transition-colors"
                  onClick={() => navigate("/buy-sim")}
                >
                  {t("chinaSim")}
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="hover:text-[#EE0434] transition-colors"
                  onClick={() => navigate("/buy-sim")}
                >
                  {t("thailandSim")}
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="hover:text-[#EE0434] transition-colors"
                  onClick={() => navigate("/buy-sim")}
                >
                  {t("japanSim")}
                </a>
              </li> */}
            </ul>
          </div>
          {/* <div>
            <h3 className="text-base font-bold text-slate-900 mb-6">Guide</h3>
            <ul className="space-y-4 text-sm text-slate-500">
              <li>
                <a href="#" className="hover:text-[#EE0434] transition-colors">
                  {t("whatEsim")}
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-[#EE0434] transition-colors">
                  {t("supportSupport")}
                </a>
              </li>
            </ul>
          </div> */}
        </div>

        {/* Bottom */}
        <div className="pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <p className="text-sm text-slate-400">
            © 2025 SkySimHub All rights reserved
          </p>
          <div className="bg-[#EE0434] px-4 py-2 rounded-lg flex items-center space-x-2">
            <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center text-[#EE0434]">
              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fillRule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <span className="text-[10px] text-white font-bold uppercase tracking-widest">
              Official Store Verified
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;