DoTouchAI/apps/web/src/components/SupportFab.tsx

/**
 * 站内客服 Widget - 右下角浮动按钮 + 支持面板（纯静态 UI，无后端）
 */
'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';

export function SupportFab() {
  const t = useTranslations('chat');
  const [open, setOpen] = useState(false);

  const suggestions = [t('q_balance'), t('q_key'), t('q_model')];

  return (
    <>
      {/* 支持面板 */}
      <div
        data-open={open}
        className="support-panel fixed bottom-[92px] right-[22px] z-[300] w-[330px] max-w-[calc(100vw-44px)] overflow-hidden rounded-[18px] border border-[rgba(124,92,255,.4)] bg-brand-card shadow-[0_18px_60px_rgba(0,0,0,.55)]"
      >
        <div
          className="flex items-center justify-between border-b border-white/[0.08] px-[18px] py-[14px]"
          style={{
            background: 'linear-gradient(120deg, rgba(124,92,255,.25), rgba(0,229,160,.1))',
          }}
        >
          <b className="text-[14.5px]">{t('title')}</b>
          <span className="flex items-center gap-[5px] text-[11.5px] text-brand-green-l">
            <span className="h-[7px] w-[7px] rounded-full bg-brand-green shadow-[0_0_8px_#00E5A0]" />
            {t('online')}
          </span>
        </div>
        <div className="px-[18px] py-4">
          <p className="mb-3 text-[13px] text-brand-muted">{t('hello')}</p>
          <div className="mb-3.5 flex flex-col gap-[7px]">
            {suggestions.map((s) => (
              <button
                key={s}
                type="button"
                className="rounded-[10px] border border-white/[0.08] bg-brand-card2 px-3 py-[9px] text-left text-[12.5px] text-brand-text transition-colors hover:border-brand-purple"
              >
                {s}
              </button>
            ))}
          </div>
          <div className="flex gap-2">
            <input
              type="text"
              placeholder={t('input')}
              className="flex-1 rounded-[10px] border border-white/[0.08] bg-brand-card2 px-3 py-2.5 text-[13px] text-brand-text outline-none focus:border-brand-purple"
            />
            <button
              type="button"
              aria-label="Send"
              className="w-10 rounded-[10px] bg-gradient-to-br from-brand-purple to-brand-purple-d text-[15px] text-white"
            >
              ➤
            </button>
          </div>
          <div className="mt-3.5 flex justify-center gap-[7px]">
            <span className="inline-block rounded-full border border-[rgba(124,92,255,.35)] bg-[rgba(124,92,255,.12)] px-2.5 py-0.5 text-[11.5px] text-brand-purple-l">Zalo</span>
            <span className="inline-block rounded-full border border-[rgba(0,229,160,.3)] bg-[rgba(0,229,160,.1)] px-2.5 py-0.5 text-[11.5px] text-brand-green-l">Telegram</span>
            <span className="inline-block rounded-full border border-[rgba(154,163,192,.3)] bg-[rgba(154,163,192,.1)] px-2.5 py-0.5 text-[11.5px] text-brand-muted">Email</span>
          </div>
        </div>
      </div>

      {/* 浮动按钮 */}
      <button
        type="button"
        aria-label="Support"
        onClick={() => setOpen((v) => !v)}
        className="fixed bottom-[22px] right-[22px] z-[300] flex h-[58px] w-[58px] items-center justify-center rounded-full bg-gradient-to-br from-brand-purple to-brand-purple-d shadow-[0_6px_24px_rgba(124,92,255,.5)] transition-all duration-200 hover:scale-[1.08] hover:shadow-[0_8px_30px_rgba(124,92,255,.65)]"
      >
        <span className="animate-fab-pulse absolute -inset-1.5 rounded-full border-2 border-[rgba(124,92,255,.4)]" />
        <svg viewBox="0 0 24 24" width="26" height="26" fill="#fff">
          <path d="M12 3C7 3 3 6.6 3 11c0 2.3 1 4.3 2.7 5.8L5 20l3.4-1.5c1.1.4 2.3.5 3.6.5 5 0 9-3.6 9-8s-4-8-9-8z" />
          <circle cx="8.5" cy="11" r="1.2" fill="#0B1020" />
          <circle cx="12" cy="11" r="1.2" fill="#0B1020" />
          <circle cx="15.5" cy="11" r="1.2" fill="#0B1020" />
        </svg>
      </button>
    </>
  );
}