struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
               Spacer()
                Button { } label: {
                    Image(systemName: "power")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .padding()
                }
                .frame(width: 56, height: 56)
                .glassBackgroundEffect(in: .circle)
            }
            
            ZStack {
                
                
                
                
                Button { } label: {
                    Circle()
                        .fill(.clear)
                }
                .glassBackgroundEffect(in: .circle)
//                .buttonStyle(.plain)
                
                Button { } label: {
                    Circle()
                        .fill(.clear)
                }
                .glassBackgroundEffect(in: .circle)
                .frame(width: 144, height: 144)
//                .buttonStyle(.plain)
                
                
                HStack {
                    Spacer()
                    VStack {
                        Image(systemName: "circle.fill")
                            .scaleEffect(0.5)
                        Spacer()
                        Image(systemName: "circle.fill")
                            .scaleEffect(0.5)
                    }
                    Spacer()
                }
                .padding()
                .padding()
                
                VStack {
                    Spacer()
                    HStack {
                        Image(systemName: "circle.fill")
                            .scaleEffect(0.5)
                        Spacer()
                        Image(systemName: "circle.fill")
                            .scaleEffect(0.5)
                    }
                    Spacer()
                }
                .padding()
                .padding()
            }
            .frame(width: 256, height: 256)
            
            VStack(spacing: 24) {
                HStack {
                    Button { } label: {
                        Image(systemName: "chevron.left")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .padding(36)
                    }
                    .frame(width: 96, height: 96)
                    .glassBackgroundEffect(in: .circle)
                    Spacer()
                    Button { } label: {
                        Image(systemName: "tv")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .foregroundStyle(.white, .clear)
                            .padding(36)
                    }
                    .frame(width: 96, height: 96)
                    .glassBackgroundEffect(in: .circle)
                }
                
                HStack {
                    VStack {
                        Button { } label: {
                            Image(systemName: "playpause")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .padding(38)
                        }
                        .frame(width: 96, height: 96)
                        .glassBackgroundEffect(in: .circle)
                        Spacer()
                        Button { } label: {
                            Image(systemName: "speaker.slash")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .padding(32)
                        }
                        .frame(width: 96, height: 96)
                        .glassBackgroundEffect(in: .circle)
                    }
                    Spacer()
                    Button { } label: {
                        VStack {
                            Image(systemName: "plus")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .padding(36)
                                .frame(width: 96, height: 96)
                            Spacer()
                            Image(systemName: "minus")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .padding(36)
                                .frame(width: 96, height: 96)
                        }
                        
                    }
                    .frame(width: 96, height: 212)
                    .glassBackgroundEffect(in: .capsule)
                }
                .frame(height: 212)
                
            }
            .padding(.horizontal)
            
            Spacer()
        }
        .padding()
        .frame(width: 256, height: 880)
        .glassBackgroundEffect()
        .persistentSystemOverlays(.hidden)
        .ornament(attachmentAnchor: .scene(.bottom)) {
            Button { } label: {
                Image(systemName: "mic")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .padding()
            }
            .frame(width: 64, height: 64)
            .glassBackgroundEffect(in: .circle)
        }
    }
}