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

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

layout = html.Div([
    html.Div([
        html.H1("Spectroscopy: The Digital Fingerprint", className="text-white fw-bold mb-2"),
        html.P("The Golden Standard for Cosmic Mapping", className="lead text-info"),
    ], className="mb-5"),

    dbc.Card([
        dbc.CardBody([
            html.H3("The Golden Standard (L'étalon-or)", className="text-white mb-4"),
            
            html.P([
                "By decomposing the light from a galaxy, we can identify specific 'lines' (peaks or dips) caused by ",
                "atoms such as ", html.B("Hydrogen"), " or ", html.B("Oxygen"), ". Since we know the exact ",
                "laboratory wavelength of these lines, we can precisely measure how much they have been shifted."
            ], className="text-light mb-4"),

            # Your new asset: spectro.png
            html.Div([
                html.Img(
                    src=dash.get_asset_url('spectro.png'), 
                    style={
                        "width": "100%", "maxHeight": "350px", "objectFit": "contain",
                        "borderRadius": "15px", "marginBottom": "10px",
                        "border": "1px solid rgba(0, 210, 255, 0.2)"
                    }
                ),
                html.P("Galaxy Spectrum: Identifying H-alpha and OIII lines to calculate precise redshift.", 
                       className="text-muted small italic")
            ], className="text-center mb-5"),

            

            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.H5("The Insight", className="text-success"),
                        html.P(
                            "If we can identify these lines, the calculation of redshift is trivial and extremely precise. "
                            "This is the ideal method, known as Spectroscopic Redshift."
                        ),
                    ], className="p-3 mb-4 rounded bg-dark border-start border-success border-4"),
                ], width=12, lg=6),
                
                dbc.Col([
                    html.Div([
                        html.H5("The Problem", className="text-warning"),
                        html.P(
                            "This method is very expensive in terms of exposure time. It is impossible to apply "
                            "this to the billions of galaxies we must map to see the large-scale structure."
                        ),
                    ], className="p-3 mb-4 rounded bg-dark border-start border-warning border-4"),
                ], width=12, lg=6),
            ]),

            html.H4("The Mathematics of the Fingerprint", className="text-info mt-4 mb-3"),
            html.P([
                "To find the redshift (", html.Span("z", className="text-info"), 
                "), we compare the observed wavelength of a line to its rest wavelength:"
            ], className="text-light"),

            dcc.Markdown(
                r"""
                $$z = \frac{\lambda_{obs} - \lambda_{rest}}{\lambda_{rest}}$$
                """,
                mathjax=True,
                style={"textAlign": "center", "fontSize": "28px", "color": "#00d2ff", "padding": "20px"}
            )
        ])
    ], className="modern-card p-4"),
])