import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

dash.register_page(__name__, path='/photometry')

layout = html.Div([
    html.Div([
        # Title and Subtitle in English
        html.H1("Photometry: Seeing Blur to See Big", className="text-white fw-bold mb-2"),
        html.P("Trading fine detail for cosmic scale", className="lead text-info"),
    ], className="mb-5"),

    dbc.Card([
        dbc.CardBody([
            html.H3("The Photometric Compromise", className="text-white mb-4"),
            
            html.P([
                "Obtaining detailed spectra is incredibly time-consuming for telescopes. Instead, we use cameras equipped with ",
                html.B("colored filters"), " (such as the u, g, r, i, z, y bands of the Vera Rubin Observatory) to measure average luminosity across wide color ranges."
            ], className="text-light mb-4"),

            # Dark Mode Comparison Image
            html.Div([
                html.Img(
                    src=dash.get_asset_url('photometry.jpg'), 
                    style={
                        "width": "100%", 
                        "maxWidth": "900px", 
                        "borderRadius": "15px", 
                        "marginBottom": "15px",
                        "border": "1px solid rgba(0, 210, 255, 0.2)",
                        "display": "block",
                        "marginLeft": "auto",
                        "marginRight": "auto"
                    }
                ),
                html.P("Comparison: High-resolution Spectroscopy vs. Low-resolution Photometric 'color' bands.", 
                       className="text-muted small italic")
            ], className="text-center mb-5"),

            

            # Narrative Section
            html.Div([
                html.H4("Washing out the Details to Gain Scale", className="text-info mb-3"),
                html.P([
                    "Although the fine details (spectral lines) are 'washed out' by the averaging process, this method allows for unparalleled execution speed. ",
                    "By analyzing the brightness ratios between these bands—known as ", html.I("colors"), 
                    "—we can estimate the distance of billions of galaxies, whereas spectroscopy could only process a few thousand in the same timeframe."
                ], className="text-light")
            ], className="p-4 rounded-4 mb-4", style={
                "background": "rgba(255, 255, 255, 0.02)", 
                "border": "1px solid rgba(0, 210, 255, 0.3)"
            }),

            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.H5("Speed over Precision", className="text-warning"),
                        html.P(
                            "Photometry is the equivalent of low-resolution vision. Instead of thousands of data points, "
                            "we capture the broad energy distribution of a galaxy in a matter of seconds."
                        ),
                    ], className="p-3 mb-4 rounded bg-dark border-start border-warning border-4"),
                ], width=12, lg=6),
                
                dbc.Col([
                    html.Div([
                        html.H5("Mapping the Cosmos", className="text-success"),
                        html.P(
                            "Upcoming surveys like the LSST will image a significant fraction of the observable Universe, "
                            "creating a massive 3D map to study the Large-Scale Structure of our cosmos."
                        ),
                    ], className="p-3 mb-4 rounded bg-dark border-start border-success border-4"),
                ], width=12, lg=6),
            ]),

            # Closing thought
            html.Div([
                html.Hr(style={"borderColor": "rgba(255,255,255,0.1)"}),
                html.P([
                    "By trading the 'Golden Standard' for volume, we transition from deep pinpricks in the sky ",
                    "to a wide-angle view of the entire cosmic web."
                ], className="text-center text-muted mt-4")
            ])
        ])
    ], className="modern-card p-4"),
])