src/modules/module1.py

import streamlit as st
import json

def create_pdf(structure):
    pdf = FPDF()
    pdf.add_page()
    
    # Title
    pdf.set_font('Arial', 'B', 16)
    pdf.cell(0, 10, 'Informative Speech Structure', ln=True, align='C')
    pdf.ln(10)
    
    # Introduction
    pdf.set_font('Arial', 'B', 14)
    pdf.cell(0, 10, 'Introduction', ln=True)
    pdf.set_font('Arial', '', 12)
    intro_points = [
        '- Attention Getter',
        '- Topic Introduction',
        '- Credibility Statement',
        '- Preview of Main Points'
    ]
    for point in intro_points:
        pdf.cell(0, 10, point, ln=True)
    pdf.ln(5)
    
    # Main Points
    pdf.set_font('Arial', 'B', 14)
    pdf.cell(0, 10, 'Body', ln=True)
    for i, point in enumerate(structure['main_points'], 1):
        pdf.set_font('Arial', 'B', 12)
        pdf.cell(0, 10, f'Main Point {i}: {point["category"]}', ln=True)
        pdf.set_font('Arial', '', 12)
        for item in point['items']:
            pdf.cell(0, 10, f'- {item}', ln=True)
        pdf.ln(5)
    
    # Conclusion
    pdf.set_font('Arial', 'B', 14)
    pdf.cell(0, 10, 'Conclusion', ln=True)
    pdf.set_font('Arial', '', 12)
    conclusion_points = [
        '- Signal the End',
        '- Review Main Points',
        '- Memorable Closing'
    ]
    for point in conclusion_points:
        pdf.cell(0, 10, point, ln=True)
    
    return pdf

def show():
    # Add custom CSS for the download button and new sections
    st.markdown("""
        <style>
        div[data-testid="stDownloadButton"] button {
            background-color: #0066cc;
            color: white;
            font-weight: bold;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        div[data-testid="stDownloadButton"] button:hover {
            background-color: #0052a3;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        div[data-testid="stDownloadButton"] button p {
            color: white !important;
        }
        .main-point-box {
            background-color: #f0f2f6;
            border-radius: 10px;
            padding: 20px;
            margin: 10px 0;
            border-left: 5px solid #0066cc;
        }
        .reference-box {
            background-color: #fff3cd;
            border-radius: 10px;
            padding: 20px;
            margin: 10px 0;
            border-left: 5px solid #ffc107;
        }
        .example-box {
            background-color: #e8f4f8;
            border-radius: 10px;
            padding: 20px;
            margin: 10px 0;
            border-left: 5px solid #2E86C1;
        }
        </style>
    """, unsafe_allow_html=True)

    st.title("Module 1: Informative Speech Structure")

    # Introduction
    st.markdown("""
        Welcome to the National Speech & Debate Association's approach to informative speaking. 
        This module will guide you through creating an effective informative speech that educates, 
        engages, and enlightens your audience.
    """)

    # Learning Objectives
    st.subheader("Learning Objectives")
    st.markdown("""
    - Master the NSDA's three-point structure for informative speaking
    - Learn how to effectively use references to support your points
    - Create a well-organized speech that builds audience understanding
    - Develop engaging content that educates your audience
    """)

    # The Three-Point Structure
    st.subheader("The Three-Point Structure")
    st.markdown("""
        The foundation of an effective informative speech lies in its structure. 
        Every great informative speech follows a clear three-point structure that helps 
        your audience understand and remember your message.
    """)
    
    col1, col2, col3 = st.columns(3)
    
    with col1:
        st.markdown("""
            <div class="main-point-box">
                <h3>🔍 Point 1: Foundation</h3>
                <p>Start with the basics:</p>
                <ul>
                    <li>What is it?</li>
                    <li>How does it work?</li>
                    <li>Key features</li>
                </ul>
                <p><em>This builds your audience's understanding</em></p>
            </div>
        """, unsafe_allow_html=True)
    
    with col2:
        st.markdown("""
            <div class="main-point-box">
                <h3>💡 Point 2: Development</h3>
                <p>Build on the foundation:</p>
                <ul>
                    <li>How is it unique?</li>
                    <li>What makes it special?</li>
                    <li>Key differences</li>
                </ul>
                <p><em>This adds depth to their knowledge</em></p>
            </div>
        """, unsafe_allow_html=True)
    
    with col3:
        st.markdown("""
            <div class="main-point-box">
                <h3>🌍 Point 3: Implications</h3>
                <p>Connect to bigger picture:</p>
                <ul>
                    <li>Why does it matter?</li>
                    <li>Impact on society</li>
                    <li>Future significance</li>
                </ul>
                <p><em>This shows why it's important</em></p>
            </div>
        """, unsafe_allow_html=True)

    # Reference Section
    st.markdown("""
        <div class="reference-box">
            <h3>📚 The Power of References</h3>
            <p>References are crucial in informative speaking because they:</p>
            <ul>
                <li>Build credibility with your audience</li>
                <li>Support your main points with evidence</li>
                <li>Show thorough research and preparation</li>
                <li>Help you avoid plagiarism</li>
                <li>Allow listeners to verify your information</li>
            </ul>
            <p><strong>Remember:</strong> Every key fact, statistic, or quote in your speech should be traceable to a reliable source.</p>
        </div>
    """, unsafe_allow_html=True)

    # Example Section
    st.markdown("### 📱 Real-World Example")
    
    # Create three columns for the structure
    col1, col2, col3 = st.columns(3)
    
    with col1:
        st.info("""
        **Foundation**  
        What is Fairphone?
        - Company history
        - Basic features
        - Availability
        """)
    
    with col2:
        st.info("""
        **Development**  
        What makes it unique?
        - Modular design
        - Ethical manufacturing
        - Supply chain
        """)
    
    with col3:
        st.info("""
        **Implications**  
        Why does it matter?
        - E-waste impact
        - Industry standards
        - Future technology
        """)
    
    # Add a visual separator
    st.markdown("---")
    
    # Add a note about references
    st.markdown("""
    > 💡 **Pro Tip**: Each point should be supported by at least one credible source. 
    For example, when discussing e-waste impact, cite specific statistics or research studies.
    """)

    # Interactive Outline Builder
    st.subheader("Create Your Speech Structure")
    st.markdown("""
        Now it's your turn! Use the interactive builder below to create your own speech structure.
        Remember to:
        - Start with a strong foundation
        - Build on your first point
        - Connect to bigger implications
        - Include references for each key point
    """)

    # Outline Creation Process
    st.subheader("Outline Creation Process")
    
    # Create Your Outline Structure
    st.markdown("### Create Your Outline Structure")
    st.markdown("""
    Create your final structure with:
    - Introduction
    - Three main points
    - Conclusion
    """)
    
    # Interactive Speech Outlining Activity
    st.markdown("### 🎯 Create Your Speech Outline")
    
    # Add custom CSS for the blocks
    st.markdown("""
        <style>
        .main-point-block {
            background-color: #f0f2f6;
            border-radius: 10px;
            padding: 20px;
            margin: 10px 0;
            border-left: 5px solid #0066cc;
        }
        .supporting-points {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #e0e0e0;
        }
        </style>
    """, unsafe_allow_html=True)
    
    # Initialize session state
    if 'speech_outline' not in st.session_state:
        st.session_state.speech_outline = {
            'foundation': {'main': '', 'points': []},
            'development': {'main': '', 'points': []},
            'implications': {'main': '', 'points': []}
        }
    
    # Create three columns for the main points
    col1, col2, col3 = st.columns(3)
    
    with col1:
        st.markdown("##### 🔍 Foundation")
        st.markdown("What is the basic information your audience needs to know?")
        foundation_main = st.text_input(
            "Main Point:",
            value=st.session_state.speech_outline['foundation']['main'],
            help="The main idea about the basics of your topic"
        )
        if foundation_main:
            st.session_state.speech_outline['foundation']['main'] = foundation_main
            foundation_points = st.text_area(
                "Supporting Points (one per line):",
                value='\n'.join(st.session_state.speech_outline['foundation']['points']),
                help="List the key points that support your foundation"
            )
            if foundation_points:
                st.session_state.speech_outline['foundation']['points'] = [p.strip() for p in foundation_points.split('\n') if p.strip()]
    
    with col2:
        st.markdown("##### 💡 Development")
        st.markdown("What makes your topic unique or special?")
        development_main = st.text_input(
            "Main Point:",
            value=st.session_state.speech_outline['development']['main'],
            help="The main idea about what makes your topic unique"
        )
        if development_main:
            st.session_state.speech_outline['development']['main'] = development_main
            development_points = st.text_area(
                "Supporting Points (one per line):",
                value='\n'.join(st.session_state.speech_outline['development']['points']),
                help="List the key points that support your development"
            )
            if development_points:
                st.session_state.speech_outline['development']['points'] = [p.strip() for p in development_points.split('\n') if p.strip()]
    
    with col3:
        st.markdown("##### 🌍 Implications")
        st.markdown("Why does your topic matter to society?")
        implications_main = st.text_input(
            "Main Point:",
            value=st.session_state.speech_outline['implications']['main'],
            help="The main idea about why your topic matters"
        )
        if implications_main:
            st.session_state.speech_outline['implications']['main'] = implications_main
            implications_points = st.text_area(
                "Supporting Points (one per line):",
                value='\n'.join(st.session_state.speech_outline['implications']['points']),
                help="List the key points that support your implications"
            )
            if implications_points:
                st.session_state.speech_outline['implications']['points'] = [p.strip() for p in implications_points.split('\n') if p.strip()]
    
    # Generate Outline
    if st.button("📝 Generate Speech Outline"):
        st.markdown("### Your Speech Outline")
        
        # Create a single markdown box for the entire outline
        outline_content = f"""
        **Introduction**
        \n - Attention Getter
        \n - Topic Introduction
        \n - Credibility Statement
        \n - Preview of Main Points


        **Foundation**
        Main Point: {st.session_state.speech_outline['foundation']['main']}
        Supporting Points:
        {chr(10).join([f"• {point}" for point in st.session_state.speech_outline['foundation']['points']])}

        **Development**
        Main Point: {st.session_state.speech_outline['development']['main']}
        Supporting Points:
        {chr(10).join([f"• {point}" for point in st.session_state.speech_outline['development']['points']])}

        **Implications**
        Main Point: {st.session_state.speech_outline['implications']['main']}
        Supporting Points:
        {chr(10).join([f"• {point}" for point in st.session_state.speech_outline['implications']['points']])}

        \n**Conclusion**
        \n - Signal the End
        \n - Review Main Points
        \n - Memorable Closing
        """
        
        # Display the outline in a clean format
        st.markdown(outline_content)
        
        # Download Button
        outline_json = json.dumps(st.session_state.speech_outline, indent=2)
        st.download_button(
            label="📥 Download Your Outline",
            data=outline_json,
            file_name="speech_outline.json",
            mime="application/json"
        )

    # NSDA Tips
    st.subheader("NSDA Tips for Success")
    with st.expander("📚 Key Tips"):
        st.markdown("""
        - Don't expect a perfect outline on your first try
        - Your outline will evolve as you research and practice
        - Look for gaps in your information
        - Consider if visual aids would help explain complex concepts
        - Keep track of your time - staying within limits is crucial
        - Save all feedback and use it to improve
        """)

    # Next Steps
    st.info("""
    ### Next Steps
    After creating your structure:
    1. Begin researching your main points in detail
    2. Consider if visual aids would enhance your speech
    3. Practice your timing
    4. Move on to Module 2: Developing Your Speech Content
    """)