const { useState, useEffect } = React;
const { Icon } = window;
const SB_URL = 'https://zrwpzetcfdpicjfdvikt.supabase.co';
const SB_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inpyd3B6ZXRjZmRwaWNqZmR2aWt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ5NDAwNTUsImV4cCI6MjA5MDUxNjA1NX0.huMkumw8BbEyxbnYnc9ijuMzRhK9jZ1jYe0bHV_jyWE';
function Nav({ theme, setTheme }) {
const [scrolled, setScrolled] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [avatarUrl, setAvatarUrl] = useState(null);
useEffect(() => {
const h = () => setScrolled(window.scrollY > 20);
const checkMobile = () => setIsMobile(window.innerWidth < 768);
h();
checkMobile();
window.addEventListener('scroll', h, { passive: true });
window.addEventListener('resize', checkMobile, { passive: true });
return () => {
window.removeEventListener('scroll', h);
window.removeEventListener('resize', checkMobile);
};
}, []);
useEffect(() => {
try {
const raw = localStorage.getItem('sb-zrwpzetcfdpicjfdvikt-auth-token');
if (!raw) return;
const session = JSON.parse(raw);
const accessToken = session?.access_token;
if (!accessToken) return;
const payload = JSON.parse(atob(accessToken.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
const userId = payload?.sub;
if (!userId) return;
fetch(`${SB_URL}/rest/v1/profiles?select=avatar_url&id=eq.${userId}`, {
headers: { 'apikey': SB_ANON, 'Authorization': `Bearer ${accessToken}` },
}).then(r => r.json()).then(data => {
if (data?.[0]?.avatar_url) setAvatarUrl(data[0].avatar_url);
}).catch(() => {});
} catch {}
}, []);
// Tailles qui se réduisent légèrement au scroll pour un effet "compacte"
const padX = scrolled ? 14 : 28;
const padY = scrolled ? 8 : 16;
const gap = scrolled ? 28 : 44;
const fontSize = scrolled ? 13 : 15;
const toggleSize = scrolled ? 28 : 38;
// Navigation mobile
if (isMobile) {
const LINKS = [
{ href: '#platform', label: 'Plateforme' },
{ href: '#fonctionnalites', label: 'Fonctionnalités' },
{ href: '#parcours', label: 'Formation' },
{ href: '#pricing', label: 'Tarifs' },
{ href: '#faq', label: 'FAQ' },
];
return (
<>
{/* Barre mobile — shrink au scroll comme desktop */}
{/* Dropdown menu */}
{mobileMenuOpen && (
)}
);
}
// Navigation desktop
return (
);
}
function LogoMark({ size = 22 }) {
return (
);
}
Object.assign(window, { Nav, LogoMark });