import { useEffect } from 'react';
import { motion } from 'framer-motion';
import { useLanguage } from '../contexts/LanguageContext';
import { Smartphone, Calendar, ShoppingCart, Users, Lock, Code, Database, FileText, ArrowLeft } from 'lucide-react';
import { Link } from 'react-router-dom';
// import appIcon from '../assets/app_icon.png'; // Using same icon as placeholder if no specific HomeSync icon

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 }
};

const FeatureCard = ({ title, icon: Icon, description }: { title: string, icon: any, description: string }) => (
    <motion.div
        variants={itemVariants}
        className="feature-card"
        style={{
            background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
            backdropFilter: 'blur(10px)',
            padding: '2rem',
            borderRadius: '1.5rem',
            border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center',
            transition: 'transform 0.3s ease, box-shadow 0.3s ease',
            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
        }}
        whileHover={{
            y: -5,
            boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
            borderColor: 'var(--primary-color, #4f46e5)'
        }}
    >
        <div style={{
            marginBottom: '1.5rem',
            background: 'var(--primary-color-alpha, rgba(79, 70, 229, 0.1))',
            width: 'fit-content',
            padding: '12px',
            borderRadius: '12px'
        }}>
            <Icon size={32} color="var(--primary-color)" />
        </div>
        <h3 style={{
            marginBottom: '1rem',
            fontSize: '1.5rem',
            fontWeight: '600',
            color: 'var(--text-color)'
        }}>
            {title}
        </h3>
        <p style={{
            opacity: 0.8,
            lineHeight: '1.7',
            flex: 1,
            fontSize: '1rem',
            color: 'var(--text-color)'
        }}>
            {description}
        </p>
    </motion.div>
);

const HomeSync = () => {
    const { t, language } = useLanguage();

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

    useEffect(() => {
        document.title = "Home Sync";
    }, []);

    return (
        <div className="home-sync-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
            <div className="container" style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 20px' }}>

                <motion.div
                    variants={containerVariants}
                    initial="hidden"
                    animate="visible"
                >
                    {/* Header Section */}
                    <motion.div variants={itemVariants} style={{ textAlign: 'center', marginBottom: '4rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        {/* Placeholder Icon - ideally this would be a specific Home Sync icon */}
                        <motion.div
                            style={{
                                width: '120px',
                                height: '120px',
                                borderRadius: '24px',
                                marginBottom: '2rem',
                                boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
                                background: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}
                            whileHover={{ scale: 1.05, rotate: 5 }}
                            transition={{ type: "spring", stiffness: 300 }}
                        >
                            <Users size={64} color="white" />
                        </motion.div>

                        <h1 className="gradient-text" style={{ fontSize: '4rem', fontWeight: '800', marginBottom: '1rem' }}>
                            {t('homesync.page.mainTitle')}
                        </h1>
                        <p style={{ fontSize: '1.5rem', opacity: 0.7, maxWidth: '600px', margin: '0 auto 2rem auto' }}>
                            {t('homesync.page.subtitle')}
                        </p>

                        {/* View Code Button - Placeholder link since none provided, or maybe just remove if not public */}
                        {/* Assuming no link provided in description, maybe just skip or add a placeholder? 
                            The prompt says "Fais lui une page dédiée" but doesn't explicitly give a repo link. 
                            I'll leave it as a '#', user can update. */
                        }
                        <motion.div
                            className="btn"
                            style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: '10px',
                                textDecoration: 'none',
                                fontSize: '1.1rem',
                                padding: '0.8rem 1.5rem',
                                borderRadius: '50px',
                                background: 'rgba(255,255,255,0.05)',
                                color: 'var(--text-color)',
                                opacity: 0.7,
                                cursor: 'default'
                            }}
                        >
                            <Lock size={20} />
                            {t('homesync.viewCode')}
                        </motion.div>
                    </motion.div>

                    {/* Description as Intro */}
                    <motion.div variants={itemVariants} style={{ marginBottom: '5rem', maxWidth: '800px', margin: '0 auto 5rem auto', textAlign: 'center' }}>
                        <p style={{
                            lineHeight: '1.8',
                            fontSize: '1.4rem',
                            opacity: 0.9,
                            fontStyle: 'italic',
                            color: 'var(--text-color)'
                        }}>
                            "{t('homesync.page.intro')}"
                        </p>
                    </motion.div>

                    {/* Highlights Sections */}
                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
                        <h2 style={{
                            textAlign: 'center',
                            marginBottom: '4rem',
                            fontSize: '2.5rem',
                            fontWeight: '700',
                            color: 'var(--text-color)'
                        }}>{t('homesync.highlights.title')}</h2>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2.5rem' }}>

                            <FeatureCard
                                title={t('homesync.highlight.1.title')}
                                description={t('homesync.highlight.1.desc')}
                                icon={Calendar}
                            />
                            <FeatureCard
                                title={t('homesync.highlight.2.title')}
                                description={t('homesync.highlight.2.desc')}
                                icon={ShoppingCart}
                            />
                            <FeatureCard
                                title={t('homesync.highlight.3.title')}
                                description={t('homesync.highlight.3.desc')}
                                icon={Users}
                            />
                            <FeatureCard
                                title={t('homesync.highlight.4.title')}
                                description={t('homesync.highlight.4.desc')}
                                icon={Lock}
                            />

                        </div>
                    </motion.div>

                    {/* Conclusion */}
                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem', textAlign: 'center', maxWidth: '800px', margin: '0 auto 6rem auto' }}>
                        <p style={{
                            fontSize: '1.8rem',
                            fontWeight: 'bold',
                            color: 'var(--primary-color)',
                            lineHeight: '1.4'
                        }}>
                            {t('homesync.page.conclusion')}
                        </p>
                    </motion.div>

                    {/* Tech Stack */}
                    <motion.div variants={itemVariants} style={{ marginBottom: '5rem' }}>
                        <h2 style={{ textAlign: 'center', marginBottom: '3rem' }}>{t('homesync.tech.title')}</h2>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>

                            {/* Frontend */}
                            <div style={{ padding: '1.5rem' }}>
                                <h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1.5rem', color: 'var(--primary-color)' }}>
                                    <Smartphone /> {t('homesync.tech.frontend')}
                                </h3>
                                <ul style={{ listStyle: 'none', padding: 0 }}>
                                    {[1, 2].map(i => (
                                        <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
                                            {t(`homesync.tech.frontend.${i}`)}
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            {/* Backend */}
                            <div style={{ padding: '1.5rem' }}>
                                <h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1.5rem', color: 'var(--primary-color)' }}>
                                    <Database /> {t('homesync.tech.backend')}
                                </h3>
                                <ul style={{ listStyle: 'none', padding: 0 }}>
                                    {[1, 2].map(i => (
                                        <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
                                            {t(`homesync.tech.backend.${i}`)}
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            {/* API */}
                            <div style={{ padding: '1.5rem' }}>
                                <h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1.5rem', color: 'var(--primary-color)' }}>
                                    <Code /> {t('homesync.tech.api')}
                                </h3>
                                <ul style={{ listStyle: 'none', padding: 0 }}>
                                    {[1].map(i => (
                                        <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
                                            {t(`homesync.tech.api.${i}`)}
                                        </li>
                                    ))}
                                </ul>
                            </div>

                        </div>
                    </motion.div>

                    {/* Legal Section */}
                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
                        <h2 style={{
                            textAlign: 'center',
                            marginBottom: '4rem',
                            fontSize: '2.5rem',
                            fontWeight: '700',
                            color: 'var(--text-color)'
                        }}>{t('travelmate.legal.title')}</h2>

                        <div style={{ display: 'flex', justifyContent: 'center' }}>
                            <Link to={`/${language}/homesync/policies`} style={{ textDecoration: 'none', color: 'inherit', maxWidth: '500px', width: '100%' }}>
                                <motion.div
                                    whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: 'var(--primary-color)' }}
                                    style={{
                                        background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
                                        backdropFilter: 'blur(10px)',
                                        padding: '2rem',
                                        borderRadius: '1.5rem',
                                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
                                        height: '100%',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        alignItems: 'center',
                                        textAlign: 'center',
                                        transition: 'all 0.3s ease'
                                    }}
                                >
                                    <FileText size={32} style={{ color: 'var(--primary-color)', marginBottom: '1.5rem' }} />
                                    <h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('homesync.legal.link')}</h3>
                                    <p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
                                        {t('policies.intro')}
                                    </p>
                                    <span style={{ color: 'var(--primary-color)', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        {t('travelmate.policies.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
                                    </span>
                                </motion.div>
                            </Link>
                        </div>
                    </motion.div>

                </motion.div>
            </div>
        </div>
    );
};

export default HomeSync;
