phase/welcome.py

import streamlit as st
from PIL import Image
import base64
import os

# --- Load external CSS (optional) ---
def load_css(file_name: str):
    try:
        with open(file_name, "r", encoding="utf-8") as f:
            st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
    except FileNotFoundError:
        st.warning("⚠️ Stylesheet not found. Please ensure 'assets/styles.css' exists.")

@st.cache_data
def get_base64_img(image_path):
    if not os.path.exists(image_path):
        return ""
    with open(image_path, "rb") as f:
        return base64.b64encode(f.read()).decode()

logo_base64 = get_base64_img("assets/logo.png")
banner_base64 = get_base64_img("assets/welcome-banner.png")

def welcomeui():
    # ---------- CSS Styling ----------
    st.markdown(f"""
    <style>
    body {{
        font-family: 'Segoe UI', sans-serif;
        background: #f9f9fb;
    }}

    .hero {{
        position: relative;
        padding: 4rem 2rem;
        text-align: center;
        background: linear-gradient(to right, #8EC5FC, #E0C3FC);
        color: white;
    }}

    .hero::before {{
        content: "";
        background-image: url("data:image/png;base64,{banner_base64}");
        position: absolute;
        opacity: 0.1;
        inset: 0;
        background-size: cover;
        background-position: center;
    }}

    .badge {{
        display: inline-block;
        padding: 0.5rem 1rem;
        background: white;
        color: #333;
        margin: 0.25rem;
        border-radius: 10px;
        font-weight: 600;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }}

    .badge:hover {{
        background-color: #f0f0ff;
        transform: scale(1.05);
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }}

    .card {{
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        text-align: center;
        transition: all 0.3s ease;
    }}

    .card:hover {{
        transform: scale(1.02);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        cursor: default;
    }}

    .card-icon {{
        font-size: 2rem;
        margin-bottom: 1rem;
    }}
    </style>
    """, unsafe_allow_html=True)

    # ---------- Hero Section ----------
    st.markdown(f"""
    <div class="hero">
        <img src="data:image/png;base64,{logo_base64}" width="120" style="margin-bottom:1rem;" />
        <h1>Welcome to $martKid 💖</h1>
        <p style="font-size: 1.2rem; max-width: 700px; margin: auto;">
            The fun and engaging platform that makes financial literacy accessible for students and easy to teach! ✨🌟
        </p>
        <div style="margin-top:2rem;">
            <div class="badge">❤️ Made with love for young learners</div>
            <div class="badge">👨‍🏫 Perfect for classrooms and individuals</div>
            <div class="badge">📚 Curriculum-aligned content</div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # ---------- What is FinanceLearn ----------
    st.header("✨ What is $mart Kids App?")
    st.write("FinanceLearn is an interactive educational platform designed to teach financial literacy through fun, engaging activities. Perfect for both classroom learning and individual exploration! ✨")

    # ---------- Demo Video Placeholder ----------
    st.markdown("""
    <div class="card">
        <div class="card-icon">🎬</div>
        <h3>See How It Works! 🌈</h3>
        <div style="padding: 2rem; background: #f1f1f1; border-radius: 10px;">
            <div class="card-icon">▶️</div>
            <p><strong>Demo Video Coming Soon! 🎥✨</strong></p>
            <p>Watch students learn and teachers teach with FinanceLearn</p>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # ---------- Platform Features ----------
    st.subheader("🚀 Features")
    col1, col2, col3, col4 = st.columns(4)

    features = [
        ("📖", "Lessons", "Engaging content that makes financial literacy fun and accessible for all ages!"),
        ("🎮", "Games", "Learn through play with our collection of money management games and challenges!"),
        ("🏆", "Progress Tracking", "Monitor learning progress with quizzes, achievements, and detailed analytics!"),
        ("🤖", "AI Assistant", "Get instant help and personalized guidance from our friendly chatbot!")
    ]

    for col, (icon, title, desc) in zip([col1, col2, col3, col4], features):
        with col:
            st.markdown(f"""
            <div class="card">
                <div class="card-icon">{icon}</div>
                <h4>{title}</h4>
                <p style="font-size:0.9rem;">{desc}</p>
            </div>
            """, unsafe_allow_html=True)

    # ---------- Get Started Section ----------
    st.subheader("🎓 Get Started")
    left, right = st.columns(2)

    with left:
        st.markdown("""
        <div class="card" style="background: linear-gradient(to right, #D3CCE3, #E9E4F0); color: #333;">
            <div class="card-icon">👦👧</div>
            <h3>For Students</h3>
            <p>Start your financial learning journey with games, lessons, and fun challenges!</p>
        </div>
        """, unsafe_allow_html=True)
        if st.button("🚀 Start Learning!"):
            st.session_state.current_page = "Student Dashboard"
            st.rerun()

    with right:
        st.markdown("""
        <div class="card" style="background: linear-gradient(to right, #30E8BF, #FF8235); color: #fff;">
            <div class="card-icon">👩‍🏫</div>
            <h3>For Teachers</h3>
            <p>Manage your classroom, track progress, and engage your students!</p>
        </div>
        """, unsafe_allow_html=True)
        if st.button("📊 Teacher Dashboard"):
            st.session_state.current_page = "Teacher Dashboard"
            st.rerun()

def show_page():
    load_css(os.path.join("assets", "styles.css"))


    # ✅ Only show this when user is logged in
    if "user" in st.session_state and st.session_state.user:
        st.success(f"Welcome back, {st.session_state.user['name']}! ✅")
    else:
        welcomeui()