/* Small shared primitives used across the design-system artboards.
   Exposed on window so other Babel scripts can import them. */

const RVDE_PALETTE = {
  bone: '#f2e9d2',
  bone2:'#ece1c4',
  bone3:'#e3d6b3',
  tobacco: '#2a1d12',
  tobacco2:'#1f140b',
  ink: '#1f1812',
  ink2:'#3a2e22',
  ink3:'#6b5a47',
  clay: '#a86a3d',
  clay2:'#8d5530',
  clayDeep:'#963f25',
  sand: '#c9a661',
  moss: '#4a4a30',
  rule: '#c7b594',
  rule2:'#d8c9a3',
  white:'#ffffff',
};

/* SectionMark — small caps mono label, e.g. "§ 04 · Componentes" */
function SectionMark({ n, label, style }) {
  return (
    <div className="smallcaps" style={{display:'flex',alignItems:'center',gap:8,...style}}>
      <span style={{fontFamily:'var(--display)', fontStyle:'italic', fontSize:13, color:'var(--clay)', letterSpacing:0}}>§</span>
      <span className="tab">{String(n).padStart(2,'0')}</span>
      <span>·</span>
      <span>{label}</span>
    </div>
  );
}

/* Pad — uniform inner padding for artboards */
function Pad({ children, x=40, y=40, style, ...rest }) {
  return <div {...rest} style={{padding: `${y}px ${x}px`, height:'100%', display:'flex', flexDirection:'column', ...style}}>{children}</div>;
}

/* Title — Fraunces display */
function Title({ children, size=44, weight=400, italic=false, soft, wonk, style }) {
  return (
    <h2 style={{
      fontFamily:'var(--display)', fontWeight:weight, fontSize:size,
      lineHeight:1.05, letterSpacing:-0.02, margin:0,
      fontStyle: italic ? 'italic' : 'normal',
      fontVariationSettings: [
        soft != null ? `"SOFT" ${soft}` : null,
        wonk != null ? `"WONK" ${wonk}` : null,
      ].filter(Boolean).join(', ') || undefined,
      ...style,
    }}>{children}</h2>
  );
}

/* Small inline divider */
function Hr({ color, style }) {
  return <hr className="rule" style={{borderColor: color || 'var(--rule)', ...style}} />;
}

/* Tag — non-state pill, used in tables */
function Tag({ children, color, style }) {
  return (
    <span style={{
      display:'inline-flex',alignItems:'center',gap:6,
      fontFamily:'var(--mono)', fontSize:10.5, textTransform:'uppercase',
      letterSpacing:0.08, padding:'3px 7px', borderRadius:3,
      border:'0.5px solid var(--rule)', color: color || 'inherit',
      ...style,
    }}>{children}</span>
  );
}

/* Swatch — color swatch with metadata */
function Swatch({ name, hex, role, dark, h, w }) {
  return (
    <div style={{display:'flex',flexDirection:'column',gap:8, width: w || 'auto'}}>
      <div style={{
        background: hex, height: h || 120, borderRadius: 4,
        border: '0.5px solid rgba(0,0,0,0.08)',
        position:'relative', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', bottom:8, left:10,
          fontFamily:'var(--mono)', fontSize:10, letterSpacing:0.06,
          color: dark ? 'rgba(242,233,210,0.7)' : 'rgba(31,24,18,0.5)',
        }}>{hex.toUpperCase()}</div>
      </div>
      <div>
        <div style={{fontFamily:'var(--display)', fontSize:18, fontWeight:400, lineHeight:1.1}}>{name}</div>
        {role && <div className="smallcaps" style={{marginTop:2}}>{role}</div>}
      </div>
    </div>
  );
}

/* PlaceholderImg — line-art apothecary placeholder (clay on bone) */
function PlaceholderImg({ kind='bottle', w=80, h=120, color, style }) {
  const c = color || 'var(--clay)';
  const shapes = {
    bottle: (
      <g fill="none" stroke={c} strokeWidth="0.8">
        <path d="M30 8 h20 v12 h-20 z" />
        <path d="M22 22 h36 v50 a8 8 0 0 1 -8 8 h-20 a8 8 0 0 1 -8 -8 z" />
        <line x1="28" y1="50" x2="52" y2="50" />
        <text x="40" y="58" fontSize="3.5" fontFamily="ui-monospace" textAnchor="middle" fill={c} stroke="none">RVDE</text>
      </g>
    ),
    tube: (
      <g fill="none" stroke={c} strokeWidth="0.8">
        <path d="M30 8 h20 v6 h-20 z" />
        <path d="M26 14 h28 v60 l-4 6 h-20 l-4 -6 z" />
      </g>
    ),
    jar: (
      <g fill="none" stroke={c} strokeWidth="0.8">
        <ellipse cx="40" cy="22" rx="20" ry="6" />
        <path d="M20 22 v50 a20 6 0 0 0 40 0 v-50" />
        <ellipse cx="40" cy="22" rx="20" ry="6" />
        <line x1="22" y1="50" x2="58" y2="50" />
      </g>
    ),
    bar: (
      <g fill="none" stroke={c} strokeWidth="0.8">
        <rect x="18" y="28" width="44" height="36" rx="2" />
        <text x="40" y="48" fontSize="4" fontFamily="ui-monospace" textAnchor="middle" fill={c} stroke="none">RVDE</text>
        <text x="40" y="55" fontSize="2.5" fontFamily="ui-monospace" textAnchor="middle" fill={c} stroke="none">SOAP</text>
      </g>
    ),
  };
  return (
    <svg viewBox="0 0 80 100" width={w} height={h} style={style}>
      {shapes[kind] || shapes.bottle}
    </svg>
  );
}

Object.assign(window, { RVDE_PALETTE, SectionMark, Pad, Title, Hr, Tag, Swatch, PlaceholderImg });