import streamlit as st

st.set_page_config(page_title="Tube2Insight", layout="centered")

st.markdown(
    """
    <div style="text-align: center; padding: 30px 10px; background: linear-gradient(to right, #ff4b2b, #ff416c); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);">
        <h1 style="color: white; font-size: 3em; margin-bottom: 0;">🎬 Tube2Insight</h1>
        <h3 style="color: #f0f0f0; margin-top: 5px;">Your AI-Powered YouTube Video Summarizer 🦙</h3>
    </div>
    """,
    unsafe_allow_html=True,
)

st.markdown(
    """
    <div style='background-color: #ffffff; padding: 25px; margin-top: 30px; border-left: 6px solid #ff4b2b; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transition: 0.3s ease-in-out;'>
        <p style='font-size: 18px;'>
            <strong>🚀 Tired of watching lengthy YouTube videos?</strong><br>
            <span style='color: #555;'>Let AI do the hard work and get you straight to the point.</span>
        </p>
        <ul style='font-size: 16px; line-height: 1.8; color: #444;'>
            <li>📌 Paste any YouTube video URL</li>
            <li>🔍 Auto-fetch & transcribe video content</li>
            <li>🧠 Summarize with powerful <strong>LLMs</strong> via LangChain</li>
            <li>⚡ Save time, boost productivity, and unlock insights instantly</li>
        </ul>
        <p style='font-size: 16px; font-weight: 600; color: #333; margin-top: 15px;'>
            Perfect for:
        </p>
        <ul style='font-size: 15.5px; color: #333; line-height: 1.7;'>
            <li>🎓 Students doing research</li>
            <li>💼 Busy professionals</li>
            <li>🎥 Content creators</li>
            <li>🧠 Curious minds valuing their time</li>
        </ul>
        <p style='text-align: center; font-style: italic; color: #999; margin-top: 25px;'>
            Built with using LangChain, LLMs, and Streamlit
        </p>
    </div>
    """,
    unsafe_allow_html=True,
)

st.markdown(
    """
    <div style="margin-top: 40px; text-align: center;">
        <h4 style="color: #ff4b2b;">👩‍💻 About the Creator</h4>
        <p style="color: #555; font-size: 16px;">
            <strong>Harika Padyala</strong><br>
            Passionate AI Developer & Data Enthusiast<br>
            Building smart, accessible AI apps for everyone! 🚀
        </p>
        <div style="margin-top: 15px;">
            <a href="https://github.com/Harika22-08?tab=repositories" target="_blank">
                <img src="https://img.shields.io/badge/GitHub-000000?style=for-the-badge&logo=github&logoColor=white">
            </a>
            <a href="https://www.linkedin.com/in/harika-padyala-67a882305/" target="_blank">
                <img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white">
            </a>
        </div>
    </div>
    """,
    unsafe_allow_html=True,
)