// ============================================================
// TSP Website UI Kit — Primitives (Icon, Button, hooks)
// ============================================================
const { useState, useEffect, useRef } = React;
// ---- Lucide line icons (stroke, navy via currentColor) ----
const ICONS = {
menu: '',
x: '',
arrowRight: '',
check: '',
// services
intel: '',
strategy: '',
environs: '',
// value / propuesta
eye: '',
users: '',
message: '',
route: '',
shield: '',
alert: '',
// sectors
health: '',
wheat: '',
truck: '',
energy: '',
handshake: '',
scale: '',
// misc
mail: '',
pin: '',
};
function Icon({ name, size, style, cls }) {
const path = ICONS[name] || '';
return (
);
}
function Button({ variant = 'primary', children, icon, onClick, href }) {
const cls = 'btn btn-' + variant;
const inner = (<>{children}{icon && });
if (href) return {inner};
return ;
}
// reveal-on-scroll
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal');
if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
const io = new IntersectionObserver((ents) => {
ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.12 });
els.forEach(e => io.observe(e));
return () => io.disconnect();
});
}
// soundwave motif (brand) — generated polyline, deterministic
function Soundwave({ amber }) {
const pts = [];
const N = 84, W = 1200, H = 30, mid = H / 2;
for (let i = 0; i < N; i++) {
const x = (i / (N - 1)) * W;
const decay = Math.max(0, 1 - i / 30);
const amp = decay * (mid - 2) * (0.35 + 0.65 * Math.abs(Math.sin(i * 1.7)));
pts.push(`${x.toFixed(1)},${(mid - amp).toFixed(1)}`);
pts.push(`${x.toFixed(1)},${(mid + amp).toFixed(1)}`);
pts.push(`${x.toFixed(1)},${mid}`);
}
return (
);
}
Object.assign(window, { Icon, Button, useReveal, Soundwave });