'use client';

import Image from 'next/image';
import { motion, Variants } from 'framer-motion';
import { useEffect, useState } from 'react';
import {
    ChevronDown,
    Globe,
    ArrowLeft,
    Box,
    Headphones,
    ShieldCheck,
    Zap,
    Cloud
} from 'lucide-react';
import { useI18n } from '../../i18n/provider';
import { useTheme } from 'next-themes';

export default function HeroSection() {
    // تنظیمات انیمیشن برای نمایش متوالی (Stagger)
    const { locale, t } = useI18n();
    const dir = locale === 'en' ? 'ltr' : 'rtl';
    const flipClass = locale === 'en' ? '-scale-x-100' : '';
    const { resolvedTheme } = useTheme();
    const [mounted, setMounted] = useState(false);

    useEffect(() => setMounted(true), []);

    const containerVariants: Variants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.2,
            },
        },
    };

    const itemVariants: Variants = {
        hidden: { opacity: 0, y: 20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.6, ease: "easeOut" }
        },
    };

    return (
        <div className="relative w-full min-h-screen hero-bg text-[color:var(--text-primary)] overflow-hidden " dir={dir}>
            {/* Background Image with slight scale-in animation */}
            <motion.div
                initial={{ scale: 1.05, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ duration: 1.5, ease: "easeOut" }}
                className="absolute inset-0 z-0 opacity-[var(--hero-image-opacity)]"
            >
                <Image
                    src={mounted && resolvedTheme === 'light' ? '/images/3.png' : '/images/1-2.png'}
                    alt="Servers Background"
                    fill
                    priority
                    unoptimized
                    quality={100}
                    sizes="100vw"
                    className={`object-left md:object-center transform ${flipClass}`}
                />

                {/* لایه گرادینت */}
                <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[var(--hero-bottom-fade-from)] to-transparent pointer-events-none" />

            </motion.div>


            {/* Content Wrapper */}
            <div className="relative z-10 flex flex-col min-h-screen max-w-[1440px] mx-auto">



                {/* Hero Content */}
                <main className="flex-1 flex flex-col lg:flex-row items-center pt-20 pb-10 px-8 lg:px-16">

                    {/* Right Side - Text & Buttons */}
                    <motion.div
                        variants={containerVariants}
                        initial="hidden"
                        animate="visible"
                        className="w-full lg:w-[55%] flex flex-col justify-center text-right en-text-left z-20"
                    >
                        <motion.h1 variants={itemVariants} className="text-5xl lg:text-[64px] font-bold leading-[1.3] mb-6">
                            {t('hero_title_1')}
                            <br />
                            {t('hero_title_2')} <span className="text-[#84e1bc]">{t('hero_title_3')}</span> {t('hero_title_4')}
                        </motion.h1>

                        <motion.p variants={itemVariants} className="text-[color:var(--text-muted)] text-lg lg:text-xl leading-relaxed mb-10 max-w-[600px]">
                            {t('hero_subtitle')}
                        </motion.p>

                        <motion.div variants={itemVariants} className="flex flex-wrap items-center gap-5 mb-16">
                            <button className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-bold text-base hover:opacity-90 transition-opacity min-w-[180px]">
                                <ArrowLeft className="w-5 h-5" /> {t('hero_cta_primary')}
                            </button>

                            <button className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl border border-[color:var(--border-20)] bg-[color:var(--glass-05)] backdrop-blur-sm text-[color:var(--text-primary)] font-medium text-base hover:bg-[color:var(--glass-10)] transition-colors min-w-[180px]">
                                <Box className="w-5 h-5" /> {t('hero_cta_secondary')}
                            </button>
                        </motion.div>

                        {/* Features list */}
                        <motion.div variants={itemVariants} className="flex flex-wrap items-center gap-8 text-sm text-[color:var(--text-muted)]">
                            <div className="flex items-center gap-2">
                                <Headphones className="w-5 h-5 text-[color:var(--text-muted-2)]" /> {t('hero_feat_support')}
                            </div>
                            <div className="flex items-center gap-2">
                                <ShieldCheck className="w-5 h-5 text-[color:var(--text-muted-2)]" /> {t('hero_feat_uptime')}
                            </div>
                            <div className="flex items-center gap-2">
                                <Zap className="w-5 h-5 text-[color:var(--text-muted-2)]" /> {t('hero_feat_speed')}
                            </div>
                        </motion.div>
                    </motion.div>

                    {/* Left Side - Glassmorphism Floating Cards */}
                    <div className="w-full lg:w-[45%] relative h-[500px] hidden lg:block">
                        {/* Top Shield Card */}
                        <motion.div
                            initial={{ opacity: 0, scale: 0.8 }}
                            animate={{ opacity: 1, scale: 1, y: [0, -10, 0] }}
                            transition={{
                                opacity: { duration: 0.8, delay: 0.8 },
                                scale: { duration: 0.8, delay: 0.8 },
                                y: { repeat: Infinity, duration: 4, ease: "easeInOut" } // افکت شناور
                            }}
                            className="absolute top-[10%] left-[60%] transform -translate-x-1/2 flex items-center justify-center w-14 h-14 rounded-2xl bg-[color:var(--glass-10)] backdrop-blur-md border border-[color:var(--border-20)] shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
                        >
                            <ShieldCheck className="w-7 h-7 text-[color:var(--text-primary)]" />
                        </motion.div>

                        {/* Bottom Chart Card */}
                        <motion.div
                            initial={{ opacity: 0, x: -50 }}
                            animate={{ opacity: 1, x: 0, y: [0, 10, 0] }}
                            transition={{
                                opacity: { duration: 0.8, delay: 1 },
                                x: { duration: 0.8, delay: 1, ease: "easeOut" },
                                y: { repeat: Infinity, duration: 5, ease: "easeInOut", delay: 1 } // افکت شناور با تاخیر متفاوت
                            }}
                            className="absolute bottom-[10%] left-[10%] w-64 p-5 rounded-2xl bg-[color:var(--glass-05)] backdrop-blur-md border border-[color:var(--border-10)] shadow-[0_8px_32px_rgba(0,0,0,0.5)]"
                        >
                            <div className="flex justify-between items-start mb-2">
                                <span className="text-[color:var(--text-muted)] text-sm">{t('hero_uptime_card_title')}</span>
                                <motion.div
                                    animate={{ opacity: [1, 0.4, 1] }}
                                    transition={{ repeat: Infinity, duration: 2 }}
                                    className="w-2 h-2 rounded-full bg-[#84e1bc] mt-1 shadow-[0_0_8px_#84e1bc]"
                                />
                            </div>
                            <div className="text-3xl font-bold text-[color:var(--text-primary)] tracking-widest mb-4">
                                ۹۹.۹۹٪
                            </div>
                            {/* SVG Chart Line */}
                            <svg className="w-full h-16" viewBox="0 0 100 40" preserveAspectRatio="none">
                                <motion.path
                                    initial={{ pathLength: 0 }}
                                    animate={{ pathLength: 1 }}
                                    transition={{ duration: 1.5, delay: 1.5, ease: "easeInOut" }}
                                    d="M0,30 L20,25 L40,35 L60,15 L80,20 L100,5"
                                    fill="none"
                                    stroke="#84e1bc"
                                    strokeWidth="3"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                />
                            </svg>
                        </motion.div>
                    </div>

                </main>
            </div>
        </div>
    );
}
