// Shared UI bits + section header helper
const Tag = ({ children, dot = true }) =>
<span className="tag">
    {dot && <span className="tag-dot" />}
    {children}
  </span>;


const SectionHead = ({ num, title, kicker }) =>
<div className="section-head">
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>
      <span className="section-num">{num}</span>
      <span className="section-title">— {title}</span>
    </div>
    {kicker && <span className="mono" style={{ opacity: 0.6 }}>{kicker}</span>}
  </div>;


const Tick = () =>
<span className="tick">
    <svg viewBox="0 0 12 12" fill="none">
      <path d="M2 6.5L5 9L10 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </span>;


const Arrow = () => <span className="arrow" />;

const Logo = () =>
<a href="#" className="logo">
    <span className="logo-mark" />
    <span>Orden Claro</span>
  </a>;


// Vertical rotating label
const RotLabel = ({ children, side = 'left' }) =>
<div style={{
  position: 'absolute',
  [side]: 16,
  top: 32,
  height: 200,
  display: 'flex',
  alignItems: 'flex-start'
}}>
    <div className="rot-label" style={{ opacity: 0.6 }}>{children}</div>
  </div>;


Object.assign(window, { Tag, SectionHead, Tick, Arrow, Logo, RotLabel });