<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_base">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- Header Card -->
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@color/bg_surface"
            app:cardCornerRadius="12dp"
            app:cardElevation="0dp"
            app:strokeWidth="2dp"
            app:strokeColor="@color/brand">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="24dp">

                <!-- Live badge -->
                <LinearLayout
                    android:id="@+id/live_badge"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center_vertical"
                    android:background="@drawable/bg_circle_green"
                    android:paddingHorizontal="10dp"
                    android:paddingVertical="4dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <View
                        android:layout_width="6dp"
                        android:layout_height="6dp"
                        android:background="@drawable/bg_circle_light_gray"
                        android:layout_marginEnd="6dp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/font_ibm_plex_mono"
                        android:text="DIRETO"
                        android:textColor="@color/bg_base"
                        android:textSize="9sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <TextView
                    android:id="@+id/detail_game_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:fontFamily="@font/font_ibm_plex_mono"
                    android:text="65'"
                    android:textColor="@color/brand"
                    android:textSize="16sp"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/live_badge" />

                <TextView
                    android:id="@+id/detail_home_team"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:gravity="center"
                    android:fontFamily="@font/font_ibm_plex_sans"
                    android:text="Home"
                    android:textColor="@color/text_1"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toStartOf="@+id/detail_score"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/detail_game_time" />

                <TextView
                    android:id="@+id/detail_score"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="16dp"
                    android:fontFamily="@font/font_bebas_neue"
                    android:text="1 - 1"
                    android:textColor="@color/brand"
                    android:textSize="40sp"
                    android:letterSpacing="0.04"
                    app:layout_constraintBottom_toBottomOf="@+id/detail_home_team"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/detail_home_team" />

                <TextView
                    android:id="@+id/detail_away_team"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:fontFamily="@font/font_ibm_plex_sans"
                    android:text="Away"
                    android:textColor="@color/text_1"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="@+id/detail_home_team"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/detail_score"
                    app:layout_constraintTop_toTopOf="@+id/detail_home_team" />
            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.card.MaterialCardView>

        <!-- Stats Section -->
        <TextView
            android:id="@+id/text_stats_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="12dp"
            android:fontFamily="@font/font_bebas_neue"
            android:text="ESTATÍSTICAS AO VIVO"
            android:textColor="@color/text_1"
            android:textSize="20sp"
            android:letterSpacing="0.04" />

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="12dp"
            app:cardElevation="0dp"
            app:strokeWidth="1dp"
            app:strokeColor="@color/border"
            app:cardBackgroundColor="@color/bg_surface">
            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="20dp">

                <!-- Possession -->
                <TextView
                    android:id="@+id/label_possession"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:fontFamily="@font/font_ibm_plex_mono"
                    android:text="Posse de Bola"
                    android:textColor="@color/text_3"
                    android:textSize="10sp"
                    android:textStyle="bold"
                    android:textAllCaps="true" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_marginTop="8dp"
                    android:gravity="center_vertical">
                    
                    <TextView
                        android:id="@+id/text_possession_home"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/font_bebas_neue"
                        android:text="50%"
                        android:textSize="18sp"
                        android:textColor="@color/brand"
                        android:layout_marginEnd="12dp"/>
                        
                    <ProgressBar
                        android:id="@+id/progress_possession"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="0dp"
                        android:layout_height="8dp"
                        android:layout_weight="1"
                        android:max="100"
                        android:progress="50"
                        android:progressDrawable="@drawable/custom_progress_bg"/>
                        
                    <TextView
                        android:id="@+id/text_possession_away"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/font_bebas_neue"
                        android:text="50%"
                        android:textSize="18sp"
                        android:textColor="@color/accent"
                        android:layout_marginStart="12dp"/>
                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/border"
                    android:layout_marginVertical="16dp"/>

                <!-- Shots -->
                <TextView
                    android:id="@+id/label_shots"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:fontFamily="@font/font_ibm_plex_mono"
                    android:text="Remates"
                    android:textColor="@color/text_3"
                    android:textSize="10sp"
                    android:textStyle="bold"
                    android:textAllCaps="true" />

                <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:orientation="horizontal"
                     android:layout_marginTop="8dp"
                     android:gravity="center">

                     <TextView
                        android:id="@+id/text_shots_home"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/font_bebas_neue"
                        android:text="5"
                        android:textSize="28sp"
                        android:textColor="@color/brand"
                        android:layout_marginEnd="32dp"/>

                     <TextView
                        android:id="@+id/text_shots_away"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/font_bebas_neue"
                        android:text="3"
                        android:textSize="28sp"
                        android:textColor="@color/accent"
                        android:layout_marginStart="32dp"/>
                </LinearLayout>

            </LinearLayout>
        </com.google.android.material.card.MaterialCardView>
    </LinearLayout>
</ScrollView>
