src/contact.py

import streamlit as st

def main():
    # Updated CSS for Contact page
    st.markdown("""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        * {
            font-family: 'Inter', sans-serif !important;
            box-sizing: border-box;
        }

        .stApp {
            background: #ffffff;
            min-height: 100vh;
            color: #1f2a44;
            margin: 0 !important;
            padding: 0 !important;
        }

        #MainMenu {visibility: hidden;}
        footer {visibility: hidden;}
        .stDeployButton {display: none;}
        header {visibility: hidden;}
        .stApp > header {visibility: hidden;}

        /* Main Container */
        .main-container {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
            padding: 1rem 2rem;
        }

        /* Header Section */
        .header-section {
            text-align: center;
            margin-bottom: 2.5rem;
            padding: 1.5rem 0;
        }

        .header-title {
            font-size: 2.25rem;
            font-weight: 700;
            color: #1f2a44;
            margin: 0;
        }

        .header-subtitle {
            font-size: 1rem;
            color: #6b7280;
            font-weight: 400;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }

        /* Section Styling */
        .section {
            margin-bottom: 3rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .section-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: #1f2a44;
            margin-bottom: 1rem;
        }

        .section-description {
            font-size: 0.95rem;
            color: #6b7280;
            line-height: 1.6;
            text-align: center;
            max-width: 700px;
            margin: 0 auto 1.5rem;
        }

        /* Contact Layout */
        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        @media (max-width: 768px) {
            .contact-layout {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        /* Form Container */
        .form-container {
            background: #f9fafb;
            padding: 2rem;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }

        .form-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2a44;
            margin-bottom: 1.5rem;
        }

        /* Form Inputs */
        .stTextInput > div > div > input,
        .stTextArea > div > div > textarea {
            border-radius: 6px !important;
            border: 1px solid #d1d5db !important;
            padding: 0.75rem 1rem !important;
            font-size: 0.9rem !important;
            background: #ffffff !important;
            transition: border-color 0.2s ease !important;
        }

        .stTextInput > div > div > input:focus,
        .stTextArea > div > div > textarea:focus {
            border-color: #3b82f6 !important;
            outline: none !important;
        }

        .stTextInput > div > div > input::placeholder,
        .stTextArea > div > div > textarea::placeholder {
            color: #9ca3af !important;
        }

        /* Submit Button */
        .stButton > button {
            background: #3b82f6 !important;
            color: white !important;
            border-radius: 6px !important;
            padding: 0.75rem 1.5rem !important;
            font-size: 0.95rem !important;
            font-weight: 500 !important;
            transition: background-color 0.2s ease !important;
            border: none !important;
            width: 100% !important;
        }

        .stButton > button:hover {
            background: #2563eb !important;
        }

        /* Map Container */
        .map-container {
            background: #f9fafb;
            padding: 2rem;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }

        .map-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2a44;
            margin-bottom: 1.5rem;
        }

        .map-wrapper {
            border-radius: 6px;
            overflow: hidden;
        }

        .map-wrapper iframe {
            width: 100%;
            height: 300px;
            border: none;
        }

        /* Contact Info Cards */
        .contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
            max-width: 1200px;
            margin: 2.5rem auto;
            padding: 0 1rem;
        }

        .info-card {
            background: #f9fafb;
            color: #1f2a44;
            padding: 1.5rem;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #e5e7eb;
            transition: transform 0.2s ease;
        }

        .info-card:hover {
            transform: translateY(-3px);
        }

        .info-card-icon {
            font-size: 1.75rem;
            margin-bottom: 0.75rem;
            color: #3b82f6;
        }

        .info-card-title {
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .info-card-text {
            font-size: 0.9rem;
            color: #6b7280;
            line-height: 1.4;
        }

        /* Footer */
        .footer {
            border-top: 1px solid #e5e7eb;
            padding: 1.5rem 0;
            text-align: center;
            max-width: 1200px;
            margin: 2rem auto 0;
        }

        /* Success/Error Messages */
        .stAlert {
            border-radius: 6px !important;
            font-weight: 400 !important;
            margin: 1rem 0;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .main-container {
                padding: 1rem;
            }
            .contact-layout {
                padding: 0 0.5rem;
            }
            .contact-info {
                padding: 0 0.5rem;
            }
        }

        @media (max-width: 768px) {
            .header-title {
                font-size: 1.75rem;
            }
            .header-subtitle {
                font-size: 0.9rem;
            }
            .section-title {
                font-size: 1.5rem;
            }
            .form-container,
            .map-container {
                padding: 1.25rem;
            }
            .form-title,
            .map-title {
                font-size: 1.25rem;
            }
        }

        @media (max-width: 480px) {
            .header-title {
                font-size: 1.5rem;
            }
            .header-subtitle {
                font-size: 0.85rem;
            }
            .section-title {
                font-size: 1.25rem;
            }
            .section-description {
                font-size: 0.85rem;
            }
            .form-container,
            .map-container {
                padding: 1rem;
            }
            .contact-info {
                gap: 1rem;
            }
        }
    </style>
    """, unsafe_allow_html=True)

    # Main Container
    st.markdown('<div class="main-container">', unsafe_allow_html=True)
    
    # Header Section
    st.markdown("""
    <div class="header-section">
        <h1 class="header-title">📋 TruthCheck - Advanced Fake News Detector</h1>
        <p class="header-subtitle">Reach out for inquiries, feedback, or support</p>
    </div>
    """, unsafe_allow_html=True)

    # Get in Touch Section
    st.markdown("""
    <div class="section">
        <h2 class="section-title">Get in Touch</h2>
        <p class="section-description">
            Have questions or need assistance? Use the form below or our contact details to connect with us.
        </p>
    </div>
    """, unsafe_allow_html=True)

    # Contact Layout
    st.markdown('<div class="contact-layout">', unsafe_allow_html=True)
    
    # Contact Form Column
    st.markdown("""
    <div class="form-container">
        <h3 class="form-title">Send a Message</h3>
    """, unsafe_allow_html=True)

    # Contact Form
    with st.form(key="contact_form", clear_on_submit=True):
        col1, col2 = st.columns([1, 1])
        
        with col1:
            name = st.text_input("Full Name", placeholder="Your full name")
        with col2:
            email = st.text_input("Email", placeholder="Your email address")
        
        subject = st.text_input("Subject", placeholder="What's your inquiry about?")
        message = st.text_area("Message", placeholder="Your message here...", height=100)
        
        submit_button = st.form_submit_button("Send Message")

        if submit_button:
            if name and email and subject and message:
                st.success("Thank you! Your message has been sent. We'll respond within 24 hours.")
            else:
                st.error("Please complete all fields before submitting.")

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

    # Map Container Column
    st.markdown("""
    <div class="map-container">
        <h3 class="map-title">Our Location</h3>
        <div class="map-wrapper">
           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3432.728046226142!2d73.14653207528688!3d30.641621074628397!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3922b6e4dde0c501%3A0xc37ea3d85326203!2sCOMSATS%20University%20Islamabad%20-%20Sahiwal%20Campus!5e0!3m2!1sen!2s!4v1753523148476!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
    """, unsafe_allow_html=True)
    
    st.markdown('</div>', unsafe_allow_html=True)  # Close contact-layout

    # Contact Information Cards
    st.markdown("""
    <div class="contact-info">
        <div class="info-card">
            <div class="info-card-icon">📧</div>
            <div class="info-card-title">Email</div>
            <div class="info-card-text">[email protected]<br>[email protected]</div>
        </div>
        <div class="info-card">
            <div class="info-card-icon">📞</div>
            <div class="info-card-title">Phone</div>
            <div class="info-card-text">+92309-1111977<br>+92336-6569117<br>Mon-Fri 9AM-5PM</div>
        </div>
        <div class="info-card">
            <div class="info-card-icon">📍</div>
            <div class="info-card-title">Address</div>
            <div class="info-card-text">COMSATS University Islamabad<br>Sahiwal Campus</div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Footer
    st.markdown("---")
    st.markdown(
        '<p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2025</p>',
        unsafe_allow_html=True
    )

    st.markdown('</div>', unsafe_allow_html=True)  # Close main-container

if __name__ == "__main__":
    main()