streamlit_app.py

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

# Page configuration
st.set_page_config(
    page_title="AI Mastery Academy | GenAI & Agentic AI Coaching",
    page_icon="🤖",
    layout="wide",
    initial_sidebar_state="collapsed"
)

# Custom CSS
st.markdown("""
<style>
    /* Import Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    
    * {
        font-family: 'Inter', sans-serif;
    }
    
    .stApp {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    }
    
    /* Hide Streamlit branding */
    #MainMenu {visibility: hidden;}
    footer {visibility: hidden;}
    header {visibility: hidden;}
    
    /* Hero Section */
    .hero-container {
        text-align: center;
        padding: 60px 20px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 20px;
        margin-bottom: 40px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
        color: #a0a0a0;
        margin-bottom: 30px;
        line-height: 1.6;
    }
    
    .hero-badge {
        display: inline-block;
        padding: 8px 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 30px;
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    /* Section Headers */
    .section-header {
        text-align: center;
        margin: 60px 0 40px 0;
    }
    
    .section-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 15px;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        color: #888;
    }
    
    /* Feature Cards */
    .feature-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px;
        margin: 15px 0;
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
        border-color: rgba(102, 126, 234, 0.5);
        box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
    }
    
    .feature-icon {
        font-size: 3rem;
        margin-bottom: 20px;
    }
    
    .feature-title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 15px;
    }
    
    .feature-desc {
        color: #a0a0a0;
        line-height: 1.6;
    }
    
    /* Pricing Cards */
    .pricing-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 25px;
        padding: 40px 30px;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 60px rgba(102, 126, 234, 0.3);
    }
    
    .pricing-card.popular {
        border: 2px solid #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
    }
    
    .popular-badge {
        position: absolute;
        top: 20px;
        right: -35px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 5px 50px;
        font-size: 0.8rem;
        font-weight: 600;
        transform: rotate(45deg);
    }
    
    .pricing-tier {
        font-size: 1.3rem;
        font-weight: 600;
        color: #667eea;
        margin-bottom: 10px;
    }
    
    .pricing-name {
        font-size: 1.8rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 20px;
    }
    
    .pricing-price {
        font-size: 3rem;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 10px;
    }
    
    .pricing-period {
        color: #888;
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .pricing-features {
        text-align: left;
        margin: 30px 0;
    }
    
    .pricing-feature {
        color: #a0a0a0;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .pricing-feature:last-child {
        border-bottom: none;
    }
    
    .check-icon {
        color: #4ade80;
        font-weight: bold;
    }
    
    /* Testimonial Cards */
    .testimonial-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px;
        margin: 15px 0;
    }
    
    .testimonial-text {
        color: #d0d0d0;
        font-style: italic;
        line-height: 1.8;
        margin-bottom: 20px;
    }
    
    .testimonial-author {
        color: #ffffff;
        font-weight: 600;
    }
    
    .testimonial-role {
        color: #667eea;
        font-size: 0.9rem;
    }
    
    /* Contact Form */
    .contact-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 25px;
        padding: 40px;
    }
    
    /* Social Buttons */
    .social-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px 30px;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        margin: 10px;
        color: white !important;
    }
    
    .whatsapp-btn {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    }
    
    .whatsapp-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    }
    
    .telegram-btn {
        background: linear-gradient(135deg, #0088cc 0%, #005f8f 100%);
    }
    
    .telegram-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0, 136, 204, 0.4);
    }
    
    /* Payment Buttons */
    .payment-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px 25px;
        border-radius: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        margin: 8px;
        cursor: pointer;
        border: none;
        color: white;
    }
    
    .upi-btn {
        background: linear-gradient(135deg, #5f259f 0%, #4a1d7a 100%);
    }
    
    .stripe-btn {
        background: linear-gradient(135deg, #635bff 0%, #4a42cc 100%);
    }
    
    .paypal-btn {
        background: linear-gradient(135deg, #003087 0%, #001f5c 100%);
    }
    
    /* CTA Button */
    .cta-button {
        display: inline-block;
        padding: 18px 50px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white !important;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 700;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    
    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
    }
    
    /* Stats */
    .stats-container {
        display: flex;
        justify-content: center;
        gap: 60px;
        flex-wrap: wrap;
        margin: 40px 0;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .stat-number {
        font-size: 3rem;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .stat-label {
        color: #888;
        font-size: 1rem;
    }
    
    /* Footer */
    .footer {
        text-align: center;
        padding: 40px 20px;
        margin-top: 60px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-text {
        color: #666;
    }
    
    .footer-link {
        color: #667eea !important;
        text-decoration: none;
    }
    
    /* Instructor Card */
    .instructor-card {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 25px;
        padding: 40px;
        text-align: center;
    }
    
    .instructor-name {
        font-size: 1.8rem;
        font-weight: 700;
        color: #ffffff;
        margin: 20px 0 10px 0;
    }
    
    .instructor-title {
        color: #667eea;
        font-size: 1.1rem;
        margin-bottom: 20px;
    }
    
    .instructor-bio {
        color: #a0a0a0;
        line-height: 1.8;
    }
    
    /* Curriculum */
    .curriculum-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 15px;
        padding: 20px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    .curriculum-number {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        flex-shrink: 0;
    }
    
    .curriculum-title {
        color: #ffffff;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .curriculum-desc {
        color: #888;
        font-size: 0.9rem;
        margin-top: 5px;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 2.2rem;
        }
        .hero-subtitle {
            font-size: 1.1rem;
        }
        .section-title {
            font-size: 1.8rem;
        }
        .pricing-price {
            font-size: 2.2rem;
        }
    }
    
    /* Anycoder Link */
    .anycoder-link {
        color: #667eea !important;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .anycoder-link:hover {
        color: #764ba2 !important;
        text-decoration: underline;
    }
</style>
""", unsafe_allow_html=True)

# Initialize session state
if 'selected_plan' not in st.session_state:
    st.session_state.selected_plan = None
if 'show_payment' not in st.session_state:
    st.session_state.show_payment = False
if 'form_submitted' not in st.session_state:
    st.session_state.form_submitted = False

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

# Hero Section
st.markdown("""
<div style="text-align: center; padding: 10px 0;">
    <span style="color: #888;">Built with </span>
    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a>
</div>
""", unsafe_allow_html=True)

st.markdown("""
<div class="hero-container">
    <div class="hero-badge">🚀 Limited Time Offer - 40% OFF</div>
    <h1 class="hero-title">Master AI, GenAI & Agentic AI</h1>
    <p class="hero-subtitle">
        Transform your career with cutting-edge AI skills. Learn from industry experts and build 
        real-world AI applications with our comprehensive coaching and masterclass programs.
    </p>
</div>
""", unsafe_allow_html=True)

# Stats Section
st.markdown("""
<div class="stats-container">
    <div class="stat-item">
        <div class="stat-number">5000+</div>
        <div class="stat-label">Students Trained</div>
    </div>
    <div class="stat-item">
        <div class="stat-number">50+</div>
        <div class="stat-label">AI Projects Built</div>
    </div>
    <div class="stat-item">
        <div class="stat-number">95%</div>
        <div class="stat-label">Success Rate</div>
    </div>
    <div class="stat-item">
        <div class="stat-number">24/7</div>
        <div class="stat-label">Support</div>
    </div>
</div>
""", unsafe_allow_html=True)

# What You'll Learn Section
st.markdown("""
<div class="section-header">
    <h2 class="section-title">🎯 What You'll Master</h2>
    <p class="section-subtitle">Comprehensive curriculum designed for the AI-first future</p>
</div>
""", unsafe_allow_html=True)

col1, col2, col3 = st.columns(3)

with col1:
    st.markdown("""
    <div class="feature-card">
        <div class="feature-icon">🤖</div>
        <h3 class="feature-title">Generative AI</h3>
        <p class="feature-desc">
            Master LLMs, GPT models, prompt engineering, fine-tuning, and building AI-powered applications 
            with OpenAI, Anthropic, and open-source models.
        </p>
    </div>
    """, unsafe_allow_html=True)

with col2:
    st.markdown("""
    <div class="feature-card">
        <div class="feature-icon">🕵️</div>
        <h3 class="feature-title">Agentic AI</h3>
        <p class="feature-desc">
            Build autonomous AI agents using LangChain, AutoGPT, CrewAI. Learn multi-agent systems, 
            tool integration, and real-world automation.
        </p>
    </div>
    """, unsafe_allow_html=True)

with col3:
    st.markdown("""
    <div class="feature-card">
        <div class="feature-icon">🛠️</div>
        <h3 class="feature-title">AI Tools Mastery</h3>
        <p class="feature-desc">
            Hands-on experience with ChatGPT, Claude, Midjourney, Stable Diffusion, GitHub Copilot, 
            and enterprise AI platforms.
        </p>
    </div>
    """, unsafe_allow_html=True)

col4, col5, col6 = st.columns(3)

with col4:
    st.markdown("""
    <div class="feature-card">
        <div class="feature-icon">📊</div>
        <h3 class="feature-title">RAG Systems</h3>
        <p class="feature-desc">
            Build Retrieval Augmented Generation systems, vector databases, embeddings, and 
            enterprise knowledge bases.
        </p>
    </div>
    """, unsafe_allow_html=True)

with col5:
    st.markdown("""
    <div class="feature-card">
        <div class="feature-icon">☁️</div>
        <h3 class="feature-title">AI Deployment</h3>
        <p class="feature-desc">
            Deploy AI models on AWS, GCP, Azure. Learn MLOps, containerization, API development, 
            and production scaling.
        </p>
    </div>
    """, unsafe_allow_html=True)

with col6:
    st.markdown("""
    <div class="feature-card">
        <div class="feature-icon">💼</div>
        <h3 class="feature-title">Real Projects</h3>
        <p class="feature-desc">
            Build portfolio-worthy projects: AI chatbots, content generators, code assistants, 
            and automation tools.
        </p>
    </div>
    """, unsafe_allow_html=True)

# Curriculum Section
st.markdown("""
<div class="section-header">
    <h2 class="section-title">📚 Masterclass Curriculum</h2>
    <p class="section-subtitle">12-week intensive program with hands-on projects</p>
</div>
""", unsafe_allow_html=True)

curriculum = [
    ("Week 1-2", "AI Foundations & Prompt Engineering", "Understanding LLMs, tokenization, prompt design patterns"),
    ("Week 3-4", "Building with OpenAI & Claude APIs", "API integration, function calling, structured outputs"),
    ("Week 5-6", "LangChain & LlamaIndex Deep Dive", "Chains, agents, memory, document processing"),
    ("Week 7-8", "Vector Databases & RAG Systems", "Pinecone, Weaviate, ChromaDB, hybrid search"),
    ("Week 9-10", "Agentic AI & Multi-Agent Systems", "AutoGPT, CrewAI, agent orchestration, tool use"),
    ("Week 11-12", "Deployment & Production", "MLOps, API development, scaling, monitoring"),
]

for num, title, desc in curriculum:
    st.markdown(f"""
    <div class="curriculum-item">
        <div class="curriculum-number">{num.split()[1]}</div>
        <div>
            <div class="curriculum-title">{title}</div>
            <div class="curriculum-desc">{desc}</div>
        </div>
    </div>
    """, unsafe_allow_html=True)

# Pricing Section
st.markdown("""
<div class="section-header">
    <h2 class="section-title">💎 Choose Your Learning Path</h2>
    <p class="section-subtitle">Flexible plans designed for every learner</p>
</div>
""", unsafe_allow_html=True)

col1, col2, col3 = st.columns(3)

with col1:
    st.markdown("""
    <div class="pricing-card">
        <div class="pricing-tier">STARTER</div>
        <div class="pricing-name">Self-Paced Course</div>
        <div class="pricing-price">$199</div>
        <div class="pricing-period">one-time payment</div>
        <div class="pricing-features">
            <div class="pricing-feature"><span class="check-icon">✓</span> 50+ Video Lessons</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Downloadable Resources</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> 5 Mini Projects</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Community Access</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Certificate of Completion</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Lifetime Access</div>
        </div>
    </div>
    """, unsafe_allow_html=True)
    if st.button("Get Started", key="starter_btn", use_container_width=True):
        st.session_state.selected_plan = "Starter - $199"
        st.session_state.show_payment = True

with col2:
    st.markdown("""
    <div class="pricing-card popular">
        <div class="popular-badge">MOST POPULAR</div>
        <div class="pricing-tier">PROFESSIONAL</div>
        <div class="pricing-name">Live Masterclass</div>
        <div class="pricing-price">$499</div>
        <div class="pricing-period">12-week program</div>
        <div class="pricing-features">
            <div class="pricing-feature"><span class="check-icon">✓</span> Everything in Starter</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> 24 Live Sessions</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> 1-on-1 Mentoring (4 hrs)</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> 10 Industry Projects</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Job Preparation</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Priority Support</div>
        </div>
    </div>
    """, unsafe_allow_html=True)
    if st.button("Enroll Now", key="pro_btn", use_container_width=True, type="primary"):
        st.session_state.selected_plan = "Professional - $499"
        st.session_state.show_payment = True

with col3:
    st.markdown("""
    <div class="pricing-card">
        <div class="pricing-tier">ENTERPRISE</div>
        <div class="pricing-name">Executive Coaching</div>
        <div class="pricing-price">$1,499</div>
        <div class="pricing-period">personalized program</div>
        <div class="pricing-features">
            <div class="pricing-feature"><span class="check-icon">✓</span> Everything in Professional</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Unlimited 1-on-1 Sessions</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Custom AI Strategy</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Team Training Option</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> Implementation Support</div>
            <div class="pricing-feature"><span class="check-icon">✓</span> LinkedIn Recommendation</div>
        </div>
    </div>
    """, unsafe_allow_html=True)
    if st.button("Contact Us", key="enterprise_btn", use_container_width=True):
        st.session_state.selected_plan = "Enterprise - $1,499"
        st.session_state.show_payment = True

# Payment Section
if st.session_state.show_payment:
    st.markdown("---")
    st.markdown(f"""
    <div class="section-header">
        <h2 class="section-title">💳 Complete Your Enrollment</h2>
        <p class="section-subtitle">Selected Plan: {st.session_state.selected_plan}</p>
    </div>
    """, unsafe_allow_html=True)
    
    payment_col1, payment_col2 = st.columns(2)
    
    with payment_col1:
        st.markdown("### Choose Payment Method")
        
        st.markdown("""
        <div style="display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0;">
        """, unsafe_allow_html=True)
        
        # UPI Payment
        if st.button("🏦 Pay with UPI", key="upi_btn", use_container_width=True):
            st.info("📱 **UPI Payment**\n\nScan the QR code or use UPI ID: `aimastery@upi`\n\nAfter payment, share screenshot on WhatsApp for instant access.")
            st.markdown("""
            **Supported Apps:** Google Pay, PhonePe, Paytm, BHIM
            
            **UPI ID:** `aimastery@ybl`
            """)
        
        # Stripe Payment
        if st.button("💳 Pay with Stripe", key="stripe_btn", use_container_width=True):
            st.success("🔒 **Secure Stripe Checkout**\n\nYou'll be redirected to Stripe's secure payment page.")
            st.markdown("[Click here to proceed to Stripe →](https://stripe.com)")
        
        # PayPal Payment
        if st.button("🅿️ Pay with PayPal", key="paypal_btn", use_container_width=True):
            st.success("🔒 **PayPal Checkout**\n\nYou'll be redirected to PayPal for secure payment.")
            st.markdown("[Click here to proceed to PayPal →](https://paypal.com)")
    
    with payment_col2:
        st.markdown("### Order Summary")
        st.markdown(f"""
        <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.1);">
            <p style="color: #888;">Plan Selected:</p>
            <h3 style="color: #fff; margin: 10px 0;">{st.session_state.selected_plan}</h3>
            <hr style="border-color: rgba(255,255,255,0.1);">
            <p style="color: #4ade80;">✓ 30-day money-back guarantee</p>
            <p style="color: #4ade80;">✓ Instant access after payment</p>
            <p style="color: #4ade80;">✓ Secure encrypted transaction</p>
        </div>
        """, unsafe_allow_html=True)
        
        if st.button("← Change Plan", key="change_plan"):
            st.session_state.show_payment = False
            st.rerun()

# Testimonials Section
st.markdown("""
<div class="section-header">
    <h2 class="section-title">⭐ What Our Students Say</h2>
    <p class="section-subtitle">Join thousands of successful AI practitioners</p>
</div>
""", unsafe_allow_html=True)

test_col1, test_col2, test_col3 = st.columns(3)

with test_col1:
    st.markdown("""
    <div class="testimonial-card">
        <div class="testimonial-text">
            "This masterclass transformed my career. I went from a traditional developer to an AI engineer 
            in just 3 months. The hands-on projects were incredibly valuable."
        </div>
        <div class="testimonial-author">Sarah Chen</div>
        <div class="testimonial-role">AI Engineer @ Google</div>
    </div>
    """, unsafe_allow_html=True)

with test_col2:
    st.markdown("""
    <div class="testimonial-card">
        <div class="testimonial-text">
            "The Agentic AI module was mind-blowing. I built an autonomous research agent that now 
            saves my team 20+ hours per week. Best investment I've made."
        </div>
        <div class="testimonial-author">Michael Rodriguez</div>
        <div class="testimonial-role">CTO @ TechStartup</div>
    </div>
    """, unsafe_allow_html=True)

with test_col3:
    st.markdown("""
    <div class="testimonial-card">
        <div class="testimonial-text">
            "As a non-technical founder, I was skeptical. But the course made complex AI concepts 
            accessible. Now I can confidently lead AI initiatives at my company."
        </div>
        <div class="testimonial-author">Priya Sharma</div>
        <div class="testimonial-role">Founder & CEO</div>
    </div>
    """, unsafe_allow_html=True)

# Instructor Section
st.markdown("""
<div class="section-header">
    <h2 class="section-title">👨‍🏫 Meet Your Instructor</h2>
</div>
""", unsafe_allow_html=True)

inst_col1, inst_col2 = st.columns([1, 2])

with inst_col1:
    st.markdown("""
    <div class="instructor-card">
        <div style="font-size: 80px; margin-bottom: 20px;">👤</div>
        <div class="instructor-name">Dr. Alex Thompson</div>
        <div class="instructor-title">AI Research Lead & Educator</div>
    </div>
    """, unsafe_allow_html=True)

with inst_col2:
    st.markdown("""
    <div style="padding: 20px;">
        <p class="instructor-bio">
            🎓 PhD in Machine Learning from Stanford University<br><br>
            💼 Former AI Research Lead at OpenAI and Google DeepMind<br><br>
            📚 Published 50+ research papers in top AI conferences<br><br>
            🏆 Trained 10,000+ professionals in AI and Machine Learning<br><br>
            🌟 Featured speaker at NeurIPS, ICML, and Google I/O<br><br>
            💡 Passionate about making AI accessible to everyone
        </p>
    </div>
    """, unsafe_allow_html=True)

# Contact Section
st.markdown("""
<div class="section-header">
    <h2 class="section-title">📞 Get in Touch</h2>
    <p class="section-subtitle">Have questions? We're here to help!</p>
</div>
""", unsafe_allow_html=True)

# Social Media Buttons
st.markdown("""
<div style="text-align: center; margin: 30px 0;">
    <a href="https://wa.me/1234567890?text=Hi! I'm interested in the AI Masterclass" target="_blank" class="social-btn whatsapp-btn">
        📱 Chat on WhatsApp
    </a>
    <a href="https://t.me/aimastery_bot" target="_blank" class="social-btn telegram-btn">
        ✈️ Join Telegram
    </a>
</div>
""", unsafe_allow_html=True)

# Contact Form
st.markdown('<div class="contact-container">', unsafe_allow_html=True)

contact_col1, contact_col2 = st.columns(2)

with contact_col1:
    st.markdown("### 📧 Send us a Message")
    
    with st.form("contact_form"):
        name = st.text_input("Your Name *", placeholder="John Doe")
        email = st.text_input("Email Address *", placeholder="[email protected]")
        phone = st.text_input("Phone Number", placeholder="+1 234 567 8900")
        subject = st.selectbox("Subject", [
            "General Inquiry",
            "Course Information",
            "Payment Support",
            "Technical Support",
            "Corporate Training",
            "Partnership Opportunity"
        ])
        message = st.text_area("Your Message *", placeholder="Tell us how we can help you...", height=150)
        
        submitted = st.form_submit_button("Send Message", use_container_width=True, type="primary")
        
        if submitted:
            if name and email and message:
                st.success("✅ Thank you for your message! We'll get back to you within 24 hours.")
                st.session_state.form_submitted = True
            else:
                st.error("Please fill in all required fields.")

with contact_col2:
    st.markdown("### 📍 Contact Information")
    
    st.markdown("""
    <div style="padding: 20px;">
        <p style="color: #fff; margin: 15px 0;">
            <strong>📧 Email:</strong><br>
            <span style="color: #667eea;">[email protected]</span>
        </p>
        <p style="color: #fff; margin: 15px 0;">
            <strong>📱 WhatsApp:</strong><br>
            <span style="color: #667eea;">+1 (234) 567-8900</span>
        </p>
        <p style="color: #fff; margin: 15px 0;">
            <strong>✈️ Telegram:</strong><br>
            <span style="color: #667eea;">@aimastery_academy</span>
        </p>
        <p style="color: #fff; margin: 15px 0;">
            <strong>🕐 Support Hours:</strong><br>
            <span style="color: #888;">Monday - Friday: 9 AM - 6 PM EST<br>
            Weekend: 10 AM - 4 PM EST</span>
        </p>
        <p style="color: #fff; margin: 15px 0;">
            <strong>🌍 Location:</strong><br>
            <span style="color: #888;">San Francisco, CA, USA<br>
            (Remote-first company)</span>
        </p>
    </div>
    """, unsafe_allow_html=True)

st.markdown('</div>', unsafe_allow_html=True)