"use client";

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

export default function InfoPage() {
  const t = useTranslations("common");
  const router = useRouter();

  const contactItems = [
    {
      icon: <Phone className="h-6 w-6" />,
      label: t("phone"),
      value: "+993 61 126667",
      href: "tel:+99361126667",
      color: "bg-blue-50 text-blue-600",
    },
    {
      icon: <Phone className="h-6 w-6" />,
      label: t("phone"),
      value: "+993 71 777747",
      href: "tel:+99371777747",
      color: "bg-blue-50 text-blue-600",
    },
    {
      icon: <Instagram className="h-6 w-6" />,
      label: t("instagram"),
      value: "@smart_elektronikaa",
      href: "https://www.instagram.com/smart_elektronikaa?igsh=eHcxN2ZsdHgwbTd4",
      color: "bg-pink-50 text-pink-600",
    },
    {
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24px"
          height="24px"
          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>
      ),
      label: t("tiktok"),
      value: "@smart.elektronika2",
      href: "https://www.tiktok.com/@smart.elektronika2?_r=1&_t=ZS-93ipH66Inxf",
      color: "bg-pink-50 text-pink-600",
    },
    {
      icon: <Mail className="h-6 w-6" />,
      label: t("email"),
      value: "smartelektronika@icloud.com",
      href: "mailto:smartelektronika@icloud.com",
      color: "bg-gray-50 text-gray-600",
    },
    {
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24px"
          height="24px"
          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>
      ),
      label: t("imo"),
      value: "+993 61 126667",
      href: null,
      color: "bg-emerald-50 text-emerald-600",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Desktop: centered container with max-width, Mobile: full width */}
      <div className="p-4 md:p-8 lg:p-12 max-w-5xl mx-auto space-y-6 md:space-y-8">
        {/* Logo Section - responsive sizing */}
        <div className="bg-white rounded-3xl p-8 md:p-12 flex flex-col items-center justify-center shadow-sm border border-gray-100">
          <div className="relative h-32 md:h-40 w-[220px] md:w-[280px] mb-4 md:mb-6">
            <Image src={Logo} alt="Logo" fill className="object-contain" />
          </div>
          <p className="text-center text-gray-500 text-sm md:text-base leading-relaxed max-w-2xl">
            SmartElectronics - yerli we daşary ýurt harytlarynyň onlaýn marketi.
          </p>
        </div>

        {/* Contact Grid - 1 column mobile, 2 columns tablet, 3 columns desktop */}
        <div className="space-y-4">
          <h2 className="text-sm md:text-base font-semibold text-gray-400 uppercase tracking-wider px-2">
            {t("contact_us")}
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
            {contactItems.map((item, index) => {
              const Content = (
                <div className="flex items-center gap-4 p-4 md:p-5 bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md hover:border-gray-200 active:bg-gray-50 transition-all duration-200">
                  <div
                    className={`p-3 md:p-4 rounded-xl ${item.color} transition-transform hover:scale-110`}
                  >
                    {item.icon}
                  </div>
                  <div className="flex flex-col min-w-0 flex-1">
                    <span className="text-xs md:text-sm text-gray-400 font-medium">
                      {item.label}
                    </span>
                    <span className="text-base md:text-lg font-semibold text-gray-900 truncate">
                      {item.value}
                    </span>
                  </div>
                </div>
              );

              if (item.href) {
                return (
                  <a
                    key={index}
                    href={item.href}
                    target={item.href.startsWith("http") ? "_blank" : undefined}
                    rel={
                      item.href.startsWith("http")
                        ? "noopener noreferrer"
                        : undefined
                    }
                    className="block"
                  >
                    {Content}
                  </a>
                );
              }

              return <div key={index}>{Content}</div>;
            })}
          </div>
        </div>
      </div>
    </div>
  );
}