/* global React, SectionHead2 */ // NUON multi-page · page-specific sections const { useState: useS2, useEffect: useE2, useRef: useR2 } = React; // ============================================================ // HOME TILES (short home version) // ============================================================ function HomeTiles({ copy }) { return (
{copy.tiles.map((t, i) => (
{t.overline}
{t.num} / 03

{t.title}

{t.body}

{t.overline === "Producto" || t.overline === "Product" ? "Ver producto →" : t.overline === "Mercados" || t.overline === "Markets" ? "Ver mercados →" : "Ver casos →"}
))}
); } // ============================================================ // HOME MANIFIESTO STRIP // ============================================================ function HomeManifest({ copy }) { return (
{copy.manifiesto_overline}

{copy.manifiesto_quote_pre}{copy.manifiesto_quote_em}{copy.manifiesto_quote_post}

{copy.manifiesto_btn}
); } // ============================================================ // ARCHITECTURE (Producto) // ============================================================ function Architecture({ copy }) { return (
{copy.layers.map((l, i) => (
{l.num}
{l.name}
{l.desc}
))}
); } // Architecture diagram — animated event bus with packets flowing function ArchDiagram() { return ( {/* Event bus (vertical line) */} [ EVENT BUS ] ↻ 1 Hz · 7M pts/min {/* Flowing packets on the bus */} {[0, 1, 2, 3, 4].map((i) => ( ))} {/* Layers (right side) */} {[ { y: 100, name: "L5 · SETTLEMENT", color: "#FDBFE8" }, { y: 190, name: "L4 · DISPATCH", color: "#D883FF" }, { y: 280, name: "L3 · OPTIMIZATION", color: "#7A81FF" }, { y: 370, name: "L2 · FORECAST", color: "#0096FF" }, { y: 460, name: "L1 · TELEMETRY", color: "#76D6FF" }, ].map((l, i) => ( {/* connection line */} {/* layer card */} {l.name} ↻ ACTIVE ))} {/* Sources (left side) */} {[ { y: 100, name: "ERP · Cliente" }, { y: 190, name: "Gateway BESS" }, { y: 280, name: "Inversor solar" }, { y: 370, name: "Mercado spot" }, { y: 460, name: "Sensor demanda" }, ].map((s, i) => ( {s.name} ))} {/* Top label */} FUENTES · 2,341 CAPAS · 5 ); } // ============================================================ // SPECS TABLE // ============================================================ function Specs({ copy }) { return (
{copy.items.map(([label, num, unit, sub], i) => (
{label}
{num}{unit}
{sub}
))}
); } // ============================================================ // API + CODE // ============================================================ function ApiSection({ copy }) { // syntax-highlight the code (minimal: comments, strings, keywords, function calls) const codeWithSyntax = (raw) => { const lines = raw.split("\n"); return lines.map((line, i) => { // simple syntax coloring let result = []; const trimmed = line; if (trimmed.trim().startsWith("#")) { result.push({trimmed}); } else { // tokenize roughly const tokens = trimmed.split(/("[^"]*"|\b(?:import|from|def|for|in|print|f|client)\b)/); tokens.forEach((tok, j) => { if (!tok) return; if (tok.startsWith('"')) { result.push({tok}); } else if (["import", "from", "def", "for", "in", "client"].includes(tok)) { result.push({tok}); } else if (tok === "print" || tok === "f") { result.push({tok}); } else { result.push({tok}); } }); } return
{result.length ? result : "\u00A0"}
; }); }; return (
{copy.bullets.map((b, i) =>
{b}
)}
cycle_listener.py
{codeWithSyntax(copy.code)}
); } // ============================================================ // COVERAGE MAP // ============================================================ function CoverageMap({ copy }) { return (
{/* Decorative regions — simplified continents */} {/* América */} {/* Europa */} {/* Lat/lng grid */} {[60, 120, 180, 240, 300, 360, 420, 480].map(y => ( ))} {[100, 250, 400, 550, 700, 850, 1000, 1150].map(x => ( ))} {/* Country labels */} [ AMÉRICA · 3 MERCADOS ] [ IBÉRICO · 1 MERCADO ] {/* Nodes — Colombia */} CO {/* Nodes — Chile */} CL {/* Nodes — México */} MX {/* Nodes — España */} ES {/* Connection lines between major hubs (going through the core) */} {/* Total summary box */} [ TOTAL · TIEMPO REAL ] 847 MW 2,341 ACTIVOS · 4 MERCADOS ↻ 99.97% UPTIME · 12M
[ NODOS · TIEMPO REAL ]
Colombia06
Chile05
México05
España05
); } function NodeDot({ cx, cy, label, mw, color, delay = 0, small = false }) { const r = small ? 4 : 7; return ( {!small && ( <> {label.toUpperCase()} {mw && {mw} MW} )} ); } // ============================================================ // REG GRID (regulatory frameworks) // ============================================================ function RegFrameworks({ copy }) { return (
{copy.items.map((c, i) => (
{c.flag}
{c.name}
{c.body}
{c.regs.map((r, j) => {r})}
))}
); } // ============================================================ // TIMELINE // ============================================================ function Timeline({ copy, withQuarter = true }) { return (
{copy.events.map((e, i) => (
{e.year} {withQuarter ? e.q : ""}
{e.title &&
{e.title}
}
{e.text || e.body}
))}
); } // ============================================================ // CASOS ALL (6 case studies) // ============================================================ function CasosAll({ baseItems, extraItems }) { const all = [...baseItems, ...extraItems]; return (
{all.map((c, i) => (
{c.industry} ↻ {c.country}

{c.title}

"{c.quote}"

{c.metric[0]}
{c.metric[1]}
))}
); } function CasoMiniIllust({ idx, color }) { if (idx === 0) { return ( ); } if (idx === 1) { return ( {[0, 1, 2, 3].map((i) => ( {[0, 1, 2, 3, 4].map((j) => ( ))} ))} ); } if (idx === 2) { // EV return ( {[60, 130, 200, 270, 340].map((x, i) => ( ))} ); } if (idx === 3) { // Mining — pit isometric return ( ); } if (idx === 4) { // Agro — pump return ( {[0, 1, 2].map((i) => ( ))} ); } // Retail — buildings return ( {[60, 140, 220, 300].map((x, i) => ( {[0, 1, 2].map((r) => [0, 1].map((c) => ( )))} ))} ); } // ============================================================ // INDUSTRY BREAKDOWN (bars) // ============================================================ function Breakdown({ copy }) { const max = Math.max(...copy.items.map(([, v]) => v)); const total = copy.items.reduce((s, [, v]) => s + v, 0); return (
{copy.items.map(([label, value, color], i) => (
{label}
{value} MW
))}
); } // ============================================================ // LOGOS STRIP // ============================================================ function LogosStrip({ title, logos }) { return (
↻ {title.toUpperCase()}
{logos.map((l, i) =>
{l.toUpperCase()}
)}
); } // ============================================================ // BENEFITS (Carreras) // ============================================================ function Benefits({ copy }) { return (
{copy.items.map((b, i) => (
0{i + 1} / 0{copy.items.length}
{b.title}
{b.body}
))}
); } // ============================================================ // PROCESS STEPS // ============================================================ function Process({ copy }) { return (
{copy.steps.map((s, i) => (
{s.num}
{s.title}
{s.sub}
↻ {s.time}
))}
); } // ============================================================ // TESTIMONIO // ============================================================ function Testimonio({ quote, author }) { return (

"{quote}"

— {author}
); } // ============================================================ // FEATURED INSIGHT // ============================================================ function FeaturedInsight({ copy, lang }) { return (
{copy.tag} {copy.date} ↻ {copy.readtime}

{copy.title}

{copy.body}

{copy.author}
{lang === "es" ? "Leer artículo completo" : "Read full article"}
); } // ============================================================ // INSIGHTS GRID (filterable) // ============================================================ function InsightsGrid({ items, filters }) { const [filter, setFilter] = useS2(filters[0]); const allLabel = filters[0]; // "Todos" / "All" const visible = filter === allLabel ? items : items.filter((it) => it.tag === filter); return ( <>
{filters.map((f) => ( ))}
{visible.map((p, i) => (
{p.tag} {p.date}

{p.title}

{p.body}

Leer nota →
))}
); } // ============================================================ // CONTACT FORM // ============================================================ function ContactForm({ copy, lang }) { const [submitted, setSubmitted] = useS2(false); const submit = (e) => { e.preventDefault(); setSubmitted(true); }; if (submitted) { return (
{lang === "es" ? "Recibido" : "Received"}.

{lang === "es" ? "Un ingeniero le escribirá en las próximas 24 horas hábiles. La conversación inicial dura 30 minutos." : "An engineer will write to you within the next 24 business hours. The initial conversation lasts 30 minutes."}

); } return (

{copy.form_title}

{copy.form_meta}
↻ {lang === "es" ? "RESPUESTA 24H HÁBILES" : "24H BUSINESS RESPONSE"}
); } // ============================================================ // OFFICES // ============================================================ function Offices({ copy }) { return (
{copy.items.map((o, i) => (
↻ {o.country}
{o.city}
{o.tz}
{o.address}
{o.role}
))}
); } // ============================================================ // ALT CHANNELS (Contacto side) // ============================================================ function AltChannels({ copy }) { return (
{copy.overline}
{copy.items.map((row, i) => (
{row.label} {row.value}
))}
); } // ============================================================ // INVESTORS STRIP // ============================================================ function Investors({ copy }) { return (
{copy.items.map((i, idx) =>
{i.toUpperCase()}
)}
); } // ============================================================ // ADVISORS (uses persona style) // ============================================================ function Advisors({ copy }) { return (
{copy.people.map(([name, role, loc], i) => { const initials = name.split(" ").map(n => n[0]).join("").slice(0, 2); return (
{initials}
{name}
{role}
↻ {loc}
); })}
); } Object.assign(window, { HomeTiles, HomeManifest, Architecture, Specs, ApiSection, CoverageMap, RegFrameworks, Timeline, CasosAll, Breakdown, LogosStrip, Benefits, Process, Testimonio, FeaturedInsight, InsightsGrid, ContactForm, Offices, AltChannels, Investors, Advisors, });