// ECO-PANNEAU.FR - __react/socle/_socle_editeur_infos.jsx

window.pano_PanneauEditorInfos = ({ 
    panneau, 
    setPanneau, 
    lockedFields = [], 
    validationErrors = [], 
    settings,
    uiPrefs = {}
}) => {
    // 1. - SÉCURITÉ ANTI-FUITE DE MÉMOIRE (Memory Leak) ET CORRUPTION D'ÉTAT
    const isMounted = React.useRef(true);
    React.useEffect(() => {
        return () => {
            isMounted.current = false;
        };
    }, []);

    // 2. - Composants et Icônes
    const { AlertBox, Button } = window.pano_getComponents();
    
    const {
        InfoIcon, LockIcon, MapPinIcon, CalendarIcon, UploadCloudIcon,
        CheckCircleIcon, Trash2Icon, PlusIcon
    } = window.pano_getIcons();

    // 3. - Logique de verrouillage
    const isFieldLocked = (fieldId) => lockedFields.includes(fieldId);

    // 4. - Actions métier
    const handleFileUpload = async (e, type) => {
        const file = e.target.files[0];
        
        if (e.target) e.target.value = null; 
        if (!file) return;

        const uploadImage = (urlField, idField) => {
            const reader = new FileReader();
            reader.onload = async (event) => {
                if (!isMounted.current) return;

                const base64Url = event.target.result;
                setPanneau(prev => ({ ...prev, [urlField]: base64Url }));
                
                try {
                    const fileObj = await window.pano_uploadFile(file, 'image', null, false, false, panneau.client_uid, panneau.id);
                    
                    if (!isMounted.current) return;

                    setPanneau(prev => ({ ...prev, [idField]: fileObj.id || fileObj }));
                } catch (err) {
                    if (!isMounted.current) return;
                    
                    if (window.pano_showToast) window.pano_showToast(err, "error");
                    else if (window.pano_logFallback) window.pano_logFallback("Erreur d'upload d'image ignorée.");
                    
                    setPanneau(prev => ({ ...prev, [urlField]: '' }));
                }
            };
            reader.readAsDataURL(file);
        };

        if (type === 'image') {
            uploadImage('imageUrl', 'imageId');
        } else if (type === 'logo') {
            uploadImage('maitreOuvrageLogoUrl', 'maitreOuvrageLogoId');
        } else if (type === 'logo_architecte') {
            uploadImage('architecteLogoUrl', 'architecteLogoId');
        } else if (type === 'pdf') {
            try {
                const fileObj = await window.pano_uploadFile(file, 'pdf', null, false, false, panneau.client_uid, panneau.id);
                
                if (!isMounted.current) return;
                
                setPanneau(prev => ({ ...prev, pdfId: fileObj.id || fileObj, pdfNumPages: fileObj.numPages || 1 }));
            } catch (err) {
                if (!isMounted.current) return;
                
                if (window.pano_showToast) window.pano_showToast(err, "error");
                else if (window.pano_logFallback) window.pano_logFallback("Erreur d'upload PDF ignorée.");
            }
        }
    };

    // 4.1 - Gestion des arrêtés modificatifs
    const addModificatif = () => {
        if (isFieldLocked('permitNumber')) return;
        const currentArr = panneau.modificatifs || [];
        const newUid = 'mod_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
        
        const newPanneau = { 
            ...panneau, 
            modificatifs: [...currentArr, { _uid: newUid, label: '', date: '', id: '', numPages: 1 }] 
        };
        delete newPanneau.modifiedPermits; 
        setPanneau(newPanneau);
    };

    const updateModificatif = (uid, field, value) => {
        if (isFieldLocked('permitNumber')) return;
        const currentArr = panneau.modificatifs || [];
        const newArr = currentArr.map((p, i) => {
            const pUid = p._uid || p.id || i;
            return pUid === uid ? { ...p, [field]: value } : p;
        });
        
        const newPanneau = { ...panneau, modificatifs: newArr };
        delete newPanneau.modifiedPermits;
        setPanneau(newPanneau);
    };

    const removeModificatif = (uid) => {
        if (isFieldLocked('permitNumber')) return;
        const currentArr = panneau.modificatifs || [];
        
        const newArr = currentArr.filter((p, i) => (p._uid || p.id || i) !== uid);
        const newPanneau = { ...panneau, modificatifs: newArr };
        delete newPanneau.modifiedPermits;
        setPanneau(newPanneau);
    };

    const handleModificatifUpload = async (e, uid) => {
        const file = e.target.files[0];
        
        if (e.target) e.target.value = null; 
        if (!file) return;

        try {
            const fileObj = await window.pano_uploadFile(file, 'pdf', null, false, false, panneau.client_uid, panneau.id);
            
            if (!isMounted.current) return;
            
            const currentArr = panneau.modificatifs || [];
            const newArr = currentArr.map((p, i) => {
                const pUid = p._uid || p.id || i;
                return pUid === uid ? { ...p, id: fileObj.id || fileObj, numPages: fileObj.numPages || 1 } : p;
            });
            
            const newPanneau = { ...panneau, modificatifs: newArr };
            delete newPanneau.modifiedPermits;
            setPanneau(newPanneau);
        } catch (err) {
            if (!isMounted.current) return;
            
            if (window.pano_showToast) window.pano_showToast(err, "error");
            else if (window.pano_logFallback) window.pano_logFallback("Erreur d'upload modificatif ignorée.");
        }
    };

    const showContactRow = uiPrefs.simp_opt_schedule !== false || uiPrefs.simp_opt_emergency !== false || uiPrefs.simp_opt_link !== false;

    // 5. - Rendu UI
    return (
        <div className="space-y-8 animate-in fade-in pb-8">
            
            {lockedFields.length > 0 && (
                <AlertBox type="info" icon={InfoIcon}>
                    <span className="font-bold text-amber-600">
                        <LockIcon size={14} className="inline mr-1"/> 
                        Certains champs ont été verrouillés par le propriétaire du projet.
                    </span>
                </AlertBox>
            )}

            {/* 5.1 - Le projet */}
            <div className="space-y-4">
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">1. Le projet</h4>
                <div className="flex flex-col gap-4">
                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                            Nom du chantier / projet <span className="text-red-500">*</span>
                            {isFieldLocked('name') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <input 
                            type="text" 
                            disabled={isFieldLocked('name')} 
                            value={panneau.name || ''} 
                            onChange={e => setPanneau({...panneau, name: e.target.value})} 
                            placeholder="Ex: Construction de 12 logements collectifs" 
                            className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold ${
                                isFieldLocked('name') 
                                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                    : validationErrors.some(e => e.includes('nom du chantier')) 
                                        ? 'border-red-300 focus:border-red-500 bg-red-50' 
                                        : 'border-slate-200 focus:border-emerald-500'
                            }`} 
                        />
                    </div>
                    
                    {uiPrefs.simp_opt_description !== false && (
                        <div className="space-y-1 relative animate-in fade-in">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                                Nature des travaux (description)
                                {isFieldLocked('description') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            <textarea 
                                disabled={isFieldLocked('description')}
                                value={panneau.description || ''} 
                                onChange={e => setPanneau({...panneau, description: e.target.value})} 
                                placeholder="Ex: Démolition de l'existant et construction d'un immeuble R+3 avec parking souterrain..." 
                                rows="2" 
                                className={`w-full border-2 rounded-xl p-3 outline-none transition text-sm resize-none ${
                                    isFieldLocked('description') 
                                        ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                        : 'border-slate-200 focus:border-emerald-500'
                                }`}
                            ></textarea>
                        </div>
                    )}

                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                            Adresse complète du terrain <span className="text-red-500">*</span>
                            {isFieldLocked('location') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <div className="relative">
                            <MapPinIcon size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                            <input 
                                type="text" 
                                disabled={isFieldLocked('location')} 
                                value={panneau.location || ''} 
                                onChange={e => setPanneau({...panneau, location: e.target.value})} 
                                placeholder="Numéro, Rue, Code Postal, Ville" 
                                className={`w-full border-2 rounded-xl p-3 pl-10 outline-none transition font-bold ${
                                    isFieldLocked('location') 
                                        ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                        : validationErrors.some(e => e.includes('adresse du panneau')) 
                                            ? 'border-red-300 focus:border-red-500 bg-red-50' 
                                            : 'border-slate-200 focus:border-emerald-500'
                                }`} 
                            />
                        </div>
                    </div>

                    {showContactRow && (
                        <div className="space-y-4 pt-4 border-t border-slate-100 animate-in fade-in">
                            <label className="text-xs font-bold text-slate-500 uppercase block">Informations pratiques et contact</label>
                            <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
                                
                                {uiPrefs.simp_opt_schedule !== false && (
                                    <div className="relative">
                                        {isFieldLocked('noiseSchedule') && <LockIcon size={12} className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-500" title="Verrouillé" />}
                                        <input 
                                            type="text" 
                                            disabled={isFieldLocked('noiseSchedule')} 
                                            value={panneau.noiseSchedule || ''} 
                                            onChange={e => setPanneau({...panneau, noiseSchedule: e.target.value})} 
                                            placeholder="Horaires bruyants (Ex: Lun-Ven 8h-17h)" 
                                            className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${
                                                isFieldLocked('noiseSchedule') 
                                                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                                    : 'border-slate-200 focus:border-emerald-500'
                                            }`} 
                                        />
                                    </div>
                                )}
                                
                                {uiPrefs.simp_opt_emergency !== false && (
                                    <div className="relative">
                                        {isFieldLocked('emergencyPhone') && <LockIcon size={12} className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-500" title="Verrouillé" />}
                                        <input 
                                            type="tel" 
                                            disabled={isFieldLocked('emergencyPhone')} 
                                            value={panneau.emergencyPhone || ''} 
                                            onChange={e => setPanneau({...panneau, emergencyPhone: e.target.value})} 
                                            placeholder="Téléphone d'urgence (24/7)" 
                                            className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${
                                                isFieldLocked('emergencyPhone') 
                                                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                                    : 'border-slate-200 focus:border-emerald-500'
                                            }`} 
                                        />
                                    </div>
                                )}
                                
                                {uiPrefs.simp_opt_link !== false && (
                                    <div className="relative col-span-full">
                                        {isFieldLocked('promoterLink') && <LockIcon size={12} className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-500" title="Verrouillé" />}
                                        <input 
                                            type="url" 
                                            disabled={isFieldLocked('promoterLink')} 
                                            value={panneau.promoterLink || ''} 
                                            onChange={e => setPanneau({...panneau, promoterLink: e.target.value})} 
                                            placeholder="Lien vers le site du promoteur (https://...)" 
                                            className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${
                                                isFieldLocked('promoterLink') 
                                                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                                    : 'border-slate-200 focus:border-emerald-500'
                                            }`} 
                                        />
                                    </div>
                                )}

                            </div>
                        </div>
                    )}

                    {uiPrefs.simp_opt_image !== false && (
                        <div className="space-y-2 pt-4 border-t border-slate-100 animate-in fade-in">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-2">Vue du projet (optionnel)</label>
                            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                                <label className={`bg-white border-2 border-slate-200 hover:border-blue-500 text-slate-700 px-4 py-3 rounded-xl font-bold transition shadow-sm flex items-center gap-2 text-sm shrink-0 ${
                                    isFieldLocked('imageId') 
                                        ? 'opacity-50 cursor-not-allowed pointer-events-none' 
                                        : 'cursor-pointer'
                                }`}>
                                    <UploadCloudIcon size={18}/> Parcourir
                                    <input type="file" accept="image/*" className="hidden" disabled={isFieldLocked('imageId')} onChange={e => handleFileUpload(e, 'image')} />
                                </label>
                                {(panneau.imageUrl || panneau.imageId) && (
                                    <div className="relative w-32 h-20 rounded-xl border border-slate-200 shadow-sm group bg-slate-50">
                                        <img src={panneau.imageUrl || (window.pano_CONFIG?.apiBaseUrl + 'file/download&type=image&id=' + panneau.imageId + '&preview=1')} alt="Aperçu" className="w-full h-full object-cover rounded-xl" />
                                        {!isFieldLocked('imageId') && (
                                            <Button 
                                                variant="danger" 
                                                shape="round" 
                                                icon={Trash2Icon}
                                                onClick={(e) => { 
                                                    e.preventDefault(); 
                                                    setPanneau({...panneau, imageUrl: '', imageId: ''}); 
                                                }}
                                                className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-all shadow-md p-1.5"
                                                title="Supprimer la vue"
                                            />
                                        )}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* 5.2 - L'autorisation (PDF et permis) */}
            {uiPrefs.simp_opt_hide_legal !== true && (
                <div className="space-y-4 pt-6 border-t border-slate-200 animate-in fade-in">
                    <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">2. L'autorisation</h4>
                    <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
                        <div className="space-y-1 relative">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                                N° de permis / déclaration <span className="text-red-500">*</span>
                                {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            <input 
                                type="text" 
                                disabled={isFieldLocked('permitNumber')} 
                                value={panneau.permitNumber || ''} 
                                onChange={e => setPanneau({...panneau, permitNumber: e.target.value})} 
                                placeholder="PC 000 000 00 00000" 
                                className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold uppercase ${
                                    isFieldLocked('permitNumber') 
                                        ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                        : 'border-slate-200 focus:border-emerald-500'
                                }`} 
                            />
                        </div>
                        
                        <div className="space-y-1 relative">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                                Date de délivrance <span className="text-red-500">*</span>
                                {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            <div className="relative">
                                <CalendarIcon size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                                <input 
                                    type="date" 
                                    disabled={isFieldLocked('permitNumber')} 
                                    value={panneau.permitDate || ''} 
                                    onChange={e => setPanneau({...panneau, permitDate: e.target.value})} 
                                    className={`w-full border-2 rounded-xl p-3 pl-10 outline-none transition font-bold ${
                                        isFieldLocked('permitNumber') 
                                            ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                            : 'border-slate-200 focus:border-emerald-500'
                                    }`} 
                                />
                            </div>
                        </div>

                        <div className="space-y-1 col-span-full relative">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                                Mairie où le dossier peut être consulté <span className="text-red-500">*</span>
                                {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            <input 
                                type="text" 
                                disabled={isFieldLocked('permitNumber')} 
                                value={panneau.mairie || ''} 
                                onChange={e => setPanneau({...panneau, mairie: e.target.value})} 
                                placeholder="Mairie de..." 
                                className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold ${
                                    isFieldLocked('permitNumber') 
                                        ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                        : 'border-slate-200 focus:border-emerald-500'
                                }`} 
                            />
                        </div>

                        <div className="space-y-2 pt-4 col-span-full border-t border-slate-100">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                                Arrêté législatif numérique (PDF)
                                {isFieldLocked('pdfId') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            <div className="flex items-center gap-4">
                                <label className={`border-2 px-4 py-3 rounded-xl font-bold transition shadow-sm flex items-center gap-2 text-sm ${
                                    isFieldLocked('pdfId') 
                                        ? 'bg-slate-50 border-slate-200 text-slate-400 cursor-not-allowed pointer-events-none opacity-60' 
                                        : 'bg-white border-slate-200 hover:border-emerald-500 text-slate-700 cursor-pointer'
                                }`}>
                                    <UploadCloudIcon size={18}/> Parcourir
                                    <input type="file" accept="application/pdf" className="hidden" disabled={isFieldLocked('pdfId')} onChange={e => handleFileUpload(e, 'pdf')} />
                                </label>
                                {panneau.pdfId && (
                                    <div className="flex items-center gap-3 text-emerald-600 bg-emerald-50 px-3 py-2 rounded-lg border border-emerald-100">
                                        <div className="flex items-center gap-2">
                                            <CheckCircleIcon size={16}/> <span className="text-sm font-bold">PDF uploadé</span>
                                        </div>
                                        {!isFieldLocked('pdfId') && (
                                            <Button 
                                                variant="danger" 
                                                shape="round"
                                                icon={Trash2Icon} 
                                                onClick={() => setPanneau({...panneau, pdfId: '', pdfNumPages: 1})}
                                                className="p-1.5 ml-1 bg-red-100/50 hover:bg-red-100 text-red-500 hover:text-red-700 border-none shadow-none"
                                                title="Supprimer le document"
                                            />
                                        )}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                    
                    <div className="pt-4 border-t border-slate-100">
                        <div className="flex justify-between items-center mb-3">
                            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                                Arrêtés modificatifs (optionnel)
                                {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            {!isFieldLocked('permitNumber') && (
                                <Button variant="secondary" icon={PlusIcon} onClick={addModificatif} className="px-3 py-1.5 text-[10px] uppercase tracking-wider">Ajouter</Button>
                            )}
                        </div>
                        <div className="space-y-3">
                            {(panneau.modificatifs || []).map((mod, index) => {
                                const uid = mod._uid || mod.id || index;
                                return (
                                    <div key={uid} className="flex flex-col sm:flex-row gap-3 items-start sm:items-center bg-slate-50 p-3 rounded-xl border border-slate-200 animate-in slide-in-from-top-2">
                                        <div className="flex-1 w-full space-y-2">
                                            <div className="flex gap-2 w-full">
                                                <input 
                                                    type="text" 
                                                    placeholder="Libellé (ex: Arrêté n°123)" 
                                                    disabled={isFieldLocked('permitNumber')} 
                                                    value={mod.label || mod.number || ''} 
                                                    onChange={e => updateModificatif(uid, 'label', e.target.value)} 
                                                    className={`flex-1 border border-slate-200 rounded-lg p-2 text-sm outline-none transition font-bold ${
                                                        isFieldLocked('permitNumber') ? 'bg-slate-100 text-slate-500 cursor-not-allowed' : 'focus:border-emerald-500'
                                                    }`} 
                                                />
                                                <input 
                                                    type="date" 
                                                    disabled={isFieldLocked('permitNumber')} 
                                                    value={mod.date || ''} 
                                                    onChange={e => updateModificatif(uid, 'date', e.target.value)} 
                                                    className={`w-36 border border-slate-200 rounded-lg p-2 text-sm outline-none transition font-bold ${
                                                        isFieldLocked('permitNumber') ? 'bg-slate-100 text-slate-500 cursor-not-allowed' : 'focus:border-emerald-500'
                                                    }`} 
                                                />
                                            </div>
                                            <div className="flex items-center gap-3">
                                                <label className={`border-2 px-3 py-1.5 rounded-lg font-bold transition shadow-sm flex items-center gap-2 text-xs w-full sm:w-auto ${
                                                    isFieldLocked('permitNumber') 
                                                        ? 'bg-slate-50 border-slate-200 text-slate-400 cursor-not-allowed pointer-events-none' 
                                                        : 'bg-white border-slate-200 hover:border-emerald-500 text-slate-700 cursor-pointer'
                                                }`}>
                                                    <UploadCloudIcon size={14}/> {mod.id && !mod.id.startsWith('mod_') ? 'Remplacer' : 'Parcourir'}
                                                    <input type="file" accept="application/pdf" className="hidden" disabled={isFieldLocked('permitNumber')} onChange={e => handleModificatifUpload(e, uid)} />
                                                </label>
                                                {mod.id && !mod.id.startsWith('mod_') && (
                                                    <div className="flex items-center gap-1.5 text-emerald-600 bg-emerald-50 px-2 py-1 rounded border border-emerald-100">
                                                        <CheckCircleIcon size={12}/> <span className="text-[10px] font-bold uppercase tracking-wider">PDF lié</span>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                        {!isFieldLocked('permitNumber') && (
                                            <Button variant="danger" shape="round" icon={Trash2Icon} onClick={() => removeModificatif(uid)} className="p-2 shadow-none shrink-0 self-end sm:self-auto mt-2 sm:mt-0" title="Supprimer" />
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            )}

            {/* 5.3 - Acteurs principaux */}
            <div className={`space-y-4 pt-6 ${uiPrefs.simp_opt_hide_legal !== true ? 'border-t border-slate-200' : ''}`}>
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">3. Acteurs principaux</h4>
                <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
                    
                    <div className="space-y-1 relative col-span-full sm:col-span-1">
                        <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1">
                            Bénéficiaire / maître d'ouvrage <span className="text-red-500">*</span>
                            {isFieldLocked('maitreOuvrage') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <input 
                            type="text" 
                            disabled={isFieldLocked('maitreOuvrage')} 
                            value={panneau.maitreOuvrage || ''} 
                            onChange={e => setPanneau({...panneau, maitreOuvrage: e.target.value})} 
                            placeholder="Nom ou Société du bénéficiaire" 
                            className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold ${
                                isFieldLocked('maitreOuvrage') 
                                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' 
                                    : 'border-slate-200 focus:border-emerald-500'
                            }`} 
                        />
                    </div>
                    
                    <div className="space-y-1 relative col-span-full sm:col-span-1">
                        <label className="text-xs font-bold text-slate-500 uppercase block">Logo du maître d'ouvrage</label>
                        <div className="flex items-center gap-4">
                            <label className={`bg-white border-2 border-slate-200 hover:border-emerald-500 text-slate-700 px-4 py-3 rounded-xl font-bold transition shadow-sm flex items-center gap-2 text-sm ${
                                isFieldLocked('maitreOuvrage') 
                                    ? 'opacity-50 cursor-not-allowed pointer-events-none' 
                                    : 'cursor-pointer'
                            }`}>
                                <UploadCloudIcon size={18}/> Parcourir
                                <input type="file" accept="image/*" className="hidden" disabled={isFieldLocked('maitreOuvrage')} onChange={e => handleFileUpload(e, 'logo')} />
                            </label>
                            {(panneau.maitreOuvrageLogoUrl || panneau.maitreOuvrageLogoId) && (
                                <div className="relative w-16 h-12 sm:w-20 sm:h-14 rounded-xl border border-slate-200 bg-slate-50 flex items-center justify-center p-1 sm:p-2 group shrink-0">
                                    <img src={panneau.maitreOuvrageLogoUrl || (window.pano_CONFIG?.apiBaseUrl + 'file/download&type=image&id=' + panneau.maitreOuvrageLogoId + '&preview=1')} alt="Logo Propriétaire" className="max-w-full max-h-full object-contain rounded-xl" />
                                    {!isFieldLocked('maitreOuvrage') && (
                                        <Button 
                                            variant="danger" 
                                            shape="round" 
                                            icon={Trash2Icon}
                                            onClick={(e) => { 
                                                e.preventDefault(); 
                                                setPanneau({...panneau, maitreOuvrageLogoUrl: '', maitreOuvrageLogoId: ''}); 
                                            }}
                                            className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-all shadow-md p-1.5"
                                            title="Supprimer le logo"
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                    </div>

                    <div className="col-span-full hidden sm:block"></div>

                    <div className="space-y-1 relative col-span-full sm:col-span-1">
                        <label className="text-xs font-bold text-slate-500 uppercase block">Architecte du projet</label>
                        <input type="text" value={panneau.architecte || ''} onChange={e => setPanneau({...panneau, architecte: e.target.value})} placeholder="Nom de l'architecte" className="w-full border-2 border-slate-200 rounded-xl p-3 focus:border-emerald-500 outline-none transition font-bold" />
                    </div>

                    <div className="space-y-1 relative col-span-full sm:col-span-1">
                        <label className="text-xs font-bold text-slate-500 uppercase block">Logo de l'architecte</label>
                        <div className="flex items-center gap-4">
                            <label className="bg-white border-2 border-slate-200 hover:border-emerald-500 text-slate-700 px-4 py-3 rounded-xl font-bold cursor-pointer transition shadow-sm flex items-center gap-2 text-sm">
                                <UploadCloudIcon size={18}/> Parcourir
                                <input type="file" accept="image/*" className="hidden" onChange={e => handleFileUpload(e, 'logo_architecte')} />
                            </label>
                            {(panneau.architecteLogoUrl || panneau.architecteLogoId) && (
                                <div className="relative w-16 h-12 sm:w-20 sm:h-14 rounded-xl border border-slate-200 bg-slate-50 flex items-center justify-center p-1 sm:p-2 group shrink-0">
                                    <img src={panneau.architecteLogoUrl || (window.pano_CONFIG?.apiBaseUrl + 'file/download&type=image&id=' + panneau.architecteLogoId + '&preview=1')} alt="Logo Architecte" className="max-w-full max-h-full object-contain rounded-xl" />
                                    <Button 
                                        variant="danger" 
                                        shape="round" 
                                        icon={Trash2Icon}
                                        onClick={(e) => { 
                                            e.preventDefault(); 
                                            setPanneau({...panneau, architecteLogoUrl: '', architecteLogoId: ''}); 
                                        }}
                                        className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-all shadow-md p-1.5"
                                        title="Supprimer le logo"
                                    />
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            {/* 5.4 - Dimensions */}
            <div className="space-y-4 pt-6 border-t border-slate-200">
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">4. Surfaces et dimensions</h4>
                <div className="grid grid-cols-[repeat(auto-fit,minmax(130px,1fr))] gap-4">
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block break-words leading-tight" title="Superficie du terrain">Sup. terrain</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.superficieTerrain || ''} onChange={e => setPanneau({...panneau, superficieTerrain: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m²</span>
                        </div>
                    </div>
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block break-words leading-tight" title="Surface de plancher">Sur. plancher</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.surfacePlancher || ''} onChange={e => setPanneau({...panneau, surfacePlancher: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m²</span>
                        </div>
                    </div>
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block break-words leading-tight" title="Hauteur du projet">Hauteur max</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.hauteur || ''} onChange={e => setPanneau({...panneau, hauteur: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m</span>
                        </div>
                    </div>
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block break-words leading-tight" title="Surface à démolir">Sur. démolir</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.surfaceDemolir || ''} onChange={e => setPanneau({...panneau, surfaceDemolir: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m²</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    );
};

/* EOF ========== [__react/socle/_socle_editeur_infos.jsx] */