/* global React */
const { useState, useEffect, useRef } = React;
// ============ Starfield (shared background) ============
function Starfield() {
const ref = useRef(null);
useEffect(() => {
const canvas = ref.current;
const ctx = canvas.getContext('2d');
let w, h, stars = [];
const count = 260;
const colors = ['#00F0FF', '#FF51FA', '#ffffff'];
const mouse = { x: -9999, y: -9999 };
const AVOID = 150;
class Star {
constructor() { this.init(); }
init() {
this.bx = Math.random() * w; this.by = Math.random() * h;
this.x = this.bx; this.y = this.by;
this.size = Math.random() * 2 + 0.5;
this.c = colors[Math.floor(Math.random() * 3)];
this.vx = (Math.random() - 0.5) * 0.2; this.vy = (Math.random() - 0.5) * 0.2;
this.op = Math.random() * 0.5 + 0.2;
this.pd = Math.random() > 0.5 ? 1 : -1;
this.ps = Math.random() * 0.01 + 0.005;
}
upd() {
this.bx += this.vx; this.by += this.vy;
if (this.bx < 0) this.bx = w; if (this.bx > w) this.bx = 0;
if (this.by < 0) this.by = h; if (this.by > h) this.by = 0;
const dx = this.bx - mouse.x, dy = this.by - mouse.y;
const d = Math.hypot(dx, dy);
let tx = this.bx, ty = this.by;
if (d < AVOID) {
const a = Math.atan2(dy, dx), f = (AVOID - d) / AVOID;
tx += Math.cos(a) * f * 100; ty += Math.sin(a) * f * 100;
}
this.x += (tx - this.x) * 0.15; this.y += (ty - this.y) * 0.15;
this.op += this.ps * this.pd;
if (this.op > 0.8 || this.op < 0.1) this.pd *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.c; ctx.globalAlpha = this.op;
if (this.c !== '#ffffff') { ctx.shadowBlur = 10; ctx.shadowColor = this.c; } else { ctx.shadowBlur = 0; }
ctx.fill();
}
}
function resize() {
w = window.innerWidth; h = window.innerHeight;
canvas.width = w; canvas.height = h;
stars.forEach(s => s.init());
}
w = window.innerWidth; h = window.innerHeight;
canvas.width = w; canvas.height = h;
for (let i = 0; i < count; i++) stars.push(new Star());
let raf;
function loop() { ctx.clearRect(0, 0, w, h); stars.forEach(s => { s.upd(); s.draw(); }); raf = requestAnimationFrame(loop); }
loop();
const mm = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; };
const mo = () => { mouse.x = -9999; mouse.y = -9999; };
window.addEventListener('resize', resize);
window.addEventListener('mousemove', mm);
window.addEventListener('mouseout', mo);
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', mm); window.removeEventListener('mouseout', mo); };
}, []);
return React.createElement('canvas', { ref, style: { position: 'fixed', inset: 0, width: '100vw', height: '100vh', zIndex: -1, pointerEvents: 'none', background: 'radial-gradient(circle at center, #121820 0%, #0a0e14 100%)' } });
}
// ============ Top Nav ============
function TopNav({ active = 'services', onNav }) {
const items = [['services', 'Services'], ['portfolio', 'Portfolio'], ['contact', 'Contact']];
return (
);
}
// ============ Button ============
function Btn({ variant = 'primary', icon, children, onClick, href }) {
const base = { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 28px', borderRadius: 999, fontWeight: 700, fontSize: 17, textDecoration: 'none', border: 0, cursor: 'pointer', transition: 'all 300ms ease', fontFamily: 'Plus Jakarta Sans, sans-serif' };
const styles = {
primary: { ...base, background: '#FF51FA', color: '#fff', boxShadow: '0 0 20px rgba(255,81,250,0.3)' },
secondary: { ...base, background: '#00F0FF', color: '#0a0e14' },
gradient: { ...base, background: 'linear-gradient(to right,#FF51FA,#00F0FF)', color: '#0a0e14' },
outline: { ...base, background: 'rgba(32,38,47,0.4)', backdropFilter: 'blur(12px)', color: '#f1f3fc', border: '1px solid rgba(68,72,79,0.4)' }
};
const hoverGlow = {
primary: '0 0 40px rgba(255,81,250,0.6)',
secondary: '0 0 30px rgba(143,245,255,0.4)',
gradient: '0 0 30px rgba(255,81,250,0.5)',
outline: '0 0 30px rgba(255,81,250,0.4)'
};
const restShadow = { primary: '0 0 20px rgba(255,81,250,0.3)', secondary: 'none', gradient: 'none', outline: 'none' };
const Tag = href ? 'a' : 'button';
return (
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = hoverGlow[variant]; if (variant === 'outline') e.currentTarget.style.borderColor = '#FF51FA'; }}
onMouseOut={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = restShadow[variant]; if (variant === 'outline') e.currentTarget.style.borderColor = 'rgba(68,72,79,0.4)'; }}
onMouseDown={e => e.currentTarget.style.transform = 'scale(0.95)'}
onMouseUp={e => e.currentTarget.style.transform = 'translateY(-2px)'}>
{children}
{icon && {icon}}
);
}
// ============ Glass Card ============
function GlassCard({ children, style, glow = 'magenta', hover = true, ...rest }) {
const [h, setH] = useState(false);
const glowColor = glow === 'cyan' ? 'rgba(0,240,255,0.3)' : 'rgba(255,81,250,0.35)';
const borderHover = glow === 'cyan' ? 'rgba(0,240,255,0.3)' : 'rgba(255,81,250,0.4)';
return (
setH(true)} onMouseLeave={() => setH(false)}>
{children}
);
}
Object.assign(window, { Starfield, TopNav, Btn, GlassCard });