/* global React, ReactDOM, window */
// MEXUS — Calculadora de rentabilidad PÚBLICA (mexusseller.com/calculadora).
// Copia adaptada de operator-console/views-calculator.jsx — al actualizar
// tarifas o motor allá, copiar engine.js + fee-schedule.json + este view acá
// (mismo flujo: marketplace → cuestionario → sliders; sin login, nada se
// guarda en servidor; el visitante exporta su estudio en HTML/Excel).
const { useState: useCS, useEffect: useCE, useMemo: useCM } = React;
const CIcon = window.Icon || (() => null);
const CM_PER_INCH = 2.54;
const FLOOR = 15;
const money = (n) => (n == null || isNaN(n)) ? '—' : '$' + Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const money0 = (n) => (n == null || isNaN(n)) ? '—' : '$' + Math.round(Number(n)).toLocaleString('en-US');
const pct0 = (n) => (n == null || isNaN(n)) ? '—' : Math.round(n) + '%';
const clampRound = (v, d) => Math.round((v + Number.EPSILON) * 10 ** d) / 10 ** d;
// Producto en blanco para el cuestionario (hereda el marketplace elegido).
function blankProduct(market) {
const m = market || 'US';
return {
name: '', market: m, categoryKey: MARKET_DEFAULT_CAT[m], isApparel: false,
dimUnit: 'cm', L: '', W: '', H: '', wUnit: 'kg', weight: '',
price: '', cogs: '', logistics: m === 'MX' ? '6' : '1.05',
tacos: '7', refunds: '8',
extras: [], // rubros personalizados {id,label,amount} — costos extra que restan
base: null,
};
}
const MARKET_DEFAULT_CAT = { US: 'footwear', MX: 'todo_lo_demas' };
const MARKET_CURRENCY = { US: 'USD', MX: 'MXN' };
const MARKET_META = {
US: { flag: '🇺🇸', label: 'Amazon US', cur: 'USD', sub: 'Tarifas oficiales 2026 en USD · incluye combustible 3.5%' },
MX: { flag: '🇲🇽', label: 'Amazon México', cur: 'MXN', sub: 'Tarifas oficiales 2026 en MXN, IVA incluido · tabla especial Salud/Alimentos' },
};
// Producto demo por marketplace: la sección siempre abre con un caso vivo
// para poder demostrarla a un cliente.
function demoProduct(market) {
if (market === 'MX') {
return { ...blankProduct('MX'), name: 'Demo · Gel corporal', categoryKey: 'todo_lo_demas', price: '219', cogs: '45', L: '13', W: '5', H: '5', weight: '0.15' };
}
return { ...blankProduct('US'), name: 'Freeland · Bota', categoryKey: 'footwear', price: '119', cogs: '47', L: '34.4', W: '25', H: '13', weight: '1.3' };
}
const FONT_DISP = 'var(--mx-font-display, "Barlow Condensed", sans-serif)';
const FONT_MONO = 'var(--mx-font-mono, "JetBrains Mono", monospace)';
const ORANGE = '#F47920', NAVY = '#152232', NAVY_DK = '#0D1826';
// Inputs oscuros (cuestionario navy, mismo lenguaje que el resto).
const darkInput = { width: '100%', fontFamily: FONT_MONO, fontSize: 14, fontWeight: 700, color: '#fff', border: '1.5px solid rgba(255,255,255,.18)', borderRadius: 8, padding: '8px 10px', background: 'rgba(0,0,0,.22)' };
const darkSelect = { ...darkInput, fontFamily: 'inherit', fontWeight: 600 };
function CalculatorView() {
const [sched, setSched] = useCS(null);
const [err, setErr] = useCS(null);
const [step, setStep] = useCS('market'); // 'market' | 'form' | 'calc'
const [products, setProducts] = useCS([demoProduct('US')]);
const [active, setActive] = useCS(0);
// Elegir país resetea los productos al demo de ese marketplace, para que
// nunca se mezclen tarifas de US y MX en una misma corrida.
const chooseMarket = (m) => { setProducts([demoProduct(m)]); setActive(0); setStep('form'); };
useCE(() => {
fetch('fee-schedule.json?v=1').then(r => r.json()).then(j => setSched(j))
.catch(e => setErr('No cargó fee-schedule.json: ' + e.message));
}, []);
const setP = (i, patch) => setProducts(ps => ps.map((p, k) => k === i ? { ...p, ...patch } : p));
const schedFor = (p) => sched ? (sched[p.market] || sched.US) : null;
const catsFor = (p) => { const s = schedFor(p); return s ? Object.keys(s.referral).filter(k => !k.startsWith('_')) : []; };
// Construye el input del motor para un producto (con overrides vivos).
function inputFor(p) {
return {
name: p.name, categoryKey: p.categoryKey, isApparel: !!p.isApparel,
price: +p.price || 0, cogs: +p.cogs || 0,
dims: { l: +p.L || 0, w: +p.W || 0, h: +p.H || 0, unit: p.dimUnit },
weight: { value: +p.weight || 0, unit: p.wUnit },
ads: { model: 'acos', amount: (+p.tacos || 0) / 100 },
refunds: { model: 'pct', amount: (+p.refunds || 0) / 100 },
logistics: { unitsPerBox: 1, freight: { model: 'per_unit', amount: +p.logistics || 0 } },
};
}
function computeFor(p) {
const s = schedFor(p);
if (!s || !window.MEXUS_CALC) return null;
try { return window.MEXUS_CALC.compute(s, inputFor(p)); } catch (e) { return { error: e.message }; }
}
if (err) return
{err}
;
if (!sched) return
Cargando tarifas…
;
return (
{step === 'market'
?
: step === 'form'
?
: }
);
}
// ─────────── PASO 0 · Elegir marketplace ───────────
// Primero el país, para no confundir tarifas: todo lo que sigue (categorías,
// moneda, tablas FBA) queda amarrado al marketplace elegido.
function MarketPicker({ onChoose }) {
return (
¿En qué marketplace vas a calcular? Las comisiones, tarifas FBA y moneda cambian por país.
Paso 1 · Captura lo necesario de cada producto: nombre, dimensiones y peso (eso fija el envío de Amazon). Luego le das Siguiente y ajustas todo con sliders.
);
}
// Conversión de unidad conservando el valor (cm↔in, peso↔).
function changeUnit(p, i, setP, kind, next) {
if (kind === 'dim') {
if (next === p.dimUnit) return;
const f = next === 'cm' ? CM_PER_INCH : 1 / CM_PER_INCH;
const cv = v => (v === '' || v == null) ? '' : String(clampRound(parseFloat(v) * f, 3));
setP(i, { dimUnit: next, L: cv(p.L), W: cv(p.W), H: cv(p.H) });
} else {
if (next === p.wUnit) return;
const TO_OZ = { oz: 1, lb: 16, kg: 35.27396195 };
const cv = v => { if (v === '' || v == null) return ''; const oz = parseFloat(v) * TO_OZ[p.wUnit]; return String(clampRound(oz / TO_OZ[next], next === 'oz' ? 1 : 3)); };
setP(i, { wUnit: next, weight: cv(p.weight) });
}
}
// Slider a nivel de módulo (NO dentro del render, para no remontar el input y
// perder el arrastre).
function Slider({ label, value, min, max, stp, onChange, hint, prefix, suffix }) {
// value es el valor crudo (string) para que el campo se pueda editar libre;
// el range usa el número. type=text + inputMode evita las flechitas (spinner)
// y las trabas del input numérico.
const num = (value === '' || value == null) ? 0 : (+value || 0);
return (