/* ============================================================
   Nuad Now — shared UI components  (JSX)
   ============================================================ */

const ICON_PATHS = {
  calendar:'M7 3v3M17 3v3M4 9h16M5 6h14a1 1 0 011 1v12a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1z',
  clock:'M12 7v5l3 2 M12 21a9 9 0 100-18 9 9 0 000 18z',
  user:'M12 12a4 4 0 100-8 4 4 0 000 8z M4 20c0-4 3.5-6 8-6s8 2 8 6',
  check:'M5 13l4 4 10-11',
  chevR:'M9 6l6 6-6 6',
  chevL:'M15 6l-6 6 6 6',
  plus:'M12 5v14M5 12h14',
  logout:'M15 4h3a1 1 0 011 1v14a1 1 0 01-1 1h-3 M10 17l-5-5 5-5 M5 12h11',
  home:'M4 11l8-7 8 7 M6 10v9a1 1 0 001 1h10a1 1 0 001-1v-9',
  x:'M6 6l12 12M18 6L6 18',
  lock:'M7 11V8a5 5 0 0110 0v3 M5 11h14a1 1 0 011 1v8a1 1 0 01-1 1H5a1 1 0 01-1-1v-8a1 1 0 011-1z',
  mail:'M4 6h16a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1z M4 7l8 6 8-6',
  spark:'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',
  heart:'M12 20s-7-4.6-9.2-9C1.3 7.7 3 4.5 6.3 4.5c2 0 3.2 1.2 3.7 2.2.5-1 1.7-2.2 3.7-2.2 3.3 0 5 3.2 3.5 6.5C19 15.4 12 20 12 20z',
  cal_plus:'M7 3v3M17 3v3M4 9h16M5 6h14a1 1 0 011 1v12a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1z M12 13v4M10 15h4',
  pin:'M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z M12 12a2.5 2.5 0 100-5 2.5 2.5 0 000 5z',
  sun:'M12 4V2M12 22v-2M4 12H2M22 12h-2M6 6L4.5 4.5M18 6l1.5-1.5M6 18l-1.5 1.5M18 18l1.5 1.5 M12 16a4 4 0 100-8 4 4 0 000 8z',
  trophy:'M6 4h12v3a6 6 0 01-12 0V4z M6 6H3v1a4 4 0 004 4 M18 6h3v1a4 4 0 01-4 4 M12 13v4 M8 20h8l-1-3H9z',
  gift:'M4 11h16v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9z M3 7h18v4H3z M12 7v14 M12 7C12 7 10.8 3 8.6 3 7 3 6.4 5 8 7 M12 7c0 0 1.2-4 3.4-4C17 3 17.6 5 16 7',
  bell:'M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z M10 21a2 2 0 004 0',
  star:'M12 3l2.6 5.7L21 9.6l-4.6 4.3L17.6 21 12 17.6 6.4 21l1.2-7.1L3 9.6l6.4-.9z',
  medal:'M12 14a5 5 0 100-10 5 5 0 000 10z M8.5 13L7 22l5-2.5L17 22l-1.5-9',
};

function Icon({name, size=22, sw=2.4, style}){
  const d = ICON_PATHS[name] || '';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      style={{display:'block', flex:'0 0 auto', ...style}}>
      {d.split(' M').map((seg,i)=> <path key={i} d={(i?'M':'')+seg} />)}
    </svg>
  );
}

function Glyph({kind, size=34, color='currentColor'}){
  const s={width:size,height:size,display:'block'};
  if(kind==='flower'){
    return (
      <svg viewBox="0 0 48 48" style={s} fill={color}>
        {[0,1,2,3,4].map(i=>(
          <ellipse key={i} cx="24" cy="13" rx="6.4" ry="10"
            transform={`rotate(${i*72} 24 24)`} opacity="0.92"/>
        ))}
        <circle cx="24" cy="24" r="5" fill="#fff" opacity=".55"/>
      </svg>
    );
  }
  if(kind==='spark'){
    return (
      <svg viewBox="0 0 48 48" style={s} fill={color}>
        <path d="M24 4l4.2 12.3L40 20l-11.8 3.7L24 36l-4.2-12.3L8 20l11.8-3.7z"/>
        <circle cx="38" cy="36" r="3"/>
      </svg>
    );
  }
  if(kind==='drop'){
    return (
      <svg viewBox="0 0 48 48" style={s} fill={color}>
        <path d="M24 6c7 9 11 14 11 20a11 11 0 11-22 0c0-6 4-11 11-20z"/>
        <ellipse cx="19.5" cy="28" rx="3" ry="5" fill="#fff" opacity=".5"/>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 48 48" style={s} fill={color}>
      <path d="M38 8C18 8 8 20 8 38c18 0 30-10 30-30z"/>
      <path d="M14 34C22 26 30 18 36 12" stroke="#fff" strokeWidth="2.4" fill="none" opacity=".55" strokeLinecap="round"/>
    </svg>
  );
}

function Logo({h=42}){
  return <img src="assets/logo-cut.png" alt="Nuad Now" style={{height:h, display:'block'}} draggable="false"/>;
}

function Mascot({w=200, bob=true, className='', style}){
  return (
    <img src="assets/character-cut.png" alt="คุณนวด มาสคอต"
      className={`mascot ${bob?'bob':''} ${className}`} draggable="false"
      style={{width:w, height:'auto', ...style}}/>
  );
}

function Bubble({children, tail='tail-bl', lead=false, style}){
  return <div className={`bubble ${tail} ${lead?'lead':''}`} style={style}>{children}</div>;
}

function Stars({n=5}){
  return <span className="stars">{'★★★★★'.slice(0,n)}<span style={{color:'var(--cream-300)'}}>{'★★★★★'.slice(0,5-n)}</span></span>;
}

function Toasts({items}){
  return (
    <div className="toast-wrap">
      {items.map(t=>(
        <div className="toast" key={t.id}>
          <span style={{color:'var(--blush)'}}><Icon name={t.icon||'check'} size={18}/></span>
          {t.msg}
        </div>
      ))}
    </div>
  );
}

function Confetti({show}){
  if(!show) return null;
  const cols=['var(--accent)','var(--gold)','var(--sage)','var(--blush)','var(--accent-600)'];
  const bits=Array.from({length:60}).map((_,i)=>({
    left:Math.random()*100, delay:Math.random()*0.5, dur:1.6+Math.random()*1.6,
    col:cols[i%cols.length], rot:Math.random()*360, w:7+Math.random()*7,
  }));
  return (
    <div className="confetti">
      {bits.map((b,i)=>(
        <i key={i} style={{left:b.left+'%', background:b.col, width:b.w, height:b.w*1.4,
          transform:`rotate(${b.rot}deg)`, animationDuration:b.dur+'s', animationDelay:b.delay+'s'}}/>
      ))}
    </div>
  );
}

Object.assign(window, { Icon, Glyph, Logo, Mascot, Bubble, Stars, Toasts, Confetti });