/* global React, Icon, Reveal */

const MentionsLegalesPage = ({ 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-blue-soft)',
                marginBottom: '1.2rem',
            }}>{title}</h2>
            {children}
        </div>
    );

    const Row = ({ label, value }) => (
        <div style={{
            display: 'flex',
            gap: '1rem',
            paddingBlock: '0.55rem',
            borderBottom: '1px solid var(--sme-grey-50)',
            flexWrap: 'wrap',
        }}>
            <span style={{
                minWidth: 220,
                fontFamily: 'Poppins, sans-serif',
                fontWeight: 500,
                fontSize: '0.9rem',
                color: 'var(--sme-grey-600)',
                flexShrink: 0,
            }}>{label}</span>
            <span style={{ fontSize: '0.92rem', color: 'var(--sme-grey-900)' }}>{value}</span>
        </div>
    );

    return (
        <main className="page-enter" data-screen-label="Mentions légales">

            {/* HERO */}
            <section style={{
                paddingBlock: 'clamp(3rem, 5vw, 4rem) clamp(2rem, 3vw, 3rem)',
                background: 'linear-gradient(180deg, var(--sme-blue-soft) 0%, white 100%)',
            }}>
                <div className="sme-container" style={{ maxWidth: 760 }}>
                    <Reveal>
                        <span className="eyebrow">Informations légales</span>
                        <h1 style={{ marginTop: '1rem', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>
                            Mentions légales
                        </h1>
                        <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', fontSize: '1rem' }}>
                            Conformément aux dispositions de la loi n° 2004-575 du 21 juin 2004 pour la confiance
                            dans l'économie numérique, voici les informations légales relatives à ce site.
                        </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. Hébergement">
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.7 }}>
                                    Ce site est hébergé par une solution WordPress gérée. Pour toute question relative
                                    à l'hébergement, vous pouvez utiliser le formulaire de contact disponible sur ce site.
                                </p>
                            </Section>

                            <Section title="2. Propriété intellectuelle">
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.7 }}>
                                    L'ensemble des contenus présents sur ce site (textes, images, logos, visuels, structure)
                                    est la propriété exclusive de SOC MAINTENANCE ENTRETIEN ou fait l'objet d'une autorisation
                                    d'utilisation. Toute reproduction, représentation, modification ou adaptation, totale ou
                                    partielle, est interdite sans autorisation écrite préalable.
                                </p>
                            </Section>

                            <Section title="3. Responsabilité">
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.7 }}>
                                    SME Nettoyage s'efforce d'assurer l'exactitude et la mise à jour des informations
                                    diffusées sur ce site. Toutefois, SME Nettoyage ne peut garantir l'exhaustivité,
                                    la précision ou l'actualité des informations. L'utilisation des informations publiées
                                    sur ce site se fait sous la seule responsabilité de l'utilisateur.
                                </p>
                            </Section>

                            <Section title="4. Données personnelles">
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.7 }}>
                                    Les informations collectées via le formulaire de contact sont utilisées uniquement pour
                                    répondre à vos demandes. Pour en savoir plus sur le traitement de vos données, consultez
                                    notre{' '}
                                    <button onClick={() => navigate('politique-confidentialite')} style={{
                                        background: 'none', border: 'none', padding: 0,
                                        color: 'var(--sme-blue)', cursor: 'pointer',
                                        fontFamily: 'inherit', fontSize: 'inherit',
                                        fontWeight: 600, textDecoration: 'underline',
                                        textUnderlineOffset: '3px',
                                    }}>
                                        Politique de Confidentialité
                                    </button>.
                                </p>
                            </Section>

                            <Section title="5. Cookies">
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.7 }}>
                                    Ce site peut utiliser des cookies techniques nécessaires à son bon fonctionnement
                                    (mémorisation de la page visitée). Aucun cookie publicitaire ou de traçage tiers
                                    n'est déposé sans votre consentement.
                                </p>
                            </Section>

                            <Section title="6. Droit applicable">
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-700)', lineHeight: 1.7 }}>
                                    Le présent site et ses mentions légales sont soumis au droit français. En cas de litige,
                                    et à défaut d'accord amiable, les tribunaux compétents de Basse-Terre (Guadeloupe)
                                    seront seuls compétents.
                                </p>
                            </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('politique-confidentialite')}>
                                Politique de confidentialité
                            </button>
                        </div>
                    </Reveal>
                </div>
            </section>
        </main>
    );
};

window.MentionsLegalesPage = MentionsLegalesPage;