// Shared primitives — small UI atoms used everywhere

const Pill = ({ children, tone = 'default', style = {} }) => {
  const tones = {
    default: { bg: 'rgba(14,26,20,0.04)', fg: 'var(--ink-2)', border: 'rgba(14,26,20,0.08)' },
    primary: { bg: 'rgba(27,67,50,0.08)', fg: 'var(--primary)', border: 'rgba(27,67,50,0.18)' },
    accent:  { bg: 'var(--accent-soft)', fg: '#7A4A28', border: 'rgba(232,168,124,0.4)' },
    success: { bg: 'rgba(79,121,66,0.1)', fg: 'var(--ok)', border: 'rgba(79,121,66,0.2)' },
    warn:    { bg: 'rgba(184,92,56,0.1)', fg: 'var(--warn)', border: 'rgba(184,92,56,0.2)' },
  };
  const t = tones[tone] || tones.default;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'4px 10px', borderRadius:999,
      background: t.bg, color: t.fg, border:`1px solid ${t.border}`,
      fontSize:11, fontWeight:500, letterSpacing:'0.02em',
      textTransform:'uppercase', fontFamily:"'JetBrains Mono', monospace",
      ...style
    }}>{children}</span>
  );
};

const Btn = ({ children, kind = 'primary', size = 'md', as = 'button', ...rest }) => {
  const sizes = { sm:{p:'8px 14px', f:13}, md:{p:'12px 20px', f:14}, lg:{p:'16px 28px', f:15} };
  const s = sizes[size];
  const styles = {
    primary: { background:'var(--ink)', color:'#FAFAF7', border:'1px solid var(--ink)' },
    accent:  { background:'var(--accent)', color:'var(--ink)', border:'1px solid var(--accent)' },
    ghost:   { background:'transparent', color:'var(--ink)', border:'1px solid var(--line)' },
    light:   { background:'#fff', color:'var(--ink)', border:'1px solid var(--line)' },
  };
  const Comp = as;
  return (
    <Comp {...rest} style={{
      ...styles[kind],
      padding:s.p, fontSize:s.f, fontWeight:500,
      borderRadius:8, letterSpacing:'-0.005em',
      transition:'transform .15s ease, opacity .15s ease',
      display:'inline-flex', alignItems:'center', gap:8,
      ...(rest.style||{}),
    }}
    onMouseDown={e => e.currentTarget.style.transform='scale(0.98)'}
    onMouseUp={e => e.currentTarget.style.transform='scale(1)'}
    onMouseLeave={e => e.currentTarget.style.transform='scale(1)'}
    >{children}</Comp>
  );
};

// Tiny iconography: simple geometric, never elaborate
const Ico = {
  arrow: (p={}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M3 7h8m0 0L8 4m3 3L8 10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  check: (p={}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M3 7.5L6 10.5L11 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  dot: (p={}) => <svg width="8" height="8" viewBox="0 0 8 8" {...p}><circle cx="4" cy="4" r="3" fill="currentColor"/></svg>,
  spark: (p={}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M7 1v3M7 10v3M1 7h3M10 7h3M2.5 2.5l2 2M9.5 9.5l2 2M2.5 11.5l2-2M9.5 4.5l2-2" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>,
  paw: (p={}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" {...p}><circle cx="3.5" cy="4" r="1.3"/><circle cx="7" cy="2.7" r="1.3"/><circle cx="10.5" cy="4" r="1.3"/><ellipse cx="7" cy="9" rx="3" ry="2.5"/></svg>,
  calendar: (p={}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><rect x="2" y="3" width="10" height="9" rx="1" stroke="currentColor" strokeWidth="1.2"/><path d="M2 6h10M5 1.5v2M9 1.5v2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>,
  message: (p={}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M2 4a2 2 0 012-2h6a2 2 0 012 2v4a2 2 0 01-2 2H6l-3 2.5V10a2 2 0 01-1-2V4z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/></svg>,
};

// Section header — "01 / Operación" style
const SectionTag = ({ num, label, style={} }) => (
  <div style={{
    display:'flex', alignItems:'center', gap:12,
    fontFamily:"'JetBrains Mono', monospace", fontSize:11,
    color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em',
    ...style
  }}>
    <span>{num}</span>
    <span style={{ height:1, width:32, background:'var(--line)' }}/>
    <span>{label}</span>
  </div>
);

// Slogan line with a hand-drawn-ish underline beneath one word
const SloganUnderline = ({ children, style={} }) => (
  <span style={{ position:'relative', display:'inline-block', ...style }}>
    {children}
    <svg viewBox="0 0 200 10" preserveAspectRatio="none" style={{
      position:'absolute', left:'-2%', right:'-2%', bottom:'-6px',
      width:'104%', height:10, color:'var(--accent)'
    }}>
      <path d="M2 6 Q 50 2, 100 5 T 198 4" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    </svg>
  </span>
);

window.Pill = Pill;
window.Btn = Btn;
window.Ico = Ico;
window.SectionTag = SectionTag;
window.SloganUnderline = SloganUnderline;