klz-cables.com/components/ExcelDownload.tsx

'use client';

import { cn } from '@/components/ui/utils';
import { useTranslations } from 'next-intl';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';

interface ExcelDownloadProps {
    excelPath: string;
    className?: string;
}

export default function ExcelDownload({ excelPath, className }: ExcelDownloadProps) {
    const t = useTranslations('Products');
    const { trackEvent } = useAnalytics();

    return (
        <div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
            <a
                href={excelPath}
                target="_blank"
                rel="noopener noreferrer"
                onClick={() =>
                    trackEvent(AnalyticsEvents.DOWNLOAD, {
                        file_name: excelPath.split('/').pop(),
                        file_path: excelPath,
                        file_type: 'excel',
                        location: 'product_page',
                    })
                }
                className="group relative block w-full overflow-hidden rounded-[32px] bg-primary-dark p-1 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] hover:-translate-y-1"
            >
                {/* Animated Background Gradient */}
                <div className="absolute inset-0 bg-gradient-to-r from-emerald-500 via-teal-400 to-emerald-500 opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />

                {/* Inner Content */}
                <div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
                    {/* Icon Container */}
                    <div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-emerald-600 group-hover:border-white/20 transition-all duration-500">
                        <div className="absolute inset-0 rounded-2xl bg-emerald-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                        {/* Spreadsheet/Table Icon */}
                        <svg
                            className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={1.5}
                                d="M3 10h18M3 14h18M10 3v18M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6z"
                            />
                        </svg>
                    </div>

                    {/* Text Content */}
                    <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                            <span className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-400">
                                Excel Datasheet
                            </span>
                        </div>
                        <h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-emerald-400 transition-colors duration-300">
                            {t('downloadExcel')}
                        </h3>
                        <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
                            {t('downloadExcelDesc')}
                        </p>
                    </div>

                    {/* Arrow Icon */}
                    <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-emerald-600 group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
                        <svg
                            className="h-5 w-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2.5}
                                d="M9 5l7 7-7 7"
                            />
                        </svg>
                    </div>
                </div>
            </a>
        </div>
    );
}