// Header - sticky transparent → charbon au scroll, 5 pages produit
// + 3 dropdowns (Entreprise / Aide / Légal), burger sous 1024px.
// Conserve : .ktk-header.is-scrolled, .ktk-nav-link, .wordmark, classes
// utilisées par aide-doc.css pour le contraste auto sur fond crème.
const Header = ({ active, basePath = '' }) => {
const bp = basePath || '';
const ref = React.useRef(null);
// --- état ---
const [openMenu, setOpenMenu] = React.useState(null); // 'entreprise' | 'aide' | 'legal' | null
const [openedByKey, setOpenedByKey] = React.useState(false);
const [mobileOpen, setMobileOpen] = React.useState(false);
const [mobileSection, setMobileSection] = React.useState(null);
const closeTimer = React.useRef(null);
const itemRefs = React.useRef({}); // par menu, liste de refs
const burgerRef = React.useRef(null);
const sheetRef = React.useRef(null);
const prevMobileOpen = React.useRef(false);
// --- scroll trigger (inchangé) ---
React.useEffect(() => {
const h = ref.current;
if (!h) return;
const onScroll = () => {
if (window.scrollY > 50) h.classList.add('is-scrolled');
else h.classList.remove('is-scrolled');
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
// --- Escape ferme tout ---
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'Escape') {
setOpenMenu(null);
setOpenedByKey(false);
setMobileOpen(false);
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
// --- verrou scroll quand burger ouvert ---
React.useEffect(() => {
document.body.style.overflow = mobileOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [mobileOpen]);
// --- gestion du focus de la feuille mobile (entrée, piège, retour au burger) ---
React.useEffect(() => {
const sheet = sheetRef.current;
if (mobileOpen) {
const items = sheet ? sheet.querySelectorAll('a[href], button') : [];
if (items[0]) items[0].focus();
const onKey = (e) => {
if (e.key !== 'Tab' || !items.length) return;
const first = items[0], last = items[items.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
};
sheet && sheet.addEventListener('keydown', onKey);
prevMobileOpen.current = true;
return () => sheet && sheet.removeEventListener('keydown', onKey);
} else if (prevMobileOpen.current) {
prevMobileOpen.current = false;
if (burgerRef.current) burgerRef.current.focus();
}
}, [mobileOpen]);
const openWith = (k) => {
clearTimeout(closeTimer.current);
setOpenMenu(k);
};
const closeSoon = () => {
clearTimeout(closeTimer.current);
closeTimer.current = setTimeout(() => {
setOpenMenu(null);
setOpenedByKey(false);
}, 150);
};
// --- focus 1er item quand ouvert au clavier ---
React.useEffect(() => {
if (openMenu && openedByKey) {
const list = itemRefs.current[openMenu] || [];
if (list[0]) list[0].focus();
}
}, [openMenu, openedByKey]);
// --- nav clavier ↑/↓ dans le menu ouvert ---
const onItemKey = (e, menuKey, idx) => {
const list = itemRefs.current[menuKey] || [];
if (e.key === 'ArrowDown') {
e.preventDefault();
const next = list[(idx + 1) % list.length];
if (next) next.focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
const prev = list[(idx - 1 + list.length) % list.length];
if (prev) prev.focus();
} else if (e.key === 'Tab') {
setOpenMenu(null);
setOpenedByKey(false);
}
};
// --- sélecteur de langue (FR ↔ EN) ---
// LOCALE vaut 'fr' ici ; la copie traduite /proto/en/src/Header.jsx met 'en'.
// Le cookie NEXT_LOCALE est lu par src/middleware.ts pour mémoriser le choix
// explicite (sinon détection via Accept-Language).
const LOCALE = 'fr';
const switchLocale = (target) => {
if (target === LOCALE) return;
document.cookie =
'NEXT_LOCALE=' + target + ';path=/;max-age=31536000;samesite=lax';
const p = window.location.pathname;
const frPath = p === '/en' ? '/' : (p.startsWith('/en/') ? p.slice(3) : p);
window.location.assign(
target === 'en' ? (frPath === '/' ? '/en' : '/en' + frPath) : frPath
);
};
const LangSwitch = ({ compact }) => (
{['fr', 'en'].map(l => (
switchLocale(l)}>
{l.toUpperCase()}
))}
);
// --- liens (clean Next.js URLs; bp prefix kept for potential standalone use) ---
const productLinks = [
{ href: '/larene', label: "L'Arène", key: 'arene' },
{ href: '/communaute', label: 'Communauté', key: 'communaute' },
{ href: '/portefeuille', label: 'Portefeuille', key: 'portefeuille' },
{ href: '/securite', label: 'Sécurité', key: 'securite' },
{ href: '/mode-prediction', label: 'Mode Prédiction', key: 'mode-prediction' },
];
const groups = [
{ key: 'entreprise', label: 'Entreprise', align: 'left', items: [
{ l: 'À propos', h: '/a-propos' },
{ l: 'Carrière', h: '/carriere' },
{ l: 'Blog', h: '/blog' },
{ l: 'Presse', h: '/presse' },
{ l: 'Bêta privée', h: '/beta-privee' },
]},
{ key: 'aide', label: 'Aide', align: 'left', items: [
{ l: 'FAQ', h: '/faq' },
{ l: "Centre d'aide", h: '/centre-aide' },
{ l: 'Nous contacter', h: '/contact' },
{ l: 'Statut système', h: '/statut' },
]},
{ key: 'legal', label: 'Légal', align: 'right', items: [
{ l: 'CGU', h: '/legal/cgu' },
{ l: 'Confidentialité', h: '/legal/confidentialite' },
{ l: 'Cookies', h: '/legal/cookies' },
{ l: 'Mentions légales', h: '/legal/mentions' },
{ l: 'Jeu responsable', h: '/legal/jeu-responsable' },
]},
];
return (
<>
K tkarena
{productLinks.map(l => (
{l.label}
))}
{groups.map(g => (
openWith(g.key)}
onMouseLeave={closeSoon}>
{
e.preventDefault();
if (openMenu === g.key) { setOpenMenu(null); setOpenedByKey(false); }
else { setOpenMenu(g.key); setOpenedByKey(true); }
}}
onKeyDown={(e) => {
if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setOpenMenu(g.key);
setOpenedByKey(true);
}
}}
>
{g.label}
▾
{/* Sheet mobile - rendu HORS du