import Link from 'next/link';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { Section, Container } from '@/components/ui';

export default function ProductsPage() {
  const t = useTranslations('Navigation');

  const categories = [
    { 
      title: 'Low Voltage Cables', 
      desc: 'Powering everyday essentials with reliability and safety.',
      img: '/uploads/2024/12/low-voltage-scaled.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
      href: '/products/low-voltage-cables'
    },
    { 
      title: 'Medium Voltage Cables', 
      desc: 'The perfect balance between power and performance for industrial and urban grids.',
      img: '/uploads/2024/12/medium-voltage-scaled.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
      href: '/products/medium-voltage-cables'
    },
    { 
      title: 'High Voltage Cables', 
      desc: 'Delivering maximum power over long distances—without compromise.',
      img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
      href: '/products/high-voltage-cables'
    },
    { 
      title: 'Solar Cables', 
      desc: 'Connecting the sun’s energy to your sustainable future.',
      img: '/uploads/2025/04/3.webp',
      icon: '/uploads/2024/11/Solar.svg',
      href: '/products/solar-cables'
    }
  ];

  return (
    <div className="flex flex-col min-h-screen">
      <Section className="bg-neutral-light">
        <Container>
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h1 className="text-4xl font-bold mb-6">Our Products</h1>
            <p className="text-xl text-text-secondary">
              Explore our comprehensive range of high-quality cables designed for every application.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {categories.map((category, idx) => (
              <Link key={idx} href={category.href} className="group block bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark hover:shadow-md transition-all">
                <div className="relative h-64 overflow-hidden">
                  <Image 
                    src={category.img} 
                    alt={category.title}
                    fill
                    className="object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
                </div>
                <div className="p-8">
                  <div className="flex items-center mb-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                      <img src={category.icon} alt="" className="w-8 h-8" />
                    </div>
                    <h2 className="text-2xl font-bold text-text-primary group-hover:text-primary transition-colors">{category.title}</h2>
                  </div>
                  <p className="text-text-secondary text-lg mb-6">
                    {category.desc}
                  </p>
                  <span className="text-primary font-medium group-hover:translate-x-1 transition-transform inline-flex items-center">
                    View Products &rarr;
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </Container>
      </Section>
    </div>
  );
}