<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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/background_purple"
    android:fillViewport="true">

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

        <!-- HEADER AZUL -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="20dp"
            android:paddingBottom="20dp">

            <ImageButton
                android:id="@+id/btnSettings"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="top|end"
                android:layout_marginEnd="16dp"
                android:layout_marginTop="8dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_settings"
                app:tint="@color/white" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="vertical">

                <FrameLayout
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:background="@drawable/circle_bg">
                    
                    <ImageView
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:layout_gravity="center"
                        android:src="@drawable/ic_nav_profile"
                        app:tint="@color/purple_500"/>
                </FrameLayout>
            </LinearLayout>
        </FrameLayout>

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

            <!-- INFO DO UTILIZADOR -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Jvitor"
                android:textColor="@color/white"
                android:textSize="24sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="@usuario"
                android:textColor="#888888"
                android:textSize="14sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="20dp"
                    android:text="🇬🇧 1 Curso"
                    android:textColor="#bbbbbb"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="20dp"
                    android:text="13 Seguindo"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="8 Seguidores"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:backgroundTint="#ffffff"
                android:text="+ ADICIONAR AMIGOS"
                android:textColor="@color/purple_500"
                android:textStyle="bold" />

            <!-- VISÃO GERAL -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:layout_marginBottom="12dp"
                android:text="Visão Geral"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold" />

            <GridLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:columnCount="2"
                android:rowCount="2">

                <!-- CARD OFENSIVA -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:layout_margin="6dp"
                    android:background="@drawable/dark_card_bg"
                    android:orientation="horizontal"
                    android:padding="16dp"
                    android:gravity="center_vertical">

                    <TextView
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:text="🔥"
                        android:textSize="24sp"
                        android:gravity="center"/>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="12dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="21"
                            android:textColor="@color/black"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Ofensiva"
                            android:textColor="#888888"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>

                <!-- CARD XP -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:layout_margin="6dp"
                    android:background="@drawable/dark_card_bg"
                    android:orientation="horizontal"
                    android:padding="16dp"
                    android:gravity="center_vertical">

                    <TextView
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:text="⚡"
                        android:textSize="24sp"
                        android:gravity="center"/>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="12dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="1433"
                            android:textColor="@color/black"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Total de XP"
                            android:textColor="#888888"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>

                <!-- CARD LIGA -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:layout_margin="6dp"
                    android:background="@drawable/dark_card_bg"
                    android:orientation="horizontal"
                    android:padding="16dp"
                    android:gravity="center_vertical">

                    <TextView
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:text="🏆"
                        android:textSize="24sp"
                        android:gravity="center"/>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="12dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Esmeralda"
                            android:textColor="@color/black"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Liga Atual"
                            android:textColor="#888888"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>

                <!-- CARD TOP 3 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:layout_margin="6dp"
                    android:background="@drawable/dark_card_bg"
                    android:orientation="horizontal"
                    android:padding="16dp"
                    android:gravity="center_vertical">

                    <TextView
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:text="🏅"
                        android:textSize="24sp"
                        android:gravity="center"/>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="12dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="2"
                            android:textColor="@color/black"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Pódios no Top 3"
                            android:textColor="#888888"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>

            </GridLayout>


            <!-- AMIGOS -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:layout_marginBottom="12dp"
                android:text="Ofensivas dos Amigos"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold" />

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="none">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <!-- Amigo Vazio (Adicionar) -->
                    <LinearLayout
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="12dp"
                        android:gravity="center"
                        android:orientation="vertical">

                        <FrameLayout
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            android:background="@drawable/circle_dashed_bg">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="+"
                                android:textColor="@color/white"
                                android:textSize="32sp" />
                        </FrameLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:text="Convidar"
                            android:textColor="#888888"
                            android:textSize="12sp" />
                    </LinearLayout>

                </LinearLayout>
            </HorizontalScrollView>

        </LinearLayout>
    </LinearLayout>

</androidx.core.widget.NestedScrollView>
