pages/introduction.py

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

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

# Helper function for neat, styled filter badges
def filter_badge(label):
    return html.Span(label, style={
        "background": "rgba(0, 210, 255, 0.1)",
        "border": "1px solid rgba(0, 210, 255, 0.3)",
        "padding": "2px 8px",
        "borderRadius": "6px",
        "fontSize": "0.9rem",
        "margin": "0 2px",
        "color": "#00d2ff",
        "fontFamily": "monospace"
    })

layout = html.Div([
    # Hero Section
    html.Div([
        html.H1("Project Mission", className="text-white fw-bold mb-2"),
        html.P("Mapping the Universe through Ensemble Learning & Photometry", 
               className="lead text-info", style={"letterSpacing": "1px"}),
    ], className="mb-5"),

    # Main Glass Card
    dbc.Card([
        dbc.CardBody([
            # Engaging Narrative Introduction
            html.Div([
                html.H2("Mapping the Invisible: From Light to Data", 
                        className="text-white fw-bold mb-3", style={"letterSpacing": "1px"}),
                html.P([
                    "The objective is ambitious: to create a three-dimensional map of our Universe. "
                    "But how do we measure depth on a celestial vault that appears in 2D? "
                    "The answer resides in the correlation between distance and time—the ",
                    html.B("'lookback time'"),
                    "—and the use of advanced algorithms to decode the light of distant galaxies."
                ], className="text-light mb-5", style={"fontSize": "1.2rem", "lineHeight": "1.8", "fontStyle": "italic"}),
            ]),

            html.H3("Scientific Context", className="text-white mb-4"),
            
            html.P([
                "Modern extragalactic astronomy relies on the ",
                html.B("redshift"),
                " phenomenon to map the three-dimensional structure of the Universe. While spectroscopic methods provide reference-grade precision, their observational cost limits the scale of data we can collect."
            ], className="text-light mb-3", style={"fontSize": "1.1rem"}),

            html.P([
                "The upcoming ", html.B("Vera Rubin Observatory (LSST)"), 
                " will bridge this gap by capturing approximately ", html.B("20 billion galaxies"), 
                ". It utilizes a sophisticated photometric system across six distinct bands: ",
                filter_badge("u"), filter_badge("g"), filter_badge("r"), 
                filter_badge("i"), filter_badge("z"), " and ", filter_badge("y"), "."
            ], className="text-light mb-4", style={"fontSize": "1.1rem", "lineHeight": "1.8"}),

            # Methodological Section
            html.Div([
                html.H4("Our Approach", className="text-info mt-2 mb-3"),
                html.P([
                    "This engine optimizes redshift estimation by training on high-fidelity data from the ",
                    html.Span("DEEP2, DEEP3, and 3D-HST", className="text-white fw-bold"),
                    " surveys. We implement a comparative framework between ",
                    html.Span("Bagging", className="text-white fw-bold"), " and ",
                    html.Span("Boosting", className="text-white fw-bold"),
                    " algorithms to ensure maximum predictive accuracy for the next generation of sky surveys."
                ], className="text-light"),
            ], className="p-4 rounded-4", style={
                "background": "rgba(255, 255, 255, 0.03)", 
                "borderLeft": "4px solid #9d50bb"
            })
        ])
    ], className="modern-card p-4"),
])