/* global React, Icon, SectionHeader, Reveal */

const FAQPage = ({ navigate }) => {

    const groups = [
        {
            title: 'Devis & contractualisation',
            color: 'var(--sme-blue)',
            soft: 'var(--sme-blue-soft)',
            items: [
                {
                    q: 'Sous combien de temps puis-je recevoir un devis ?',
                    a: 'Dans les 24h ouvrées suivant votre demande. Pour les interventions urgentes (sinistre, remise en état après incident), nous pouvons proposer un devis express en quelques heures.',
                },
                {
                    q: 'Le devis est-il gratuit et sans engagement ?',
                    a: "Oui, totalement gratuit et sans engagement. Nous nous déplaçons sur site pour évaluer précisément votre besoin avant de chiffrer — c'est la seule façon de proposer un tarif juste.",
                },
                {
                    q: 'Êtes-vous une entreprise assurée ?',
                    a: 'Oui, SME Nettoyage est couverte par une responsabilité civile professionnelle. Une attestation peut vous être transmise sur simple demande lors de la signature du contrat.',
                },
                {
                    q: 'Quels sont vos modes de paiement ?',
                    a: 'Virement bancaire, prélèvement automatique mensuel, ou chèque emploi service universel (CESU) pour les particuliers éligibles. Les factures sont émises en début de mois suivant la prestation.',
                },
            ],
        },
        {
            title: 'Prestations & équipes',
            color: 'var(--sme-green)',
            soft: 'var(--sme-green-soft)',
            items: [
                {
                    q: 'Est-ce la même équipe qui intervient à chaque passage ?',
                    a: "Autant que possible, oui. Nous croyons à la relation de confiance entre votre site et notre équipe — un agent qui connaît vos locaux est plus efficace et plus respectueux des lieux. Un référent qualité reste votre interlocuteur unique.",
                },
                {
                    q: 'Vos agents sont-ils identifiables sur site ?',
                    a: "Oui, tous nos agents portent l'uniforme SME (logo, couleurs bleu/vert) et un badge nominatif. Vous pouvez les identifier facilement à leur arrivée.",
                },
                {
                    q: 'Travaillez-vous avec des produits éco-responsables ?',
                    a: 'Oui. Nous utilisons par défaut des produits éco-labellisés (Ecocert, Ecolabel européen). Pour les environnements sensibles (crèches, EHPAD, milieu médical), nous adaptons nos protocoles à vos contraintes spécifiques.',
                },
                {
                    q: 'Pouvez-vous intervenir le soir, le week-end ou la nuit ?',
                    a: "Oui, nous nous adaptons à vos horaires : tôt le matin avant l'ouverture, le soir après la fermeture, en nuit profonde ou le week-end. C'est même souvent la formule la plus pratique pour les bureaux et commerces.",
                },
            ],
        },
        {
            title: 'Suivi & qualité',
            color: 'var(--sme-blue)',
            soft: 'var(--sme-blue-soft)',
            items: [
                {
                    q: "Comment se passe le suivi qualité ?",
                    a: "Un référent dédié vous est assigné dès la signature. Il effectue des contrôles qualité mensuels, fait le lien avec vos remarques éventuelles, et ajuste les protocoles si besoin. Une fiche de passage est laissée à chaque intervention.",
                },
                {
                    q: 'Que se passe-t-il si je ne suis pas satisfait ?',
                    a: "Nous reprenons l'intervention sous 24h, sans frais supplémentaires. Votre satisfaction est notre engagement contractuel — pas un argument marketing.",
                },
                {
                    q: "Puis-je modifier la fréquence ou résilier mon contrat ?",
                    a: "Oui, à tout moment, avec un préavis d'un mois pour les contrats récurrents. Les prestations ponctuelles n'engagent à rien au-delà de la prestation elle-même.",
                },
            ],
        },
    ];

    return (
        <main className="page-enter" data-screen-label="FAQ">

            {/* 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={{ textAlign: 'center', maxWidth: 760, marginInline: 'auto' }}>
                    <Reveal>
                        <span className="eyebrow">Questions fréquentes</span>
                        <h1 style={{
                            marginTop: '1rem',
                            fontSize: 'clamp(2.4rem, 5vw, 3.6rem)',
                        }}>
                            Vos questions,<br/>
                            <span style={{ color: 'var(--sme-blue)', fontStyle: 'italic', fontWeight: 500 }}>nos réponses claires.</span>
                        </h1>
                        <p style={{
                            marginTop: '1.5rem',
                            color: 'var(--sme-grey-600)',
                            fontSize: '1.08rem',
                        }}>
                            Devis, prestations, suivi qualité — tout ce que vous devez savoir avant de nous confier vos espaces.
                            Une autre question ? <button onClick={() => navigate('contact')} style={{
                                background: 'none', border: 'none', padding: 0,
                                color: 'var(--sme-blue)', cursor: 'pointer',
                                fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 600,
                                textDecoration: 'underline', textUnderlineOffset: '3px',
                            }}>écrivez-nous directement</button>.
                        </p>
                    </Reveal>
                </div>
            </section>

            {/* FAQ groups */}
            <section style={{ paddingTop: 0 }}>
                <div className="sme-container" style={{ maxWidth: 880 }}>
                    {groups.map((g, gi) => (
                        <Reveal key={g.title} delay={gi * 60}>
                            <div style={{ marginBottom: '3.5rem' }}>
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '1rem',
                                    marginBottom: '1.5rem',
                                }}>
                                    <span style={{
                                        width: 36, height: 36,
                                        borderRadius: 10,
                                        background: g.soft,
                                        color: g.color,
                                        display: 'inline-flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        fontFamily: 'Poppins, sans-serif',
                                        fontWeight: 700,
                                        fontSize: '0.95rem',
                                    }}>0{gi + 1}</span>
                                    <h3 style={{ fontSize: '1.35rem' }}>{g.title}</h3>
                                </div>
                                <div style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    gap: '0.7rem',
                                }}>
                                    {g.items.map((item, i) => (
                                        <FAQItem key={i} q={item.q} a={item.a} color={g.color}/>
                                    ))}
                                </div>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </section>

            {/* CTA */}
            <section style={{ paddingTop: 0 }}>
                <div className="sme-container">
                    <Reveal>
                        <div style={{
                            background: 'linear-gradient(135deg, var(--sme-blue) 0%, var(--sme-blue-dark) 100%)',
                            color: 'white',
                            borderRadius: 'var(--sme-radius-lg)',
                            padding: 'clamp(2.5rem, 5vw, 4rem)',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            textAlign: 'center',
                            gap: '1.5rem',
                            position: 'relative',
                            overflow: 'hidden',
                        }}>
                            <div aria-hidden="true" style={{
                                position: 'absolute',
                                top: '-50%', right: '-10%',
                                width: 400, height: 400,
                                borderRadius: '50%',
                                background: 'radial-gradient(circle, rgba(16,185,129,0.3), transparent 65%)',
                            }}/>
                            <div style={{ position: 'relative', maxWidth: 600 }}>
                                <h2 style={{ color: 'white', fontSize: 'clamp(1.6rem, 3vw, 2.2rem)' }}>
                                    Une question spécifique à votre site ?
                                </h2>
                                <p style={{ marginTop: '1rem', color: 'rgba(255,255,255,0.85)', fontSize: '1.05rem' }}>
                                    Le mieux reste encore d'en parler. Un devis sur site est gratuit, sans engagement, et permet de répondre précisément à votre besoin.
                                </p>
                                <div style={{
                                    marginTop: '2rem',
                                    display: 'flex',
                                    gap: '0.8rem',
                                    justifyContent: 'center',
                                    flexWrap: 'wrap',
                                }}>
                                    <button className="btn btn-secondary" onClick={() => navigate('contact')}
                                            style={{ padding: '15px 28px' }}>
                                        Demander un devis <Icon name="arrow" size={14}/>
                                    </button>
                                    <a href="tel:0768536516" className="btn btn-ghost" style={{
                                        background: 'rgba(255,255,255,0.12)',
                                        color: 'white',
                                        borderColor: 'rgba(255,255,255,0.25)',
                                        padding: '15px 28px',
                                    }}>
                                        <Icon name="phone" size={14}/> 07 68 53 65 16
                                    </a>
                                </div>
                            </div>
                        </div>
                    </Reveal>
                </div>
            </section>
        </main>
    );
};

const FAQItem = ({ q, a, color }) => {
    const [open, setOpen] = React.useState(false);
    return (
        <div style={{
            background: 'white',
            border: '1px solid var(--sme-grey-100)',
            borderRadius: 'var(--sme-radius)',
            overflow: 'hidden',
            transition: 'box-shadow 0.2s, border-color 0.2s',
            boxShadow: open ? 'var(--sme-shadow-sm)' : 'none',
            borderColor: open ? color : 'var(--sme-grey-100)',
        }}>
            <button
                onClick={() => setOpen(!open)}
                aria-expanded={open}
                style={{
                    width: '100%',
                    background: 'none',
                    border: 'none',
                    padding: '1.25rem 1.4rem',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: '1rem',
                    cursor: 'pointer',
                    fontFamily: 'Poppins, sans-serif',
                    fontWeight: 500,
                    fontSize: '1rem',
                    color: 'var(--sme-grey-900)',
                    textAlign: 'left',
                }}>
                {q}
                <span style={{
                    width: 30, height: 30, borderRadius: '50%',
                    background: open ? color : 'var(--sme-grey-50)',
                    color: open ? 'white' : 'var(--sme-grey-600)',
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    transition: 'transform 0.25s, background 0.2s, color 0.2s',
                    transform: open ? 'rotate(180deg)' : 'rotate(0)',
                }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </span>
            </button>
            <div style={{
                maxHeight: open ? 400 : 0,
                opacity: open ? 1 : 0,
                overflow: 'hidden',
                transition: 'max-height 0.35s ease, opacity 0.25s',
            }}>
                <p style={{
                    padding: '0 1.4rem 1.4rem',
                    color: 'var(--sme-grey-600)',
                    fontSize: '0.96rem',
                    lineHeight: 1.65,
                }}>{a}</p>
            </div>
        </div>
    );
};

window.FAQPage = FAQPage;
