// Icons + decorative primitives shared across the report.
// Mirrors the iCarPro design system (mota-* palette is BLUE despite the names)

const RI = {
  Down: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 8l5 5 5-5"/></svg>
  ),
  Right: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10h12M11 5l5 5-5 5"/></svg>
  ),
  Check: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10.5l4 4 8-9"/></svg>
  ),
  Cross: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"><path d="M5 5l10 10M15 5L5 15"/></svg>
  ),
  Spark: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.5l1.6 4.9 4.9 1.6-4.9 1.6L10 14.5 8.4 9.6 3.5 8l4.9-1.6L10 1.5z"/></svg>
  ),
  ChevronFat: ({ c = 'w-12 h-12' }) => (
    <svg className={c} viewBox="0 0 60 40" fill="currentColor"><path d="M30 38L2 8 12 0l18 19L48 0l10 8z"/></svg>
  ),
  Mail: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2.5" y="4" width="15" height="12" rx="2"/><path d="M3 6l7 5 7-5"/></svg>
  ),
  Doc: ({ c = 'w-4 h-4' }) => (
    <svg className={c} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 2h7l3 3v13H5z"/><path d="M12 2v3h3M7 10h6M7 13h6M7 7h3"/></svg>
  ),
};

// Stamp — circular rotated badge (ported from iCarPro design system)
function RStamp({ children, color = 'bg-mota-yellow text-mota-black', rotate = -8, size = 'w-20 h-20', className = '' }) {
  return (
    <div className={`${size} rounded-full ${color} grid place-items-center text-center font-extrabold shadow-md ${className}`}
         style={{ transform: `rotate(${rotate}deg)`, lineHeight: 1.05 }}>
      <div>{children}</div>
    </div>
  );
}

// Red highlight (blue in this brand)
function RH({ children }) {
  return <span className="text-mota-red font-black">{children}</span>;
}
// Yellow highlighter background
function RY({ children }) {
  return (
    <span className="relative inline-block">
      <span className="absolute inset-x-0 bottom-[8%] h-[40%] bg-mota-yellow -z-0" />
      <span className="relative z-10">{children}</span>
    </span>
  );
}

// Section header — kicker + title + lead, dark or light
function RSectionTitle({ kicker, n, title, lead, dark }) {
  return (
    <div className="reveal mb-10">
      <div className="flex items-center gap-3 mb-4">
        {n && (
          <RStamp size="w-14 h-14" rotate={-8} color="bg-mota-red text-white">
            <div className="text-[8.5px] font-black tracking-[0.18em]">SEC</div>
            <div className="text-[18px] font-black leading-none">{n}</div>
          </RStamp>
        )}
        {kicker && (
          <span className={`px-3 py-1 rounded-full text-[10.5px] font-black tracking-[0.18em] ${dark ? 'bg-white/15 text-white' : 'bg-mota-red/10 text-mota-red'}`}>
            {kicker}
          </span>
        )}
      </div>
      <h2 className={`font-black tracking-tight leading-[1.15] ${dark ? 'text-white' : 'text-mota-black'} text-[34px]`}>
        {title}
      </h2>
      {lead && <p className={`mt-3 leading-relaxed ${dark ? 'text-white/75' : 'text-mota-black/65'} text-[14.5px] max-w-2xl`}>{lead}</p>}
    </div>
  );
}

// Source line (dashed top border, italic small text)
function RSource({ children }) {
  return (
    <div className="mt-4 pt-3 border-t border-dashed border-mota-black/15 text-[11px] text-mota-black/45 font-medium leading-relaxed">
      <span className="font-black tracking-wider mr-2 text-mota-black/55">SOURCE</span>{children}
    </div>
  );
}

Object.assign(window, { RI, RStamp, RH, RY, RSectionTitle, RSource });
