// pesito — shared visual atoms (logo, icons, brand mark)

const PesitoMark = ({ size = 28, color }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }}>
    <circle cx="16" cy="16" r="15.5" fill="none" stroke={color || 'currentColor'} strokeWidth="1"/>
    <text x="16" y="22" textAnchor="middle" fontFamily="Antonio, sans-serif" fontWeight="600" fontSize="20" fill={color || 'currentColor'}>p.</text>
  </svg>
);

const Wordmark = ({ color }) => (
  <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, color: color || 'var(--ink)' }}>
    <PesitoMark color={color} />
    <span style={{
      fontFamily: 'var(--font-display)',
      fontSize: 22,
      fontWeight: 600,
      letterSpacing: '-0.01em',
      lineHeight: 1,
    }}>pesito</span>
  </div>
);

// Tiny iconset (1.5px hairlines, iOS feel)
const I = {
  arrow: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  arrowDown: (p = {}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 9l6 6 6-6"/></svg>,
  check: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12.5l4.5 4.5L19 7"/></svg>,
  shield: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l8 3v6c0 4.5-3.4 8.5-8 9-4.6-.5-8-4.5-8-9V6l8-3z"/><path d="M9 12.5l2 2 4-4"/></svg>,
  bolt: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"/></svg>,
  doc: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6M9 14h6M9 18h4"/></svg>,
  plus: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  minus: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M5 12h14"/></svg>,
  clock: (p = {}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  spei: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 12h12M11 8l4 4-4 4"/><path d="M19 5v14"/></svg>,
  menu: (p = {}) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  close: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  user: (p = {}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>,
  bank: (p = {}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 10l9-6 9 6"/><path d="M5 10v9M19 10v9M9 10v9M15 10v9M3 21h18"/></svg>,
  sparkle: (p = {}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg>,
  ineUp: (p = {}) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M14 9h4M14 13h4M5 16c1-1.5 2.4-2.4 4-2.4s3 .9 4 2.4"/></svg>,
};

// Format MX currency
const fmtMX = (n) => '$' + (Math.round(n)).toLocaleString('en-US') + ' MXN';
const fmtMXshort = (n) => '$' + (Math.round(n)).toLocaleString('en-US');

// Animated rolling number
const Rolling = ({ value, format = (v) => v, prefix = '', suffix = '' }) => {
  const [display, setDisplay] = React.useState(value);
  const ref = React.useRef(value);
  React.useEffect(() => {
    const start = ref.current;
    const end = value;
    if (start === end) return;
    const t0 = performance.now();
    const duration = 280;
    let raf;
    const step = (t) => {
      const e = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - e, 3);
      setDisplay(start + (end - start) * eased);
      if (e < 1) raf = requestAnimationFrame(step);
      else ref.current = end;
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return <span className="tabular">{prefix}{format(display)}{suffix}</span>;
};

Object.assign(window, {
  PesitoMark, Wordmark, I, fmtMX, fmtMXshort, Rolling,
});
