"use client";

import Link from "next/link";
import Image from "next/image";
import { Instagram, Phone, Mail, MessageSquare } from "lucide-react";
import { useTranslations } from "next-intl";
import Logo from "@/public/logo.png";

export default function Footer() {
  const t = useTranslations("common");

  return (
    <footer className="hidden lg:block w-full bg-white border-t border-gray-200 mt-auto">
      <div className="mx-auto px-4 lg:px-6 max-w-[1520px] py-6">
        <Link
          href="/"
          className="inline-block transition-opacity hover:opacity-80"
        >
          <div className="relative h-34 w-[200px]">
            <Image
              src={Logo}
              alt="Logo"
              fill
              className="object-contain object-left"
            />
          </div>
        </Link>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-4">
          {/* Logo and Tagline */}
          <div className="col-span-1 md:col-span-1 space-y-3">
            <p className="text-base text-gray-500 max-w-xs">
              SmartElectronics - yerli we daşary ýurt harytlarynyň onlaýn
              marketi.
            </p>
            <ul className="space-y-3">
              <li>
                <Link
                  className="mt-4 text-base text-gray-500 max-w-xs"
                  href="/info"
                >
                  {t("about_us")}
                </Link>
              </li>
              <li>
                <Link
                  className="mt-4 text-base text-gray-500 max-w-xs"
                  href="/info"
                >
                  {t("contact_us")}
                </Link>
              </li>
            </ul>
          </div>

          {/* Quick Links / Contact Info */}
          <div className="space-y-4">
            <h3 className="font-bold text-gray-900 text-lg">
              {t("contact_us")}
            </h3>
            <div className="flex justify-between">
              <ul className="space-y-3">
                <li>
                  <a
                    href="tel:+99361126667"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Phone className="h-5 w-5" />
                    </div>
                    <span>+993 61 126667</span>
                  </a>
                </li>
                <li>
                  <a
                    href="tel:+99371777747"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Phone className="h-5 w-5" />
                    </div>
                    <span>+993 71 777747</span>
                  </a>
                </li>
                <li>
                  <a
                    href="mailto:smartelektronika@icloud.com"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Mail className="h-5 w-5" />
                    </div>
                    <span>smartelektronika@icloud.com</span>
                  </a>
                </li>
              </ul>
              <ul className="space-y-3">
                {" "}
                <li>
                  <a
                    href="https://www.instagram.com/smart_elektronikaa?igsh=eHcxN2ZsdHgwbTd4"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Instagram className="h-5 w-5" />
                    </div>
                    <span>@smart_elektronikaa</span>
                  </a>
                </li>
                <li>
                  <a
                    href="https://www.tiktok.com/@smart.elektronika2?_r=1&_t=ZS-93ipH66Inxf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20px"
                        height="20px"
                        viewBox="0 0 250 250"
                      >
                        <g clipRule="evenodd" fillRule="evenodd">
                          <path
                            d="M25 0h200c13.808 0 25 11.192 25 25v200c0 13.808-11.192 25-25 25H25c-13.808 0-25-11.192-25-25V25C0 11.192 11.192 0 25 0z"
                            fill="#010101"
                          />

                          <path
                            d="M156.98 230c7.607 0 13.774-6.117 13.774-13.662s-6.167-13.663-13.774-13.663h-2.075c7.607 0 13.774 6.118 13.774 13.663S162.512 230 154.905 230z"
                            fill="#ee1d51"
                          />

                          <path
                            d="M154.717 202.675h-2.075c-7.607 0-13.775 6.118-13.775 13.663S145.035 230 152.642 230h2.075c-7.608 0-13.775-6.117-13.775-13.662s6.167-13.663 13.775-13.663z"
                            fill="#66c8cf"
                          />

                          <ellipse
                            cx="154.811"
                            cy="216.338"
                            fill="#010101"
                            rx="6.699"
                            ry="6.643"
                          />

                          <path
                            d="M50 196.5v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm66.415 0v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm-39.81 3.93c0-2.17 1.771-3.93 3.959-3.93 2.19 0 3.963 1.76 3.963 3.93s-1.772 3.93-3.963 3.93c-2.188-.001-3.959-1.76-3.959-3.93zm0 6.738h7.922v22.645h-7.922zM87.924 196.5v33.313h7.925v-8.608l2.453-2.248L106.037 230h8.49l-11.133-16.095 10-9.733h-9.622l-7.923 7.86V196.5zm85.47 0v33.313h7.926v-8.608l2.452-2.248L191.509 230H200l-11.133-16.095 10-9.733h-9.622l-7.925 7.86V196.5z"
                            fill="#ffffff"
                          />

                          <path
                            d="M161.167 81.186c10.944 7.819 24.352 12.42 38.832 12.42V65.755a39.26 39.26 0 0 1-8.155-.853v21.923c-14.479 0-27.885-4.601-38.832-12.42v56.835c0 28.432-23.06 51.479-51.505 51.479-10.613 0-20.478-3.207-28.673-8.707C82.187 183.57 95.23 189.5 109.66 189.5c28.447 0 51.508-23.047 51.508-51.48V81.186zm10.06-28.098c-5.593-6.107-9.265-14-10.06-22.726V26.78h-7.728c1.945 11.09 8.58 20.565 17.788 26.308zm-80.402 99.107a23.445 23.445 0 0 1-4.806-14.256c0-13.004 10.548-23.547 23.561-23.547a23.6 23.6 0 0 1 7.147 1.103V87.022a51.97 51.97 0 0 0-8.152-.469v22.162a23.619 23.619 0 0 0-7.15-1.103c-13.013 0-23.56 10.543-23.56 23.548 0 9.195 5.272 17.157 12.96 21.035z"
                            fill="#ee1d52"
                          />

                          <path
                            d="M153.012 74.405c10.947 7.819 24.353 12.42 38.832 12.42V64.902c-8.082-1.72-15.237-5.942-20.617-11.814-9.208-5.743-15.843-15.218-17.788-26.308H133.14v111.239c-.046 12.968-10.576 23.468-23.561 23.468-7.652 0-14.45-3.645-18.755-9.292-7.688-3.878-12.96-11.84-12.96-21.035 0-13.005 10.547-23.548 23.56-23.548 2.493 0 4.896.388 7.15 1.103V86.553c-27.945.577-50.42 23.399-50.42 51.467 0 14.011 5.597 26.713 14.68 35.993 8.195 5.5 18.06 8.707 28.673 8.707 28.445 0 51.505-23.048 51.505-51.479z"
                            fill="#ffffff"
                          />

                          <path
                            d="M191.844 64.902v-5.928a38.84 38.84 0 0 1-20.617-5.887 38.948 38.948 0 0 0 20.617 11.815zM153.439 26.78a39.524 39.524 0 0 1-.427-3.198V20h-28.028v111.24c-.045 12.967-10.574 23.467-23.56 23.467-3.813 0-7.412-.904-10.6-2.512 4.305 5.647 11.103 9.292 18.755 9.292 12.984 0 23.515-10.5 23.561-23.468V26.78zm-44.864 59.773v-6.311a51.97 51.97 0 0 0-7.067-.479C73.06 79.763 50 102.811 50 131.24c0 17.824 9.063 33.532 22.835 42.772-9.083-9.28-14.68-21.982-14.68-35.993 0-28.067 22.474-50.889 50.42-51.466z"
                            fill="#69c9d0"
                          />

                          <path
                            d="M154.904 230c7.607 0 13.775-6.117 13.775-13.662s-6.168-13.663-13.775-13.663h-.188c-7.607 0-13.774 6.118-13.774 13.663S147.109 230 154.716 230zm-6.792-13.662c0-3.67 3-6.643 6.7-6.643 3.697 0 6.697 2.973 6.697 6.643s-3 6.645-6.697 6.645c-3.7-.001-6.7-2.975-6.7-6.645z"
                            fill="#ffffff"
                          />
                        </g>
                      </svg>
                    </div>
                    <span>@smart.elektronika2</span>
                  </a>
                </li>
                <li>
                  <div className="flex items-center gap-3 text-gray-600 group">
                    <div className="p-2 rounded-full bg-gray-50">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20px"
                        height="20px"
                        viewBox="0 0 48 48"
                        id="b"
                      >
                        <defs>
                          <style>{`.c{fill:#000000;}.d{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}`}</style>
                        </defs>

                        <path
                          className="d"
                          d="m24,2.5C12.1259,2.5,2.5,12.1259,2.5,24c0,5.4902,2.0752,10.4837,5.4617,14.2834-.971,2.8007-2.9933,3.6747-5.4617,4.5671,2.2605,2.1812,6.6677,2.7591,10.6226-.3278,3.1938,1.8799,6.9033,2.9773,10.8774,2.9773,11.8741,0,21.5-9.6259,21.5-21.5S35.8741,2.5,24,2.5Z"
                        />

                        <g>
                          <rect
                            className="d"
                            x="31.6398"
                            y="19.8877"
                            width="5.8181"
                            height="7.709"
                            rx="2.909"
                            ry="2.909"
                          />

                          <g>
                            <path
                              className="d"
                              d="m16.9179,22.7967c0-1.6066,1.3024-2.909,2.909-2.909h0c1.6066,0,2.909,1.3024,2.909,2.909v4.7999"
                            />

                            <line
                              className="d"
                              x1="16.9179"
                              y1="19.8877"
                              x2="16.9179"
                              y2="27.5967"
                            />

                            <path
                              className="d"
                              d="m22.736,22.7967c0-1.6066,1.3024-2.909,2.909-2.909h0c1.6066,0,2.909,1.3024,2.909,2.909v4.7999"
                            />
                          </g>

                          <g>
                            <circle
                              className="c"
                              cx="13.5602"
                              cy="17.1792"
                              r=".75"
                            />

                            <line
                              className="d"
                              x1="13.5602"
                              y1="19.8877"
                              x2="13.5602"
                              y2="27.5967"
                            />
                          </g>
                        </g>
                      </svg>
                    </div>
                    <div className="flex flex-col">
                      <span className="text-xs text-gray-400 font-medium">
                        {t("imo")}
                      </span>
                      <span>+993 61 126667</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          {/* Placeholder for other sections if needed */}
          <div className="hidden md:block"></div>
          <div className="hidden md:block"></div>
        </div>

        <div className="mt-6 pt-6 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400">
          <p>
            © {new Date().getFullYear()} SmartElectronics. All rights reserved.
          </p>
          <div className="flex gap-6">
            <Link href="#" className="hover:text-gray-600 transition-colors">
              Terms
            </Link>
            <Link href="#" className="hover:text-gray-600 transition-colors">
              Privacy
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}