// Floating chat widget — LINE + Facebook + phone, bottom-right
function ChatWidget() {
  const [open, setOpen] = React.useState(false);
  const items = [
    { label: 'LINE OA', sub: '@bestdaily', url: 'https://line.me/R/ti/p/@bestdaily',
      bg: '#06c755', icon: 'L' },
    { label: 'Facebook · องค์กร', sub: 'BEST Investigation', url: 'https://www.facebook.com/bestinves',
      bg: '#1877f2', icon: 'f' },
    { label: 'Facebook · ทำความสะอาด', sub: 'Best Daily', url: 'https://www.facebook.com/bestdailycleaning',
      bg: '#1877f2', icon: 'f' },
    { label: 'โทรศัพท์', sub: '02-111-5455', url: 'tel:021115455',
      bg: '#2d6a7a', icon: '☎' },
  ];
  return (
    <div style={{ position: 'fixed', bottom: 32, right: 32, zIndex: 700,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 14 }}>
      {open && items.map((it, i) => (
        <a key={i} href={it.url} target={it.url.startsWith('http') ? '_blank' : '_self'} rel="noopener"
          style={{
            display: 'flex', alignItems: 'center', gap: 14, padding: '0.7rem 1rem',
            background: '#fbfaf5', boxShadow: '0 6px 22px rgba(26,43,74,0.18)',
            minWidth: 240, transform: `translateX(0)`, animation: `slideIn 0.3s ease ${i*0.04}s both`,
          }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%', background: it.bg,
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: "'Jost',sans-serif", fontWeight: 600, fontSize: '1rem',
          }}>{it.icon}</div>
          <div>
            <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 600, fontSize: '0.68rem',
              letterSpacing: '0.22em', textTransform: 'uppercase', color: '#1a2b4a' }}>{it.label}</div>
            <div style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '0.9rem',
              color: '#4a5260', marginTop: 2 }}>{it.sub}</div>
          </div>
        </a>
      ))}
      <button onClick={() => setOpen(o => !o)}
        aria-label={open ? 'ปิด' : 'ติดต่อเรา'}
        style={{
          width: 64, height: 64, borderRadius: '50%', border: 'none', cursor: 'pointer',
          background: open ? '#1a2b4a' : '#2d6a7a', color: '#fbfaf5',
          fontSize: '1.6rem', boxShadow: '0 8px 24px rgba(26,43,74,0.28)',
          transition: 'transform 0.25s, background 0.25s',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
        }}>{open ? '×' : '✉'}</button>
      <style>{`@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }`}</style>
    </div>
  );
}
window.ChatWidget = ChatWidget;