import { useTranslation } from 'react-i18next';

import featureDetailIp from '@/assets/images/home/feature-detail-ip.png';
import featureDetailPrivacy from '@/assets/images/home/feature-detail-privacy.png';
import featureDetailSpeed from '@/assets/images/home/feature-detail-speed.png';

import Wrapper from './Wrapper';

interface FeatureItem {
    titleKey: string;
    descKey: string;
    image: string;
    imageAlt: string;
    reverse: boolean;
}

const FEATURES: FeatureItem[] = [
    {
        titleKey: 'pages.home.featureDetails.speed.title',
        descKey: 'pages.home.featureDetails.speed.description',
        image: featureDetailSpeed,
        imageAlt: 'High-quality dedicated line',
        reverse: false,
    },
    {
        titleKey: 'pages.home.featureDetails.privacy.title',
        descKey: 'pages.home.featureDetails.privacy.description',
        image: featureDetailPrivacy,
        imageAlt: 'No Record VPN',
        reverse: true,
    },
    {
        titleKey: 'pages.home.featureDetails.fixedIp.title',
        descKey: 'pages.home.featureDetails.fixedIp.description',
        image: featureDetailIp,
        imageAlt: 'Fixed IP functionality',
        reverse: false,
    },
];

export function FeatureDetails() {
    const { t } = useTranslation();

    return (
        <section className="w-full py-10 lg:py-16">
            <Wrapper className="flex flex-col gap-10 sm:gap-14 lg:gap-20">
                {FEATURES.map(({ titleKey, descKey, image, imageAlt, reverse }, index) => (
                    <div
                        key={index}
                        className={`flex flex-col ${reverse ? 'lg:flex-row-reverse' : 'lg:flex-row'} items-center gap-4 sm:gap-6 lg:gap-8`}
                    >
                        <div className="w-full lg:flex-1 flex justify-center">
                            <img
                                src={image}
                                alt={imageAlt}
                                className="w-full max-w-[320px] sm:max-w-[450px] lg:max-w-none h-auto rounded-lg object-contain"
                            />
                        </div>
                        <div className="w-full lg:flex-1 flex flex-col gap-4 max-w-[700px] text-center">
                            <h3 className="text-2xl lg:text-[32px] font-semibold italic text-white leading-[1.667] lg:leading-[0.94] tracking-[-0.019em] lg:tracking-[-0.014em] font-[REM]">
                                {t(titleKey)}
                            </h3>
                            <p className="text-sm lg:text-base font-normal text-white/60 leading-[1.5]">
                                {t(descKey)}
                            </p>
                        </div>
                    </div>
                ))}
            </Wrapper>
        </section>
    );
}
