// Shared visual atoms only. No fixture data — subjects, guides, and events all
// come from Supabase via subjects.js / state.js / events.js.

function FileGlyph({ kind }) {
  const labels = { pdf: 'PDF', ppt: 'PPT', doc: 'DOC', txt: 'MD', img: 'IMG' };
  return <div className={`file-glyph ${kind}`}>{labels[kind] || 'FILE'}</div>;
}

function Brand() {
  return (
    <div className="brand">
      <div className="mark">sb</div>
      <span>studybuddy</span>
    </div>
  );
}

function Avatar({ initials = 'U' }) {
  return <div className="avatar">{initials}</div>;
}

const Icon = {
  plus: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M7 2v10M2 7h10"/></svg>,
  search: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><circle cx="6" cy="6" r="4"/><path d="m12 12-2.5-2.5"/></svg>,
  upload: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 10V2m0 0L4 5m3-3 3 3M2 11v1h10v-1"/></svg>,
  sparkle: <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.4 4.2L12.5 7l-4.1 1.8L7 13l-1.4-4.2L1.5 7l4.1-1.8L7 1z"/></svg>,
  chevron: <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 2l3 3-3 3"/></svg>,
  book: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 2h4a2 2 0 0 1 2 2v8a2 2 0 0 0-2-2H2V2z"/><path d="M12 2H8a2 2 0 0 0-2 2v8a2 2 0 0 1 2-2h4V2z"/></svg>,
  clock: <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="6" cy="6" r="4.5"/><path d="M6 3.5V6l1.8 1.2"/></svg>,
  check: <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 6.5 5 9l4.5-5.5"/></svg>,
  dots: <svg width="14" height="4" viewBox="0 0 14 4" fill="currentColor"><circle cx="2" cy="2" r="1.3"/><circle cx="7" cy="2" r="1.3"/><circle cx="12" cy="2" r="1.3"/></svg>,
  calendar: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="10" height="9" rx="1.5"/><path d="M2 6h10M5 1.5v2M9 1.5v2"/></svg>,
};

Object.assign(window, { FileGlyph, Brand, Avatar, Icon });