import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useTranslations, useLocale } from 'next-intl';
import { Section } from '../../components/ui';

export default function ProductCategories({ data }: { data?: any }) {
  const t = useTranslations('Products');
  const locale = useLocale();

  const productsBase = locale === 'de' ? 'produkte' : 'products';

  const categories = [
    {
      title: t('categories.lowVoltage.title'),
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
      href: `/${locale}/${productsBase}/${locale === 'de' ? 'niederspannungskabel' : 'low-voltage-cables'}`,
    },
    {
      title: t('categories.mediumVoltage.title'),
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
      href: `/${locale}/${productsBase}/${locale === 'de' ? 'mittelspannungskabel' : 'medium-voltage-cables'}`,
    },
    {
      title: t('categories.highVoltage.title'),
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
      href: `/${locale}/${productsBase}/${locale === 'de' ? 'hochspannungskabel' : 'high-voltage-cables'}`,
    },
    {
      title: t('categories.solar.title'),
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
      href: `/${locale}/${productsBase}/${locale === 'de' ? 'solarkabel' : 'solar-cables'}`,
    },
  ];

  return (
    <Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
      {(data?.title || t.has('title')) && (
        <h2 className="sr-only">
          {data?.title ? (
            <span dangerouslySetInnerHTML={{ __html: data.title }} />
          ) : (
            t.rich('title', { green: (chunks: any) => <span>{chunks}</span> })
          )}
        </h2>
      )}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
        {categories.map((category, idx) => (
          <Link
            key={idx}
            href={category.href}
            className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0"
          >
            <Image
              src={category.img}
              alt={category.title}
              fill
              className="object-cover transition-transform duration-1000 group-hover:scale-110"
              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 24vw"
            />
            <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
            <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
              <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
                <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 md:mb-6 border border-white/20">
                  <Image
                    src={category.icon}
                    alt=""
                    width={40}
                    height={40}
                    className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert"
                  />
                </div>
                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">
                  {category.title}
                </h3>
                <p className="text-white/80 text-sm md:text-base line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
                  {category.desc}
                </p>
              </div>
              <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
                {t('exploreCategory')}{' '}
                <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </Section>
  );
}
