ship-react-portal-web/src/components/Sidebar.tsx

import React, { useState } from 'react';
import { Phone, ArrowUp, Send, Settings } from 'lucide-react';
import ThemeSettings from './ThemeSettings.tsx';
import MiniProgramQRCode from '@/src/assets/QRPicture/wechat-QR.png';
import TiktokQRCode from '@/src/assets/QRPicture/Tiktok-QR.png';
import RedBookQRCode from '@/src/assets/QRPicture/redbook-QR.png';
import WeChatIcon from '@/src/assets/logo/wechat.png';
import TiktokIcon from '@/src/assets/logo/tiktok.png';
import RedBook from '@/src/assets/logo/redbook.png';

const Sidebar: React.FC = () => {
  const [settingsOpen, setSettingsOpen] = useState(false);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <>
      <div className="fixed right-0 top-1/2 -translate-y-1/2 z-50 flex flex-col items-end space-y-4 pr-4">
        {/* Customer Service */}
        <div className="group relative flex items-center">
          <div className="absolute right-12 bg-vista-darkblue text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
            24*7 预定电话：400-696-0666
          </div>
          <button className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center text-vista-darkblue hover:bg-vista-gold hover:text-white transition-colors border border-vista-darkblue/10">
            <Phone size={20} />
          </button>
        </div>

        {/* WeChat */}
        <div className="group relative flex items-center">
          <div className="absolute right-12 bg-white p-2 shadow-lg rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-40">
              {/* Placeholder for QR Code */}
            <div
                className="w-24 h-24 bg-vista-darkblue/5 flex items-center justify-center text-xs text-vista-darkblue/60">
              <img
                  src={MiniProgramQRCode as string}  // 替换为你的图片路径
                  alt="公众号二维码"
                  className="w-24 h-24 object-cover rounded"
              />
            </div>

          </div>
          <button
              className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center text-vista-darkblue hover:bg-vista-gold hover:text-white transition-colors border border-vista-darkblue/10">
            <img
              src={WeChatIcon as string}
              alt="微信"
              className="w-5 h-5 object-contain"
            />
          </button>
        </div>

  {/* RedBook */}
        <div className="group relative flex items-center">
          <div className="absolute right-12 bg-white p-2 shadow-lg rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-40">
              {/* Placeholder for QR Code */}
            <div
                className="w-24 h-24 bg-vista-darkblue/5 flex items-center justify-center text-xs text-vista-darkblue/60">
              <img
                  src={RedBookQRCode as string}  // 替换为你的图片路径
                  alt="公众号二维码"
                  className="w-24 h-24 object-cover rounded"
              />
            </div>

          </div>
          <button
              className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center text-vista-darkblue hover:bg-vista-gold hover:text-white transition-colors border border-vista-darkblue/10">
            <img
              src={RedBook as string}
              alt="小红书"
              className="w-8 h-8 object-contain"
            />
          </button>
        </div>

        {/* tiktok */}
        <div className="group relative flex items-center">
          <div className="absolute right-12 bg-white p-2 shadow-lg rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-40">
            {/* Placeholder for QR Code */}
            <div
                className="w-24 h-24 bg-vista-darkblue/5 flex items-center justify-center text-xs text-vista-darkblue/60">
              <img
                  src={TiktokQRCode as string}  // 替换为你的图片路径
                  alt="公众号二维码"
                  className="w-24 h-24 object-cover rounded"
              />
            </div>
          </div>
          <button
              className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center text-vista-darkblue hover:bg-vista-gold hover:text-white transition-colors border border-vista-darkblue/10">
            <img
                src={TiktokIcon as string}
                alt="抖音"
                className="w-8 h-8 object-contain"
            />
          </button>
        </div>


        {/* Customization Settings Trigger (New) */}
        <div className="group relative flex items-center">
           <div className="absolute right-12 bg-vista-darkblue text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
            自定义设置
          </div>
          <button
            onClick={() => setSettingsOpen(true)}
            className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center text-vista-darkblue hover:bg-vista-gold hover:text-white transition-colors border border-vista-darkblue/10"
          >
            <Settings size={20} />
          </button>
        </div>

        {/* Back to Top */}
        <button
          onClick={scrollToTop}
          className="w-12 h-12 bg-vista-darkblue text-white rounded-full shadow-lg flex items-center justify-center hover:bg-vista-gold transition-colors"
        >
          <ArrowUp size={20} />
        </button>
      </div>

      {/* Settings Modal */}
      <ThemeSettings isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </>
  );
};

export default Sidebar;