<?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"
    android:background="@color/softpos_surface">

    <!-- ── Main scrollable content ── -->
    <ScrollView
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

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

            <!-- ── Header / Hero card ── -->
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/bg_header_gradient">

                <!-- Logo top-left -->
                <ImageView
                    android:id="@+id/headerLogo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|start"
                    android:layout_margin="16dp"
                    android:src="@drawable/logo"
                    android:contentDescription="Shukria logo" />

                <!-- Settings icon top-right -->
                <ImageView
                    android:id="@+id/settingsIcon"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_gravity="top|end"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_settings"
                    android:padding="4dp"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:contentDescription="Settings" />

                <!-- Mascot image bottom-left -->
                <ImageView
                    android:id="@+id/mascotImage"
                    android:layout_width="110dp"
                    android:layout_height="110dp"
                    android:layout_gravity="bottom|start"
                    android:layout_marginStart="8dp"
                    android:src="@drawable/logo"
                    android:scaleType="fitStart"
                    android:contentDescription="Mascot" />

                <!-- Welcome text block, centre-right -->
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical|end"
                    android:layout_marginEnd="24dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/softpos_welcome"
                        android:textColor="@color/softpos_text_white"
                        android:textSize="22sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="@string/softpos_subtitle"
                        android:textColor="@color/softpos_text_subtitle"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans" />

                </LinearLayout>

            </FrameLayout>

            <!-- ── Payment options grid ── -->
            <GridLayout
                android:id="@+id/paymentGrid"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="12dp"
                android:columnCount="2"
                android:useDefaultMargins="false">

                <!-- Card Sale -->
                <LinearLayout
                    android:id="@+id/btnCardSale"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp"
                    android:layout_margin="8dp"
                    android:background="@drawable/bg_payment_card"
                    android:foreground="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true">
                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginBottom="10dp"
                        android:src="@drawable/ic_card_sale"
                        android:contentDescription="Card Sale" />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/btn_card_sale"
                        android:textColor="@color/softpos_card_text"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />
                </LinearLayout>

                <!-- QR Pay -->
                <LinearLayout
                    android:id="@+id/btnQrPay"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp"
                    android:layout_margin="8dp"
                    android:background="@drawable/bg_payment_card"
                    android:foreground="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true">
                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginBottom="10dp"
                        android:src="@drawable/ic_qr_pay"
                        android:contentDescription="QR Pay" />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/btn_qr_pay"
                        android:textColor="@color/softpos_card_text"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />
                </LinearLayout>

                <!-- Pay Link -->
                <LinearLayout
                    android:id="@+id/btnPayLink"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp"
                    android:layout_margin="8dp"
                    android:background="@drawable/bg_payment_card"
                    android:foreground="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true">
                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginBottom="10dp"
                        android:src="@drawable/ic_pay_link"
                        android:contentDescription="Pay Link" />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/btn_pay_link"
                        android:textColor="@color/softpos_card_text"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />
                </LinearLayout>

                <!-- Split Bill -->
                <LinearLayout
                    android:id="@+id/btnSplitBill"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp"
                    android:layout_margin="8dp"
                    android:background="@drawable/bg_payment_card"
                    android:foreground="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true">
                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginBottom="10dp"
                        android:src="@drawable/ic_split_bill"
                        android:contentDescription="Split Bill" />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/btn_split_bill"
                        android:textColor="@color/softpos_card_text"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />
                </LinearLayout>

                <!-- Refund -->
                <LinearLayout
                    android:id="@+id/btnRefund"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp"
                    android:layout_margin="8dp"
                    android:background="@drawable/bg_payment_card"
                    android:foreground="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true">
                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginBottom="10dp"
                        android:src="@drawable/ic_refund"
                        android:contentDescription="Refund" />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/btn_refund"
                        android:textColor="@color/softpos_card_text"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />
                </LinearLayout>

                <!-- Void -->
                <LinearLayout
                    android:id="@+id/btnVoid"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp"
                    android:layout_margin="8dp"
                    android:background="@drawable/bg_payment_card"
                    android:foreground="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true">
                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginBottom="10dp"
                        android:src="@drawable/ic_void"
                        android:contentDescription="Void" />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/btn_void"
                        android:textColor="@color/softpos_card_text"
                        android:textSize="13sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700" />
                </LinearLayout>

            </GridLayout>

            <!-- ── Bottom promotional banner ── -->
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:layout_margin="12dp"
                android:background="@drawable/bg_banner_gradient">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical|start"
                    android:layout_marginStart="20dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/banner_text"
                        android:textColor="@color/softpos_text_white"
                        android:textSize="14sp"
                        android:fontFamily="@font/dm_sans"
                        android:fontWeight="700"
                        android:lineSpacingMultiplier="1.3" />

                </LinearLayout>

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_gravity="center_vertical|end"
                    android:layout_marginEnd="12dp"
                    android:src="@drawable/logo"
                    android:scaleType="fitCenter"
                    android:alpha="0.3"
                    android:contentDescription="Banner illustration" />

            </FrameLayout>

        </LinearLayout>
    </ScrollView>

    <!-- ── Transaction processing overlay ── -->
    <LinearLayout
        android:id="@+id/processingOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/softpos_overlay_bg"
        android:orientation="vertical"
        android:gravity="center"
        android:visibility="gone">

        <ProgressBar
            android:id="@+id/processingSpinner"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:indeterminateTint="@color/softpos_text_white" />

        <TextView
            android:id="@+id/processingMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="@string/overlay_tap_card"
            android:textColor="@color/softpos_text_white"
            android:textSize="20sp"
            android:fontFamily="@font/dm_sans"
            android:fontWeight="700"
            android:gravity="center" />

    </LinearLayout>

    <!-- ── Transaction result overlay ── -->
    <LinearLayout
        android:id="@+id/resultOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/softpos_overlay_bg"
        android:orientation="vertical"
        android:gravity="center"
        android:visibility="gone">

        <TextView
            android:id="@+id/resultIcon"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:gravity="center"
            android:textSize="36sp"
            android:textColor="@color/softpos_text_white" />

        <TextView
            android:id="@+id/resultMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:textColor="@color/softpos_text_white"
            android:textSize="22sp"
            android:fontFamily="@font/dm_sans"
            android:fontWeight="700"
            android:gravity="center" />

        <Button
            android:id="@+id/retryButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="@string/overlay_retry"
            android:visibility="gone"
            style="@style/Theme.ExampleApp.Button.Positive"
            app:backgroundTint="@null" />

        <Button
            android:id="@+id/settingsButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="@string/overlay_go_to_settings"
            android:visibility="gone"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:textColor="@color/softpos_text_white" />

    </LinearLayout>

    <!-- ── Scheme haptics overlay (full-screen, same as debug) ── -->
    <com.mypinpad.android.hapticslibrary.SchemeHapticsAnimationView
        android:id="@+id/transactionProcessedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/scheme_haptics_background"
        android:visibility="invisible"
        app:autoPlay="false" />

</FrameLayout>
