/* global React, Icon, Reveal */

const PolitiqueConfidentialitePage = ({ navigate }) => {

    const Section = ({ title, children }) => (
        <div style={{ marginBottom: '2.5rem' }}>
            <h2 style={{
                fontSize: '1.2rem',
                fontFamily: 'Poppins, sans-serif',
                fontWeight: 600,
                color: 'var(--sme-grey-900)',
                paddingBottom: '0.75rem',
                borderBottom: '2px solid var(--sme-green-soft)',
                marginBottom: '1.2rem',
            }}>{title}</h2>
            {children}
        </div>
    );

    const p = (text) => (
        <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.75, marginBottom: '0.8rem' }}>{text}</p>
    );

    const li = (items) => (
        <ul style={{ paddingLeft: '1.4rem', margin: '0.5rem 0 1rem', display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
            {items.map((item, i) => (
                <li key={i} style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.65 }}>{item}</li>
            ))}
        </ul>
    );

    return (
        <main className="page-enter" data-screen-label="Politique de confidentialité">

            {/* HERO */}
            <section style={{
                paddingBlock: 'clamp(3rem, 5vw, 4rem) clamp(2rem, 3vw, 3rem)',
                background: 'linear-gradient(180deg, var(--sme-green-soft) 0%, white 100%)',
            }}>
                <div className="sme-container" style={{ maxWidth: 760 }}>
                    <Reveal>
                        <span className="eyebrow green">Protection des données</span>
                        <h1 style={{ marginTop: '1rem', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>
                            Politique de confidentialité
                        </h1>
                        <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', fontSize: '1rem' }}>
                            SME Nettoyage s'engage à protéger la vie privée des utilisateurs de ce site,
                            conformément au Règlement Général sur la Protection des Données (RGPD — UE 2016/679).
                        </p>
                    </Reveal>
                </div>
            </section>

            {/* CONTENT */}
            <section style={{ paddingTop: 0 }}>
                <div className="sme-container" style={{ maxWidth: 860 }}>
                    <Reveal>
                        <div style={{
                            background: 'white',
                            border: '1px solid var(--sme-grey-100)',
                            borderRadius: 'var(--sme-radius-lg)',
                            padding: 'clamp(2rem, 4vw, 3.5rem)',
                            boxShadow: 'var(--sme-shadow-sm)',
                        }}>

                            <Section title="1. Données collectées">
                                {p('Nous collectons uniquement les données que vous nous transmettez volontairement via le formulaire de contact :')}
                                {li([
                                    'Nom et prénom',
                                    'Adresse e-mail',
                                    'Numéro de téléphone (optionnel)',
                                    'Type de prestation souhaité',
                                    'Message libre',
                                ])}
                                {p('Aucune donnée sensible (santé, opinions politiques, etc.) ne vous est demandée.')}
                            </Section>

                            <Section title="2. Finalités du traitement">
                                {p('Les données collectées sont traitées pour les finalités suivantes :')}
                                {li([
                                    'Répondre à vos demandes de devis ou d\'information',
                                    'Vous recontacter dans le cadre de votre demande',
                                    'Améliorer la qualité de nos services',
                                ])}
                                {p('Vos données ne sont jamais revendues, transmises à des tiers à des fins commerciales ou utilisées à d\'autres fins que celles mentionnées ci-dessus.')}
                            </Section>

                            <Section title="3. Base légale">
                                {p('Le traitement de vos données repose sur votre consentement explicite (article 6.1.a du RGPD), matérialisé par l\'envoi volontaire du formulaire de contact. Vous pouvez retirer votre consentement à tout moment.')}
                            </Section>

                            <Section title="4. Durée de conservation">
                                {p('Vos données sont conservées pendant une durée maximale de 3 ans à compter du dernier contact, puis supprimées de nos systèmes. En l\'absence de suite commerciale, les données sont supprimées dans les 12 mois suivant votre demande.')}
                            </Section>

                            <Section title="5. Sécurité">
                                {p('Nous mettons en œuvre les mesures techniques et organisationnelles appropriées pour protéger vos données contre toute perte, accès non autorisé, divulgation ou altération. L\'accès aux données est limité aux seules personnes habilitées à les traiter.')}
                            </Section>

                            <Section title="6. Vos droits (RGPD)">
                                {p('Conformément au RGPD et à la loi Informatique et Libertés, vous disposez des droits suivants :')}
                                {li([
                                    'Droit d\'accès : obtenir une copie des données vous concernant',
                                    'Droit de rectification : corriger des données inexactes ou incomplètes',
                                    'Droit à l\'effacement : demander la suppression de vos données',
                                    'Droit à la limitation : demander la suspension du traitement',
                                    'Droit à la portabilité : recevoir vos données dans un format structuré',
                                    'Droit d\'opposition : vous opposer au traitement de vos données',
                                ])}
                                {p('Pour exercer ces droits, contactez-nous via le formulaire de contact disponible sur ce site. Nous répondrons dans un délai maximum de 30 jours.')}
                                {p('En cas de litige non résolu, vous pouvez saisir la CNIL (Commission Nationale de l\'Informatique et des Libertés) : www.cnil.fr.')}
                            </Section>

                            <Section title="7. Cookies">
                                {p('Ce site utilise uniquement des cookies techniques essentiels au fonctionnement (mémorisation de votre navigation). Aucun cookie publicitaire ou de traçage tiers n\'est utilisé. Vous pouvez désactiver les cookies dans les paramètres de votre navigateur.')}
                            </Section>

                            <Section title="8. Modifications">
                                {p('Nous nous réservons le droit de modifier la présente politique à tout moment. La version en vigueur est celle affichée sur cette page, avec la date de mise à jour indiquée ci-dessous.')}
                            </Section>

                            <div style={{
                                marginTop: '2rem',
                                padding: '1.2rem 1.5rem',
                                background: 'var(--sme-grey-50)',
                                borderRadius: 'var(--sme-radius)',
                                fontSize: '0.85rem',
                                color: 'var(--sme-grey-500)',
                            }}>
                                Dernière mise à jour : mai 2026
                            </div>
                        </div>
                    </Reveal>

                    <Reveal delay={60}>
                        <div style={{
                            marginTop: '2rem',
                            display: 'flex',
                            gap: '0.8rem',
                            flexWrap: 'wrap',
                        }}>
                            <button className="btn btn-primary" onClick={() => navigate('home')}>
                                Retour à l'accueil <Icon name="arrow" size={14}/>
                            </button>
                            <button className="btn btn-ghost" onClick={() => navigate('mentions-legales')}>
                                Mentions légales
                            </button>
                        </div>
                    </Reveal>
                </div>
            </section>
        </main>
    );
};

window.PolitiqueConfidentialitePage = PolitiqueConfidentialitePage;