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

# This must be in a separate file in the 'pages' folder
dash.register_page(__name__, path='/phenomenon')

layout = html.Div([
    html.Div([
        html.H1("The Physics of Redshift", className="text-white fw-bold mb-2"),
        html.P("Decoding the expansion of Spacetime", className="lead text-info"),
    ], className="mb-5"),

    dbc.Card([
        dbc.CardBody([
            # Section 1: The 3D Celestial Sphere
            html.H3("The 3D Celestial Sphere", className="text-white mb-4"),
            html.P([
                "For centuries, astronomers perceived stars and galaxies as being fixed on a two-dimensional sphere surrounding the Earth. ",
                html.B("Redshift is the key that shatters this illusion."), " Because light travels at a finite and constant speed, the distance of an object can be interpreted as ",
                html.I("lookback time"), ". Measuring redshift allows us to reconstruct the evolutionary history of the Universe in 'time slices'."
            ], className="text-light mb-4"),

            # The visual anchor
            html.Div([
                html.Img(
                    src=dash.get_asset_url('redshit.png'), 
                    style={
                        "width": "100%", "maxHeight": "380px", "objectFit": "contain",
                        "borderRadius": "24px", "marginBottom": "30px",
                        "border": "1px solid rgba(0, 210, 255, 0.2)"
                    }
                ),
            ], className="text-center"),

            # Section 2: Hubble's Law
            html.H3("Hubble's Law and the Stretching of Space", className="text-white mb-4"),
            html.P([
                "Redshift relies on a fundamental observation: the further away a galaxy is from us, the faster it appears to be receding. ",
                "This phenomenon, known as ", html.B("Hubble's Law"), ", is not due to a simple movement of galaxies through space, but to the expansion of the Universe itself."
            ], className="text-light mb-4"),

            

            html.P([
                "As the light from a distant galaxy travels toward us, the space it traverses stretches, which literally lengthens the wavelength of the light. ",
                "Since red represents the low-frequency (long wavelength) end of the visible spectrum, this stretching makes the light appear 'redder' than when it was originally emitted."
            ], className="text-light mb-4"),

            html.P([
                "Mathematically, the redshift (z) is defined by the ratio between the observed wavelength (", 
                html.Span("λobs", style={"fontStyle": "italic"}), ") and the emitted one:"
            ], className="text-light mb-4"),

            # Equation 6.4 - Redshift Definition
            dcc.Markdown(
                r"""
                $$1 + z = \frac{\lambda_{obs}}{\lambda_{em}}$$
                """,
                mathjax=True,
                style={"textAlign": "center", "fontSize": "26px", "color": "#17a2b8"}
            ),

            html.P([
                "This difference is caused by the expansion of the Universe and can be interpreted in terms "
                "of a scale factor a, which describes the linear stretching of spacetime:"
            ], className="text-light mt-5 mb-4"),

            # Equation 6.5 - Scale Factor
            dcc.Markdown(
                r"""
                $$1 + z = \frac{a_{obs}}{a_{em}} = \frac{1}{a_{em}}$$
                """,
                mathjax=True,
                style={"textAlign": "center", "fontSize": "26px", "color": "#17a2b8"}
            ),

            # Comoving Distance Section
            html.Div([
                html.H4("The ΛCDM Distance Relation", className="text-info mt-5 mb-3"),
                html.P("Assuming a flat universe, the comoving distance as a reference is obtained via:", 
                       className="text-light"),
                
                # Equation 6.6 - Comoving Distance Integral
                dcc.Markdown(
                    r"""
                    $$d_c(z) = \frac{c}{H_0} \int_{0}^{z} \frac{dz'}{\sqrt{\Omega_m(1+z')^3 + \Omega_r(1+z')^4 + \Omega_\Lambda}}$$
                    """,
                    mathjax=True,
                    style={"textAlign": "center", "fontSize": "22px", "color": "#9d50bb"}
                ),
                
                # IMPORTANT: Using raw string (r) here prevents the \Omega syntax error
                dcc.Markdown(
                    r"*Where* $c$ *is the speed of light,* $H_0$ *is the Hubble constant, and* $\Omega$ *terms represent the matter/energy budget.*",
                    mathjax=True,
                    style={"textAlign": "center", "color": "#adb5bd", "fontStyle": "italic"}
                ),
            ], className="p-4 rounded-4 mt-5", style={"background": "rgba(255, 255, 255, 0.02)", "border": "1px solid rgba(157, 80, 187, 0.3)"})
        ])
    ], className="modern-card p-4"),
])