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

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

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

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

    // Helper to render specific style for headers
    const H2 = ({ children }: { children: React.ReactNode }) => (
        <h2 style={{ fontSize: '1.8rem', marginTop: '3rem', marginBottom: '1.5rem', fontWeight: '700', color: 'var(--primary-color)' }}>{children}</h2>
    );

    const H3 = ({ children }: { children: React.ReactNode }) => (
        <h3 style={{ fontSize: '1.4rem', marginTop: '2rem', marginBottom: '1rem', fontWeight: '600', color: 'var(--text-color)' }}>{children}</h3>
    );

    const P = ({ children }: { children: React.ReactNode }) => (
        <p style={{ lineHeight: '1.8', opacity: 0.9, marginBottom: '1rem', fontSize: '1rem' }}>{children}</p>
    );

    const List = ({ items }: { items: string[] }) => (
        <ul style={{ listStyle: 'none', paddingLeft: '1rem', marginBottom: '1.5rem' }}>
            {items.map((item, idx) => (
                <li key={idx} style={{ marginBottom: '0.5rem', display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
                    <span style={{ color: 'var(--primary-color)', marginTop: '5px' }}>•</span>
                    <span style={{ lineHeight: '1.6', opacity: 0.9 }}>{item}</span>
                </li>
            ))}
        </ul>
    );

    return (
        <div className="homesync-policies-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
            <div className="container" style={{ maxWidth: '900px', margin: '0 auto', padding: '0 20px' }}>
                <Link
                    to={`/${language}/homesync`}
                    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: '4rem', textAlign: 'center' }}>
                        <div style={{ display: 'inline-flex', padding: '1rem', background: 'rgba(79, 70, 229, 0.1)', borderRadius: '50%', marginBottom: '1.5rem' }}>
                            <Shield size={48} color="var(--primary-color)" />
                        </div>
                        <h1 style={{ fontSize: '2.5rem', marginBottom: '1rem', fontWeight: '800' }}>
                            FAMILY ORGANIZER / HOME SYNC
                        </h1>
                        <p style={{ fontSize: '1.2rem', opacity: 0.7, maxWidth: '700px', margin: '0 auto' }}>
                            Documentation du Projet & Politique de Confidentialité
                        </p>
                        <p style={{ fontSize: '0.9rem', opacity: 0.5, marginTop: '1rem' }}>
                            Dernière mise à jour : 12 février 2026 | Version : 2026.2.8
                        </p>
                    </motion.div>

                    {/* CONTENT START */}
                    <div style={{
                        background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
                        padding: '3rem',
                        borderRadius: '1.5rem',
                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))'
                    }}>

                        {/* PARTIE 1 */}
                        <motion.div variants={sectionVariants}>
                            <h1 style={{ fontSize: '2rem', borderBottom: '2px solid var(--primary-color)', paddingBottom: '1rem', marginBottom: '2rem' }}>
                                PARTIE 1 : DESCRIPTION DU PROJET
                            </h1>

                            <H2>1.1 PRÉSENTATION GÉNÉRALE</H2>
                            <P>
                                Family Organizer est une application mobile développée avec Flutter qui permet aux familles de simplifier et centraliser la gestion quotidienne de leur foyer.
                            </P>
                            <P>
                                L'application offre une plateforme collaborative où tous les membres d'une famille peuvent :
                            </P>
                            <List items={[
                                "Synchroniser leurs emplois du temps",
                                "Gérer des listes de courses partagées",
                                "Organiser des événements et rappels",
                                "Rester connectés en temps réel"
                            ]} />

                            <H2>1.2 FONCTIONNALITÉS PRINCIPALES</H2>

                            <H3>📅 CALENDRIER PARTAGÉ & INTELLIGENT</H3>
                            <List items={[
                                "Vue centralisée de tous les événements familiaux",
                                "Trois modes d'affichage : Mois, Semaine, Jour",
                                "Synchronisation bidirectionnelle avec Google Agenda (optionnelle)",
                                "Import et export d'événements avec Google Calendar",
                                "Types d'événements personnalisés avec code couleur et icônes",
                                "Catégories : Sport, École, Repas, Travail, Loisirs, etc.",
                                "Ajout de détails riches : lieu, description, priorité",
                                "Liens automatiques vers Waze/Google Maps pour la navigation",
                                "Gestion de la visibilité (privé/partagé)",
                                "Notifications et rappels paramétrables"
                            ]} />

                            <H3>🛒 LISTES DE COURSES COLLABORATIVES</H3>
                            <List items={[
                                "Ajout et modification en temps réel",
                                "Synchronisation instantanée entre tous les membres",
                                "Organisation par état (à acheter / acheté)",
                                "Gestion collaborative : toute modification est visible immédiatement",
                                "Réorganisation possible des articles"
                            ]} />

                            <H3>👥 GESTION DE FAMILLE (HOUSEHOLD)</H3>
                            <List items={[
                                "Création de nouvelles familles",
                                "Système de rejoindre une famille via ID unique",
                                "Gestion des profils utilisateurs",
                                "Administration des membres de la famille",
                                "Plusieurs foyers possibles par utilisateur"
                            ]} />

                            <H3>🔐 SÉCURITÉ & AUTHENTIFICATION</H3>
                            <List items={[
                                "Connexion par email et mot de passe",
                                "Connexion via Google Sign-In",
                                "Sécurisation des données utilisateur",
                                "Gestion des sessions et tokens d'authentification"
                            ]} />

                            <H3>🎨 PERSONNALISATION</H3>
                            <List items={[
                                "Thèmes personnalisables (clair/sombre)",
                                "Préférences sauvegardées par utilisateur",
                                "Interface adaptative et responsive"
                            ]} />

                            <H2>1.3 STACK TECHNIQUE</H2>
                            <H3>Frontend</H3>
                            <List items={[
                                "Framework : Flutter (Dart 3.9.2)",
                                "State Management : BLoC (Business Logic Component)",
                                "UI : Material Design avec thèmes personnalisés"
                            ]} />

                            <H3>Backend & Services</H3>
                            <List items={[
                                "Firebase Core (authentification, base de données, stockage)",
                                "Cloud Firestore (base de données en temps réel)",
                                "Firebase Authentication (gestion des utilisateurs)",
                                "Firebase Cloud Messaging (notifications push)",
                                "Firebase Storage (stockage des fichiers et images)"
                            ]} />

                            <H2>1.4 ARCHITECTURE DE L'APPLICATION</H2>
                            <P>L'application suit l'architecture BLoC (Business Logic Component) favorisant la séparation des responsabilités et la testabilité.</P>

                        </motion.div>

                        <div style={{ height: '3rem' }}></div>

                        {/* PARTIE 2 */}
                        <motion.div variants={sectionVariants}>
                            <h1 style={{ fontSize: '2rem', borderBottom: '2px solid var(--primary-color)', paddingBottom: '1rem', marginBottom: '2rem' }}>
                                PARTIE 2 : POLITIQUE DE CONFIDENTIALITÉ
                            </h1>

                            <P>
                                Cette Politique de Confidentialité décrit comment Family Organizer ("nous", "notre" ou "l'application") collecte, utilise et protège vos informations personnelles.
                            </P>

                            <H2>2.1 INFORMATIONS COLLECTÉES</H2>
                            <P>Nous collectons différents types d'informations pour fournir et améliorer nos services :</P>

                            <H3>A) INFORMATIONS D'IDENTIFICATION PERSONNELLE</H3>
                            <List items={[
                                "Prénom et nom",
                                "Adresse e-mail",
                                "Mot de passe (stocké de manière chiffrée via Firebase Authentication)",
                                "Photo de profil (optionnelle)",
                                "Plateforme d'authentification utilisée (Email ou Google)",
                                "Date de création du compte"
                            ]} />

                            <H3>B) INFORMATIONS DE CONNEXION GOOGLE</H3>
                            <P>Si vous choisissez de vous connecter via Google Sign-In :</P>
                            <List items={[
                                "ID utilisateur Google",
                                "Nom et prénom associés au compte Google",
                                "Adresse e-mail Google",
                                "Photo de profil Google",
                                "Token d'accès Google (pour la synchronisation Google Calendar)"
                            ]} />

                            <H3>C) DONNÉES D'UTILISATION DE L'APPLICATION</H3>
                            <List items={[
                                "Événements du calendrier (titre, description, date, heure, lieu, priorité)",
                                "Listes de courses (articles, statuts)",
                                "Informations de famille/foyer (nom, membres, code d'invitation)",
                                "Préférences de notifications",
                                "Paramètres de l'application"
                            ]} />

                            <H3>D) DONNÉES GOOGLE CALENDAR (SI SYNCHRONISATION ACTIVÉE)</H3>
                            <List items={[
                                "Événements de votre Google Calendar",
                                "Métadonnées des événements (titre, date, heure, lieu, description)",
                                "Permissions d'accès en lecture et écriture à votre Google Calendar"
                            ]} />

                            <H2>2.2 COMMENT NOUS UTILISONS VOS INFORMATIONS</H2>
                            <H3>A) FOURNITURE DES SERVICES</H3>
                            <List items={[
                                "Créer et gérer votre compte utilisateur",
                                "Authentifier votre identité lors de la connexion",
                                "Synchroniser vos données entre appareils",
                                "Permettre la collaboration avec les membres de votre famille",
                                "Afficher et gérer vos événements du calendrier",
                                "Gérer vos listes de courses partagées",
                                "Envoyer des notifications et rappels"
                            ]} />

                            <H3>B) SYNCHRONISATION GOOGLE CALENDAR</H3>
                            <List items={[
                                "Importer des événements depuis Google Calendar",
                                "Exporter des événements vers Google Calendar",
                                "Maintenir la synchronisation bidirectionnelle"
                            ]} />

                            <H2>2.3 PARTAGE DE VOS INFORMATIONS</H2>
                            <H3>A) PARTAGE AU SEIN DE VOTRE FAMILLE/FOYER</H3>
                            <P>Les informations suivantes sont partagées avec les membres de votre famille :</P>
                            <List items={[
                                "Votre nom et photo de profil",
                                "Les événements que vous marquez comme \"partagés\"",
                                "Les listes de courses de la famille",
                                "Les rappels familiaux"
                            ]} />
                            <P><em>Les événements marqués comme "privés" ne sont <strong>PAS</strong> visibles par les autres membres.</em></P>

                            <H3>B) PARTAGE AVEC DES TIERS</H3>
                            <P>Nous partageons vos informations avec les services tiers suivants :</P>
                            <ul style={{ listStyle: 'none', paddingLeft: '1rem' }}>
                                <li style={{ marginBottom: '1rem' }}>
                                    <strong>• FIREBASE (GOOGLE)</strong><br />
                                    Authentification, Base de données, Stockage, Notifications.<br />
                                    <a href="https://firebase.google.com/support/privacy" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary-color)' }}>Politique de confidentialité Firebase</a>
                                </li>
                                <li style={{ marginBottom: '1rem' }}>
                                    <strong>• GOOGLE APIS</strong><br />
                                    Synchronisation Google Calendar, Google Sign-In.<br />
                                    <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary-color)' }}>Politique de confidentialité Google</a>
                                </li>
                            </ul>

                            <H2>2.4 SÉCURITÉ DES DONNÉES</H2>
                            <P>Nous prenons la sécurité de vos données très au sérieux :</P>
                            <List items={[
                                "Chiffrement des mots de passe via Firebase Authentication",
                                "Communication sécurisée HTTPS/TLS",
                                "Stockage sécurisé des tokens d'authentification",
                                "Règles de sécurité Firestore pour protéger l'accès aux données"
                            ]} />

                            <H2>2.6 VOS DROITS</H2>
                            <P>Conformément aux réglementations sur la protection des données (RGPD), vous disposez des droits suivants :</P>
                            <List items={[
                                "Droit d'accès",
                                "Droit de rectification",
                                "Droit à l'effacement",
                                "Droit à la portabilité",
                                "Droit d'opposition",
                                "Droit de retirer votre consentement"
                            ]} />

                            <H2>2.7 GOOGLE CALENDAR - INFORMATIONS SPÉCIFIQUES</H2>
                            <P>La synchronisation avec Google Calendar est <strong>OPTIONNELLE</strong> et nécessite votre consentement explicite.</P>
                            <P>Les données de votre Google Calendar sont utilisées UNIQUEMENT pour :</P>
                            <List items={[
                                "Importer vos événements Google dans Family Organizer",
                                "Exporter vos événements Family Organizer vers Google Calendar",
                                "Maintenir la synchronisation bidirectionnelle"
                            ]} />

                            <H2>2.16 CONTACT</H2>
                            <P>Pour toute question concernant cette Politique de Confidentialité ou vos données personnelles, vous pouvez nous contacter via les paramètres de l'application.</P>

                        </motion.div>

                    </div>

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

export default HomeSyncPolicies;