import gradio as gr

YOUTUBE_LINKS = [
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
    "https://www.youtube.com/watch?v=g30KR9VNXS0",
]

def youtube_embed(url):
    video_id = url.split("v=")[-1]
    return f"""
    <iframe
        width="100%"
        height="220"
        src="https://www.youtube-nocookie.com/embed/{video_id}?rel=0&modestbranding=1"
        frameborder="0"
        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
    """

css = """
body {
    background-color: #0b0f19;
}
.tc-header {
    font-size: 34px;
    font-weight: 800;
    color: #e5e7eb;
    margin-bottom: 6px;
}
.tc-sub {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 24px;
}
.video-card {
    background: #111827;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
"""

with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
    gr.HTML("""
    <div class="tc-header">TC Channel — Curated Videos</div>
    <div class="tc-sub">
        Only selected videos • No recommendations • Clean playback
    </div>
    """)

    for i in range(0, 10, 3):
        with gr.Row():
            for j in range(3):
                if i + j < 10:
                    gr.HTML(
                        f"<div class='video-card'>{youtube_embed(YOUTUBE_LINKS[i + j])}</div>"
                    )

demo.launch()