<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootCoordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.home.HomeFragment">

    <!-- 原来的内容：背景 + VIP + 权益 + 按钮 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 背景 -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/bg"
            android:scaleType="fitXY"
            android:adjustViewBounds="true" />

        <!-- 内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical">

            <!-- vip -->
            <!-- 成为会员 -->
            <ImageView
                android:id="@+id/vip"
                android:layout_width="216dp"
                android:layout_height="161dp"
                android:layout_gravity="top|center_horizontal"
                android:layout_marginTop="40dp"
                android:scaleType="fitCenter"
                android:src="@drawable/vip" />

            <TextView
                android:id="@+id/member"
                android:layout_marginTop="28dp"
                android:layout_width="290dp"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:textStyle="bold"
                android:textColor="#1B1F1A"
                android:layout_gravity="center_horizontal"
                android:text="Become A Member Of LOVE KEY" />

            <TextView
                android:id="@+id/Unlock"
                android:layout_marginTop="3dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                android:textColor="#1B1F1A"
                android:layout_gravity="center_horizontal"
                android:text="Unlock all functions" />

            <!-- 权益 -->
            <LinearLayout
                android:layout_marginTop="22dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

                <!-- 权益1 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ai_dialogue"
                        android:scaleType="fitCenter" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12sp"
                        android:gravity="center"
                        android:textColor="#1B1F1A"
                        android:text="Wireless sub-AI dialogue" />
                </LinearLayout>

                <!-- 权益2 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_horizontal"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/personalized_keyboard"
                        android:scaleType="fitCenter" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12sp"
                        android:gravity="center"
                        android:textColor="#1B1F1A"
                        android:text="Personalized keyboard" />
                </LinearLayout>

                <!-- 权益3 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_horizontal"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_persona"
                        android:scaleType="fitCenter" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12sp"
                        android:gravity="center"
                        android:textColor="#1B1F1A"
                        android:text="Chat persona" />
                </LinearLayout>

                <!-- 权益4 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_horizontal"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/emotional_counseling"
                        android:scaleType="fitCenter" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12sp"
                        android:gravity="center"
                        android:textColor="#1B1F1A"
                        android:text="Emotional counseling" />
                </LinearLayout>
            </LinearLayout>

            <!-- 按钮 -->
            <LinearLayout
                android:id="@+id/rechargeButton"
                android:layout_marginTop="22dp"
                android:layout_width="257dp"
                android:layout_height="57dp"
                android:layout_gravity="center_horizontal"
                android:gravity="center"
                android:background="@drawable/button_bg"
                android:elevation="4dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:textColor="#1B1F1A"
                    android:text="Recharge now" />
            </LinearLayout>

        </LinearLayout>
    </FrameLayout>

    <!-- 半透明遮罩：点击 / 下滑关闭底部盒子 -->
    <View
        android:id="@+id/view_scrim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#66000000"
        android:visibility="gone" />

    <!-- 圆角底部盒子（BottomSheet） -->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:backgroundTint="@android:color/white"
        app:cardUseCompatPadding="false"
        app:cardElevation="8dp"
        app:cardBackgroundColor="@android:color/white"
        app:shapeAppearance="@style/ShapeAppearance.TopRoundedOnly"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <ImageView
            android:id="@+id/backgroundImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/option_background"
            android:scaleType="fitXY"
            android:adjustViewBounds="true" />

        <!-- 盒子内容 -->
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- 顶部“可点击的头部区域”，点击可展开/收起 -->
            <LinearLayout
                android:id="@+id/bottomSheetHeader"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:gravity="center"
                android:paddingTop="8dp"
                android:paddingBottom="8dp"
                android:orientation="vertical">

                <!-- 小横条指示器 -->
                <View
                    android:layout_width="40dp"
                    android:layout_height="4dp"
                    android:background="@drawable/bs_handle_bg" />
            </LinearLayout>

            <!-- 顶部选项栏：两个选项，对应两个列表 -->
            <LinearLayout
                android:id="@+id/topTabs"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:orientation="horizontal"
                android:gravity="center_vertical"
                android:paddingStart="16dp"
                android:paddingEnd="16dp">

                <TextView
                    android:id="@+id/tab_list1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:layout_marginEnd="20dp"
                    android:gravity="center"
                    android:text="Ranking List"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    android:textColor="#1B1F1A" />

                <TextView
                    android:id="@+id/tab_list2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:layout_marginStart="20dp"
                    android:gravity="center"
                    android:text="Persona circle"
                    android:textSize="14sp"
                    android:textColor="#801B1F1A" />
            </LinearLayout>

            <!-- 第二个列表下面的标签行（数量不固定），只在第二个列表时可见 -->
            <HorizontalScrollView
                android:id="@+id/tagScroll"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:visibility="gone"
                android:fillViewport="true"
                android:scrollbars="none"
                android:overScrollMode="never">

                <LinearLayout
                    android:id="@+id/tagContainer"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:gravity="center_vertical" />
            </HorizontalScrollView>
            
            <!-- 内容区：ViewPager2 里放不同的 RecyclerView（卡片列表）-->
            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

        </LinearLayout>

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

    <!-- 浮动按钮 -->
    <ImageView
        android:id="@+id/floatingImage"
        android:layout_width="92dp"
        android:layout_height="78dp"
        android:elevation="99dp"
        android:layout_gravity="center_vertical|end"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="80dp"
        android:src="@drawable/floating"
        android:scaleType="centerInside" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
