import React, { useState, useEffect, useRef } from 'react';
import { 
  ChevronDown, ArrowRight, 
  Building2, Sun, Home, Stethoscope, Smartphone, Globe,
  Bot, Cpu, Layers, Users, Video, BookOpen, Briefcase, Link,
  Handshake, Flag, UserPlus, Mail, Phone, Star
} from 'lucide-react';

// --- 1. 品牌色系與設定 ---
const COLORS = {
  primary: '#00b2c0',     // Jubo 亮綠
  accent: '#d8d82b',      // Jubo 檸檬黃 (強調色)
  darkBlue: '#26497A',    // Jubo 深藍 (保留用於文字，增加閱讀性)
  textMain: '#1F2937',    // 主要文字
  textSub: '#64748B',     // 次要文字
  bgHover: '#F0FDFA',     // 淺綠背景 (Hover用)
};

// --- 2. 導覽資料結構 ---
const navData = [
  {
    id: 'products',
    label: '產品',
    featured: {
      title: 'Jubo 照護全方案',
      desc: '從機構到居家，我們提供最完整的數位轉型工具，協助您提升照護品質。',
      cta: '查看完整產品線',
      icon: Layers
    },
    items: [
      { id: 'p1', icon: Building2, title: '住宿型照護系統', desc: '24小時機構的數位核心，整合護理紀錄與行政評鑑。' },
      { id: 'p2', icon: Sun, title: '日照型照護系統', desc: '專為日間照顧設計，優化排程管理與家屬聯繫。' },
      { id: 'p3', icon: Home, title: '居服照護系統', desc: '居家服務派遣神器，精準核銷與人員打卡管理。' },
      { id: 'p4', icon: Stethoscope, title: '智慧照護推車', desc: 'Smart Cart 生命徵象自動上傳，告別紙筆抄寫。' },
      { id: 'p5', icon: Smartphone, title: 'Jubo健康APP', desc: '連結機構與家庭，讓子女隨時掌握長輩健康狀況。' },
      { id: 'p6', icon: Globe, title: '智齡照顧網', desc: '全台最大長照知識庫，提供專業照護資源搜尋。' },
    ]
  },
  {
    id: 'solutions',
    label: '解決方案',
    featured: {
      title: 'AI 賦能照護',
      desc: '體驗 N-Copilot 帶來的革命性效率，讓 AI 成為護理師的最佳助手。',
      cta: '了解 AI 解決方案',
      icon: Bot
    },
    items: [
      { id: 's1', icon: Bot, title: 'N-Copilot AI 夥伴', desc: '護理語音轉文字、自動生成摘要，釋放照護雙手。' },
      { id: 's2', icon: Cpu, title: '智慧推車 IoT 生態', desc: '串聯百種藍牙醫材，打造無縫數據物聯網環境。' },
      { id: 's3', icon: Layers, title: '三大情境模組', desc: '針對住宿、日照、居服不同場域量身打造的解決方案。' },
    ]
  },
  {
    id: 'resources',
    label: '資源', // 修改：資源中心 -> 資源
    items: [
      { id: 'r1', icon: Users, title: '三三分享會', desc: '定期產業交流講座，激盪長照創新火花。' },
      { id: 'r2', icon: Video, title: '活動花絮', desc: '精彩活動紀錄與線上研討會回顧影片。' },
      { id: 'r3', icon: BookOpen, title: '卓越教育平台', desc: '系統操作教學與長照專業積分認證課程。' },
      { id: 'r4', icon: Briefcase, title: '客戶案例', desc: '聽聽全台 1,000+ 家機構的成功轉型故事。' },
      { id: 'r5', icon: Link, title: '媒合平台', desc: '精準連結照護需求者與優質服務提供單位。' },
    ]
  },
  {
    id: 'partners',
    label: '夥伴',
    items: [
      { id: 'pt1', icon: Cpu, title: 'IoT 硬體夥伴', desc: '與頂尖醫材廠商合作，提供多元量測設備選擇。' },
      { id: 'pt2', icon: Handshake, title: '專業策略合作', desc: '跨領域結盟，共同打造高齡友善照護生態圈。' },
    ]
  },
  {
    id: 'company',
    label: '公司',
    items: [
      { id: 'c1', icon: Flag, title: '品牌故事', desc: '以科技溫暖照護，看見 Jubo 的願景與使命。' },
      { id: 'c2', icon: Users, title: '團隊介紹', desc: '結合醫療、資料科學與設計的跨領域專家團隊。' },
      { id: 'c3', icon: UserPlus, title: '人才招募', desc: '加入我們，一起用科技改變高齡產業的未來。' },
    ]
  }
  // 移除：聯絡我們 (改為右上角按鈕)
];

// --- 3. 子組件 ---

// Logo (使用 Google Drive 直連圖片)
const JuboLogo = () => (
  <a href="#" className="flex items-center gap-2.5 group shrink-0">
    {/* 您的 Jubo Logo */}
    <img 
      src="https://jubo-health.com/wp-content/uploads/2024/02/logo.png" 
      alt="Jubo Health Logo" 
      className="h-10 w-auto object-contain hover:opacity-90 transition-opacity" 
    />
  </a>
);

// Mega Menu Card Item
const MenuItemCard = ({ item }) => (
  <a href="#" className="group block p-4 rounded-xl bg-white border border-transparent hover:border-[#00b2c0]/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 ease-out h-full relative overflow-hidden">
    <div className="absolute inset-0 bg-gradient-to-br from-[#00b2c0]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    
    <div className="flex items-start gap-4 relative z-10">
      <div className="p-2.5 rounded-lg bg-[#F0FDFA] text-[#00b2c0] group-hover:bg-[#00b2c0] group-hover:text-white transition-colors duration-300 shrink-0 shadow-sm">
        <item.icon size={24} strokeWidth={2} />
      </div>
      <div>
        <h4 className="text-[15px] font-bold text-[#26497A] mb-1.5 flex items-center gap-1 group-hover:text-[#00b2c0] transition-colors whitespace-nowrap">
          {item.title}
          <ArrowRight size={14} className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-[#d8d82b]" />
        </h4>
        <p className="text-[13px] text-slate-500 leading-relaxed group-hover:text-slate-600">
          {item.desc}
        </p>
      </div>
    </div>
  </a>
);

// Featured Section
const FeaturedCard = ({ content }) => {
  if (!content) return (
    <div className="h-full bg-gradient-to-br from-[#00b2c0] to-[#008e99] rounded-xl p-8 text-white flex flex-col justify-center items-start relative overflow-hidden group shadow-lg">
      <div className="absolute top-0 right-0 opacity-20 transform translate-x-8 -translate-y-8 group-hover:scale-110 transition-transform duration-700 rotate-12">
        <Star size={180} fill="white" />
      </div>
      
      <div className="relative z-10">
        <div className="inline-block px-3 py-1 bg-[#d8d82b] text-[#26497A] rounded-full text-xs font-bold mb-4 shadow-md">
          熱門推薦
        </div>
        <h3 className="text-2xl font-bold mb-3 text-white drop-shadow-sm">預約專業顧問諮詢</h3>
        <p className="text-white/90 text-sm mb-6 leading-relaxed">
          不知道如何開始數位轉型？我們的專家團隊隨時準備為您提供量身打造的建議。
        </p>
        <button className="px-5 py-2.5 bg-white text-[#00b2c0] rounded-lg text-sm font-bold hover:bg-[#d8d82b] hover:text-[#26497A] transition-all shadow-md flex items-center gap-2">
          立即預約 Demo <ArrowRight size={16} />
        </button>
      </div>
    </div>
  );

  return (
    <div className="h-full bg-gradient-to-b from-[#F0FDFA] to-white rounded-xl p-8 border border-[#00b2c0]/20 flex flex-col relative overflow-hidden group hover:shadow-md hover:border-[#00b2c0]/40 transition-all">
      <div className="absolute -right-6 -bottom-6 text-[#00b2c0]/10 group-hover:text-[#00b2c0]/20 transition-colors duration-500 transform group-hover:scale-110 group-hover:rotate-6">
        <content.icon size={140} />
      </div>
      <div className="relative z-10">
        <div className="flex items-center gap-2 text-[#00b2c0] font-bold text-xs uppercase tracking-wider mb-3">
          <Star size={14} fill="#d8d82b" stroke="#d8d82b" />
          FEATURED
        </div>
        <h3 className="text-xl font-bold text-[#26497A] mb-3 group-hover:text-[#00b2c0] transition-colors">{content.title}</h3>
        <p className="text-slate-600 text-sm leading-relaxed mb-6">
          {content.desc}
        </p>
        <div className="mt-auto">
          <span className="inline-flex items-center text-sm font-bold text-[#00b2c0] group-hover:text-[#d8d82b] group-hover:translate-x-1 transition-all cursor-pointer">
            {content.cta} <ArrowRight size={16} className="ml-1" />
          </span>
        </div>
      </div>
    </div>
  );
};

// Desktop Mega Menu Content
const DesktopMegaMenu = ({ section, isVisible }) => {
  if (!isVisible) return null;

  return (
    <div 
      className="absolute left-0 w-full bg-white/95 backdrop-blur-md border-t border-slate-100 shadow-[0_20px_40px_-10px_rgba(0,178,192,0.1)] z-40 animate-in slide-in-from-top-2 duration-200 origin-top"
      style={{ top: '100%' }}
    >
      <div className="max-w-[1280px] mx-auto px-6 py-10">
        <div className="grid grid-cols-4 gap-8">
          <div className="col-span-3 grid grid-cols-3 gap-6">
            {section.items.map((item) => (
              <MenuItemCard key={item.id} item={item} />
            ))}
          </div>
          <div className="col-span-1">
            <FeaturedCard content={section.featured} />
          </div>
        </div>
      </div>
    </div>
  );
};

// --- 4. 主應用程式 ---

export default function Header() {
  const [activeDropdown, setActiveDropdown] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  const headerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (headerRef.current && !headerRef.current.contains(event.target)) {
        setActiveDropdown(null);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div className="min-h-screen font-sans min-w-[1024px] bg-slate-50">
      <header 
        ref={headerRef}
        className={`
          fixed top-0 left-0 w-full z-50 transition-all duration-300
          ${scrolled 
            ? 'bg-white/90 backdrop-blur-md shadow-md py-3 border-b border-[#00b2c0]/10' 
            : 'bg-white py-5 border-b border-slate-100'}
        `}
        onMouseLeave={() => setActiveDropdown(null)}
      >
        <div className="max-w-[1280px] mx-auto px-8">
          <div className="flex justify-between items-center h-12">
            
            {/* Left: Logo */}
            <div className="flex-shrink-0 z-50 mr-16 cursor-pointer">
              <JuboLogo />
            </div>

            {/* Middle: Desktop Nav */}
            <nav className="flex items-center gap-10 flex-1">
              {navData.map((section) => (
                <div 
                  key={section.id}
                  className="relative h-full flex items-center"
                  onMouseEnter={() => setActiveDropdown(section.id)}
                >
                  <button 
                    className={`
                      group px-2 py-2 text-[16px] font-bold transition-all duration-200 flex items-center gap-1.5 whitespace-nowrap relative
                      ${activeDropdown === section.id 
                        ? 'text-[#00b2c0]' 
                        : 'text-slate-600 hover:text-[#00b2c0]'}
                    `}
                  >
                    {section.label}
                    <ChevronDown 
                      size={14} 
                      strokeWidth={3}
                      className={`transition-transform duration-200 opacity-50 group-hover:opacity-100 ${activeDropdown === section.id ? 'rotate-180 text-[#d8d82b]' : ''}`}
                    />
                    {activeDropdown === section.id && (
                      <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-[#d8d82b] rounded-full mb-1"></span>
                    )}
                  </button>
                </div>
              ))}
            </nav>

            {/* Right: Desktop Actions */}
            <div className="flex items-center">
              <button 
                className="group relative px-8 py-3 rounded-full bg-[#00b2c0] text-white text-[15px] font-bold shadow-[0_4px_14px_0_rgba(0,178,192,0.39)] hover:shadow-[0_6px_20px_rgba(0,178,192,0.23)] hover:bg-[#00a0ad] transition-all duration-300 transform hover:-translate-y-0.5 overflow-hidden whitespace-nowrap active:scale-95"
              >
                <span className="relative z-10 flex items-center gap-2">
                  聯繫我們 {/* 文字已更新 */}
                </span>
                <div className="absolute top-0 -left-[100%] w-[50%] h-full bg-white/20 skew-x-[25deg] group-hover:animate-[shine_1s_infinite]" />
              </button>
            </div>

          </div>
        </div>

        {navData.map(section => (
          <DesktopMegaMenu 
            key={section.id} 
            section={section} 
            isVisible={activeDropdown === section.id} 
          />
        ))}
      </header>

      {/* Hero Section */}
      <section className="pt-48 pb-32 px-8 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-[#f0fdfa] via-white to-slate-50 -z-20"></div>
        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-[#00b2c0]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3 -z-10"></div>
        <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#d8d82b]/5 rounded-full blur-3xl translate-y-1/3 -translate-x-1/3 -z-10"></div>

        <div className="max-w-7xl mx-auto text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white shadow-sm text-[#00b2c0] font-bold text-sm mb-8 border border-[#00b2c0]/20 animate-fade-in-up hover:shadow-md transition-shadow cursor-default">
            <Star size={16} fill="#d8d82b" stroke="#d8d82b" />
            <span className="tracking-wide">2025 全新改版上線</span>
          </div>
          
          <h1 className="text-5xl md:text-7xl font-extrabold text-[#1F2937] mb-8 tracking-tight leading-[1.15]">
            以科技溫暖照護<br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00b2c0] to-[#008e99] relative">
              連結每個需要的地方
              <svg className="absolute w-full h-3 -bottom-1 left-0 text-[#d8d82b] opacity-60" viewBox="0 0 200 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.00025 6.99997C25.7571 9.36481 124.852 4.23326 199.003 1.50026" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/></svg>
            </span>
          </h1>
          
          <p className="text-xl text-slate-500 max-w-2xl mx-auto mb-12 leading-relaxed font-medium">
            Jubo Health 提供全方位的智慧照護解決方案，協助機構數位轉型，讓照護工作更有效率，讓關懷更有溫度。
          </p>
          
          <div className="flex justify-center gap-5">
             <button className="px-9 py-4 bg-[#00b2c0] text-white rounded-xl font-bold text-lg shadow-lg hover:shadow-[#00b2c0]/40 hover:bg-[#009aa6] transition-all hover:-translate-y-1 active:scale-95">
               免費預約諮詢
             </button>
             <button className="px-9 py-4 bg-white text-[#1F2937] border border-slate-200 rounded-xl font-bold text-lg hover:bg-slate-50 hover:border-[#00b2c0]/30 hover:text-[#00b2c0] transition-all shadow-sm active:scale-95 flex items-center gap-2">
               <div className="w-8 h-8 rounded-full bg-[#d8d82b]/20 flex items-center justify-center">
                 <div className="w-0 h-0 border-t-[5px] border-t-transparent border-l-[8px] border-l-[#26497A] border-b-[5px] border-b-transparent ml-1"></div>
               </div>
               觀看產品影片
             </button>
          </div>
        </div>
      </section>

      <style>{`
        @keyframes shine { 100% { left: 125%; } }
        @keyframes fade-in-up {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up { animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
      `}</style>
    </div>
  );
}