// OS Builder — shared atoms: icons, logo, wordmark.
// Globals exposed to window for cross-file use.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ============== ICONS (inline SVG, lucide-style) ============== */
const Icon = ({ d, size=20, stroke='currentColor', fill='none', sw=1.8, children, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw}
       strokeLinecap="round" strokeLinejoin="round" style={style}>
    {d ? <path d={d}/> : children}
  </svg>
);

const IconCheck   = (p) => <Icon {...p} d="m5 12 5 5 9-12"/>;
const IconArrow   = (p) => <Icon {...p} d="M5 12h14m-6-6 6 6-6 6"/>;
const IconChevron = (p) => <Icon {...p} d="m9 18 6-6-6-6"/>;
const IconPlus    = (p) => <Icon {...p} d="M12 5v14M5 12h14"/>;
const IconX       = (p) => <Icon {...p} d="M18 6 6 18M6 6l12 12"/>;
const IconDrag    = (p) => <Icon {...p}><path d="M8 6h.01M16 6h.01M8 12h.01M16 12h.01M8 18h.01M16 18h.01"/></Icon>;
const IconStar    = (p) => <Icon {...p} d="m12 2 3 7 7 .8-5.4 4.8L18 22l-6-3.7L6 22l1.4-7.4L2 9.8 9 9z"/>;
const IconInfo    = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></Icon>;

/* ============== LOGO ============== */
const Logo = ({ size=32, tile=false, tileColor='var(--ink)' }) => {
  const inner = (
    <img src="assets/logo.jpg" alt="HomePro"
      style={{ width:size, height:size, display:'block', objectFit:'contain' }}
    />
  );
  if (tile) {
    return (
      <div style={{ width:size+6, height:size+6, borderRadius:(size+6)*0.28, background:tileColor, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
        {inner}
      </div>
    );
  }
  return <span style={{ display:'inline-flex', flexShrink:0 }}>{inner}</span>;
};

const Wordmark = ({ size=18, color='var(--ink)' }) => (
  <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:size, letterSpacing:'-0.02em', color, lineHeight:1 }}>
    home<span style={{ color:'var(--lilac-600)' }}>pro</span>
  </span>
);

Object.assign(window, {
  useState, useEffect, useRef, useMemo, useCallback,
  Icon, IconCheck, IconArrow, IconChevron, IconPlus, IconX, IconDrag, IconStar, IconInfo,
  Logo, Wordmark,
});