/* global React, Icon */

const ContactPage = () => {
    const [form, setForm] = React.useState({
        name: '', email: '', phone: '', service: "Nettoyage d'Entreprises", message: '',
    });
    const [sent, setSent] = React.useState(false);

    const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

    const submit = (e) => {
        e.preventDefault();
        setSent(true);
        setTimeout(() => setSent(false), 4500);
    };

    const inputStyle = {
        width: '100%',
        padding: '14px 18px',
        border: '2px solid rgba(255,255,255,0.4)',
        borderRadius: 10,
        fontFamily: 'Inter, sans-serif',
        fontSize: '0.95rem',
        background: 'white',
        color: '#0f172a',
        outline: 'none',
        transition: 'border-color 0.2s, background 0.2s, box-shadow 0.2s',
    };

    const labelStyle = {
        fontFamily: 'Poppins, sans-serif',
        fontWeight: 600,
        fontSize: '0.82rem',
        color: 'rgba(255,255,255,0.9)',
        marginBottom: 7,
        display: 'block',
        letterSpacing: '0.02em',
    };

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

            {/* HERO HEADER */}
            <section style={{
                background: 'linear-gradient(135deg, var(--sme-blue) 0%, #0e7490 50%, var(--sme-green) 100%)',
                paddingBlock: 'clamp(3.5rem, 6vw, 5rem)',
                position: 'relative',
                overflow: 'hidden',
            }}>
                <div style={{
                    position: 'absolute', top: -60, right: -60,
                    width: 300, height: 300, borderRadius: '50%',
                    background: 'rgba(255,255,255,0.06)',
                    pointerEvents: 'none',
                }}/>
                <div style={{
                    position: 'absolute', bottom: -40, left: '30%',
                    width: 200, height: 200, borderRadius: '50%',
                    background: 'rgba(255,255,255,0.04)',
                    pointerEvents: 'none',
                }}/>
                <div className="sme-container" style={{ position: 'relative', textAlign: 'center' }}>
                    <span style={{
                        display: 'inline-block',
                        background: 'rgba(255,255,255,0.18)',
                        color: 'white',
                        fontFamily: 'Poppins, sans-serif',
                        fontSize: '0.75rem',
                        fontWeight: 700,
                        letterSpacing: '0.1em',
                        textTransform: 'uppercase',
                        padding: '6px 18px',
                        borderRadius: 100,
                        marginBottom: '1rem',
                    }}>Nous contacter</span>
                    <h1 style={{ color: 'white', fontSize: 'clamp(2rem, 4vw, 2.8rem)', marginBottom: '1rem' }}>
                        Parlons de votre projet.
                    </h1>
                    <p style={{ color: 'rgba(255,255,255,0.88)', fontSize: '1.1rem', maxWidth: 520, margin: '0 auto' }}>
                        Un devis, une question, une urgence ? Notre équipe vous répond sous <strong>24h ouvrées</strong>.
                    </p>
                </div>
            </section>

            {/* FORM CENTERED */}
            <section style={{
                background: 'linear-gradient(180deg, #d1fae5 0%, #ecfdf5 60%, #f0fdf4 100%)',
                paddingBlock: 'clamp(3rem, 5vw, 4.5rem)',
            }}>
                <div className="sme-container">
                    <div style={{ maxWidth: 720, margin: '0 auto' }}>

                        {/* Form card */}
                        <div style={{
                            background: '#10B981',
                            borderRadius: 20,
                            boxShadow: '0 20px 60px rgba(16,185,129,0.35), 0 4px 20px rgba(0,0,0,0.08)',
                            overflow: 'hidden',
                        }}>
                            {/* Colored top bar */}
                            <div style={{
                                background: 'rgba(0,0,0,0.12)',
                                padding: '1.8rem 2.5rem',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '1rem',
                                borderBottom: '1px solid rgba(255,255,255,0.15)',
                            }}>
                                <div style={{
                                    width: 48, height: 48,
                                    borderRadius: 12,
                                    background: 'rgba(255,255,255,0.2)',
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    color: 'white', flexShrink: 0,
                                }}>
                                    <Icon name="mail" size={24}/>
                                </div>
                                <div>
                                    <h2 style={{ color: 'white', fontSize: '1.35rem', marginBottom: 2 }}>
                                        Envoyez-nous un message
                                    </h2>
                                    <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: '0.88rem', margin: 0 }}>
                                        Remplissez le formulaire et nous vous recontactons rapidement.
                                    </p>
                                </div>
                            </div>

                            {/* Form body */}
                            <div style={{ padding: 'clamp(1.8rem, 4vw, 2.5rem)', position: 'relative' }}>
                                <form onSubmit={submit} className="sme-contact-form" style={{
                                    display: 'grid',
                                    gridTemplateColumns: '1fr 1fr',
                                    gap: '1.2rem',
                                }}>
                                    <div style={{ gridColumn: 'span 2' }}>
                                        <label style={labelStyle}>Nom complet <span style={{color:'var(--sme-blue)'}}>*</span></label>
                                        <input style={inputStyle} type="text" required value={form.name} onChange={update('name')}
                                               placeholder="Jean Dupont"
                                               onFocus={e => { e.target.style.borderColor = '#059669'; e.target.style.boxShadow = '0 0 0 3px rgba(16,185,129,0.2)'; }}
                                               onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.4)'; e.target.style.boxShadow = 'none'; }}/>
                                    </div>

                                    <div>
                                        <label style={labelStyle}>Email <span style={{color:'var(--sme-blue)'}}>*</span></label>
                                        <input style={inputStyle} type="email" required value={form.email} onChange={update('email')}
                                               placeholder="vous@exemple.fr"
                                               onFocus={e => { e.target.style.borderColor = '#059669'; e.target.style.boxShadow = '0 0 0 3px rgba(16,185,129,0.2)'; }}
                                               onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.4)'; e.target.style.boxShadow = 'none'; }}/>
                                    </div>

                                    <div>
                                        <label style={labelStyle}>Téléphone</label>
                                        <input style={inputStyle} type="tel" value={form.phone} onChange={update('phone')}
                                               placeholder="06 12 34 56 78"
                                               onFocus={e => { e.target.style.borderColor = '#059669'; e.target.style.boxShadow = '0 0 0 3px rgba(16,185,129,0.2)'; }}
                                               onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.4)'; e.target.style.boxShadow = 'none'; }}/>
                                    </div>

                                    <div style={{ gridColumn: 'span 2' }}>
                                        <label style={labelStyle}>Service souhaité</label>
                                        <select style={{
                                            ...inputStyle,
                                            cursor: 'pointer',
                                            appearance: 'none',
                                            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
                                            backgroundRepeat: 'no-repeat',
                                            backgroundPosition: 'right 14px center',
                                            paddingRight: 42,
                                        }} value={form.service} onChange={update('service')}>
                                            <option>Nettoyage d'Entreprises</option>
                                            <option>Nettoyage de Bâtiments</option>
                                            <option>Nettoyage de Vitres</option>
                                            <option>Nettoyage Industriel</option>
                                            <option>Jardins & Parcs</option>
                                            <option>Autre / je ne sais pas</option>
                                        </select>
                                    </div>

                                    <div style={{ gridColumn: 'span 2' }}>
                                        <label style={labelStyle}>Votre message <span style={{color:'var(--sme-blue)'}}>*</span></label>
                                        <textarea
                                            style={{ ...inputStyle, minHeight: 140, resize: 'vertical', fontFamily: 'inherit' }}
                                            required value={form.message} onChange={update('message')}
                                            placeholder="Décrivez votre besoin : surface, fréquence, contraintes particulières…"
                                            onFocus={e => { e.target.style.borderColor = 'white'; e.target.style.background = 'rgba(255,255,255,0.32)'; e.target.style.boxShadow = '0 0 0 3px rgba(255,255,255,0.2)'; }}
                                            onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.3)'; e.target.style.background = 'rgba(255,255,255,0.18)'; e.target.style.boxShadow = 'none'; }}/>
                                    </div>

                                    {/* Quick info chips */}
                                    <div style={{ gridColumn: 'span 2', display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
                                        {[
                                            { icon: 'check', text: 'Devis gratuit' },
                                            { icon: 'clock', text: 'Réponse sous 24h' },
                                            { icon: 'check', text: 'Sans engagement' },
                                        ].map((chip) => (
                                            <span key={chip.text} style={{
                                                display: 'inline-flex', alignItems: 'center', gap: 6,
                                                fontSize: '0.8rem', fontFamily: 'Poppins, sans-serif', fontWeight: 600,
                                                color: '#059669',
                                                background: 'white',
                                                padding: '5px 12px', borderRadius: 100,
                                                border: '1px solid rgba(255,255,255,0.6)',
                                                boxShadow: '0 1px 4px rgba(0,0,0,0.08)',
                                            }}>
                                                <Icon name={chip.icon} size={13} stroke={2.5}/> {chip.text}
                                            </span>
                                        ))}
                                    </div>

                                    <div style={{
                                        gridColumn: 'span 2',
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        gap: '1rem',
                                        flexWrap: 'wrap',
                                        marginTop: '0.4rem',
                                        paddingTop: '1.2rem',
                                        borderTop: '1px solid rgba(255,255,255,0.2)',
                                    }}>
                                        <span style={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.75)' }}>
                                            En envoyant ce formulaire, vous acceptez notre politique de confidentialité.
                                        </span>
                                        <button type="submit" style={{
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            gap: 8,
                                            padding: '13px 28px',
                                            background: 'white',
                                            color: '#059669',
                                            border: 'none',
                                            borderRadius: 10,
                                            fontFamily: 'Poppins, sans-serif',
                                            fontWeight: 700,
                                            fontSize: '0.95rem',
                                            cursor: 'pointer',
                                            transition: 'opacity 0.2s, transform 0.2s',
                                            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
                                            flexShrink: 0,
                                        }}
                                        onMouseEnter={e => { e.currentTarget.style.opacity = '0.9'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                                        onMouseLeave={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                                            Envoyer ma demande <Icon name="arrow" size={16}/>
                                        </button>
                                    </div>
                                </form>

                                {sent && (
                                    <div style={{
                                        position: 'absolute',
                                        inset: 0,
                                        background: 'rgba(255,255,255,0.97)',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        padding: '2rem',
                                        textAlign: 'center',
                                        animation: 'pageEnter 0.3s ease',
                                    }}>
                                        <div style={{
                                            width: 80, height: 80,
                                            borderRadius: '50%',
                                            background: 'linear-gradient(135deg, var(--sme-blue), var(--sme-green))',
                                            color: 'white',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            marginBottom: '1.5rem',
                                            boxShadow: '0 10px 30px rgba(16,185,129,0.35)',
                                        }}>
                                            <Icon name="check" size={42} stroke={2.5}/>
                                        </div>
                                        <h3 style={{ fontSize: '1.5rem' }}>Message envoyé !</h3>
                                        <p style={{ marginTop: '0.8rem', color: 'var(--sme-grey-600)', maxWidth: 400 }}>
                                            Merci de votre confiance. Nous revenons vers vous dans les 24h ouvrées.
                                        </p>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* MAP embed */}
            <section style={{ paddingBottom: 'clamp(3rem, 5vw, 4rem)' }}>
                <div className="sme-container">
                    <div style={{
                        borderRadius: 'var(--sme-radius-lg)',
                        overflow: 'hidden',
                        border: '1px solid var(--sme-grey-100)',
                        boxShadow: 'var(--sme-shadow-sm)',
                        position: 'relative',
                    }}>
                        <iframe
                            title="SME Nettoyage — Localisation"
                            src="https://maps.google.com/maps?q=Cit%C3%A9+Grain+d%27Or+Bat+C,+97100+Basse-Terre,+Guadeloupe&output=embed&hl=fr&z=15"
                            width="100%"
                            height="380"
                            style={{ border: 0, display: 'block' }}
                            allowFullScreen
                            loading="lazy"
                            referrerPolicy="no-referrer-when-downgrade"
                        />
                        {/* Overlay button — ouvre la fiche GMB */}
                        <a
                            href="https://share.google/vPM5xxgZi07Cb5xzE"
                            target="_blank"
                            rel="noopener noreferrer"
                            style={{
                                position: 'absolute',
                                bottom: '1rem',
                                left: '50%',
                                transform: 'translateX(-50%)',
                                background: 'white',
                                padding: '0.55rem 1.2rem',
                                borderRadius: 12,
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 600,
                                fontSize: '0.88rem',
                                boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
                                textDecoration: 'none',
                                color: 'var(--sme-grey-900)',
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: 7,
                                whiteSpace: 'nowrap',
                            }}>
                            <Icon name="location" size={15}/> Voir sur Google Maps
                        </a>
                    </div>
                </div>
                <style>{`
                    @media (max-width: 580px) {
                        .sme-contact-form { grid-template-columns: 1fr !important; }
                        .sme-contact-form > div { grid-column: span 1 !important; }
                    }
                `}</style>
            </section>

        </main>
    );
};

window.ContactPage = ContactPage;