"""Header component with title and styling for SDXL Model Merger."""

import gradio as gr


def create_header():
    """Create the header section with title, description, and custom styling."""
    
    # Custom CSS for modern look
    css = """
    /* Header gradient text */
    .header-gradient {
        background: linear-gradient(135deg, #10b981 0%, #7c3aed 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Feature cards */
    .feature-card {
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
    }
    
    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* Label styling */
    .gradio-container .label {
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
    }
    
    /* Status message colors */
    .status-success { 
        color: #059669 !important; 
        font-weight: 600;
    }
    .status-error { 
        color: #dc2626 !important; 
        font-weight: 600;
    }
    .status-warning { 
        color: #d97706 !important; 
        font-weight: 600;
    }
    
    /* Button improvements */
    .gradio-container .btn {
        border-radius: 8px;
        padding: 12px 24px;
        font-weight: 600;
    }
    
    /* Input field styling */
    .gradio-container textarea, 
    .gradio-container input[type="number"],
    .gradio-container input[type="text"] {
        border-radius: 8px;
        border-color: #d1d5db;
    }
    
    .gradio-container textarea:focus,
    .gradio-container input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    
    /* Tab styling */
    .gradio-container .tabitem {
        background: transparent;
        border-radius: 12px;
    }
    
    /* Progress bar improvements */
    .gradio-container .progress-bar {
        border-radius: 8px;
        overflow: hidden;
    }
    """
    
    with gr.Column(elem_classes=["feature-card"]):
        gr.HTML("""
            <div style="text-align: center; margin-bottom: 24px;">
                <h1 style="font-size: 2.5em; margin: 0; line-height: 1.2;">
                    <span class="header-gradient">SDXL Model Merger</span>
                </h1>
                <p style="color: #6b7280; font-size: 1.1em; max-width: 600px; margin: 16px auto;">
                    Merge checkpoints, LoRAs, and VAEs — then bake LoRAs into a single exportable 
                    checkpoint with optional quantization.
                </p>
            </div>
        """)
        
        # Feature highlights
        with gr.Row():
            with gr.Column(scale=1):
                gr.HTML("""
                    <div style="text-align: center; padding: 16px;">
                        <div style="font-size: 2.5em; margin-bottom: 8px;">🚀</div>
                        <strong>Fast Loading</strong>
                        <p style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">With progress tracking & cache</p>
                    </div>
                """)
            with gr.Column(scale=1):
                gr.HTML("""
                    <div style="text-align: center; padding: 16px;">
                        <div style="font-size: 2.5em; margin-bottom: 8px;">🎨</div>
                        <strong>Panorama Gen</strong>
                        <p style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">Seamless tiling support</p>
                    </div>
                """)
            with gr.Column(scale=1):
                gr.HTML("""
                    <div style="text-align: center; padding: 16px;">
                        <div style="font-size: 2.5em; margin-bottom: 8px;">📦</div>
                        <strong>Export Ready</strong>
                        <p style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">Quantization & format options</p>
                    </div>
                """)

    return css