/* ===== HealSpace Website UI Kit — shared atoms ===== */

function Icon({ name, size = 20, color = 'currentColor', stroke = 1.75, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, 'stroke-width': stroke },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', width: size, height: size, color, ...style }} />;
}

function Logo({ height = 40, variant = 'full' }) {
  const src = variant === 'mark' ? window.asset('./assets/logo-mark.png') : window.asset('./assets/logo-wordmark.png');
  return <img src={src} alt="HealSpace Psychological Clinic" style={{ height, width: 'auto', display: 'block' }} />;
}

function Eyebrow({ children, color }) {
  return <div style={{
    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13,
    letterSpacing: '.28em', textTransform: 'uppercase',
    color: color || 'var(--hs-gold-deep)',
  }}>{children}</div>;
}

function Btn({ children, kind = 'primary', size = 'md', icon, onClick, style = {} }) {
  const base = {
    fontFamily: 'var(--font-display)', fontWeight: 600, border: 0, cursor: 'pointer',
    borderRadius: 'var(--r-pill)', display: 'inline-flex', alignItems: 'center', gap: 9,
    transition: 'all var(--dur) var(--ease-soft)', textDecoration: 'none', whiteSpace: 'nowrap',
    padding: size === 'lg' ? '16px 30px' : size === 'sm' ? '9px 18px' : '13px 26px',
    fontSize: size === 'lg' ? 17 : size === 'sm' ? 14 : 15,
  };
  const kinds = {
    primary: { background: 'var(--hs-sky)', color: '#fff', boxShadow: 'var(--shadow-sky)' },
    warm:    { background: 'var(--hs-coral)', color: '#fff' },
    ghost:   { background: 'var(--hs-sky-soft)', color: 'var(--hs-sky-deep)' },
    outline: { background: 'transparent', color: 'var(--hs-teal)', boxShadow: 'inset 0 0 0 1.5px var(--hs-line)' },
    white:   { background: '#fff', color: 'var(--hs-sky-deep)', boxShadow: 'var(--shadow-md)' },
  };
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);
  const hoverStyle = hover ? {
    primary: { background: 'var(--hs-sky-deep)' },
    warm: { background: 'var(--hs-coral-deep)' },
    ghost: { background: '#cfe9f5' },
    outline: { boxShadow: 'inset 0 0 0 1.5px var(--hs-sky)', color: 'var(--hs-sky-deep)' },
    white: { transform: 'translateY(-1px)' },
  }[kind] : {};
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
      style={{ ...base, ...kinds[kind], ...hoverStyle, transform: press ? 'scale(.97)' : (hoverStyle.transform || 'none'), ...style }}>
      {icon && <Icon name={icon} size={size === 'lg' ? 20 : 18} />}
      {children}
    </button>
  );
}

function Section({ id, children, bg = 'transparent', style = {} }) {
  return (
    <section id={id} style={{ background: bg, padding: '0', ...style }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>{children}</div>
    </section>
  );
}

/* Hand-made confetti sprinkle — scatter in margins. items: [{type,x,y,c,r}] */
function Confetti({ items }) {
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0 }}>
      {items.map((it, i) => {
        const pos = { position: 'absolute', left: it.x, top: it.y };
        if (it.type === 'sq') return (
          <svg key={i} style={{ ...pos, transform: `rotate(${it.r || 0}deg)` }} width="44" height="24" viewBox="0 0 40 22">
            <path d="M2 14 C8 2,14 2,20 12 S32 22,38 8" fill="none" stroke={it.c} strokeWidth="3" strokeLinecap="round" />
          </svg>);
        if (it.type === 'dot') return <span key={i} style={{ ...pos, width: it.s || 9, height: it.s || 9, borderRadius: '50%', background: it.c }} />;
        if (it.type === 'dash') return <span key={i} style={{ ...pos, width: 24, height: 6, borderRadius: 99, background: it.c, transform: `rotate(${it.r || 0}deg)` }} />;
        if (it.type === 'tri') return <span key={i} style={{ ...pos, width: 0, height: 0, borderLeft: '7px solid transparent', borderRight: '7px solid transparent', borderBottom: `12px solid ${it.c}`, transform: `rotate(${it.r || 0}deg)` }} />;
        return null;
      })}
    </div>
  );
}

Object.assign(window, { Icon, Logo, Eyebrow, Btn, Section, Confetti });