/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle UI (2/4) - Identité visuelle, Icônes et QR Code
 * =========================================================================
 */

// =========================================================================
// 1. LOGO SVG ET TEXT LOGO
// =========================================================================

window.LogoSVG = ({ size = 32, className = '' }) => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width={size} height={size} className={className}>
        <rect width="100" height="100" rx="20" fill="#1e293b"/>
        <rect x="12" y="12" width="30" height="30" rx="8" stroke="#ffffff" strokeWidth="6" fill="none"/>
        <rect x="21" y="21" width="12" height="12" rx="3" fill="#ffffff"/>
        <rect x="12" y="58" width="30" height="30" rx="8" stroke="#ffffff" strokeWidth="6" fill="none"/>
        <rect x="21" y="67" width="12" height="12" rx="3" fill="#ffffff"/>
        <rect x="58" y="58" width="30" height="30" rx="8" stroke="#ffffff" strokeWidth="6" fill="none"/>
        <rect x="67" y="67" width="12" height="12" rx="3" fill="#ffffff"/>
        <path d="M 88 12 C 58 12 58 42 58 42 C 88 42 88 12 88 12 Z" fill="#a7f3d0" stroke="none"/>
        <path d="M 88 12 C 58 12 58 42 58 42 C 88 42 88 12 88 12 Z" fill="none" stroke="#059669" strokeWidth="6" strokeLinejoin="round" strokeLinecap="round"/>
        <line x1="48" y1="52" x2="60" y2="40" stroke="#059669" strokeWidth="6" strokeLinecap="round"/>
        <path d="M 60 40 L 85 15 M 66 34 L 66 23 M 74 26 L 83 26" stroke="#059669" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
);

window.TextLogo = ({ className = "", colorEco = "text-slate-800" }) => (
    <span className={`whitespace-nowrap font-black tracking-tighter ${className}`}>
        <span className={colorEco}>eco</span><span className="text-emerald-600">-panneau</span><span className="text-slate-400 font-bold">.fr</span>
    </span>
);

window.SiteLogo = ({ size = 32, className = "" }) => {
    const isRiverainOrScan = typeof window !== 'undefined' && (new URLSearchParams(window.location.search).has('scan') || new URLSearchParams(window.location.search).has('thread'));
    const Wrapper = isRiverainOrScan ? 'div' : 'a';
    const props = isRiverainOrScan ? {} : { href: 'https://eco-panneau.fr', title: "Retour à l'accueil" };
    
    const ecoColor = className.includes('text-white') ? 'text-white' : 'text-slate-800';
    
    return (
        <Wrapper {...props} className={`flex items-center gap-2 ${!isRiverainOrScan ? 'hover:opacity-80 transition' : ''} ${className}`}>
            <window.LogoSVG size={size} className="shrink-0" />
            <window.TextLogo colorEco={ecoColor} />
        </Wrapper>
    );
};

// =========================================================================
// 2. GÉNÉRATEUR D'ICÔNES DYNAMIQUES ET LOADER
// =========================================================================

window.LoaderIcon = ({ size = 24, className = '' }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
        <line x1="12" y1="2" x2="12" y2="6"></line>
        <line x1="12" y1="18" x2="12" y2="22"></line>
        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
        <line x1="2" y1="12" x2="6" y2="12"></line>
        <line x1="18" y1="12" x2="22" y2="12"></line>
        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
        <line x1="16.24" y1="4.93" x2="19.07" y2="7.76"></line>
    </svg>
);

const createIconFromString = (htmlString) => ({ size = 24, className = '', style, onClick, ...props }) => {
    const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${htmlString}</svg>`;
    return <span className={`inline-flex shrink-0 items-center justify-center leading-none ${className}`} style={{ width: size, height: size, ...style }} onClick={onClick} {...props} dangerouslySetInnerHTML={{ __html: svgContent }} />;
};

if (window.svgPaths) {
    for (const [name, pathStr] of Object.entries(window.svgPaths)) {
        window[`${name}Icon`] = createIconFromString(pathStr);
    }
}

// =========================================================================
// 3. GÉNÉRATEUR DE QR CODE
// =========================================================================

window.NativeQRCode = ({ value, size = 128, padding = 4 }) => {
    if (!window.QRCode) return null;
    const svgStr = new window.QRCode({ content: value, padding, width: size, height: size, join: true }).svg();
    return <div dangerouslySetInnerHTML={{ __html: svgStr }} style={{ display: 'inline-block' }} />;
};

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