import { motion } from 'framer-motion';
import { useLanguage } from '../contexts/LanguageContext';
import { Link } from 'react-router-dom';
import { ArrowLeft, ExternalLink, Camera, MapPin, Bell } from 'lucide-react';

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

    const sections = [2, 3, 4, 5, 6]; // Sections after the permission cards (1 is before)

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

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

    return (
        <div className="policies-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
            <div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
                <Link
                    to={`/${language}/travelmate`}
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: '8px',
                        marginBottom: '40px',
                        color: 'var(--text-color)',
                        textDecoration: 'none',
                        fontSize: '1rem',
                        opacity: 0.8
                    }}
                >
                    <ArrowLeft size={18} />
                    {t('policies.back')}
                </Link>

                <motion.div
                    variants={containerVariants}
                    initial="hidden"
                    animate="visible"
                >
                    {/* Header */}
                    <motion.div variants={sectionVariants} style={{ marginBottom: '3rem', textAlign: 'center' }}>
                        <h1 style={{ fontSize: '2.5rem', marginBottom: '1rem', fontWeight: 'bold' }}>{t('policies.title')}</h1>
                        <p style={{ fontSize: '1.2rem', opacity: 0.7 }}>{t('policies.intro')}</p>
                    </motion.div>

                    {/* Section 1: Collection (Text) */}
                    <motion.div variants={sectionVariants} className="policy-section" style={{ marginBottom: '2.5rem' }}>
                        <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', fontWeight: '700' }}>
                            {t('policies.section.1.title')}
                        </h2>
                        <p style={{ lineHeight: '1.8', opacity: 0.9, fontSize: '1rem' }}>
                            {t('policies.section.1.content')}
                        </p>
                    </motion.div>

                    {/* Visual Permission Cards */}
                    <motion.div variants={sectionVariants} style={{ marginBottom: '4rem' }}>
                        <h3 style={{ fontSize: '1.2rem', marginBottom: '1.5rem', opacity: 0.8 }}>{t('policies.permissions.title')}</h3>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem' }}>

                            {/* Camera */}
                            <div style={{ background: 'var(--card-bg, rgba(255,255,255,0.05))', padding: '1.5rem', borderRadius: '1rem', border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem', color: 'var(--primary-color)' }}>
                                    <Camera size={24} />
                                    <h4 style={{ margin: 0, fontSize: '1.1rem' }}>{t('policies.data.camera')}</h4>
                                </div>
                                <p style={{ opacity: 0.7, fontSize: '0.9rem', lineHeight: '1.5' }}>{t('policies.data.camera.desc')}</p>
                            </div>

                            {/* GPS */}
                            <div style={{ background: 'var(--card-bg, rgba(255,255,255,0.05))', padding: '1.5rem', borderRadius: '1rem', border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem', color: 'var(--primary-color)' }}>
                                    <MapPin size={24} />
                                    <h4 style={{ margin: 0, fontSize: '1.1rem' }}>{t('policies.data.gps')}</h4>
                                </div>
                                <p style={{ opacity: 0.7, fontSize: '0.9rem', lineHeight: '1.5' }}>{t('policies.data.gps.desc')}</p>
                            </div>

                            {/* Notifications */}
                            <div style={{ background: 'var(--card-bg, rgba(255,255,255,0.05))', padding: '1.5rem', borderRadius: '1rem', border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem', color: 'var(--primary-color)' }}>
                                    <Bell size={24} />
                                    <h4 style={{ margin: 0, fontSize: '1.1rem' }}>{t('policies.data.notif')}</h4>
                                </div>
                                <p style={{ opacity: 0.7, fontSize: '0.9rem', lineHeight: '1.5' }}>{t('policies.data.notif.desc')}</p>
                            </div>

                        </div>
                    </motion.div>

                    {/* Remaining Sections (Loop) */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
                        {sections.map((num) => (
                            <motion.div key={num} variants={sectionVariants} className="policy-section">
                                <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', fontWeight: '700' }}>
                                    {t(`policies.section.${num}.title`)}
                                </h2>
                                <p style={{ lineHeight: '1.8', opacity: 0.9, fontSize: '1rem' }}>
                                    {t(`policies.section.${num}.content`)}
                                </p>
                            </motion.div>
                        ))}
                    </div>

                    {/* Google Policy Button */}
                    <motion.div variants={sectionVariants} style={{ marginTop: '5rem', textAlign: 'center' }}>
                        <a
                            href="https://policies.google.com/privacy"
                            target="_blank"
                            rel="noopener noreferrer"
                            style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: '10px',
                                background: 'transparent',
                                border: '1px solid var(--primary-color)',
                                color: 'var(--primary-color)',
                                padding: '12px 30px',
                                borderRadius: '50px',
                                textDecoration: 'none',
                                fontWeight: '600',
                                transition: 'all 0.3s ease'
                            }}
                            className="hover-scale"
                        >
                            <ExternalLink size={18} />
                            {t('policies.googleBtn')}
                        </a>
                    </motion.div>

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

export default Policies;
