// shared.jsx — composants partagés à toutes les pages const { useState, useEffect, useRef } = React; function Logo({ size = 30 }) { return ( 2C 2C ITECH ); } function UrgenceBar({ level = "high" }) { const [time, setTime] = useState(getCountdown()); useEffect(() => { const t = setInterval(() => setTime(getCountdown()), 1000); return () => clearInterval(t); }, []); if (level === "off") return null; const messageByLevel = { high: "Facturation électronique obligatoire — entrée en vigueur", medium: "Échéance facturation électronique 2026", low: "Préparez votre passage à la facturation électronique", }; return (
{messageByLevel[level]} {level !== "low" && ( — diagnostic gratuit avant la fin du mois )}
{time.d}j {time.h}h {time.m}m {level === "high" && {time.s}s}
); } function getCountdown() { const target = new Date("2026-09-01T00:00:00").getTime(); const now = Date.now(); const diff = Math.max(0, target - now); const d = Math.floor(diff / (1000 * 60 * 60 * 24)); const h = Math.floor((diff / (1000 * 60 * 60)) % 24); const m = Math.floor((diff / (1000 * 60)) % 60); const s = Math.floor((diff / 1000) % 60); return { d: String(d).padStart(3, "0"), h: String(h).padStart(2, "0"), m: String(m).padStart(2, "0"), s: String(s).padStart(2, "0"), }; } function Header({ active = "home" }) { return (
05 00 00 00 00 Prendre RDV →
); } function Footer() { return ( ); } function ClientLogos() { const logos = [ { name: "Boulangerie Lacaze", style: "serif" }, { name: "GARAGE DUPONT", style: "stencil" }, { name: "Cabinet Vidal & Associés", style: "thin" }, { name: "MAÇONNERIE 46", style: "bold" }, { name: "Domaine de Cère", style: "italic" }, { name: "AUTO-ECOLE PUYBRUN", style: "condensed" }, ]; return (
{logos.map((l, i) => (
{l.name}
))}
); } function ChatBubble() { const [open, setOpen] = useState(false); const [autoOpened, setAutoOpened] = useState(false); const [messages, setMessages] = useState([ { role: "ai", text: "Bonjour 👋 Je suis l'assistant 2C ITECH. Quel est votre besoin ?" }, { role: "ai", text: "Vous pouvez me parler librement, ou choisir une option ci-dessous.", chips: ["Facturation 2026", "Mon PC est lent", "Automatiser ma facturation", "Parler à un humain"] }, ]); const [input, setInput] = useState(""); const [typing, setTyping] = useState(false); const bodyRef = useRef(null); useEffect(() => { const onScroll = () => { if (autoOpened) return; if (window.scrollY > 600) { setOpen(true); setAutoOpened(true); } }; window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, [autoOpened]); useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [messages, typing]); const send = (text) => { if (!text.trim()) return; setMessages(m => [...m, { role: "user", text }]); setInput(""); setTyping(true); setTimeout(() => { const reply = scriptedReply(text); setTyping(false); setMessages(m => [...m, reply]); }, 900); }; return (
{!open && ( )} {open && (
2C
Assistant 2C ITECH
Réponse en moins d'1 min
{messages.map((m, i) => (
{m.text}
{m.chips && (
{m.chips.map(c => )}
)} {m.cta && ( {m.cta.label} → )}
))} {typing && (
)}
{ e.preventDefault(); send(input); }}> setInput(e.target.value)} placeholder="Posez votre question…" />
)}
); } function scriptedReply(input) { const lower = input.toLowerCase(); if (/factur|conformit|2026/.test(lower)) { return { role: "ai", text: "La facturation électronique devient obligatoire en 2026. Je peux faire un diagnostic gratuit en 30 min pour évaluer votre logiciel et votre cycle de facturation.", cta: { label: "Réserver un diagnostic", href: "/rendez-vous.html?besoin=facturation" } }; } if (/lent|bug|panne|virus|écran|imprimante|wifi|internet/.test(lower)) { return { role: "ai", text: "C'est probablement réparable rapidement. Pour un dépannage simple, je peux intervenir sous 24h (60€/h, devis avant intervention). Voulez-vous décrire le problème ?", chips: ["Décrire mon problème", "Demander un dépannage"] }; } if (/automat|ia|gain|temps|relance|devis/.test(lower)) { return { role: "ai", text: "L'automatisation peut faire gagner 5h+ par semaine sur les tâches répétitives. On en parle ?", cta: { label: "Voir le Pack Automatisation", href: "/services.html#ia" } }; } if (/humain|appeler|téléphone|parler/.test(lower)) { return { role: "ai", text: "Bien sûr. Vous pouvez m'appeler directement au 05 00 00 00 00, ou je vous rappelle dans la journée si vous laissez votre numéro.", chips: ["Me faire rappeler"] }; } return { role: "ai", text: "Je note votre demande. Le plus simple est de réserver 15 min avec moi — c'est gratuit et sans engagement.", cta: { label: "Réserver 15 min", href: "/rendez-vous.html" } }; } function PhoneIcon() { return ; } function WhatsAppIcon() { return ; } function ChatIcon() { return ; } function SendIcon() { return ; } Object.assign(window, { Logo, Header, Footer, UrgenceBar, ChatBubble, ClientLogos, PhoneIcon, WhatsAppIcon, ChatIcon, SendIcon });