/* global React, ReactDOM */ const { useState, useEffect, useRef, useCallback } = React; /* ========================================================= ICONS ========================================================= */ const I = { chat: () => , code: () => , hub: () => , api: () => , agent: () => , ide: () => , modes: () => , models: () => , dev: () => , price: () => , home: () => , folder: () => , snap: () => , arrow: () => , plus: () => , check: () => , x: () => , send: () => , lock: () => , ext: () => }; /* ========================================================= BRAND MARK ========================================================= */ function BrandMark({ size = 24 }) { return ( ); } /* ========================================================= NAV STRUCTURE ========================================================= */ const NAV_LINKS = [ { href: "index.html", label: "Home", icon: "home" }, { href: "index.html?section=products", label: "Products", icon: "folder" }, { href: "index.html?section=about", label: "About", icon: "agent" }, { href: "index.html?section=contact", label: "Contact", icon: "send" }]; /* ========================================================= TOP NAV ========================================================= */ function TopNav({ active }) { const [open, setOpen] = useState(false); return (

METALLIC .V1

Live Contact

); } /* ========================================================= APP SIDEBAR (inner pages) ========================================================= */ function AppSidebar({ active }) { return ( ); } /* ========================================================= SPARKLINE ========================================================= */ function Spark({ data, color = "#34d399", h = 32 }) { const mx = Math.max(...data),mn = Math.min(...data); const W = 100; const pts = data.map((v, i) => { const x = i / (data.length - 1) * W; const y = h - (v - mn) / (mx - mn || 1) * h; return `${x.toFixed(1)},${y.toFixed(1)}`; }).join(" "); const id = "sg" + color.replace(/[^a-f0-9]/gi, ""); return ( ); } /* ========================================================= NEURAL CANVAS (hero background) ========================================================= */ function NeuralCanvas() { const ref = useRef(null); useEffect(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext("2d"); let raf, w, h; const EM = "#10b981",EM2 = "#34d399",DIM = "rgba(16,185,129,"; const nodes = []; const packets = []; function resize() { w = canvas.width = canvas.offsetWidth; h = canvas.height = canvas.offsetHeight; } function init() { nodes.length = 0; const count = Math.floor(w * h / 18000); for (let i = 0; i < count; i++) { nodes.push({ x: Math.random() * w, y: Math.random() * h, r: Math.random() * 1.5 + 0.5, vx: (Math.random() - 0.5) * 0.15, vy: (Math.random() - 0.5) * 0.15, pulse: Math.random() * Math.PI * 2 }); } } function spawnPacket(a, b) { packets.push({ ax: a.x, ay: a.y, bx: b.x, by: b.y, t: 0, speed: 0.008 + Math.random() * 0.006 }); } let frame = 0; function tick() { ctx.clearRect(0, 0, w, h); frame++; // update nodes for (const n of nodes) { n.x += n.vx;n.y += n.vy;n.pulse += 0.02; if (n.x < 0 || n.x > w) n.vx *= -1; if (n.y < 0 || n.y > h) n.vy *= -1; } // draw connections for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const a = nodes[i],b = nodes[j]; const dx = a.x - b.x,dy = a.y - b.y; const d = Math.sqrt(dx * dx + dy * dy); if (d < 160) { const alpha = (1 - d / 160) * 0.18; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.strokeStyle = `rgba(16,185,129,${alpha})`; ctx.lineWidth = 0.6; ctx.stroke(); // occasionally spawn packet if (frame % 180 === 0 && Math.random() < 0.04) spawnPacket(a, b); } } } // draw packets for (let i = packets.length - 1; i >= 0; i--) { const p = packets[i]; p.t += p.speed; if (p.t >= 1) {packets.splice(i, 1);continue;} const x = p.ax + (p.bx - p.ax) * p.t; const y = p.ay + (p.by - p.ay) * p.t; ctx.beginPath(); ctx.arc(x, y, 2.5, 0, Math.PI * 2); ctx.fillStyle = EM2; ctx.shadowColor = EM; ctx.shadowBlur = 8; ctx.fill(); ctx.shadowBlur = 0; } // draw nodes for (const n of nodes) { const pulse = 0.5 + 0.5 * Math.sin(n.pulse); ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(52,211,153,${0.4 + pulse * 0.4})`; ctx.fill(); } raf = requestAnimationFrame(tick); } const ro = new ResizeObserver(() => {resize();init();}); ro.observe(canvas.parentElement || canvas); resize();init();tick(); return () => {cancelAnimationFrame(raf);ro.disconnect();}; }, []); return