"use client";

import { motion } from "framer-motion";
import { useLanguage } from "@/context/language-context";
import Link from "next/link";
import { useProduct, useProductStore } from "@/lib/productZustand";
import Image from "next/image";

export default function DetailInfo() {
  const { t, language } = useLanguage();
  const languageIndex = language === "uz" ? true : false;
  const product = useProduct((state) => state.product);
  if (product === null) return null;

  const handleScroll = (href: string) => {
    const element = document.querySelector(href);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div className="bg-white">
      <div className="max-w-[1200px] mx-auto">
        {/* Header */}
        <div className="sticky z-10 top-0 md:p-6 p-2 flex justify-center items-center">
          <h2 className="md:text-2xl text-lg font-bold text-gray-900">
            {languageIndex ? product.name_uz : product.name_ru}
          </h2>
        </div>

        {/* Content */}
        <div className="sm:p-6 p-2">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 mb-8">
            {/* Image */}
            <div className="relative w-full h-64 sm:h-80 lg:h-96 rounded-lg overflow-hidden bg-gray-50">
              <Image
                src={`https://admin.promtechno.uz${product.image}`}
                alt={languageIndex ? product.name_uz : product.name_ru}
                fill
                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
                className="object-contain p-4"
                priority
              />
            </div>

            {/* Content */}
            <div className="space-y-4 lg:space-y-6 lg:py-4">
              {/* Description */}
              <div className="text-gray-800 text-sm sm:text-base leading-relaxed">
                {languageIndex
                  ? product.description_uz
                  : product.description_ru}
              </div>

              {/* CTA Buttons */}
              <div className="pt-2">
                <Link href="#contact" onClick={() => handleScroll("#contact")}>
                  <motion.button
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    className="w-full sm:w-auto px-8 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-all duration-300 shadow-md hover:shadow-lg"
                  >
                    {t.contact.send}
                  </motion.button>
                </Link>
              </div>
            </div>
          </div>
          {/* Specifications */}
          <div>
            <div className="mb-8">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                {t.features}
              </h3>
              <div className="space-y-3 flex items-start justify-start gap-4 flex-wrap ">
                {product.features.map((spec, idx) => (
                  <div
                    key={idx}
                    className="flex flex-col justify-between py-2 border border-gray-100 rounded-lg p-2"
                  >
                    <span className="text-gray-600">
                      {languageIndex ? spec.key_uz : spec.key_ru}:
                    </span>
                    <span className="text-gray-900">
                      {languageIndex ? spec.value_uz : spec.value_ru}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}