lh-website/src/components/layout/FloatingConsult.tsx

import { useState } from 'react';
import { MessageCircle, X, Phone } from 'lucide-react';
import { contactInfo } from '@/data/mockData';

export function FloatingConsult() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/*<button*/}
      {/*  onClick={() => setIsOpen(true)}*/}
      {/*  className="fixed right-6 bottom-6 z-50 w-14 h-14 bg-gradient-to-r from-glow-green to-tech-cyan-500 rounded-full shadow-lg shadow-glow-green/30 flex items-center justify-center text-white hover:scale-110 transition-transform"*/}
      {/*>*/}
      {/*  <MessageCircle className="w-6 h-6" />*/}
      {/*</button>*/}

      {isOpen && (
        <div className="fixed inset-0 z-40">
          <div className="absolute inset-0 bg-black/50" onClick={() => setIsOpen(false)} />
          <div className="absolute right-6 bottom-24 w-80 bg-white rounded-2xl shadow-2xl overflow-hidden">
            <div className="bg-gradient-to-r from-glow-green to-tech-cyan-500 p-4 flex items-center justify-between">
              <h3 className="text-white font-semibold">商务咨询</h3>
              <button
                onClick={() => setIsOpen(false)}
                className="text-white/80 hover:text-white transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-glow-green/10 rounded-full flex items-center justify-center">
                  <Phone className="w-5 h-5 text-glow-green" />
                </div>
                <div>
                  <p className="text-sm text-deep-space-500">商务联系人</p>
                  <p className="font-semibold text-deep-space-900">{contactInfo.name}</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-tech-cyan-500/10 rounded-full flex items-center justify-center">
                  <Phone className="w-5 h-5 text-tech-cyan-500" />
                </div>
                <div>
                  <p className="text-sm text-deep-space-500">联系电话</p>
                  <p className="font-semibold text-deep-space-900">{contactInfo.phone}</p>
                </div>
              </div>
              <a
                href="/about"
                className="block w-full py-3 text-center font-semibold text-white bg-gradient-to-r from-glow-green to-tech-cyan-500 rounded-lg hover:shadow-lg transition-shadow"
              >
                在线咨询
              </a>
            </div>
          </div>
        </div>
      )}
    </>
  );
}