welcome.py

import streamlit as st
from streamlit_lottie import st_lottie
import requests
import json

def load_lottie_url(url: str):
    """Load Lottie animation from URL"""
    try:
        r = requests.get(url)
        if r.status_code != 200:
            return None
        return r.json()
    except:
        return None

def show_welcome():
    # Page configuration
    st.set_page_config(
        page_title="MI Companion",
        page_icon="🤝",
        layout="wide"
    )

    # Custom CSS for styling
    st.markdown("""
        <style>
        .main {
            padding: 2rem;
        }
        .welcome-header {
            text-align: center;
            color: #1E88E5;
            font-size: 3.2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            padding-top: 2rem;
        }
        .welcome-subheader {
            text-align: center;
            color: #424242;
            font-size: 1.5rem;
            font-weight: 400;
            margin-bottom: 2rem;
        }
        .feature-card {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .feature-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #1E88E5;
        }
        </style>
    """, unsafe_allow_html=True)

    # Main content container
    container = st.container()
    
    with container:
        # Header Section
        st.markdown('<h1 class="welcome-header">Welcome to MI Companion</h1>', unsafe_allow_html=True)
        st.markdown(
            '<p class="welcome-subheader">Your Intelligent Partner in Motivational Interviewing</p>', 
            unsafe_allow_html=True
        )

        # Lottie Animation
        lottie_url = "https://assets5.lottiefiles.com/packages/lf20_5tl1xxnz.json"  # Counseling/therapy themed animation
        lottie_json = load_lottie_url(lottie_url)
        if lottie_json:
            st_lottie(lottie_json, height=300, key="welcome")

        # Introduction
        st.markdown("""
            <div style="text-align: center; max-width: 800px; margin: 2rem auto; padding: 2rem;">
                <p style="font-size: 1.2rem; line-height: 1.6; color: #424242;">
                    Embark on a transformative journey with MI Companion, your dedicated partner in mastering 
                    Motivational Interviewing. Whether you're a seasoned professional or just starting out, 
                    our AI-powered platform provides real-time support, detailed session analysis, and 
                    personalized feedback to enhance your MI practice.
                </p>
            </div>
        """, unsafe_allow_html=True)

        # Features Section
        st.markdown("<h2 style='text-align: center; margin-top: 2rem;'>Key Features</h2>", unsafe_allow_html=True)
        
        col1, col2, col3 = st.columns(3)
        
        with col1:
            st.markdown("""
                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3>Real-time Analysis</h3>
                    <p>Get instant feedback on your MI sessions with our advanced AI analysis tools.</p>
                </div>
            """, unsafe_allow_html=True)

        with col2:
            st.markdown("""
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>Comprehensive Insights</h3>
                    <p>Track your progress and gain detailed insights into your MI practice development.</p>
                </div>
            """, unsafe_allow_html=True)

        with col3:
            st.markdown("""
                <div class="feature-card">
                    <div class="feature-icon">🤝</div>
                    <h3>Interactive Support</h3>
                    <p>Practice MI skills with our AI companion and receive personalized guidance.</p>
                </div>
            """, unsafe_allow_html=True)

        # Call to Action
        st.markdown("""
            <div style="text-align: center; margin-top: 3rem;">
                <h3 style="color: #1E88E5;">Ready to Enhance Your MI Practice?</h3>
                <p style="font-size: 1.1rem; margin: 1rem 0;">
                    Choose from our features above to begin your journey towards MI excellence.
                </p>
            </div>
        """, unsafe_allow_html=True)

        # Quick Start Guide
        with st.expander("📚 Quick Start Guide"):
            st.markdown("""
                ### Getting Started with MI Companion
                1. **Session Analysis**: Upload your session recordings or transcripts
                2. **Practice Chat**: Engage with our AI companion to practice MI techniques
                3. **Progress Tracking**: Monitor your development over time
                4. **Resource Library**: Access MI learning materials and best practices
                
                Need help? Click the '?' icon in the top right corner for support.
            """)

if __name__ == "__main__":
    show_welcome()