import { useTranslation } from 'react-i18next';

import btnAndroid from '@/assets/images/home/btn-android.svg';
import btnAppStore from '@/assets/images/home/btn-app-store.svg';
import btnGooglePlay from '@/assets/images/home/btn-google-play.svg';
import btnMacos from '@/assets/images/home/btn-macos.svg';
import btnWindows from '@/assets/images/home/btn-windows.svg';
// import devicesMockup from '@/assets/images/home/devices-mockup.png';
import { /*useAppUrls,*/ type AppUrls } from '@/hooks/useAppUrls';
import { useComingSoonDialog } from '@/hooks/useComingSoonDialog';

import Wrapper from './Wrapper';

interface PlatformButton {
    image: string;
    alt: string;
    urlKey: keyof AppUrls;
}

const STORE_BUTTONS: PlatformButton[] = [
    { image: btnAppStore, alt: 'App Store', urlKey: 'appleStoreUrl' },
    { image: btnGooglePlay, alt: 'Google Play', urlKey: 'googleStoreUrl' },
    { image: btnAndroid, alt: 'Android', urlKey: 'apkUrl' },
    { image: btnWindows, alt: 'Windows', urlKey: 'windowsUrl' },
    { image: btnMacos, alt: 'Mac OS', urlKey: 'macosUrl' },
];

export function ChoosePlatform() {
    const { t } = useTranslation();
    const openComingSoonDialog = useComingSoonDialog();
    // const urls = useAppUrls();

    return (
        <section className="w-full py-8 sm:py-10 lg:py-16">
            <Wrapper className="flex flex-col items-center gap-9 sm:gap-10 lg:gap-[72px]">
                <div className="flex flex-col items-center gap-6 w-full">
                    <div className="flex flex-col items-center gap-4 max-w-[672px] text-center">
                        <h2 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('pages.home.choosePlatform.title')}
                        </h2>
                        <p className="text-sm lg:text-base font-normal text-white/60 leading-[1.5]">
                            {t('pages.home.choosePlatform.subtitle')}
                        </p>
                    </div>

                    <div className="grid grid-cols-2 gap-6 px-4 w-full sm:flex sm:flex-wrap sm:items-center sm:justify-center">
                        {STORE_BUTTONS.map(({ image, alt }) => (
                            <button
                                key={alt}
                                type="button"
                                onClick={() => openComingSoonDialog()}
                                className="h-[50px] p-0 bg-transparent border-none cursor-pointer outline-none focus:outline-none [-webkit-tap-highlight-color:transparent]"
                            >
                                <img
                                    src={image}
                                    alt={alt}
                                    className="h-full w-full object-contain sm:w-auto"
                                />
                            </button>
                        ))}
                        {/* {STORE_BUTTONS.map(({ image, alt, urlKey }) => {
                            const url = urls[urlKey];
                            if (!url) return null;
                            return (
                                <a
                                    key={alt}
                                    href={url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="h-[50px]"
                                >
                                    <img
                                        src={image}
                                        alt={alt}
                                        className="h-full w-full object-contain sm:w-auto"
                                    />
                                </a>
                            );
                        })} */}
                    </div>
                </div>

                {/* <img
                    src={devicesMockup}
                    alt="FlashLink VPN on multiple devices"
                    className="w-full max-w-[350px] sm:max-w-[600px] lg:max-w-[786px] h-auto object-contain"
                /> */}
            </Wrapper>
        </section>
    );
}