FAQ_ITEMS = [
    (
        "Why do I need to be part of a team?",
        "Team-based participation lets us track contributions accurately and avoids duplicate submissions from the same group.",
    ),
    (
        "Can I be on more than one team?",
        "Yes, but creating a second team requires a written justification.",
    ),
    (
        "How do I submit my team's work?",
        "Use the submission portal on the dashboard. Make sure all team members are listed before submitting.",
    ),
]

def build_faq_html(items: list[tuple[str, str]]) -> str:
    toggle_js = """
        var a = this.querySelector('.faq-answer');
        var c = this.querySelector('.faq-chevron');
        if (a.style.display === 'none') {
            a.style.display = 'block';
            c.style.transform = 'rotate(180deg)';
        } else {
            a.style.display = 'none';
            c.style.transform = 'rotate(0deg)';
        }
    """

    cards = ""
    for i, (question, answer) in enumerate(items):
        collapsed = 'style="display:none;"'
        chevron_style = 'style="transform: rotate(180deg);"' if i == 0 else ""
        cards += f"""
        <div class="faq-item" onclick="{toggle_js.strip()}">
            <div class="faq-q">
                <div class="faq-num">{i + 1}</div>
                <div class="faq-title">{question}</div>
                <span class="faq-chevron" {chevron_style}>▾</span>
            </div>
            <div class="faq-answer" {collapsed}>{answer}</div>
        </div>
        """

    return f"""
    <style>
    .faq-item {{
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 1rem 1.25rem;
        margin-bottom: 10px;
        background: white;
    }}
    .faq-q {{
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        user-select: none;
    }}
    .faq-num {{
        background: #f3f4f6;
        color: #6b7280;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        flex-shrink: 0;
    }}
    .faq-title {{
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        flex: 1;
    }}
    .faq-chevron {{
        color: #9ca3af;
        font-size: 18px;
        transition: transform 0.2s;
    }}
    .faq-answer {{
        font-size: 14px;
        color: #6b7280;
        line-height: 1.7;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f3f4f6;
        padding-left: 40px;
    }}
    </style>
    <div style="padding: 0.5rem 0; max-width: 720px;">
        {cards}
    </div>
    """

def get_faq(gr):
    with gr.TabItem("🛠️ FAQ"):
        with gr.Column():
            gr.HTML(build_faq_html(FAQ_ITEMS))