// Shared atoms
const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" className="arrow">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Check = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className="check">
    <path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const X = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className="x">
    <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
  </svg>
);

const Plus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
  </svg>
);

const SectionLabel = ({ num, label, right }) => (
  <div className="section-label">
    <div style={{ display: "flex", gap: 16, alignItems: "baseline" }}>
      <span className="num">{num}</span>
      <span className="eyebrow" style={{ borderTop: 0 }}>{label}</span>
    </div>
    {right && <span className="num">{right}</span>}
  </div>
);

Object.assign(window, { Arrow, Check, X, Plus, SectionLabel });