/* global React, Icon, SectionHeader */

const AboutPage = ({ navigate }) => {

    const values = [
        { icon: 'users',  title: 'Professionnalisme', desc: 'Une équipe formée, en uniforme, qui respecte vos espaces comme les siens.' },
        { icon: 'heart',  title: 'Confiance',          desc: 'Transparence sur les produits, les méthodes, les horaires. Toujours.' },
        { icon: 'award',  title: 'Qualité',            desc: 'Des standards de propreté élevés et constants, intervention après intervention.' },
        { icon: 'zap',    title: 'Réactivité',         desc: 'Disponibles pour répondre vite aux demandes ponctuelles ou urgentes.' },
        { icon: 'leaf',   title: 'Respect',            desc: "De l'environnement, des produits, et des personnes qui vivent dans vos espaces." },
    ];

    return (
        <main className="page-enter">

            {/* PAGE HEADER */}
            <section style={{ paddingBlock: 'clamp(3rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3rem)' }}>
                <div className="sme-container">
                    <div style={{ maxWidth: 760 }}>
                        <span className="eyebrow">Notre histoire</span>
                        <h1 style={{ marginTop: '1.2rem' }}>
                            Une entreprise <span style={{ color: 'var(--sme-green)' }}>humaine</span>,
                            au service de votre quotidien.
                        </h1>
                        <p style={{ marginTop: '1.5rem', fontSize: '1.13rem', color: 'var(--sme-grey-600)' }}>
                            SME Nettoyage est née d'une conviction simple : un espace propre change tout.
                            Notre mission est d'offrir des prestations haut de gamme avec une approche humaine,
                            responsable et durable.
                        </p>
                    </div>
                </div>
            </section>

            {/* MISSION + IMAGE */}
            <section style={{ paddingTop: 0 }}>
                <div className="sme-container">
                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
                        gap: 'clamp(2rem, 5vw, 4rem)',
                        alignItems: 'center',
                    }} className="mission-grid">

                        <img
                            src={(window.smeThemeUrl || '/wp-content/themes/sme-nettoyage-react') + '/images/rnd.png?v=1'}
                            alt="Équipe SME Nettoyage"
                            loading="lazy"
                            decoding="async"
                            style={{
                                width: '100%',
                                height: 'auto',
                                display: 'block',
                                borderRadius: '24px',
                                boxShadow: 'var(--sme-shadow-lg)',
                            }}/>

                        <div>
                            <span className="eyebrow green">Notre mission</span>
                            <h2 style={{ marginTop: '1rem' }}>Offrir un service de nettoyage haut de gamme.</h2>
                            <p style={{ marginTop: '1.2rem', color: 'var(--sme-grey-600)', fontSize: '1.02rem' }}>
                                Nous travaillons pour particuliers et professionnels avec la même exigence :
                                garantir des espaces propres, sains et accueillants — sans compromis sur la rigueur,
                                la sécurité ou le respect des personnes.
                            </p>
                            <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', fontSize: '1.02rem' }}>
                                Chaque équipe est formée à nos standards, équipée de produits adaptés
                                (et parfois éco-labellisés selon vos préférences), et accompagnée par un référent
                                qui assure le suivi de votre satisfaction.
                            </p>

                            <ul style={{ listStyle: 'none', padding: 0, margin: '2rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.9rem' }}>
                                {[
                                    'Approche humaine, à taille humaine',
                                    'Engagement éco-responsable',
                                    'Suivi qualité personnalisé',
                                    'Équipes formées et fidélisées',
                                ].map(item => (
                                    <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                                        <span style={{
                                            width: 28, height: 28,
                                            borderRadius: '50%',
                                            background: 'var(--sme-green-soft)',
                                            color: 'var(--sme-green)',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            flexShrink: 0,
                                        }}><Icon name="check" size={16} stroke={2.5}/></span>
                                        <span style={{ fontSize: '0.98rem' }}>{item}</span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                </div>

                <style>{`
                    @media (max-width: 900px) {
                        .mission-grid { grid-template-columns: 1fr !important; }
                    }
                `}</style>
            </section>

            {/* VALUES BIG GRID */}
            <section style={{ background: 'var(--sme-grey-50)' }}>
                <div className="sme-container">
                    <SectionHeader
                        eyebrow="Nos valeurs"
                        title="Cinq engagements, chaque jour."
                        intro="Au-delà du résultat visible, c'est notre façon de travailler qui fait la différence."
                        center
                    />

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                        gap: '1.4rem',
                    }}>
                        {values.map((v, i) => (
                            <article key={v.title} className="sme-card" style={{ padding: '2rem 1.7rem' }}>
                                <div style={{
                                    width: 52, height: 52,
                                    borderRadius: 14,
                                    background: i % 2 === 0 ? 'var(--sme-blue)' : 'var(--sme-green)',
                                    color: 'white',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    marginBottom: '1.2rem',
                                    boxShadow: i % 2 === 0
                                        ? '0 8px 16px rgba(8,145,178,0.25)'
                                        : '0 8px 16px rgba(16,185,129,0.25)',
                                }}>
                                    <Icon name={v.icon} size={22}/>
                                </div>
                                <h3 style={{ fontSize: '1.15rem', marginBottom: '0.6rem' }}>{v.title}</h3>
                                <p style={{ fontSize: '0.93rem', color: 'var(--sme-grey-600)' }}>{v.desc}</p>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            {/* APPROACH STEPS */}
            <section>
                <div className="sme-container">
                    <SectionHeader
                        eyebrow="Notre approche"
                        title="Une méthode claire, des résultats constants."
                        eyebrowGreen
                    />

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                        gap: '1.5rem',
                    }}>
                        {[
                            { n: '01', title: 'Écoute & visite', desc: 'Un premier échange pour comprendre vos besoins et visiter les lieux si nécessaire.' },
                            { n: '02', title: 'Devis sur mesure', desc: 'Une proposition claire, détaillée, sans surprise — sous 24h ouvrées.' },
                            { n: '03', title: 'Intervention', desc: 'Une équipe identifiée, formée, ponctuelle. Et toujours en uniforme.' },
                            { n: '04', title: 'Suivi qualité', desc: 'Un référent dédié, des points réguliers, et la possibilité d\'ajuster.' },
                        ].map(step => (
                            <article key={step.n} style={{
                                padding: '1.8rem',
                                borderRadius: 'var(--sme-radius)',
                                border: '1px solid var(--sme-grey-100)',
                                background: 'white',
                                position: 'relative',
                            }}>
                                <div style={{
                                    fontFamily: 'Poppins',
                                    fontWeight: 600,
                                    fontSize: '2.2rem',
                                    color: 'var(--sme-blue-soft)',
                                    lineHeight: 1,
                                    marginBottom: '1rem',
                                }}>{step.n}</div>
                                <h4 style={{ fontSize: '1.08rem', marginBottom: '0.5rem' }}>{step.title}</h4>
                                <p style={{ fontSize: '0.9rem', color: 'var(--sme-grey-600)' }}>{step.desc}</p>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            {/* TARGET MISSION CALLOUT */}
            <section>
                <div className="sme-container">
                    <div style={{
                        background: 'var(--sme-green-soft)',
                        borderRadius: 'var(--sme-radius-lg)',
                        padding: 'clamp(2.5rem, 5vw, 3.5rem)',
                        display: 'grid',
                        gridTemplateColumns: 'auto minmax(0, 1fr) auto',
                        gap: '2rem',
                        alignItems: 'center',
                    }} className="mission-callout">
                        <div style={{
                            width: 80, height: 80,
                            borderRadius: '50%',
                            background: 'var(--sme-green)',
                            color: 'white',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexShrink: 0,
                        }}>
                            <Icon name="target" size={36} stroke={1.7}/>
                        </div>
                        <div>
                            <span className="eyebrow green">Notre mission</span>
                            <h3 style={{ marginTop: '0.7rem', fontSize: '1.4rem' }}>
                                Offrir des services de nettoyage haut de gamme avec une approche humaine, responsable et durable.
                            </h3>
                        </div>
                        <button className="btn btn-secondary" onClick={() => navigate('contact')}>
                            Travailler avec nous <Icon name="arrow" size={16}/>
                        </button>
                    </div>

                    <style>{`
                        @media (max-width: 900px) {
                            .mission-callout {
                                grid-template-columns: 1fr !important;
                                text-align: left;
                            }
                        }
                    `}</style>
                </div>
            </section>

        </main>
    );
};

window.AboutPage = AboutPage;