/* Shared lib: hooks, small components, icons. All exported to window. */
const { useState, useEffect, useRef, useLayoutEffect, useMemo, useCallback } = React;
// ——— Reveal on scroll ———
function useInView(options = { threshold: 0.15, rootMargin: '-40px 0px' }) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.disconnect(); }
}, options);
obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return [ref, inView];
}
function Reveal({ children, delay = 0, className = '', as: Tag = 'div', ...rest }) {
const [ref, inView] = useInView();
const cls = `reveal ${inView ? 'in' : ''} ${delay ? `reveal-delay-${delay}` : ''} ${className}`;
return {children};
}
// ——— Scroll progress (0 to 1) scoped to a ref ———
function useScrollProgress(ref) {
const [p, setP] = useState(0);
useEffect(() => {
const handler = () => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const vh = window.innerHeight;
const total = r.height + vh;
const passed = vh - r.top;
const prog = Math.max(0, Math.min(1, passed / total));
setP(prog);
};
handler();
window.addEventListener('scroll', handler, { passive: true });
window.addEventListener('resize', handler);
return () => {
window.removeEventListener('scroll', handler);
window.removeEventListener('resize', handler);
};
}, [ref]);
return p;
}
// ——— Count up ———
function CountUp({ to, duration = 1600, prefix = '', suffix = '', decimals = 0, format = null }) {
const [ref, inView] = useInView();
const [val, setVal] = useState(0);
useEffect(() => {
if (!inView) return;
let raf, start;
const step = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(to * eased);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [inView, to, duration]);
const display = format ? format(val) : `${prefix}${val.toFixed(decimals)}${suffix}`;
return {display};
}
// ——— Magnetic button ———
function useMagnetic(_strength) {
return useRef(null);
}
function MagneticBtn({ children, className = '', onClick, variant = 'primary', href, ...rest }) {
const ref = useMagnetic(0.2);
const Tag = href ? 'a' : 'button';
return (
{children}
);
}
// ——— Fade+blur text entry ———
function SplitText({ text, className = '', delay = 0 }) {
const [ref, inView] = useInView();
return (
{text}
);
}
// ——— Blur-in reveal with direction support ———
// direction: 'up' | 'down' | 'left' | 'right' | 'none'
function BlurIn({ children, delay = 0, direction = 'up', distance = 14, blur = 12, duration = 1, className = '', style = {}, as: Tag = 'div' }) {
const [ref, inView] = useInView({ threshold: 0.08, rootMargin: '-20px 0px' });
const deltaMap = {
up: `translateY(${distance}px)`,
down: `translateY(-${distance}px)`,
left: `translateX(${distance}px)`,
right: `translateX(-${distance}px)`,
none: 'none',
};
const base = {
opacity: inView ? 1 : 0,
filter: inView ? 'blur(0px)' : `blur(${blur}px)`,
transform: inView ? 'none' : deltaMap[direction] || deltaMap.up,
transition: `opacity ${duration}s cubic-bezier(.2,.7,.2,1) ${delay}s, filter ${duration}s cubic-bezier(.2,.7,.2,1) ${delay}s, transform ${duration}s cubic-bezier(.2,.7,.2,1) ${delay}s`,
willChange: 'opacity, transform, filter',
};
return {children};
}
// ——— Icons (inline SVG) ———
const Icon = {
Arrow: ({ size = 14 }) => (
),
ArrowDown: ({ size = 14 }) => (
),
Check: ({ size = 14 }) => (
),
Close: ({ size = 14 }) => (
),
Menu: ({ size = 14 }) => (
),
Plus: ({ size = 14 }) => (
),
Minus: ({ size = 14 }) => (
),
Sun: ({ size = 14 }) => (
),
Moon: ({ size = 14 }) => (
),
Spark: ({ size = 14 }) => (
),
Bolt: ({ size = 14 }) => (
),
Play: ({ size = 14 }) => (
),
Pause: ({ size = 14 }) => (
),
Book: ({ size = 16 }) => (
),
Layers: ({ size = 16 }) => (
),
Chart: ({ size = 16 }) => (
),
Chat: ({ size = 16 }) => (
),
Grid: ({ size = 16 }) => (
),
Flow: ({ size = 16 }) => (
),
Trend: ({ size = 16 }) => (
),
Calendar: ({ size = 16 }) => (
),
Target: ({ size = 16 }) => (
),
Lock: ({ size = 14 }) => (
),
Users: ({ size = 16 }) => (
),
User: ({ size = 14 }) => (
),
};
// ——— Tickers / Notif data ———
// Notifs type "paiement reçu" inspirées des vraies notifs Stripe / PayPal / etc.
// Prix alignés sur les packs : 799 (Premium), 199 (Starter), 499 (Pro)
// + 450 = exemple de commission d'évolution encaissée
const NOTIF_SAMPLES = [
{ src: 'Stripe', amount: '799 €', time: 'il y a 1 min', color: '#635bff', label: 'Pack Premium', customer: 'Léa M.', country: '🇫🇷' },
{ src: 'Revolut', amount: '199 €', time: 'il y a 6 min', color: '#0a0a0b', label: 'Pack Starter', customer: 'Karim B.', country: '🇫🇷' },
{ src: 'PayPal', amount: '499 €', time: 'il y a 12 min', color: '#003087', label: 'Pack Pro', customer: 'Sofia D.', country: '🇧🇪' },
{ src: 'Wise', amount: '450 €', time: 'il y a 22 min', color: '#9fe870', label: 'Commission MRR', customer: 'Évolution #124', country: '🇨🇭' },
{ src: 'Stripe', amount: '499 €', time: 'il y a 34 min', color: '#635bff', label: 'Pack Pro', customer: 'Thomas R.', country: '🇫🇷' },
{ src: 'Revolut', amount: '799 €', time: 'il y a 48 min', color: '#0a0a0b', label: 'Pack Premium', customer: 'Emma L.', country: '🇨🇦' },
];
// ——— Landing Stats — Context & Provider ———
const _LSDefault = {
stats: { membres: 0, revenus: 0 },
packs: {
starter: { price: 199, originalPrice: 199, commission: 25, hours: 9, lessons: 48, promo: null },
pro: { price: 499, originalPrice: 499, commission: 50, hours: 14, lessons: 144, promo: null },
premium: { price: 799, originalPrice: 799, commission: 75, hours: 17, lessons: 250, promo: null },
},
academy: { modulesCount: 0, quizCount: 0, totalHours: 0, phases: [] },
footer: { pages: [] },
landing: { videoUrl: '', ctaStarter: '', ctaPro: '', ctaPremium: '' },
faq: [],
};
const LandingStatsCtx = React.createContext(_LSDefault);
function LandingStatsProvider({ children }) {
const [data, setData] = React.useState(_LSDefault);
React.useEffect(() => {
fetch('https://zrwpzetcfdpicjfdvikt.supabase.co/functions/v1/get-landing-stats')
.then(r => r.json())
.then(d => setData(prev => ({ ...prev, ...d })))
.catch(() => {});
}, []);
return React.createElement(LandingStatsCtx.Provider, { value: data }, children);
}
function useLandingStats() { return React.useContext(LandingStatsCtx); }
Object.assign(window, {
useState, useEffect, useRef, useLayoutEffect, useMemo, useCallback,
useInView, Reveal, useScrollProgress, CountUp, useMagnetic, MagneticBtn, SplitText, BlurIn,
Icon, NOTIF_SAMPLES, LandingStatsProvider, useLandingStats,
});