import { useTranslation } from 'react-i18next';

import appAccessSection from '@/assets/images/home/app-access-section.png';
import appLogosStrip from '@/assets/images/home/app-logos-strip.png';

import Wrapper from './Wrapper';

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

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

                {/* App wall background with NOMO branding */}
                <div className="relative w-full max-w-[1280px] rounded-lg overflow-hidden">
                    <img src={appAccessSection} alt="" className="w-full h-auto object-cover" />
                </div>

                {/* Logo strip with fade edges */}
                <div className="relative w-full max-w-[1280px] overflow-hidden">
                    <div className="absolute inset-y-0 start-0 w-20 lg:w-40 bg-gradient-to-r from-[#010203] to-transparent z-10 rtl:bg-gradient-to-l" />
                    <div className="absolute inset-y-0 end-0 w-20 lg:w-40 bg-gradient-to-l from-[#010203] to-transparent z-10 rtl:bg-gradient-to-r" />
                    <img
                        src={appLogosStrip}
                        alt="Popular apps"
                        className="w-full h-auto object-contain"
                    />
                </div>
            </Wrapper>
        </section>
    );
}
