import { Icon } from '@iconify/react';
import { useTranslation } from 'react-i18next';

import featureConnection from '@/assets/iconify/multi-color/feature-connection.svg';
import featurePrivate from '@/assets/iconify/multi-color/feature-private.svg';
import featureSpeedNew from '@/assets/iconify/multi-color/feature-speed-new.svg';
import featureTrial from '@/assets/iconify/multi-color/feature-trial.svg';
import heroEarth from '@/assets/images/home/hero-earth.png';

const HERO_FEATURES = [
    {
        titleKey: 'pages.home.hero.connection.title',
        descKey: 'pages.home.hero.connection.description',
        icon: featureConnection,
    },
    {
        titleKey: 'pages.home.hero.trial.title',
        descKey: 'pages.home.hero.trial.description',
        icon: featureTrial,
    },
    {
        titleKey: 'pages.home.hero.speed.title',
        descKey: 'pages.home.hero.speed.description',
        icon: featureSpeedNew,
    },
    {
        titleKey: 'pages.home.hero.private.title',
        descKey: 'pages.home.hero.private.description',
        icon: featurePrivate,
    },
] as const;

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

    return (
        <section className="relative w-full overflow-hidden bg-[#010203] -mt-[81px] lg:mt-0">
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1280px] h-[720px] pointer-events-none">
                <img
                    src={heroEarth}
                    alt=""
                    className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-x-0 top-0 h-[452px] bg-[linear-gradient(180deg,#00040A_70%,#00040A00_100%)]" />
                <div className="absolute inset-x-0 top-[650px] h-[70px] bg-[linear-gradient(0deg,#00040A_8.57%,#00040A00_100%)]" />
            </div>
            <div className="relative z-10 flex flex-col items-center max-w-[1440px] mx-auto">
                <div className="flex flex-col items-center gap-6 px-5 sm:px-12 lg:px-20 pt-[140px] sm:pt-[200px] lg:pt-[265px] w-full h-[530px]">
                    <h1 className="text-4xl lg:text-5xl font-black italic text-white text-center uppercase font-[REM] leading-[1.5] tracking-[0.007em]">
                        {t('pages.home.slogan.title')}
                    </h1>
                    <p className="text-base lg:text-xl font-normal text-[#DBEAFE] leading-[1.5] lg:leading-[1.625] max-w-[800px] text-center font-[REM] tracking-[-0.028em] lg:tracking-[-0.022em]">
                        {t('pages.home.slogan.description')}
                    </p>
                </div>
                <div className="pt-[90px] sm:pt-[20px] lg:pt-[20px] px-5 sm:px-12 lg:px-20 pb-6 w-full">
                    <div className="overflow-hidden">
                        <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))]">
                            {HERO_FEATURES.map(({ titleKey, descKey, icon }, index) => (
                                <div
                                    key={index}
                                    className="shadow-[-1px_0_0_0_rgba(190,219,255,0.1),0_-1px_0_0_rgba(190,219,255,0.1)]"
                                >
                                    {/* 手机端：图标+标题横排，描述在下方 */}
                                    <div className="sm:hidden flex flex-col gap-[30px] p-10">
                                        <div className="flex flex-row items-start gap-4">
                                            <Icon icon={icon} className="w-[72px] h-[72px] shrink-0" />
                                            <h3 className="text-2xl font-bold italic text-white leading-[1.5] whitespace-pre-line font-[REM]">
                                                {t(titleKey)}
                                            </h3>
                                        </div>
                                        <p className="text-base font-normal text-[#E6E6E6] leading-[1.5] font-[Barlow]">
                                            {t(descKey)}
                                        </p>
                                    </div>

                                    {/* 桌面端：图标在上，标题+描述纵排在下 */}
                                    <div className="hidden sm:flex flex-col gap-[30px] p-10 h-full">
                                        <Icon icon={icon} className="w-[72px] h-[72px] shrink-0" />
                                        <div className="flex flex-col gap-[14px]">
                                            <h3 className="text-2xl font-bold italic text-white leading-[1.5] whitespace-pre-line font-[REM]">
                                                {t(titleKey)}
                                            </h3>
                                            <p className="text-base font-normal text-[#E6E6E6] leading-[1.5] font-[Barlow]">
                                                {t(descKey)}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
