/* global React */
const { useEffect, useRef, useState } = React;
/* =========================================================
Lucide auto-init
========================================================= */
function useLucide(deps = []) {
useEffect(() => {
if (window.lucide) window.lucide.createIcons();
});
}
/* =========================================================
Icon — Lucide wrapper
========================================================= */
function Icon({ name, size = 20, color, strokeWidth = 1.6, style }) {
return (
);
}
/* =========================================================
Section label
========================================================= */
function SectionLabel({ children, style }) {
return (
{children}
);
}
/* =========================================================
Button — with magnetic hover + ripple click
========================================================= */
function Btn({ children, variant = 'primary', size = 'md', onClick, href, icon = '→', noIcon = false, style }) {
const cls = `btn btn-${variant}${size === 'sm' ? ' btn-sm' : ''}`;
function handleRipple(e) {
const el = e.currentTarget;
const rect = el.getBoundingClientRect();
const ripple = document.createElement('span');
const d = Math.max(rect.width, rect.height) * 2;
ripple.style.cssText = `
position:absolute;width:${d}px;height:${d}px;
left:${e.clientX - rect.left - d/2}px;top:${e.clientY - rect.top - d/2}px;
background:rgba(255,255,255,0.18);border-radius:50%;
transform:scale(0);animation:ripple-expand 0.55s ease forwards;pointer-events:none;
`;
el.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
}
const inner = (
<>
{children}
{!noIcon && {icon}}
);
const shared = { className: cls, onClick: (e) => { handleRipple(e); onClick && onClick(e); }, style: { position: 'relative', overflow: 'hidden', ...style } };
if (href) return {inner};
return ;
}
/* =========================================================
IconBubble
========================================================= */
function IconBubble({ name, size = 48, iconSize = 22 }) {
return (
);
}
/* =========================================================
ToolPill
========================================================= */
function ToolPill({ children, onDark }) {
return (
{children}
);
}
function Badge({ children, accent, style }) {
return (
{children}
);
}
/* =========================================================
FadeUp — scroll-triggered entrance
========================================================= */
function FadeUp({ children, delay = 0, style, as: As = 'div' }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } },
{ threshold: 0.12 }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
return (
{children}
);
}
/* =========================================================
AnimatedCounter
========================================================= */
function Counter({ to, suffix = '', duration = 1400 }) {
const ref = useRef(null);
const [val, setVal] = useState(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(([e]) => {
if (!e.isIntersecting) return;
obs.disconnect();
const start = performance.now();
const step = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(to * eased));
if (p < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}, { threshold: 0.4 });
obs.observe(el);
return () => obs.disconnect();
}, [to]);
return {val}{suffix};
}
/* =========================================================
WordReveal — staggered word-by-word hero text
========================================================= */
function WordReveal({ children, delay = 0 }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } },
{ threshold: 0.1 }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
const text = typeof children === 'string' ? children : null;
if (!text) return {children};
const words = text.split(' ');
return (
{words.map((word, i) => (
{word}
))}
);
}
/* =========================================================
TiltCard — subtle 3D tilt on mouse move
========================================================= */
function TiltCard({ children, style, className }) {
const ref = useRef(null);
function onMove(e) {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
el.style.transform = `perspective(800px) rotateX(${-y * 5}deg) rotateY(${x * 5}deg) translateZ(4px)`;
}
function onLeave() {
const el = ref.current;
if (el) el.style.transform = '';
}
return (
{children}
);
}
/* =========================================================
Inject ripple keyframe once
========================================================= */
(function injectRippleStyle() {
if (document.getElementById('aiven-ripple-style')) return;
const s = document.createElement('style');
s.id = 'aiven-ripple-style';
s.textContent = '@keyframes ripple-expand { to { transform: scale(1); opacity: 0; } }';
document.head.appendChild(s);
})();
Object.assign(window, {
Icon, SectionLabel, Btn, IconBubble, ToolPill, Badge,
FadeUp, Counter, WordReveal, TiltCard, useLucide
});