import gradio as gr

# Avatar video files
avatars = {
    "Shiva": "shiva final.mp4",
    "Hanuman": "hanuman final.mp4",
    "Lakshmi": "lakshmi final.mp4",
    "Shri hari": "Shri hari final.mp4",
    "Shri Krishna": "Shri Krishna final.mp4",
    "Venkateshwara": "venkateshwara final.mp4",
    "Saraswati": "saraswati final.mp4"
}

# Function → returns video file + makes it visible
def show_avatar(name):
    return gr.update(value=avatars[name], visible=True)

# Custom CSS
css_code = """
.gradio-container {
    background-image: url('https://i.pinimg.com/originals/d0/cd/58/d0cd58dd4fcfaa1e4cf6c6dfdb1ab0b2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-radius: 0;          /* no rounded edges */
    padding: 40px;
    width: 100%;               /* full width */
    max-width: none !important;/* remove limit */
    margin: 0;                 /* no side margin */
}

body {
    background: transparent !important;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    color: white;
}
.intro-text {
    color: white;
    font-size: 1.2em;
    max-width: 900px;
    margin: 40px auto 20px auto;
    line-height: 1.5em;
    text-align: center;
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffcc00;
}
.avatar-button {
    background-color: #FFD700;
    color: black;
    font-weight: bold;
    border-radius: 10px;
    margin: 5px;
    padding: 12px 24px;
    box-shadow: 0 0 10px #FFD700;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.avatar-button:hover {
    transform: scale(1.05);
}
.notice-box {
    background: linear-gradient(135deg, #fff5cc, #ffeb99, #fff5cc);
    padding: 15px 25px;
    border-radius: 12px;
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin: 30px auto;
    max-width: 600px;
    box-shadow: 0 0 15px rgba(255, 223, 100, 0.8);
    animation: glow 2s infinite alternate;
}
@keyframes glow {
    from { box-shadow: 0 0 10px rgba(255, 223, 100, 0.6); }
    to { box-shadow: 0 0 25px rgba(255, 239, 180, 1); }
}
.title-box {
    background: linear-gradient(135deg, #ffd700, #fff8dc, #ffec8b);
    padding: 18px 25px;
    border-radius: 12px;
    color: #4b2e00;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
    max-width: 700px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: goldenpulse 3s infinite alternate;
}
@keyframes goldenpulse {
    from { box-shadow: 0 0 10px rgba(255, 223, 100, 0.6); }
    to { box-shadow: 0 0 25px rgba(255, 239, 180, 1); }
}
"""

# Build UI
with gr.Blocks(css=css_code) as demo:
    gr.HTML("""
    <div class="title-box">
        👑 Avatarverse 👑
  <br>
       🪷 Divine Wisdom Meets Immersive Technology 🌺
    </div>
    <p class="intro-text">
        Hey everyone! I’m <strong>Sreelekha</strong>. After watching the Mahavatra Narasimha movie, I got hooked on animations and divine storytelling.<br><br>
        Then I thought—why not mix mythology with tech? Imagine Krishna trying AR, Shiva exploring VR, and Saraswati checking my coding skills at 3 AM!<br><br>
        Everyone dreams at 3 AM—some about cars, space, or careers. Me? I dreamt of avatars teaching AR and VR in style.<br><br>
        So here’s your chance to see our divine friends step into the tech world and share their wisdom… with a twist of magic and a splash of tech!
    </p>
    <div class="notice-box">✨Double Click an avatar to see the avatar speaking video!✨</div>
    <hr style="margin:40px 0; border:1px solid #FFD700;" />
    """)

    # Initially hidden video display
    video_display = gr.Video(visible=False)

    # Avatar buttons
    with gr.Row():
        for name in avatars.keys():
            gr.Button(value=name, elem_classes=["avatar-button"]).click(
                fn=show_avatar,
                inputs=gr.Textbox(value=name, visible=False),
                outputs=video_display
            )

    # 🔗 Links Section
    gr.HTML("""
    <div style="text-align:center; margin-top:50px;">
        <p style="color:white; font-size:1.2em; text-shadow:0 0 10px #ffd700;">
            🌟 Ready to explore more? Choose your path below 🌟
        </p>
        <div style="margin:20px 0;">
            <a href="https://huggingface.co/spaces/sreelekhaputta2/VRAssist" target="_blank"
               style="background:#FFD700; color:black; font-weight:bold; padding:12px 24px;
                      border-radius:10px; text-decoration:none; box-shadow:0 0 10px #FFD700; display:inline-block; margin:10px;">
               🤖 Ask the VRAssist (Chatbot)
            </a>
            <a href="https://huggingface.co/spaces/sreelekhaputta2/quiz" target="_blank"
               style="background:#FFD700; color:black; font-weight:bold; padding:12px 24px;
                      border-radius:10px; text-decoration:none; box-shadow:0 0 10px #FFD700; display:inline-block; margin:10px;">
               📝 Take the AR/VR Quiz
            </a>
            <a href="https://huggingface.co/spaces/sreelekhaputta2/Learning" target="_blank"
               style="background:#FFD700; color:black; font-weight:bold; padding:12px 24px;
                      border-radius:10px; text-decoration:none; box-shadow:0 0 10px #FFD700; display:inline-block; margin:10px;">
               📚 Visit Learning Portal
            </a>
        </div>
    </div>
    """) 
    
    # 🔚 Credits Section (INSERT HERE)
    gr.HTML("""
    <div style="text-align:center; margin-top:60px; padding:20px;
                background:rgba(0,0,0,0.6); border-radius:12px;
                color:white; font-size:1em; text-shadow:0 0 8px #FFD700;">
        ✨ Created with ❤️ by <strong>Sreelekha</strong><br>
        🎨 Design and Animations | 💻 AR/VR Tech | 📽️ Avatarverse Project
    </div>
    """)

demo.launch()