import streamlit as st
from layout import gray_container, card_grid, key_concept, research_question

def render():
    """Module 2: Text-Image Relations in Historical Archives"""
    
    st.title("Module 2: Text-Image Relations in Historical Archives")
    
    col1, col2 = st.columns([1, 1])
    
    with col1:
        textual_content = """
        <h3>Textual Elements</h3>
        <ul>
            <li><strong>Typography</strong>: Varying fonts, sizes, and styles</li>
            <li><strong>Layout</strong>: Columns, margins, and spacing</li>
            <li><strong>Marginalia</strong>: Notes, comments, and additions</li>
            <li><strong>Decorative Text</strong>: Illuminated letters and calligraphy</li>
        </ul>
        """
        gray_container(textual_content)
        
        visual_content = """
        <h3>Visual Elements</h3>
        <ul>
            <li><strong>Illustrations</strong>: Diagrams, maps, and artistic representations</li>
            <li><strong>Watermarks</strong>: Hidden identifiers that locate documents</li>
            <li><strong>Damage</strong>: Tears, stains, and fading affecting legibility</li>
            <li><strong>Material Features</strong>: Paper quality and physical dimensions</li>
        </ul>
        """
        gray_container(visual_content)
    
    with col2:
        interdependence_content = """
        <h3>Interdependence</h3>
        <p>The relationship between text and image in historical documents exists on a complex spectrum:</p>
        <ul>
            <li>Text functions as image (decorative headings)</li>
            <li>Images function as text (symbolic representations)</li>
            <li>Layout creates meaning through visual organization</li>
            <li>Material conditions affect both textual and visual elements</li>
        </ul>
        """
        gray_container(interdependence_content)
        
        # Display an example image
        st.image("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Book_of_Kells_folio_292r.jpg/800px-Book_of_Kells_folio_292r.jpg", 
                caption="Book of Kells - Example of text-image integration")
    
    # OCR Challenges section
    challenge_content = """
    <h3>OCR Challenges</h3>
    <p>These complex text-image relationships create particular challenges for OCR:</p>
    """
    gray_container(challenge_content)
    
    # Cards for OCR challenges
    cards = [
        """
        <h4>Distinguishing Text from Decoration</h4>
        <p>Where does ornamental text end and functional text begin?</p>
        """,
        
        """
        <h4>Handling Illustrations</h4>
        <p>Should they be processed as images or described as text?</p>
        """,
        
        """
        <h4>Interpreting Layout</h4>
        <p>How to capture the significance of spacing and organization?</p>
        """,
        
        """
        <h4>Preserving Context</h4>
        <p>Maintaining the relationship between textual and visual elements</p>
        """
    ]
    
    card_grid(cards)
    
    # Research question box
    research_content = """
    <h4>Research Question</h4>
    <p>How do we approach documents where the visual presentation is as meaningful as the textual content itself?</p>
    """
    research_question(research_content)