"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 65 123456",
      href: "tel:+99365123456",
      color: "bg-blue-50 text-blue-600",
    },
    {
      icon: <Instagram className="h-6 w-6" />,
      label: t("instagram"),
      value: "@smartelectronics",
      href: "https://instagram.com/smartelectronics",
      color: "bg-pink-50 text-pink-600",
    },
    {
      icon: <Mail className="h-6 w-6" />,
      label: t("email"),
      value: "info@smartelectronics.com",
      href: "mailto:info@smartelectronics.com",
      color: "bg-gray-50 text-gray-600",
    },
    {
      icon: <MessageSquare className="h-6 w-6" />,
      label: t("imo"),
      value: "+993 65 123456",
      href: null,
      color: "bg-emerald-50 text-emerald-600",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* 
      <div className="bg-white border-b sticky top-0 z-10 px-4 h-16 flex items-center gap-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => router.back()}
          className="rounded-full"
        >
          <ChevronLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-xl font-bold">{t("info")}</h1>
      </div> */}

      <div className="p-4 max-w-md mx-auto space-y-6">
        {/* Logo Section */}
        <div className="bg-white rounded-3xl p-8 flex flex-col items-center justify-center shadow-sm border border-gray-100">
          <div className="relative h-32 w-[220px] mb-4">
            <Image src={Logo} alt="Logo" fill className="object-contain" />
          </div>
          <p className="text-center text-gray-500 text-sm leading-relaxed">
            SmartElectronics - yerli we daşary ýurt harytlarynyň onlaýn marketi.
          </p>
        </div>

        {/* Contact Grid */}
        <div className="grid gap-4">
          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider px-2">
            {t("contact_us")}
          </h2>

          {contactItems.map((item, index) => {
            const Content = (
              <div className="flex items-center gap-4 p-4 bg-white rounded-2xl border border-gray-100 shadow-sm active:bg-gray-50 transition-colors">
                <div className={`p-3 rounded-xl ${item.color}`}>
                  {item.icon}
                </div>
                <div className="flex flex-col">
                  <span className="text-xs text-gray-400 font-medium">
                    {item.label}
                  </span>
                  <span className="text-base font-semibold text-gray-900">
                    {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
                  }
                >
                  {Content}
                </a>
              );
            }

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