pages/Introduction.py

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

dash.register_page(__name__, path='/', name="Control Room")

layout = html.Div([
    # --- Paper Header Section ---
    html.Div([
        html.H1("Deep Learning for Financial Statement Fraud Detection", 
                className="text-white fw-bold", 
                style={"fontFamily": "serif", "letterSpacing": "1px", "fontSize": "3rem"}),
        
        html.P("A Comparative Analysis of Transformers-based Architectures in SEC Filing Audits",
                className="text-info text-uppercase fw-light mb-4",
                style={"letterSpacing": "3px", "fontSize": "0.9rem"}),
        
        # Abstract-style Introduction
        html.Div([
            html.P([
                html.B("Abstract: "),
                "This intelligence system leverages Bidirectional Encoder Representations from Transformers (BERT) "
                "to identify anomalous patterns in corporate filings. By integrating FinBERT and DeBERTa-v3 architectures "
                "with Parameter-Efficient Fine-Tuning (PEFT), the engine achieves high-precision risk scoring, "
                "transforming qualitative financial narratives into quantitative fraud probability metrics."
            ], className="text-muted mx-auto", style={"maxWidth": "800px", "textAlign": "justify", "lineHeight": "1.6"})
        ], className="mb-5")
    ], className="text-center mt-5 mb-5"),

    # --- Quantitative Performance Metrics (The "Results" Row) ---
    dbc.Row([
        dbc.Col(
            html.Div([
                html.Small("DATABASE SCOPE", className="text-muted fw-bold"),
                html.H2("1,284", className="text-white fw-bold mt-2"),
                html.Div(style={"height": "2px", "width": "40px", "background": "#00d2ff", "margin": "10px 0"}),
                html.P("Processed Document Samples", className="text-muted small")
            ], className="modern-card p-4", style={"borderLeft": "1px solid #00d2ff"}), width=4
        ),
        dbc.Col(
            html.Div([
                html.Small("ANOMALY DETECTION", className="text-muted fw-bold"),
                html.H2("12", className="text-white fw-bold mt-2"),
                html.Div(style={"height": "2px", "width": "40px", "background": "#dc3545", "margin": "10px 0"}),
                html.P("Validated Risk Sigils", className="text-muted small")
            ], className="modern-card p-4", style={"borderLeft": "1px solid #dc3545"}), width=4
        ),
        dbc.Col(
            html.Div([
                html.Small("SOTA BENCHMARK (F1)", className="text-muted fw-bold"),
                html.H2("93.4%", className="text-white fw-bold mt-2"),
                html.Div(style={"height": "2px", "width": "40px", "background": "#9d50bb", "margin": "10px 0"}),
                html.P("DeBERTa-v3 Engine Performance", className="text-muted small")
            ], className="modern-card p-4", style={"borderLeft": "1px solid #9d50bb"}), width=4
        ),
    ], className="mb-5 g-4"),

    # --- Methodology & Execution ---
    dbc.Row([
        dbc.Col([
            html.Div([
                html.H4("Experimental Protocol", className="text-white mb-3", style={"fontFamily": "serif"}),
                html.P([
                    "The detection engine utilizes cross-attention mechanisms to parse semantic irregularities. "
                    "Select 'Launch Detection' to initiate the inference pipeline on raw unstructured text data."
                ], className="text-muted mb-4"),
                dbc.Button("Launch Inference Engine", href="/detection",
                            className="px-5 py-2",
                            style={
                                "background": "transparent", 
                                "border": "1px solid #00d2ff", 
                                "color": "#00d2ff",
                                "borderRadius": "0",
                                "textTransform": "uppercase",
                                "letterSpacing": "2px"
                            })
            ], className="modern-card p-5", style={"border": "1px solid rgba(255,255,255,0.05)"})
        ], width=12)
    ])
])