// ui.jsx — atoms: Placeholder, Marquee, icons, buttons

function Placeholder({ kind='stripe', label='', children, className='' }){
  // kind: 'stripe' | 'tonal' | 'dark'
  const cls = `placeholder ${kind==='tonal'?'tonal':kind==='dark'?'tonal-dark':''} ${className}`;
  const lines = label.split('\n');
  return (
    <div className={cls}>
      <span>
        {lines[0] && <em>{lines[0]}</em>}
        {lines.slice(1).join(' · ')}
      </span>
      {children}
    </div>
  );
}

function Marquee({ items, fast=false, inv=false }){
  const repeated = [...items, ...items, ...items, ...items];
  return (
    <div className={`marquee ${fast?'fast':''} ${inv?'inv':''}`}>
      <div className="marquee-track">
        {repeated.map((it, i) => (
          <span className="marquee-item" key={i}>
            {it}
            <span className="star">✺</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function IconBag({ size=14 }){
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M3 5h8l-.7 7H3.7L3 5z"/>
      <path d="M5 5V3.5a2 2 0 014 0V5"/>
    </svg>
  );
}

function IconArrow({ size=12, dir='right' }){
  const r = dir==='down'?90:dir==='left'?180:dir==='up'?270:0;
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" style={{transform:`rotate(${r}deg)`}}>
      <path d="M2 6h8M7 3l3 3-3 3"/>
    </svg>
  );
}

function IconX({ size=14 }){
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M3 3l8 8M11 3l-8 8"/>
    </svg>
  );
}

function IconCheck({ size=11 }){
  return (
    <svg width={size} height={size} viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M2 6l2.5 2.5L9 3"/>
    </svg>
  );
}

function Btn({ children, ghost=false, tiny=false, huge=false, onClick, type, disabled, className='', as:As='button', href, ...rest }){
  const cls = `btn ${ghost?'ghost':''} ${tiny?'tiny':''} ${huge?'huge':''} ${className}`;
  if (href) return <a href={href} className={cls} onClick={onClick} {...rest}>{children}</a>;
  return <As className={cls} onClick={onClick} type={type||'button'} disabled={disabled} {...rest}>{children}</As>;
}

// Sun-like decorative element that drifts with scroll
function Sun({ style, parallax=0.15 }){
  const ref = React.useRef(null);
  React.useEffect(()=>{
    const onScroll = () => {
      if (!ref.current) return;
      const y = window.scrollY * parallax;
      ref.current.style.setProperty('--py', `${y}px`);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, [parallax]);
  return <div className="sun" ref={ref} style={{transform:`translateY(var(--py,0))`, ...style}} aria-hidden="true" />;
}

Object.assign(window, { Placeholder, Marquee, IconBag, IconArrow, IconX, IconCheck, Btn, Sun });