);
}
function DetailBlueprint({ kind = 'charger', title, lead, metrics = [] }) {
const presets = {
charger: {
eyebrow: 'Arquitectura de recarga',
title: title || 'Potencia distribuida, controlada desde una sola cabina.',
lead: lead || 'La energía se reparte entre surtidores según demanda real, reduciendo obra civil y manteniendo potencia disponible para cada vehículo.',
nodes: ['Red MT', 'Cabina', 'Surtidores', 'Vehículos'],
rail: 'OCPP · CCS2 · Power sharing',
},
storage: {
eyebrow: 'Arquitectura BESS',
title: title || 'Almacenamiento conectado a renovables, red y operación.',
lead: lead || 'PCS, BMS y EMS coordinan la energía disponible para hibridación, peak shaving, respaldo y servicios de red.',
nodes: ['Renovable', 'PCS', 'BESS', 'SCADA'],
rail: 'LFP · EMS · Grid-forming',
},
mt: {
eyebrow: 'Arquitectura MT',
title: title || 'Conexión, protección y transformación en una cadena limpia.',
lead: lead || 'Celdas, transformadores y protecciones se integran para llevar potencia de media tensión al punto exacto de consumo.',
nodes: ['Celdas', 'Trafo', 'BT', 'Control'],
rail: 'SF6-free · IEC · Protecciones',
},
};
const data = presets[kind] || presets.charger;
const usableMetrics = (metrics || []).slice(0, 3);
return (
{data.eyebrow}
{data.title}
{data.lead}
{data.nodes.map((node, i) => (
{String(i + 1).padStart(2, '0')}{node}
))}
{data.rail}
{usableMetrics.map((met, i) => (
{met.value}{met.label}
))}
);
}
const DefaultIcon = () => (
);
// Line-icon library — reusable across the site
const Icons = {
bolt: (
),
battery: (
),
shield: (
),
layers: (
),
cpu: (
),
network: (
),
charger: (
),
leaf: (
),
expand: (
),
settings: (
),
thermal: (
),
cycle: (
),
};
// Bar chart for capacities/power ranges
function BarChart({ bars, max, dark = true, accent }) {
const m = max || Math.max(...bars.map(b => b.v));
const c = accent || 'var(--accent)';
return (
{bars.map((b, i) => {
const h = (b.v / m) * 100;
return (
{b.v}{b.unit || ''}
{b.label}
);
})}
);
}
// Specs table — 2-col grid
function SpecsTable({ groups }) {
return (
{groups.map((g, gi) => (
{g.title}
{g.rows.map(([k, v], ri) => (
{k}
{v}
))}
))}
);
}
// CTA strip — bottom of every product page
function CTAStrip({ navigate, title = '¿No sabes qué solución se adapta mejor a tu proyecto?', cta = 'Pedir asesoramiento' }) {
return (
);
}
// Energy coil signature — appears at the bottom of the home and key pages
function EnergyCoil({ width = 200 }) {
return (
);
}
// Big italic signature with coil — used on home bottom
function MadeSimpleSignature({ size = 'clamp(48px, 8vw, 120px)' }) {
return (
Energy Made Simple.
);
}
// ─────────────────── PRODUCT VISUALS (inline SVG) ───────────────────
// Stylized renders of the actual Pyrovolt product forms — used as hero imagery.
// Intentionally minimal/architectural. No photo-realism; treat as a placeholder-but-considered.
function ChargerCompact({ w = 400, accent }) {
const a = accent || 'var(--accent)';
return (
);
}
function ChargerHPC({ w = 400, accent }) {
const a = accent || 'var(--accent)';
return (
);
}
function ChargerModular({ w = 400, accent }) {
const a = accent || 'var(--accent)';
return (
);
}
function ChargerDistributed({ w = 800, accent }) {
const a = accent || 'var(--accent)';
return (
);
}
const Dispenser = ({ x, label, accent, subtitle }) => (
● READY{label}{subtitle}
);
function BESSContainer({ w = 800, accent }) {
const a = accent || 'var(--accent)';
return (
);
}
function ESSCompact({ w = 400, accent }) {
const a = accent || 'var(--accent)';
return (
);
}
Object.assign(window, {
Logo, LogoMark, Nav, Footer, FLink,
ChargerCompact, ChargerModular, ChargerHPC, ChargerDistributed,
BESSContainer, ESSCompact,
// Shared product-page components
It, renderItalic, getIcon,
Breadcrumb, SpecChips, FeatureRow, DetailBlueprint, Icons, BarChart, SpecsTable,
CTAStrip, EnergyCoil, MadeSimpleSignature,
});