import Link from 'next/link'
import Image from 'next/image'
import { ArrowRight, CheckCircle, ShoppingCart } from 'lucide-react'
import type { Product } from '@/lib/products'

interface ProductCardProps {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="group relative bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-600 hover:shadow-lg dark:hover:shadow-brand-900/20 transition-all duration-200 flex flex-col overflow-hidden">
      {/* Badge */}
      {product.badge && (
        <span className="absolute top-3 left-3 z-10 px-2.5 py-1 text-xs font-semibold bg-brand-600 text-white rounded-full">
          {product.badge}
        </span>
      )}

      {/* Image */}
      <Link href={`/produkty/${product.slug}`} tabIndex={-1} className="block">
        <div className="aspect-[4/3] bg-gradient-to-br from-brand-50 to-brand-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center relative overflow-hidden">
          {product.image ? (
            <Image
              src={product.image}
              alt={product.name}
              fill
              className="object-contain p-3 group-hover:scale-105 transition-transform duration-300"
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
            />
          ) : (
            <div className="w-20 h-20 bg-brand-200 dark:bg-brand-900 rounded-2xl flex items-center justify-center">
              <svg viewBox="0 0 80 80" className="w-12 h-12 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="10" y="20" width="60" height="40" rx="4" />
                <line x1="10" y1="32" x2="70" y2="32" />
                <circle cx="20" cy="26" r="2" fill="currentColor" stroke="none" />
                <circle cx="28" cy="26" r="2" fill="currentColor" stroke="none" />
                <rect x="16" y="38" width="8" height="4" rx="1" fill="currentColor" stroke="none" />
                <rect x="28" y="38" width="8" height="4" rx="1" fill="currentColor" stroke="none" />
                <rect x="40" y="38" width="8" height="4" rx="1" fill="currentColor" stroke="none" />
              </svg>
            </div>
          )}
          <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-transparent group-hover:from-brand-500/10 transition-all" />
        </div>
      </Link>

      {/* Content */}
      <div className="p-5 flex flex-col flex-1">
        <p className="text-xs font-medium text-brand-600 dark:text-brand-400 uppercase tracking-wide mb-1.5">
          {product.shortName}
        </p>
        <Link href={`/produkty/${product.slug}`}>
          <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 leading-snug group-hover:text-brand-700 dark:group-hover:text-brand-400 transition-colors">
            {product.name}
          </h3>
        </Link>
        <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-4 flex-1">
          {product.description}
        </p>

        {/* Top features */}
        <ul className="space-y-1 mb-4">
          {product.features.slice(0, 3).map((feature) => (
            <li key={feature} className="flex items-start gap-2 text-xs text-gray-600 dark:text-gray-400">
              <CheckCircle className="w-3.5 h-3.5 text-green-500 mt-0.5 shrink-0" />
              {feature}
            </li>
          ))}
        </ul>

        {/* Price + CTA */}
        <div className="pt-3 border-t border-gray-100 dark:border-gray-700">
          <div className="flex items-center justify-between mb-3">
            <span className="text-lg font-bold text-gray-900 dark:text-white">{product.price} zł</span>
            <Link
              href={`/produkty/${product.slug}`}
              className="inline-flex items-center gap-1 text-sm font-medium text-brand-600 dark:text-brand-400 hover:gap-2 transition-all"
            >
              Szczegóły <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
          <Link
            href={`/kontakt?produkt=${encodeURIComponent(product.name)}`}
            className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold rounded-xl transition-colors"
          >
            <ShoppingCart className="w-4 h-4" /> Zamów / Zapytaj
          </Link>
        </div>
      </div>
    </div>
  )
}