<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <!-- Original Layout - Hidden for Rollback -->
    <include
        android:id="@+id/original_layout_container"
        layout="@layout/app_fragment_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

    <!-- New Layout -->
    <RelativeLayout
        android:id="@+id/new_layout_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white_background">

        <!-- Header Section -->
        <RelativeLayout
            android:id="@+id/header_container"
            android:layout_width="match_parent"
            android:layout_height="@dimen/new_header_height"
            android:layout_alignParentTop="true">

            <!-- Purple gradient background -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bg_header_purple" />

            <!-- Neon spiral overlay -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/overlay_neon_spiral"
                android:alpha="0.6" />

            <!-- Shukria Logo (Top Left) -->
            <ImageView
                android:id="@+id/iv_logo"
                android:layout_width="150dp"
                android:layout_height="50dp"
                android:layout_alignParentStart="true"
                android:layout_marginStart="20dp"
                android:layout_marginTop="32dp"
                android:elevation="20dp"
                android:scaleType="fitStart"
                android:src="@drawable/shukria_logo" />

            <!-- Welcome Text -->
            <TextView
                android:id="@+id/tv_welcome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_alignParentEnd="true"
                android:layout_marginEnd="30dp"
                android:layout_marginStart="220dp"
                android:gravity="start"
                android:text="@string/new_welcome_title"
                android:textColor="@color/welcome_text_white"
                android:textSize="@dimen/new_welcome_title_size"
                android:textStyle="bold" />

            <!-- Subtitle -->
            <TextView
                android:id="@+id/tv_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tv_welcome"
                android:layout_alignStart="@id/tv_welcome"
                android:layout_marginTop="8dp"
                android:gravity="start"
                android:text="@string/new_welcome_subtitle"
                android:textColor="@color/welcome_text_white"
                android:textSize="@dimen/new_welcome_subtitle_size" />

            <!-- Decoration Squares (Top Right Area) -->
            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_marginEnd="16dp"
                android:layout_marginTop="70dp"
                android:scaleType="fitCenter"
                android:src="@drawable/ic_decoration_squares"
                android:alpha="0.7" />

        </RelativeLayout>

        <!-- Scrollable Content Area -->
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/header_container"
            android:fillViewport="true"
            android:overScrollMode="never">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="32dp"
                android:paddingBottom="16dp">

                <!-- Merchant Details Section -->
                <LinearLayout
                    android:id="@+id/ll_merchant_details"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginBottom="16dp"
                    android:orientation="vertical">

                    <acquire.app.widget.MqttStatusIndicator
                        android:id="@+id/mqtt_indicator_new"
                        android:layout_width="16dp"
                        android:layout_height="16dp"
                        android:layout_gravity="end"
                        android:layout_marginBottom="6dp"
                        android:clickable="true"
                        android:focusable="true" />

                    <TextView
                        android:id="@+id/tv_display_merchant_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="end"
                        android:text="Merchant Name"
                        android:textColor="@color/black"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/tv_display_mid_tid"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="end"
                        android:layout_marginTop="2dp"
                        android:text="MID/TID"
                        android:textColor="@color/black"
                        android:textSize="14sp" />

                </LinearLayout>

                <!-- Button Grid Container -->
                <androidx.viewpager2.widget.ViewPager2
                    android:id="@+id/view_pager_menu"
                    android:layout_width="match_parent"
                    android:layout_height="350dp"
                    android:clipToPadding="false"
                    android:overScrollMode="never" />

                <!-- Page Indicator Dots -->
                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rv_dot_menu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="8dp"
                    android:orientation="horizontal"
                    android:overScrollMode="never"
                    android:scrollbars="none"
                    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

                <!-- Bottom Promotional Banner -->
                <ImageView
                    android:id="@+id/iv_banner_bottom"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/new_banner_height"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="24dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginBottom="16dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/banner_bottom_qr" />

            </LinearLayout>

        </ScrollView>

        <!-- Mascot Character - Positioned absolutely to span header and button area -->
        <ImageView
            android:id="@+id/iv_mascot"
            android:layout_width="220dp"
            android:layout_height="220dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginStart="5dp"
            android:layout_marginTop="90dp"
            android:elevation="15dp"
            android:scaleType="fitCenter"
            android:src="@drawable/shukria_mascot" />

    </RelativeLayout>

</FrameLayout>
