/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle Riverains (1/4) - Onglet Accueil (Le panneau)
 * =========================================================================
 */

window.pano_RiverainAccueilTab = ({
    panneau,
    themeColor,
    displayMoaLogoUrl,
    hideLegal,
    handleExternalLink,
    openModal
}) => {
    // RÉCUPÉRATION SÉCURISÉE DES COMPOSANTS ET ICÔNES
    const {
        BuildingIcon, ExternalLinkIcon, ShieldIcon, FileDigitIcon, ClockIcon, MapPinIcon, ArrowRightIcon
    } = window.pano_getIcons();
    
    const Button = window.pano_Button || (() => null);

    return (
        <div className="p-3 space-y-3 animate-in fade-in slide-in-from-bottom-2 duration-300">

            {/* 1. MAÎTRE D'OUVRAGE */}
            {(panneau.maitreOuvrage || displayMoaLogoUrl) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-center gap-3">
                    {displayMoaLogoUrl ? (
                        <img src={displayMoaLogoUrl} alt="Maître d'ouvrage" className="h-10 w-auto object-contain shrink-0" />
                    ) : (
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <BuildingIcon size={16} />
                        </div>
                    )}
                    <div className="min-w-0 flex-1">
                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Maître d'ouvrage</p>
                        {panneau.maitreOuvrage && <p className="text-xs font-black text-slate-800 truncate">{panneau.maitreOuvrage}</p>}
                    </div>
                </div>
            )}

            {/* 2. DESCRIPTION DES TRAVAUX */}
            {panneau.description && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100">
                    <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-1.5">Description des travaux</p>
                    <p className="text-xs text-slate-600 leading-relaxed whitespace-pre-wrap">{panneau.description}</p>
                </div>
            )}

            {/* 3. LIEN VERS LE PROMOTEUR (COMMERCIAL) */}
            {panneau.promoterLink && (
                <div 
                    role="button"
                    tabIndex={0}
                    onClick={(e) => {
                        const blocked = handleExternalLink(e, panneau.promoterLink);
                        if (!blocked) window.open(panneau.promoterLink.startsWith('http') ? panneau.promoterLink : `https://${panneau.promoterLink}`, '_blank', 'noopener,noreferrer');
                    }} 
                    className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-center justify-between hover:bg-slate-50 transition group w-full cursor-pointer"
                >
                    <div className="flex items-center gap-3 w-full">
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <ExternalLinkIcon size={16} />
                        </div>
                        <div className="flex-1">
                            <p className="text-sm font-bold text-slate-800">Acheter ou s'informer</p>
                        </div>
                        <ArrowRightIcon size={16} className="text-slate-300 group-hover:text-slate-600 group-hover:translate-x-1 transition-all shrink-0"/>
                    </div>
                </div>
            )}

            {/* 4. INFORMATIONS LÉGALES (ARRÊTÉ D'URBANISME) */}
            {!hideLegal && (panneau.pdfId || panneau.permitNumber || panneau.noiseSchedule) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border-2" style={{ borderColor: `${themeColor}20` }}>
                    <div className="flex items-start gap-2">
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <ShieldIcon size={16} />
                        </div>
                        <div className="flex-1">
                            <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Autorisation d'urbanisme</p>
                            <p className="text-xs font-black text-slate-800 uppercase">{panneau.permitNumber || 'Arrêté officiel'}</p>
                        </div>
                    </div>
                    
                    {panneau.pdfId && (
                        <Button 
                            onClick={(e) => { 
                                const blocked = handleExternalLink(e, null);
                                if (blocked) return;
                                if (panneau.modificatifs?.length > 0) openModal('arretes'); 
                                else openModal('pdf', panneau.pdfId); 
                            }} 
                            className="mt-3 w-full py-2.5 justify-center shadow-md border-none text-white font-bold text-xs" 
                            style={{ backgroundColor: themeColor }}
                            icon={FileDigitIcon}
                        >
                            Consulter {panneau.modificatifs?.length > 0 ? "les arrêtés" : "l'arrêté"}
                            {panneau.modificatifs?.length > 0 && <span className="bg-white/20 px-1.5 py-0.5 rounded text-[10px] ml-1 font-black">{panneau.modificatifs.length + 1}</span>}
                        </Button>
                    )}

                    {panneau.noiseSchedule && (
                        <div className="mt-3 pt-3">
                            <p className="text-[10px] text-slate-500 font-medium flex items-start gap-1.5">
                                <ClockIcon size={12} className="shrink-0 mt-0.5" style={{ color: themeColor }} /> 
                                <span>Horaires de nuisances autorisées :<br/> <strong className="text-slate-800 ml-1">{panneau.noiseSchedule}</strong></span>
                            </p>
                        </div>
                    )}
                </div>
            )}

            {/* 5. LOCALISATION */}
            {panneau.location && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-start gap-2">
                    <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                        <MapPinIcon size={16} />
                    </div>
                    <div>
                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Localisation</p>
                        <p className="text-xs font-bold text-slate-700 leading-snug">{panneau.location}</p>
                    </div>
                </div>
            )}
        </div>
    );
};

/* EOF ========== [_react/_riverains_accueil.jsx] */