<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="{AppThemeBinding Light=#0B1020, Dark=#0A0A0A}">

    <!-- Vivid radial glow -->
    <ContentPage.Background>
        <RadialGradientBrush Center="0.3,0.3" Radius="0.9">
            <GradientStop Color="#00D4FF" Offset="0.0" />
            <GradientStop Color="#845EF7" Offset="0.55" />
            <GradientStop Color="#0B1020" Offset="1.0" />
        </RadialGradientBrush>
    </ContentPage.Background>

    <Grid Padding="24">
        <ScrollView>
            <VerticalStackLayout Spacing="20">

                <!-- Header card -->
                <Frame CornerRadius="22" Padding="24"
                       BackgroundColor="{AppThemeBinding Light=#10142A, Dark=#161A2B}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="24" Offset="0,10"/>
                    </Frame.Shadow>

                    <VerticalStackLayout Spacing="8">
                        <Label Text="✨ UI Showcase"
                               FontSize="34" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}" />
                       	<Label Text="Scroll down to see a sample of the UI controls you can use."
                               		FontSize="16"
                               		TextColor="{AppThemeBinding Light=#C7D2FE, Dark=#A5B4FC}" 
					HorizontalOptions="Center"/>
                        	<Label Text="(Still COBOL. Plain, simple COBOL.)"
                               		FontSize="16"
                               		TextColor="{AppThemeBinding Light=#C7D2FE, Dark=#A5B4FC}"
                                        HorizontalOptions="Center" />
     				<Button Text="Prove it!"
	                	        CornerRadius="12"
        	                	x:Name="CodeBtn"
		                        Clicked="ShowCode"
		                        FontSize="18"
        		                HeightRequest="50"
                			        BackgroundColor="#6366F1"
	                        	TextColor="White"
		                        HorizontalOptions="Center"
        		                WidthRequest="200"
                        	/>
                    </VerticalStackLayout>
                </Frame>

                <!-- Inputs -->
                <Frame CornerRadius="20" Padding="20"
                       BackgroundColor="{AppThemeBinding Light=#0F172A, Dark=#0B1220}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="18" Offset="0,8"/>
                    </Frame.Shadow>
                    <VerticalStackLayout Spacing="14">
                        <Label Text="Text Inputs" FontSize="20" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}" />

                        <Entry Placeholder="Your name"
                               TextColor="White"
                               PlaceholderColor="#94A3B8"
                               BackgroundColor="#111827"
                               HeightRequest="44"/>

                        <SearchBar Placeholder="Search anything"
                                   TextColor="White"
                                   PlaceholderColor="#94A3B8"
                                   BackgroundColor="#111827"
                                   HeightRequest="44"/>

                        <Editor Placeholder="Notes"
                                AutoSize="TextChanges"
                                TextColor="White"
                                PlaceholderColor="#94A3B8"
                                BackgroundColor="#111827"
                                HeightRequest="100"/>
                    </VerticalStackLayout>
                </Frame>

                <!-- Pickers -->
                <Frame CornerRadius="20" Padding="20"
                       BackgroundColor="{AppThemeBinding Light=#0F172A, Dark=#0B1220}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="18" Offset="0,8"/>
                    </Frame.Shadow>
                    <VerticalStackLayout Spacing="14">
                        <Label Text="Pickers" FontSize="20" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}"/>

                        <Picker Title="Choose an option"
                                TitleColor="#94A3B8"
                                TextColor="White"
                                BackgroundColor="#111827">
                            <Picker.Items>
                                <x:String>Option One</x:String>
                                <x:String>Option Two</x:String>
                                <x:String>Option Three</x:String>
                            </Picker.Items>
                        </Picker>

                        <DatePicker BackgroundColor="#111827"
                                    TextColor="White" />

                        <TimePicker BackgroundColor="#111827"
                                    TextColor="White" />
                    </VerticalStackLayout>
                </Frame>

                <!-- Toggles -->
                <Frame CornerRadius="20" Padding="20"
                       BackgroundColor="{AppThemeBinding Light=#0F172A, Dark=#0B1220}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="18" Offset="0,8"/>
                    </Frame.Shadow>
                    <VerticalStackLayout Spacing="14">
                        <Label Text="Toggles" FontSize="20" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}"/>

                        <HorizontalStackLayout Spacing="16" VerticalOptions="Center">
                            <Switch IsToggled="True" />
                            <Label Text="Enable feature" VerticalOptions="Center"
                                   TextColor="{AppThemeBinding Light=#E5E7EB, Dark=#E5E7EB}"/>
                        </HorizontalStackLayout>

                        <HorizontalStackLayout Spacing="16" VerticalOptions="Center">
                            <CheckBox IsChecked="True" />
                            <Label Text="Remember choice" VerticalOptions="Center"
                                   TextColor="{AppThemeBinding Light=#E5E7EB, Dark=#E5E7EB}"/>
                        </HorizontalStackLayout>

                        <Label Text="Select a mode:"
                               TextColor="{AppThemeBinding Light=#E5E7EB, Dark=#E5E7EB}" />

                        <HorizontalStackLayout Spacing="16">
                            <RadioButton Content="Alpha" GroupName="modes" IsChecked="True"/>
                            <RadioButton Content="Beta" GroupName="modes"/>
                            <RadioButton Content="Gamma" GroupName="modes"/>
                        </HorizontalStackLayout>
                    </VerticalStackLayout>
                </Frame>

                <!-- Values -->
                <Frame CornerRadius="20" Padding="20"
                       BackgroundColor="{AppThemeBinding Light=#0F172A, Dark=#0B1220}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="18" Offset="0,8"/>
                    </Frame.Shadow>
                    <VerticalStackLayout Spacing="14">
                        <Label Text="Values" FontSize="20" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}"/>

                        <HorizontalStackLayout Spacing="16" VerticalOptions="Center">
                            <Label Text="Volume" WidthRequest="80"
                                   TextColor="{AppThemeBinding Light=#E5E7EB, Dark=#E5E7EB}"/>
                            <Slider Minimum="0" Maximum="100" Value="70"/>
                        </HorizontalStackLayout>

                        <HorizontalStackLayout Spacing="16" VerticalOptions="Center">
                            <Label Text="Step" WidthRequest="80"
                                   TextColor="{AppThemeBinding Light=#E5E7EB, Dark=#E5E7EB}"/>
                            <Stepper Minimum="0" Maximum="10" Value="3" Increment="1"/>
                        </HorizontalStackLayout>

                        <Label Text="Progress" 
                               TextColor="{AppThemeBinding Light=#E5E7EB, Dark=#E5E7EB}"/>
                        <ProgressBar Progress="0.6" />
                        <ActivityIndicator IsRunning="True" />
                    </VerticalStackLayout>
                </Frame>

                <!-- List -->
                <Frame CornerRadius="20" Padding="20"
                       BackgroundColor="{AppThemeBinding Light=#0F172A, Dark=#0B1220}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="18" Offset="0,8"/>
                    </Frame.Shadow>
                    <VerticalStackLayout Spacing="14">
                        <Label Text="CollectionView" FontSize="20" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}"/>

                        <CollectionView HeightRequest="180" SelectionMode="Single">
                            <CollectionView.ItemsSource>
                                <x:Array Type="{x:Type x:String}">
                                    <x:String>Neon Lights</x:String>
                                    <x:String>Glass Panels</x:String>
                                    <x:String>Ocean Mist</x:String>
                                    <x:String>Midnight Jazz</x:String>
                                    <x:String>Sunrise Glow</x:String>
                                </x:Array>
                            </CollectionView.ItemsSource>
                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Frame CornerRadius="14" Padding="14" Margin="0,6"
                                           BackgroundColor="#111827">
                                        <Label Text="{Binding}" TextColor="White" />
                                    </Frame>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </VerticalStackLayout>
                </Frame>

                <!-- Buttons -->
                <Frame CornerRadius="20" Padding="20"
                       BackgroundColor="{AppThemeBinding Light=#0F172A, Dark=#0B1220}">
                    <Frame.Shadow>
                        <Shadow Brush="#000000" Opacity="0.35" Radius="18" Offset="0,8"/>
                    </Frame.Shadow>
                    <VerticalStackLayout Spacing="14">
                        <Label Text="Buttons" FontSize="20" FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light=White, Dark=White}"/>

                        <HorizontalStackLayout Spacing="12">
                            <Button Text="Primary"
                                    CornerRadius="14"
                                    HeightRequest="48"
                                    BackgroundColor="#6366F1"
                                    TextColor="White"
                                    Padding="18,10"/>
                            <Button Text="Outline"
                                    CornerRadius="14"
                                    HeightRequest="48"
                                    BackgroundColor="Transparent"
                                    TextColor="#A5B4FC"
                                    BorderColor="#A5B4FC"
                                    BorderWidth="2"
                                    Padding="18,10"/>
                            <Button Text="Danger"
                                    CornerRadius="14"
                                    HeightRequest="48"
                                    BackgroundColor="#EF4444"
                                    TextColor="White"
                                    Padding="18,10"/>
                        </HorizontalStackLayout>
                    </VerticalStackLayout>
                </Frame>

            </VerticalStackLayout>
        </ScrollView>
    </Grid>
</ContentPage>

