import streamlit as st
from layout import gray_container, blue_container, yellow_container, card_grid, key_concept

def render():
    """Module 1: Introduction and Problematization"""
    
    st.title("Module 1: Introduction and Problematization")
    
    # Workshop overview in gray container
    overview_content = """
    <h3>Workshop Overview</h3>
    <p>
    This interactive workshop explores the application of OCR technology to historical documents,
    combining theoretical understanding with practical experiences. Designed for historians, 
    archivists, and digital humanities scholars, it offers both conceptual frameworks and hands-on skills.
    </p>
    """
    gray_container(overview_content)
    
    # For historians section with blue background
    historians_content = """
    <h3>For Historians:</h3>
    <p>
    How might OCR technology transform our access to and interpretation of historical 
    documents? What new research questions become possible when large archives 
    become machine-readable?
    </p>
    """
    blue_container(historians_content)
    
    # What is OCR section with yellow background
    ocr_content = """
    <h3>What is OCR?</h3>
    <p>
    Optical Character Recognition (OCR) technology enables computers to extract text from images and documents. 
    Modern OCR uses AI vision models to understand both the text and its visual context.
    </p>
    """
    yellow_container(ocr_content)
    
    # What you'll learn section
    st.subheader("What You'll Learn")
    
    # Create cards for the learning outcomes
    cards = [
        """
        <h4>Conceptual Understanding</h4>
        <ul>
            <li>Text-image relationships in historical documents</li>
            <li>Evolution of OCR technology</li>
            <li>AI vision models for document analysis</li>
            <li>Historical typography challenges</li>
        </ul>
        """,
        
        """
        <h4>Methodological Approaches</h4>
        <ul>
            <li>Critical frameworks for OCR research</li>
            <li>Hybrid computational methods</li>
            <li>Error analysis and interpretation</li>
            <li>Contextual reading strategies</li>
        </ul>
        """,
        
        """
        <h4>Practical Skills</h4>
        <ul>
            <li>Processing historical documents</li>
            <li>Analyzing extracted information</li>
            <li>Integrating OCR into workflows</li>
            <li>Building searchable archives</li>
        </ul>
        """
    ]
    
    card_grid(cards)
    
    # Add a key concept
    concept_content = """
    <h4>Workshop Structure</h4>
    <p>This workshop combines theory and practice through six modules, each building on the previous ones.</p>
    <p>Navigate between modules using the buttons at the bottom of the page.</p>
    """
    key_concept(concept_content)