<UserControl x:Class="CamBooth.App.Features.LiveView.TimerControlRectangleAnimation"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="900" d:DesignWidth="1600">
    <Grid>
        <Border x:Name="TimerContainer" Opacity="0">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

                <!-- Circular countdown ring -->
                <Grid Width="360" Height="360">

                    <!-- Track ring -->
                    <Ellipse Stroke="#1AFFFFFF"
                             StrokeThickness="12"
                             Width="320" Height="320"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"/>

                    <!-- Progress ring: StrokeDashArray[0] is animated from full to 0 -->
                    <Ellipse x:Name="CountdownRing"
                             Stroke="#D4AF37"
                             StrokeThickness="12"
                             Width="320" Height="320"
                             StrokeDashArray="83.78 83.78"
                             StrokeDashOffset="0"
                             StrokeStartLineCap="Round"
                             StrokeEndLineCap="Round"
                             RenderTransformOrigin="0.5,0.5"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center">
                        <Ellipse.RenderTransform>
                            <!-- Rotate so the ring starts at 12 o'clock -->
                            <RotateTransform Angle="-90"/>
                        </Ellipse.RenderTransform>
                    </Ellipse>

                    <!-- Countdown number -->
                    <TextBlock x:Name="CountdownNumber"
                               FontSize="180"
                               FontWeight="Black"
                               Foreground="White"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               RenderTransformOrigin="0.5,0.5"
                               Text="5">
                        <TextBlock.RenderTransform>
                            <ScaleTransform x:Name="CountdownNumberScale" ScaleX="1" ScaleY="1"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>

                </Grid>

                <!-- Instruction text below the ring -->
                <Border Background="#CC101010"
                        CornerRadius="16"
                        Padding="28,14"
                        HorizontalAlignment="Center"
                        Margin="0,24,0,0">
                    <TextBlock x:Name="InstructionText"
                               FontSize="46"
                               FontWeight="Bold"
                               Foreground="#D4AF37"
                               HorizontalAlignment="Center"
                               TextAlignment="Center"
                               TextWrapping="Wrap"
                               MaxWidth="900"
                               Text="Lächeln! 😊"/>
                </Border>

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