// HeroReconciliation — animated hero asset for ininvoice landing.
// 3 floating document cards tell the story: pedido → albarán → factura.
// Problem rows highlighted. Alert pills call out discrepancies.
// Final green badge pays off the story: "Recuperas 45 €".
// ═════════ tokens ═════════
const T = {
bg: '#F5F3EE',
dot: 'rgba(44,44,42,0.08)',
paper: '#FFFFFF',
paperDark: '#15131C',
rowBg: '#F1EFE8',
rowBgDark: '#1F1C26',
ink: '#2C2C2A',
ink2: '#5F5E5A',
ink3: '#888780',
inkOnDark: '#FFFFFF',
inkOnDark2: 'rgba(255,255,255,0.55)',
inkOnDark3: 'rgba(255,255,255,0.38)',
amber: '#EF9F27',
amberBg: '#FAEEDA',
amberInk: '#633806',
coral: '#E24B4A',
coralLite: '#F09595',
coralInk: '#791F1F',
coralBgDk: 'rgba(226,75,74,0.15)',
coralBrdDk: 'rgba(226,75,74,0.55)',
green: '#0F6E56',
greenInk: '#FFFFFF',
};
const FONT_SANS = 'Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
const FONT_MONO = '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace';
const FONT_SERIF = '"Instrument Serif", Georgia, serif';
// ═════════ primitives ═════════
function CircledNum({ n, color, bg }) {
return (
{n}
);
}
function LineRow({ label, qty, price, highlight, dark, muted, priceColor }) {
const bg = highlight === 'amber'
? T.amberBg
: highlight === 'coral' && dark
? T.coralBgDk
: dark
? T.rowBgDark
: T.rowBg;
const border = highlight === 'coral' && dark
? `1px solid ${T.coralBrdDk}`
: highlight === 'amber'
? `1px solid rgba(239,159,39,0.35)`
: '1px solid transparent';
return (
{label}
{qty}
{price}
);
}
// ═════════ skeleton bars ═════════
// Simulates document body as gray placeholder bars — reads as "paper abstraction"
function SkeletonRow({ widths, gap = 6, color = 'rgba(44,44,42,0.13)' }) {
return (
{widths.map((w, i) => (
))}
{rows.map((widths, i) => (
))}
);
}
// ═════════ cards ═════════
function DocCard({ kind, num, numColor, code, highlight, dark, rotate, x, y, delay, floatDelay }) {
// highlight: { type: 'amber'|'coral', label, value, priceColor, row: 0..2 }
// dark: boolean → dark card variant
const CARD_W = 240;
const CARD_H = 320;
const paperBg = dark ? T.paperDark : T.paper;
const barColor = dark ? 'rgba(255,255,255,0.16)' : 'rgba(44,44,42,0.12)';
const barMuted = dark ? 'rgba(255,255,255,0.10)' : 'rgba(44,44,42,0.07)';
const markBg = dark ? '#FFFFFF' : '#1F1D29';
const stampBg = dark ? '#FFFFFF' : '#1F1D29';
const kindInk = numColor;
// Build a 3-row "lines table" — the row at `highlight.row` is replaced with real text
const lineRows = [0, 1, 2].map(i => {
if (highlight && highlight.row === i) {
const isAmber = highlight.type === 'amber';
const isCoral = highlight.type === 'coral';
const rowBg = isAmber ? T.amberBg
: isCoral && dark ? T.coralBgDk
: isCoral ? '#FCEAEA'
: 'transparent';
const border = isAmber ? 'rgba(239,159,39,0.30)'
: isCoral ? 'rgba(226,75,74,0.38)'
: 'transparent';
return (
{highlight.label}
{highlight.value}
);
}
// Neutral skeleton row — two bars (label + value)
return (
);
});
return (
{/* Top row: brand mark + header bars + code */}
{/* Kind label + code */}
{num}
{kind}
{code}
{/* 3-row table (skeleton + highlighted row) */}
{lineRows}
{/* Hairline */}
{/* Mid skeleton block (paragraph feel) */}
{/* Spacer */}
{/* Bottom row: footer bars + stamp */}
{children}
);
}
function PackageIcon() {
return (
);
}
function PulseDot({ color }) {
return (
);
}
function EuroIcon() {
return (
€
);
}
// ═════════ top chip ═════════
function BrandChip() {
return (
IA detecta en tiempo real
);
}
// ═════════ final payoff badge ═════════
function PayoffBadge() {
return (
ininvoice bloquea el pago
Recuperas 45 €
);
}
// ═════════ flow connectors ═════════
function Connectors() {
// Card positions:
// Card1: x=40..308, y=150.., rotate -3°
// Card2: x=386..654, y=120.., rotate +1.5°
// Card3: x=732..1000,y=150.., rotate +4°
// We draw two flowing dotted paths connecting card edges around the "problem row"
// height (~y=300, where Tornillo M8 row sits).
return (
);
}
// ═════════ grid pattern bg ═════════
function DotPattern() {
// Fine graph-paper grid (designer canvas aesthetic)
return (
);
}
// ═════════ main ═════════
function HeroReconciliation() {
const wrapRef = React.useRef(null);
const [scale, setScale] = React.useState(1);
const [narrow, setNarrow] = React.useState(false);
React.useEffect(() => {
const STAGE_W = 1040;
const calc = () => {
const el = wrapRef.current;
if (!el) return;
const w = el.clientWidth;
setNarrow(w < 720);
setScale(Math.min(1, w / STAGE_W));
};
calc();
window.addEventListener('resize', calc);
return () => window.removeEventListener('resize', calc);
}, []);
const STAGE_W = 1040;
const STAGE_H = 640;
// ── Card 1: PEDIDO (paper, neutral)
const card1 = {
kind: 'Pedido', num: 1, numColor: T.ink,
code: 'PO-112',
highlight: null,
rotate: -3,
x: 60, y: 160, delay: 0.1,
floatDelay: 0,
};
// ── Card 2: ALBARÁN (paper, amber problem row)
const card2 = {
kind: 'Albarán', num: 2, numColor: T.amberInk,
code: 'ALB-091',
highlight: { type: 'amber', label: 'Tornillo M8', value: '−5 uds', priceColor: T.amberInk, row: 0 },
rotate: 1.5,
x: 400, y: 130, delay: 0.5,
floatDelay: 1.5,
};
// ── Card 3: FACTURA (dark, coral problem row)
const card3 = {
kind: 'Factura', num: 3, numColor: T.coralLite,
code: 'FA-042',
highlight: { type: 'coral', label: 'Tornillo M8', value: '+0,20 €/u', priceColor: T.coralLite, row: 0 },
rotate: 4,
x: 740, y: 160, delay: 0.9,
floatDelay: 3,
dark: true,
};
// ── Mobile: stack vertically, no rotations
if (narrow) {
const MOBILE_H = 3 * 300 + 2 * 16 + 140;
return (
{[card1, card2, card3].map((c, i) => (
))}
);
}
return (
{/* Responsive wrapper */}
{/* Canvas */}
{/* Cards */}
{/* Alert pills */}
{/* A — amber, near Card 2 problem row */}
Faltan 5 uds
{/* B — coral, near Card 3 problem row */}
Precio subido +0,20 €/u
{/* C — dark, lower left */}
Sobrepago +45 €
{/* Final badge */}