// Shared components — Nav, Footer, Logo, etc.
// Exported to window for use across babel scripts.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Tiny SVG icons (no external deps)
const Icon = ({ name, size = 16, stroke = 1.5 }) => {
const props = {
width: size, height: size, viewBox: '0 0 24 24',
fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
strokeLinecap: 'round', strokeLinejoin: 'round',
};
switch (name) {
case 'arrow-right': return ;
case 'arrow-up-right': return ;
case 'check': return ;
case 'spark': return ;
case 'sun': return ;
case 'tooth': return ;
case 'phone': return ;
case 'share': return ;
case 'chart': return ;
case 'shield': return ;
case 'palette': return ;
case 'sparkle': return ;
case 'play': return ;
case 'send': return ;
case 'cursor': return ;
case 'plus': return ;
case 'minus': return ;
case 'clock': return ;
case 'sliders': return ;
case 'whatsapp': return ;
case 'mail': return ;
case 'sms': return ;
case 'eye': return ;
case 'mouse': return ;
case 'lock': return ;
case 'globe': return ;
case 'menu': return ;
case 'x': return ;
case 'moon': return ;
default: return null;
}
};
const Logo = ({ size = 'md' }) => {
const big = size === 'lg';
return (
日
Hinata
);
};
const Nav = ({ dark, onToggleDark }) => {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
};
// Reveal hook
const useReveal = () => {
useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
return () => io.disconnect();
});
};
// Scroll progress hook — returns 0..1 across an element's bounds
const useScrollProgress = (ref, opts = {}) => {
const { start = 0.9, end = 0.1 } = opts; // fractions of viewport height
const [p, setP] = useState(0);
useEffect(() => {
const onScroll = () => {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
// 0 when top of el at start*vh, 1 when bottom of el at end*vh
const total = rect.height + (start - end) * vh;
const traveled = (start * vh) - rect.top;
const v = Math.max(0, Math.min(1, traveled / total));
setP(v);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, [ref, start, end]);
return p;
};
// Easings
const ease = {
out: (t) => 1 - Math.pow(1 - t, 3),
inOut: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
};
const lerp = (a, b, t) => a + (b - a) * t;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
Object.assign(window, { Icon, Logo, Nav, useReveal, useScrollProgress, ease, lerp, clamp });