"""
LifeFlow AI - Header Component (Optimized)
✅ 修復佈局問題，使用 Row/Column 避免 fixed positioning
✅ 響應式友好設計
"""
import gradio as gr

def create_header():
    """
    創建優化後的 Header：
    - Logo 保留
    - 按鈕改為垂直排列 (使用 gr.Column)
    """
    # 1. Header 容器 (只放 Logo)
    with gr.Row(elem_classes="app-header-container"):
        with gr.Column(scale=1):
            gr.HTML("""
            <div class="app-header-left">
                <h1 style="margin: 0; font-size: 2rem; font-weight: 800; 
                    background: linear-gradient(to right, #6366f1, #ec4899);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;">
                    ✨ LifeFlow AI
                </h1>
                <p style="margin: 5px 0 0 0; color: #64748b; font-size: 0.95rem;">
                    Intelligent Trip Planner
                </p>
            </div>
            """)

    # 2. 功能按鈕 (垂直懸浮)
    # 🔥 修改：改用 gr.Column 讓它在結構上就是垂直的
    with gr.Column(elem_classes="header-controls"):
        home_btn = gr.Button("🏠", size="sm", elem_classes="header-btn")
        # theme_btn = gr.Button("🌓", size="sm", elem_classes="header-btn") # 如果不需要可註解
        settings_btn = gr.Button("⚙️", size="sm", elem_classes="header-btn")
        doc_btn = gr.Button("📖", size="sm", elem_classes="header-btn")

    # 注意 return 的數量要跟上面定義的一致
    return home_btn, settings_btn, doc_btn #, theme_btn