Application.py

import streamlit as st
import leafmap.foliumap as leafmap

from config import setup_page, render_sidebar, LONDON_CENTER, DEFAULT_ZOOM

# ── Page setup ────────────────────────────────────────────────────────────────
setup_page("Home", icon="🏠")
render_sidebar()

# ── Hero section ──────────────────────────────────────────────────────────────
st.markdown(
    """
    <div style="
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        border-radius: 1rem;
        padding: 2.5rem 2rem;
        margin-bottom: 1.5rem;
        color: white;
        text-align: center;
    ">
        <h1 style="margin:0; font-size:2.4rem;">🗺️ Interactive Crime Map</h1>
        <p style="margin:0.5rem 0 0 0; font-size:1.1rem; opacity:0.85;">
            Exploring hate speech &amp; crime patterns across London boroughs
        </p>
    </div>
    """,
    unsafe_allow_html=True,
)

# ── Quick overview metrics ────────────────────────────────────────────────────
col1, col2, col3 = st.columns(3)
col1.metric("📍 Borough Coverage", "33", "All London boroughs")
col2.metric("📊 Data Sources", "3", "Tweets + MPS Crime")
col3.metric("🤖 Detection Models", "2", "CardiffNLP · TweetNLP")

st.divider()

# ── About section ─────────────────────────────────────────────────────────────
st.markdown("### About This Application")

st.markdown(
    """
    This interactive crime mapping platform lets you **explore, compare, and analyse** 
    hate speech and crime data across London. Built with modern open-source geospatial 
    tools, it provides three complementary views:
    """
)

about_col1, about_col2, about_col3 = st.columns(3)

with about_col1:
    st.markdown(
        """
        #### ↔️ Comparison
        Side-by-side choropleth maps comparing hate tweets, 
        MPS hate crime data, and MPS all-crime data. Upload 
        your own GeoJSON for custom analysis.
        """
    )

with about_col2:
    st.markdown(
        """
        #### 😡 Hate Tweets
        Point-level interactive map of geolocated hate speech 
        tweets in London (Dec 2022), classified by two 
        state-of-the-art NLP models.
        """
    )

with about_col3:
    st.markdown(
        """
        #### 📈 Statistics
        Borough-level charts, rankings, and correlation 
        analysis between online hate speech and officially 
        recorded crime figures.
        """
    )

st.divider()

# ── Interactive overview map ──────────────────────────────────────────────────
st.markdown("### 🌍 London at a Glance")
st.caption("An overview map of London boroughs — navigate to the other pages for detailed analysis.")

m = leafmap.Map(center=LONDON_CENTER, zoom=DEFAULT_ZOOM)
m.add_basemap("CartoDB.Positron")
m.add_geojson(
    "https://raw.githubusercontent.com/yunusserhat/data/main/data/londonborough.geojson",
    layer_name="London Boroughs",
    style={"color": "#0f3460", "weight": 2, "fillOpacity": 0.08},
)
m.to_streamlit(height=500)

# ── Tech stack footer ────────────────────────────────────────────────────────
st.divider()
st.markdown(
    """
    <div style="text-align:center; opacity:0.6; font-size:0.85rem; padding:0.5rem 0;">
        Built with 
        <a href="https://streamlit.io" target="_blank">Streamlit</a> · 
        <a href="https://leafmap.org" target="_blank">Leafmap</a> · 
        <a href="https://geopandas.org" target="_blank">GeoPandas</a> · 
        <a href="https://python-visualization.github.io/folium/" target="_blank">Folium</a>
    </div>
    """,
    unsafe_allow_html=True,
)

st.info("👈 Use the sidebar to navigate between pages.")