/* global React */ const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React; /* ============ LANGUAGE SWITCHER ============ */ // Multilingue — charge les fichiers JSON i18n et traduit la page. const FLAG_SVG = { fr: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'213.3',height:'480',fill:'#002654'}),React.createElement('rect',{x:'213.3',width:'213.3',height:'480',fill:'#fff'}),React.createElement('rect',{x:'426.6',width:'213.4',height:'480',fill:'#CE1126'})), en: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'640',height:'480',fill:'#012169'}),React.createElement('path',{d:'M75 0l244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z',fill:'#fff'}),React.createElement('path',{d:'M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z',fill:'#C8102E'}),React.createElement('path',{d:'M241 0v480h160V0H241zM0 160v160h640V160H0z',fill:'#fff'}),React.createElement('path',{d:'M0 193v96h640v-96H0zM273 0v480h96V0h-96z',fill:'#C8102E'})), de: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'640',height:'160',fill:'#000'}),React.createElement('rect',{y:'160',width:'640',height:'160',fill:'#D00'}),React.createElement('rect',{y:'320',width:'640',height:'160',fill:'#FFCE00'})), es: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'640',height:'480',fill:'#AA151B'}),React.createElement('rect',{y:'120',width:'640',height:'240',fill:'#F1BF00'})), it: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'213.3',height:'480',fill:'#009246'}),React.createElement('rect',{x:'213.3',width:'213.3',height:'480',fill:'#fff'}),React.createElement('rect',{x:'426.6',width:'213.4',height:'480',fill:'#CE2B37'})), pt: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'640',height:'480',fill:'#006600'}),React.createElement('rect',{x:'256',width:'384',height:'480',fill:'#FF0000'}),React.createElement('circle',{cx:'256',cy:'240',r:'64',fill:'#FFCC00'})), ru: React.createElement('svg',{xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 640 480',width:'20',height:'15',style:{borderRadius:2,display:'block'}},React.createElement('rect',{width:'640',height:'160',fill:'#fff'}),React.createElement('rect',{y:'160',width:'640',height:'160',fill:'#0039A6'}),React.createElement('rect',{y:'320',width:'640',height:'160',fill:'#D52B1E'})), }; const LANGUAGES = [ { code: 'fr', label: 'Français' }, { code: 'en', label: 'English' }, { code: 'de', label: 'Deutsch' }, { code: 'es', label: 'Español' }, { code: 'it', label: 'Italiano' }, { code: 'pt', label: 'Português' }, { code: 'ru', label: 'Русский' }, ]; function getLang() { try { return localStorage.getItem('yo-lang') || 'fr'; } catch (e) { return 'fr'; } } function setLang(code) { try { localStorage.setItem('yo-lang', code); } catch(e) {} document.documentElement.setAttribute('lang', code); window.dispatchEvent(new CustomEvent('yo-lang-change', { detail: code })); } function LangSwitcher({ variant = 'header' }) { const [lang, setLangState] = useStateS(getLang()); const [open, setOpen] = useStateS(false); const ref = useRefS(null); useEffectS(() => { document.documentElement.setAttribute('lang', lang); const onClick = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('click', onClick); return () => document.removeEventListener('click', onClick); }, [lang]); const current = LANGUAGES.find(l => l.code === lang) || LANGUAGES[0]; const choose = code => { setLang(code); setLangState(code); setOpen(false); }; return (
{open && ( )}
); } function Header({ currentPage = 'home' }) { const t = useI18n(); const [scrolled, setScrolled] = useStateS(false); const [menuOpen, setMenuOpen] = useStateS(false); const [dropOpen, setDropOpen] = useStateS(false); const dropRef = useRefS(null); useEffectS(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); onScroll(); const onClick = e => { if (dropRef.current && !dropRef.current.contains(e.target)) setDropOpen(false); }; document.addEventListener('click', onClick); return () => { window.removeEventListener('scroll', onScroll); document.removeEventListener('click', onClick); }; }, []); const isServices = ['sites', 'surmesure', 'heberg'].includes(currentPage); const servicesItems = [ { href: 'sites.html', id: 'sites', label: t('common.nav.services_sites_label', 'Sites web'), desc: t('common.nav.services_sites_desc', 'Vitrine, e-commerce, WordPress') }, { href: 'surmesure.html', id: 'surmesure', label: t('common.nav.services_surmesure_label', 'Sur-mesure & IA'), desc: t('common.nav.services_surmesure_desc', 'Apps, CRM, ERP, chatbots, automatisation') }, { href: 'hebergement.html', id: 'heberg', label: t('common.nav.services_heberg_label', 'Hébergement'), desc: t('common.nav.services_heberg_desc', 'Serveurs, domaines, maintenance') }, ]; const links = [ { href: 'index.html', id: 'home', label: t('common.nav.home', 'Accueil') }, { href: 'realisations.html', id: 'work', label: t('common.nav.realisations', 'Réalisations') }, { href: 'apropos.html', id: 'about', label: t('common.nav.about', 'À propos') }, { href: 'contact.html', id: 'contact', label: t('common.nav.contact', 'Contact') }, ]; return ( <>
YouOnline
{t('common.nav.client_area', 'Espace client')} {t('common.nav.cta', 'Devis gratuit')}
setMenuOpen(false)}>{t('common.nav.home', 'Accueil')} {t('common.nav.services', 'Services')} {servicesItems.map(s => setMenuOpen(false)}>{s.label})}   {links.slice(1).map(l => setMenuOpen(false)}>{l.label})}
); } function Footer() { const t = useI18n(); return ( ); } /* ============ CURSOR ============ */ function CustomCursor() { useEffectS(() => { if (matchMedia('(pointer: coarse)').matches) return; const dot = document.createElement('div'); dot.className = 'cursor'; document.body.appendChild(dot); const ring = document.createElement('div'); ring.className = 'cursor-ring'; document.body.appendChild(ring); let mx = 0, my = 0, rx = 0, ry = 0; const onMove = e => { mx = e.clientX; my = e.clientY; dot.style.transform = `translate(${mx}px, ${my}px) translate(-50%,-50%)`; const guide = document.getElementById('reading-guide'); if (guide && document.documentElement.getAttribute('data-a11y-guide') === 'true') { guide.style.top = (my - 40) + 'px'; } }; const onOver = e => { if (e.target.closest('a, button, .service-card, .work-card, .testi-card, .post, .plan')) ring.classList.add('hover'); }; const onOut = e => { if (e.target.closest('a, button, .service-card, .work-card, .testi-card, .post, .plan')) ring.classList.remove('hover'); }; const loop = () => { rx += (mx - rx) * 0.15; ry += (my - ry) * 0.15; ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%,-50%)`; requestAnimationFrame(loop); }; window.addEventListener('mousemove', onMove); document.addEventListener('mouseover', onOver); document.addEventListener('mouseout', onOut); loop(); return () => { dot.remove(); ring.remove(); window.removeEventListener('mousemove', onMove); document.removeEventListener('mouseover', onOver); document.removeEventListener('mouseout', onOut); }; }, []); return null; } /* ============ REVEAL ============ */ function useReveal() { useEffectS(() => { const els = document.querySelectorAll('.reveal:not(.in)'); const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1 }); els.forEach(e => io.observe(e)); return () => io.disconnect(); }); return null; } /* ============ CHATBOT IA ============ */ function ChatBot() { const t = useI18n(); const [open, setOpen] = useStateS(false); const [messages, setMessages] = useStateS([ { role: 'assistant', text: t('common.chatbot.initial_message', "Bonjour ! Je suis l'assistant IA de YouOnline. Comment puis-je vous aider aujourd'hui ? Création de site, hébergement, maintenance, nom de domaine... je suis là pour vous conseiller !") } ]); const [input, setInput] = useStateS(''); const [typing, setTyping] = useStateS(false); const [notif, setNotif] = useStateS(false); const [notifDismissed, setNotifDismissed] = useStateS(false); const logsRef = useRefS(null); // Update welcome message when language changes useEffectS(() => { const welcomeText = t('common.chatbot.initial_message', "Bonjour ! Je suis l'assistant IA de YouOnline. Comment puis-je vous aider aujourd'hui ?"); setMessages(prev => { if (prev.length >= 1 && prev[0].role === 'assistant') { return [{ role: 'assistant', text: welcomeText }, ...prev.slice(1)]; } return prev; }); }, [t('common.chatbot.initial_message')]); // Auto-show notification after 8s useEffectS(() => { const timer = setTimeout(() => { if (!open && !notifDismissed) setNotif(true); }, 8000); return () => clearTimeout(timer); }, []); // Auto-scroll useEffectS(() => { if (logsRef.current) logsRef.current.scrollTop = logsRef.current.scrollHeight; }, [messages, typing]); const dismiss = () => { setNotif(false); setNotifDismissed(true); }; const openChat = () => { dismiss(); setOpen(true); }; const closeChat = () => setOpen(false); const formatMsg = (text) => text .replace(/\*\*(.*?)\*\*/g, '$1') .replace(/\*(.*?)\*/g, '$1') .replace(/`(.*?)`/g, '$1') .replace(/\n/g, '
') .replace(/(https?:\/\/[^\s<]+)/g, '$1'); // Detect current language for API const getLang = () => { try { return localStorage.getItem('yo-lang') || 'fr'; } catch(e) { return 'fr'; } }; const send = async (e) => { e.preventDefault(); const q = input.trim(); if (!q || typing) return; setInput(''); const newMsgs = [...messages, { role: 'user', text: q }]; setMessages(newMsgs); setTyping(true); try { const history = newMsgs.slice(0, -1).map(m => ({ role: m.role === 'assistant' ? 'assistant' : 'user', content: m.text })); const res = await fetch('/chatbot-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'send_message', message: q, history, lang: getLang() }) }); const json = await res.json(); if (json.success) { setMessages(prev => [...prev, { role: 'assistant', text: json.message }]); } else { setMessages(prev => [...prev, { role: 'assistant', text: t('common.chatbot.error_generic', "Désolé, une erreur est survenue. N'hésitez pas à nous contacter au 06 24 99 71 71.") }]); } } catch { setMessages(prev => [...prev, { role: 'assistant', text: t('common.chatbot.error_network', "Erreur de connexion. Vous pouvez nous joindre au 06 24 99 71 71 ou par email à contact@youonline.fr.") }]); } setTyping(false); }; const avatarStyle = { width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }; const bubbleBase = { padding: '10px 14px', maxWidth: '80%', fontSize: 14, lineHeight: 1.5, borderRadius: 14 }; return ( <> {/* Notification */} {notif && (

{t('common.chatbot.notif_greeting', 'Bonjour !')} {t('common.chatbot.notif_body', "Besoin d'aide pour votre projet web ?")}

)} {/* FAB */} {!open && ( )} {/* Chat Box */} {open && (
{/* Header */}
{t('common.chatbot.header_title', 'Assistant YouOnline')}
{/* Messages */}
{messages.map((m, i) => (
))} {typing && (
...
)}
{/* Input */}
setInput(e.target.value)} placeholder={t('common.chatbot.input_placeholder', 'Posez votre question...')} style={{ flex: 1, padding: '14px 16px', border: 'none', outline: 'none', fontSize: 14, fontFamily: 'inherit', borderRadius: '0 0 0 16px' }} />
)} ); } Object.assign(window, { Header, Footer, CustomCursor, useReveal, LangSwitcher, ChatBot });