<UserControl x:Class="UI.Outros.FrmAjuda"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Background="#0D1117">

    <UserControl.Resources>

        <Style x:Key="BtnPrimary" TargetType="Button">
            <Setter Property="Foreground"      Value="White"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Cursor"          Value="Hand"/>
            <Setter Property="FontSize"        Value="13"/>
            <Setter Property="FontWeight"      Value="SemiBold"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="bd" CornerRadius="9"
                                Background="{TemplateBinding Background}"
                                Padding="{TemplateBinding Padding}"
                                Height="{TemplateBinding Height}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="bd" Property="Opacity" Value="0.85"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="bd" Property="Opacity" Value="0.7"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="InputBusca" TargetType="TextBox">
            <Setter Property="Background"               Value="Transparent"/>
            <Setter Property="BorderThickness"          Value="0"/>
            <Setter Property="Foreground"               Value="#64748B"/>
            <Setter Property="FontSize"                 Value="13"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="CaretBrush"               Value="#3B82F6"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <Grid Margin="28 20 28 28">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="16"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- BREADCRUMB -->
            <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0 0 0 10">
                <TextBlock Text="‹" Foreground="#334155" FontSize="14"
                           Margin="0 0 4 0" VerticalAlignment="Center"/>
                <TextBlock Text="Início" Foreground="#334155" FontSize="13"
                           VerticalAlignment="Center" Cursor="Hand"/>
                <TextBlock Text=" › " Foreground="#334155" FontSize="13" VerticalAlignment="Center"/>
                <TextBlock Text="Ajuda" Foreground="#F1F5F9" FontSize="13"
                           FontWeight="SemiBold" VerticalAlignment="Center"/>
            </StackPanel>

            <!-- TÍTULO -->
            <TextBlock Grid.Row="1" Text="Ajuda"
                       Foreground="#F1F5F9" FontSize="26" FontWeight="Bold"/>

            <!-- CARD PRINCIPAL -->
            <Border Grid.Row="3" CornerRadius="16" BorderThickness="1"
                    BorderBrush="#1E2D4A" Padding="20">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="#111827" Offset="0"/>
                        <GradientStop Color="#0D1525" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel>

                    <!-- BARRA DE BUSCA -->
                    <Border Background="#131E35" BorderBrush="#1E2D4A" BorderThickness="1"
                            CornerRadius="10" Height="42" Margin="0 0 0 20">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="44"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="🔍" FontSize="14" Foreground="#334155"
                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <TextBox Grid.Column="1" Style="{StaticResource InputBusca}"
                                     Text="Buscar por resposta..." Foreground="#334155"/>
                        </Grid>
                    </Border>

                    <!-- GRID DE CARDS 3x2 -->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="12"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="12"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="12"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <!-- CARD 1: Começando -->
                        <Border Grid.Column="0" Grid.Row="0"
                                BorderThickness="1" CornerRadius="12" Padding="16" Cursor="Hand">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="BorderBrush" Value="#1E2D4A"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#111827" Offset="0"/>
                                                <GradientStop Color="#0F1A2E" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="#3B82F6"/>
                                            <Setter Property="Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                        <GradientStop Color="#162035" Offset="0"/>
                                                        <GradientStop Color="#111827" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                                    <Border Width="44" Height="44" CornerRadius="10"
                                            Background="#1A3A6E" Margin="0 0 12 0">
                                        <TextBlock Text="❓" FontSize="20"
                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <TextBlock Text="Começando com o&#x0a;Sistema SGI"
                                               Foreground="#F1F5F9" FontSize="14" FontWeight="SemiBold"
                                               VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </StackPanel>
                                <TextBlock Text="Aprenda os primeiros passos para uso do sistema."
                                           Foreground="#64748B" FontSize="12" TextWrapping="Wrap"/>
                                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                                    <TextBlock Text="Ver artigos" Foreground="#3B82F6" FontSize="12" Cursor="Hand"/>
                                    <TextBlock Text=" ›"          Foreground="#3B82F6" FontSize="12"/>
                                </StackPanel>
                            </StackPanel>
                        </Border>

                        <!-- CARD 2: Gerenciamento -->
                        <Border Grid.Column="2" Grid.Row="0"
                                BorderThickness="1" CornerRadius="12" Padding="16" Cursor="Hand">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="BorderBrush" Value="#1E2D4A"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#111827" Offset="0"/>
                                                <GradientStop Color="#0F1A2E" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="#3B82F6"/>
                                            <Setter Property="Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                        <GradientStop Color="#162035" Offset="0"/>
                                                        <GradientStop Color="#111827" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                                    <Border Width="44" Height="44" CornerRadius="10"
                                            Background="#1A2A3A" Margin="0 0 12 0">
                                        <TextBlock Text="👥" FontSize="20"
                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <TextBlock Text="Gerenciamento de&#x0a;Usuários"
                                               Foreground="#F1F5F9" FontSize="14" FontWeight="SemiBold"
                                               VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </StackPanel>
                                <TextBlock Text="Saiba como adicionar, editar e remover usuários."
                                           Foreground="#64748B" FontSize="12" TextWrapping="Wrap"/>
                                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                                    <TextBlock Text="Ver artigos" Foreground="#3B82F6" FontSize="12" Cursor="Hand"/>
                                    <TextBlock Text=" ›"          Foreground="#3B82F6" FontSize="12"/>
                                </StackPanel>
                            </StackPanel>
                        </Border>

                        <!-- CARD 3: Configurações -->
                        <Border Grid.Column="4" Grid.Row="0"
                                BorderThickness="1" CornerRadius="12" Padding="16" Cursor="Hand">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="BorderBrush" Value="#1E2D4A"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#111827" Offset="0"/>
                                                <GradientStop Color="#0F1A2E" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="#3B82F6"/>
                                            <Setter Property="Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                        <GradientStop Color="#162035" Offset="0"/>
                                                        <GradientStop Color="#111827" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                                    <Border Width="44" Height="44" CornerRadius="10"
                                            Background="#1A3A20" Margin="0 0 12 0">
                                        <TextBlock Text="⚙" FontSize="20"
                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <TextBlock Text="Configurações&#x0a;do Sistema"
                                               Foreground="#F1F5F9" FontSize="14" FontWeight="SemiBold"
                                               VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </StackPanel>
                                <TextBlock Text="Personalize as configurações de acordo com suas necessidades."
                                           Foreground="#64748B" FontSize="12" TextWrapping="Wrap"/>
                                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                                    <TextBlock Text="Ver artigos" Foreground="#3B82F6" FontSize="12" Cursor="Hand"/>
                                    <TextBlock Text=" ›"          Foreground="#3B82F6" FontSize="12"/>
                                </StackPanel>
                            </StackPanel>
                        </Border>

                        <!-- CARD 4: Segurança -->
                        <Border Grid.Column="0" Grid.Row="2"
                                BorderThickness="1" CornerRadius="12" Padding="16" Cursor="Hand">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="BorderBrush" Value="#1E2D4A"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#111827" Offset="0"/>
                                                <GradientStop Color="#0F1A2E" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="#3B82F6"/>
                                            <Setter Property="Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                        <GradientStop Color="#162035" Offset="0"/>
                                                        <GradientStop Color="#111827" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                                    <Border Width="44" Height="44" CornerRadius="10"
                                            Background="#3A2A10" Margin="0 0 12 0">
                                        <TextBlock Text="🔒" FontSize="20"
                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <TextBlock Text="Segurança e Acesso"
                                               Foreground="#F1F5F9" FontSize="14" FontWeight="SemiBold"
                                               VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </StackPanel>
                                <TextBlock Text="Mantenha suas informações seguras e controle o acesso."
                                           Foreground="#64748B" FontSize="12" TextWrapping="Wrap"/>
                                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                                    <TextBlock Text="Ver artigos" Foreground="#3B82F6" FontSize="12" Cursor="Hand"/>
                                    <TextBlock Text=" ›"          Foreground="#3B82F6" FontSize="12"/>
                                </StackPanel>
                            </StackPanel>
                        </Border>

                        <!-- CARD 5: Resolução de Problemas -->
                        <Border Grid.Column="2" Grid.Row="2"
                                BorderThickness="1" CornerRadius="12" Padding="16" Cursor="Hand">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="BorderBrush" Value="#1E2D4A"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#111827" Offset="0"/>
                                                <GradientStop Color="#0F1A2E" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="#3B82F6"/>
                                            <Setter Property="Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                        <GradientStop Color="#162035" Offset="0"/>
                                                        <GradientStop Color="#111827" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                                    <Border Width="44" Height="44" CornerRadius="10"
                                            Background="#1A2A3A" Margin="0 0 12 0">
                                        <TextBlock Text="🖥" FontSize="20"
                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <TextBlock Text="Resolução de&#x0a;Problemas"
                                               Foreground="#F1F5F9" FontSize="14" FontWeight="SemiBold"
                                               VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </StackPanel>
                                <TextBlock Text="Soluções para problemas comuns no uso do sistema."
                                           Foreground="#64748B" FontSize="12" TextWrapping="Wrap"/>
                                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                                    <TextBlock Text="Ver artigos" Foreground="#3B82F6" FontSize="12" Cursor="Hand"/>
                                    <TextBlock Text=" ›"          Foreground="#3B82F6" FontSize="12"/>
                                </StackPanel>
                            </StackPanel>
                        </Border>

                        <!-- CARD 6: Contato e Suporte -->
                        <Border Grid.Column="4" Grid.Row="2"
                                BorderThickness="1" CornerRadius="12" Padding="16" Cursor="Hand">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="BorderBrush" Value="#1A3A2A"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#0D1F16" Offset="0"/>
                                                <GradientStop Color="#111827" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="#22C55E"/>
                                            <Setter Property="Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                        <GradientStop Color="#0D2A1A" Offset="0"/>
                                                        <GradientStop Color="#111827" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                                    <Border Width="44" Height="44" CornerRadius="10"
                                            Background="#1A3A20" Margin="0 0 12 0">
                                        <TextBlock Text="💬" FontSize="20"
                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <TextBlock Text="Contato e Suporte"
                                               Foreground="#F1F5F9" FontSize="14" FontWeight="SemiBold"
                                               VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </StackPanel>
                                <TextBlock Text="Entre em contato com a equipe de suporte para obter ajuda."
                                           Foreground="#64748B" FontSize="12" TextWrapping="Wrap"/>
                                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                                    <TextBlock Text="Entrar em contato" Foreground="#22C55E" FontSize="12" Cursor="Hand"/>
                                    <TextBlock Text=" ›"               Foreground="#22C55E" FontSize="12"/>
                                </StackPanel>
                            </StackPanel>
                        </Border>

                    </Grid>

                    <!-- SEPARADOR -->
                    <Rectangle Height="1" Fill="#1E2D4A" Margin="0 24 0 20"/>

                    <!-- BOTÃO FEEDBACK + RODAPÉ -->
                    <StackPanel HorizontalAlignment="Center">
                        <Button Height="42" Padding="28 0"
                                Style="{StaticResource BtnPrimary}"
                                Click="BtnFeedback_Click">
                            <Button.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                    <GradientStop Color="#3B82F6" Offset="0"/>
                                    <GradientStop Color="#2563EB" Offset="1"/>
                                </LinearGradientBrush>
                            </Button.Background>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="📋" FontSize="14" Margin="0 0 8 0" VerticalAlignment="Center"/>
                                <TextBlock Text="Enviar Feedback" FontSize="13"
                                           FontWeight="SemiBold" VerticalAlignment="Center"/>
                            </StackPanel>
                        </Button>

                        <TextBlock Margin="0 14 0 0" HorizontalAlignment="Center"
                                   TextAlignment="Center" TextWrapping="Wrap" MaxWidth="600">
                            <Run Text="Ainda precisa de ajuda? "
                                 Foreground="#64748B" FontSize="12"/>
                            <Run Text="Estamos disponíveis para ajuda com qualquer dúvida ou problema que você possa ter."
                                 Foreground="#334155" FontSize="12"/>
                        </TextBlock>
                    </StackPanel>

                </StackPanel>
            </Border>
        </Grid>
    </ScrollViewer>
</UserControl>
