ScrollView chuqur — position, target layout va paging

// ═══════════════════════════════════════
//  SCROLL POZITSIYASINI KUZATISH (iOS 17+)
// ═══════════════════════════════════════
struct ScrollPozitsiyaMisol: View {
    @State private var joriyId: Int?

    var body: some View {
        VStack {
            Text("Joriy: #\(joriyId ?? 0)")
                .font(.headline)

            ScrollView {
                LazyVStack {
                    ForEach(1...100, id: \.self) { son in
                        Text("Element \(son)")
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(
                                joriyId == son
                                ? Color.blue.opacity(0.3)
                                : Color.gray.opacity(0.1)
                            )
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                    }
                }
                .scrollTargetLayout()
            }
            // joriyId — ko'rinadigan element kuzatiladi
            .scrollPosition(id: $joriyId)
        }
    }
}

// ═══════════════════════════════════════
//  PAGING — to'liq ekranli sahifalar (iOS 17+)
// ═══════════════════════════════════════
struct OnboardingKorinishi: View {
    let sahifalar = [
        ("Xush kelibsiz", "Ilovamizga kirganingiz uchun rahmat", "star.fill"),
        ("O'rganing", "Yangi bilimlar bilan tanishing", "book.fill"),
        ("Boshlang", "Hoziroq boshlang!", "rocket"),
    ]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                ForEach(sahifalar, id: \.0) { sahifa in
                    VStack(spacing: 20) {
                        Image(systemName: sahifa.2)
                            .font(.system(size: 80))
                            .foregroundStyle(.blue)
                        Text(sahifa.0)
                            .font(.title.bold())
                        Text(sahifa.1)
                            .foregroundStyle(.secondary)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .containerRelativeFrame(.horizontal)
                    // Har sahifa to'liq ekran kengligida
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)  // Sahifama-sahifa scroll
        .scrollIndicators(.hidden)       // Indicator yashirish
    }
}

// ═══════════════════════════════════════
//  CAROUSEL — view aligned snapping (iOS 17+)
// ═══════════════════════════════════════
struct CarouselKorinishi: View {
    let ranglar: [Color] = [.red, .blue, .green, .orange, .purple]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 16) {
                ForEach(ranglar, id: \.self) { rang in
                    RoundedRectangle(cornerRadius: 20)
                        .fill(rang.gradient)
                        .frame(width: 280, height: 180)
                        .overlay {
                            Text("Karta")
                                .font(.title2.bold())
                                .foregroundStyle(.white)
                        }
                        .shadow(radius: 5)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)  // Eng yaqin view ga snap
        .safeAreaPadding(.horizontal, 20)    // Chetlardan bo'shliq
        .scrollIndicators(.hidden)
    }
}

// ═══════════════════════════════════════
//  SCROLLVIEWREADER — element ga o'tish
// ═══════════════════════════════════════
struct DasturiyScrollMisol: View {
    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                // Tugma — pastga scroll
                Button("Oxiriga o'tish") {
                    withAnimation(.smooth) {
                        proxy.scrollTo("oxirgi", anchor: .bottom)
                    }
                }

                ScrollView {
                    LazyVStack {
                        ForEach(1...50, id: \.self) { son in
                            Text("Element \(son)")
                                .id(son) // ID berish
                                .padding()
                        }

                        Text("Oxirgi element")
                            .id("oxirgi")
                            .padding()
                            .background(Color.green.opacity(0.3))
                    }
                }
            }
        }
    }
}