/* Icon set + reusable components for เฮียบัญชีบอต landing */

const Icon = ({ name, size = 24 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "chat":
      return (<svg {...props}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>);
    case "chart":
      return (<svg {...props}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>);
    case "tag":
      return (<svg {...props}><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>);
    case "bell":
      return (<svg {...props}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>);
    case "download":
      return (<svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>);
    case "shield":
      return (<svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>);
    case "check":
      return (<svg {...props}><polyline points="20 6 9 17 4 12"/></svg>);
    case "line":
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M12 2C6.48 2 2 5.85 2 10.6c0 4.26 3.56 7.83 8.36 8.5.32.07.76.21.87.49.1.25.07.65.03.91l-.14.84c-.04.25-.2.97.85.53 1.06-.44 5.7-3.36 7.78-5.75C21.16 14.5 22 12.66 22 10.6 22 5.85 17.52 2 12 2zM7.96 13.48H5.95c-.29 0-.53-.24-.53-.53V8.92c0-.29.24-.53.53-.53s.53.24.53.53v3.5h1.48c.29 0 .53.24.53.53s-.24.53-.53.53zm2.07-.53c0 .29-.24.53-.53.53s-.53-.24-.53-.53V8.92c0-.29.24-.53.53-.53s.53.24.53.53v4.03zm4.81 0c0 .23-.14.43-.36.5-.06.02-.11.03-.17.03-.17 0-.32-.07-.42-.21l-2.06-2.81v2.49c0 .29-.24.53-.53.53s-.53-.24-.53-.53V8.92c0-.23.14-.43.36-.5.05-.02.11-.03.17-.03.16 0 .32.08.42.21l2.07 2.81V8.92c0-.29.24-.53.53-.53s.53.24.53.53v4.03zm3.23-2.55c.29 0 .53.24.53.53s-.24.53-.53.53h-1.48v.95h1.48c.29 0 .53.24.53.53s-.24.53-.53.53h-2.01c-.29 0-.53-.24-.53-.53V8.92c0-.29.24-.53.53-.53h2.01c.29 0 .53.24.53.53s-.24.53-.53.53h-1.48v.95h1.48z"/></svg>);
    case "phone":
      return (<svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>);
    case "lightning":
      return (<svg {...props}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>);
    case "wallet":
      return (<svg {...props}><path d="M20 12V8H6a2 2 0 0 1 0-4h12v4"/><path d="M4 6v12a2 2 0 0 0 2 2h14v-4"/><path d="M18 12a2 2 0 0 0 0 4h4v-4z"/></svg>);
    case "receipt":
      return (<svg {...props}><path d="M20 22V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v18l3-2 3 2 3-2 3 2 2-2z"/><line x1="10" y1="8" x2="16" y2="8"/><line x1="10" y1="12" x2="16" y2="12"/><line x1="10" y1="16" x2="13" y2="16"/></svg>);
    case "calendar":
      return (<svg {...props}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>);
    case "arrow":
      return (<svg {...props}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>);
    case "fb":
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>);
    case "ig":
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M12 2.2c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2zm0 5.4a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8zm0 7.26a2.86 2.86 0 1 1 0-5.72 2.86 2.86 0 0 1 0 5.72zm5.6-7.44a1.03 1.03 0 1 1-2.06 0 1.03 1.03 0 0 1 2.06 0z"/></svg>);
    case "tt":
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.66a8.16 8.16 0 0 0 4.77 1.52V6.69a4.85 4.85 0 0 1-1.84-.01z"/></svg>);
    default: return null;
  }
};

// LINE Chat bubble component
const Bubble = ({ from, children }) => (
  <div className={`bubble from-${from}`}>{children}</div>
);

// Floating animated card
const FloatCard = ({ className, icon, t, v, iconBg, iconColor }) => (
  <div className={`float-card ${className}`}>
    <div className="icon" style={{ background: iconBg, color: iconColor }}>{icon}</div>
    <div className="text">
      <div className="t">{t}</div>
      <div className="v">{v}</div>
    </div>
  </div>
);

Object.assign(window, { Icon, Bubble, FloatCard });
