// RepúblicaData — components
const { useState, useEffect, useRef } = React;
// ── tiny utilities ──────────────────────────────────────────────────────────
function useInView(opts = { threshold: 0.15, once: true }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el || seen) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setSeen(true);
if (opts.once) io.disconnect();
}
});
}, { threshold: opts.threshold || 0.15 });
io.observe(el);
return () => io.disconnect();
}, [seen]);
return [ref, seen];
}
// Animated number — counts up when in view
function CountUp({ value, prefix = "", suffix = "", decimals = 0, duration = 1600 }) {
const [ref, seen] = useInView();
const [v, setV] = useState(0);
useEffect(() => {
if (!seen) return;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(value * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}, [seen, value, duration]);
return (
{prefix}{v.toFixed(decimals)}{suffix}
);
}
// Live clock — Buenos Aires
function LiveClock() {
const [now, setNow] = useState(() => new Date());
useEffect(() => {
const id = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(id);
}, []);
const hh = String(now.getHours()).padStart(2, "0");
const mm = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");
return {hh}:{mm}:{ss} BA;
}
// ── Top bar ─────────────────────────────────────────────────────────────────
function TopBar() {
const C = window.COPY.hero;
return (
);
}
function BrandMark() {
// Simple, serious mark: monogram in a hairline circle
return (
);
}
// ── Hero ────────────────────────────────────────────────────────────────────
function Hero({ accent }) {
const C = window.COPY.hero;
return (
{C.eyebrow}
{C.titleA}
{C.titleB}
{C.titleC}
{C.titleD}
);
}
function Arrow() {
return (
);
}
function HeroTicker({ accent }) {
const data = window.HERO_TICKER;
const [i, setI] = useState(0);
useEffect(() => {
const id = setInterval(() => setI((x) => (x + 1) % data.length), 2200);
return () => clearInterval(id);
}, []);
const max = Math.max(...data.map((d) => Math.max(d.a, d.b)));
return (
);
}
function Marquee() {
const items = window.COPY.marquee;
return (
{[...items, ...items, ...items].map((t, i) => (
{t}
))}
);
}
// ── Stats band ──────────────────────────────────────────────────────────────
function Stats() {
const items = window.COPY.stats;
return (
{items.map((p, i) => (
-
{p.num}
{p.title}
{p.body}
))}
);
}
// ── Section header ──────────────────────────────────────────────────────────
function SectionHead({ label, title, body, num }) {
return (
{num}
/
{label}
{title}
{body && {body}
}
);
}
// ── Services ────────────────────────────────────────────────────────────────
function Services() {
const intro = window.COPY.servicesIntro;
const items = window.COPY.services;
return (
{items.map((s, i) => (
{s.n}
{s.kicker}
{s.title}
{s.bullets.map((b, j) => (
- {b}
))}
))}
{items.map((s, i) => (
))}
);
}
function StackPreview({ item, index, accent }) {
return (
republicadata://{item.code.toLowerCase()}.live
{item.code} · módulo {String(index + 1).padStart(2, "0")} de 06
{item.name}
{item.desc}
);
}
// SVG-based visualizations for each module — abstract, never recreating real UIs
function StackVisual({ code, accent }) {
if (code === "ATLAS") return ;
if (code === "ECO") return ;
if (code === "FORJA") return ;
if (code === "PULSO") return ;
if (code === "FISCAL") return ;
return ;
}
function AtlasViz({ accent }) {
// grid of dots intensity = "vote density"
const cols = 24, rows = 14;
const cells = [];
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const cx = (x + 0.5) / cols;
const cy = (y + 0.5) / rows;
const d = Math.sqrt((cx - 0.45) ** 2 + (cy - 0.55) ** 2);
const v = Math.max(0, 1 - d * 1.6) + (Math.random() * 0.18 - 0.09);
cells.push({ x, y, v: Math.max(0, Math.min(1, v)) });
}
}
return (
);
}
function EcoViz({ accent }) {
// sentiment waveform
const pts = [];
for (let i = 0; i <= 80; i++) {
const t = i / 80;
const y = 140 + Math.sin(t * 12) * 40 + Math.sin(t * 27) * 18 + Math.cos(t * 5) * 8;
pts.push([i * 6, y]);
}
const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0] + "," + p[1]).join(" ");
return (
);
}
function ForjaViz({ accent }) {
const lines = [
"> variantes(formato = \"redes · short\")",
" v1 · \"tono cercano · 280 caracteres\"",
" v2 · \"tono institucional · spot 30s\"",
" v3 · \"tono testimonial · video 60s\"",
"> revisión equipo de comunicación ✓",
"> aprobado para publicación · 14:32 BA",
];
return (
);
}
function PulsoViz({ accent }) {
// panel tracking lines
const series = (seed, base) => {
const pts = [];
let v = base;
for (let i = 0; i <= 24; i++) {
v += (Math.sin(i * 0.7 + seed) * 0.6) + (Math.random() - 0.5) * 0.4;
pts.push([i * 20, 230 - (v - 30) * 8]);
}
return pts.map((p, i) => (i === 0 ? "M" : "L") + p[0] + "," + p[1]).join(" ");
};
return (
);
}
function FiscalViz({ accent }) {
// grid of cells, subset filled = fiscalized mesas
const cells = [];
for (let y = 0; y < 8; y++)
for (let x = 0; x < 18; x++)
cells.push({ x, y, on: Math.random() > 0.18 });
return (
);
}
function BunkerViz({ accent }) {
return (
);
}
// ── Method ──────────────────────────────────────────────────────────────────
function Method() {
const intro = window.COPY.methodIntro;
const items = window.COPY.method;
return (
{items.map((m, i) => (
))}
);
}
function MethodRow({ m, i, total }) {
const [ref, seen] = useInView({ threshold: 0.25, once: true });
return (
{m.phase}
{m.weeks}
{String(i + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
);
}
// ── Closing / Contact ───────────────────────────────────────────────────────
function Closing() {
const C = window.COPY.closing;
return (
);
}
// ── Footer ──────────────────────────────────────────────────────────────────
function Footer() {
const F = window.COPY.footer;
return (
);
}
Object.assign(window, {
TopBar, Hero, Stats, Services, Stack, Method, Closing, Footer,
});