Spin to Win

@props([
    // The prize labels, in clockwise order. 6 or 8 entries land best on the wheel.
    'segments' => ['10% OFF', 'Free shipping', '5% OFF', 'Try again', '15% OFF', 'Mystery gift', '20% OFF', 'Try again'],
    'heading' => 'Spin to win!',
    'subline' => 'Drop your email and spin the wheel for an instant, one-time discount code.',
    'placeholder' => 'you@example.com',
])

@php
    // Spin-to-win discount wheel. The wheel is an inline <svg> divided into N
    // equal wedges; each wedge <path> is filled with `currentColor` and tinted
    // by an ALTERNATING semantic token text-colour class (text-primary /
    // text-secondary / text-accent / text-muted) — never a raw colour. The
    // wedge geometry (the `d` arc) is computed here in PHP so the coordinates
    // are literal in the rendered markup. Interactivity is inline Alpine on the
    // plain <section>; the only inline style anywhere is the rotation transform
    // on the wheel <g>.
    $count = max(2, count($segments));

    // Wheel maths around a 200x200 viewBox (centre 100,100, radius 96).
    $cx = 100;
    $cy = 100;
    $r = 96;
    $step = 360.0 / $count;

    // Alternating fill + label token classes so adjacent wedges always contrast.
    $fillClasses = ['text-primary', 'text-secondary', 'text-accent', 'text-muted'];
    $labelClasses = ['text-primary-foreground', 'text-secondary-foreground', 'text-accent-foreground', 'text-foreground'];

    $wedges = [];
    foreach ($segments as $i => $label) {
        // Wedge i spans [i*step, (i+1)*step). 0deg points up (12 o'clock); we
        // offset by -90deg so wedge 0 starts at the top under the pointer.
        $a0 = deg2rad($i * $step - 90);
        $a1 = deg2rad(($i + 1) * $step - 90);

        $x0 = round($cx + $r * cos($a0), 3);
        $y0 = round($cy + $r * sin($a0), 3);
        $x1 = round($cx + $r * cos($a1), 3);
        $y1 = round($cy + $r * sin($a1), 3);

        // Mid-angle, used to place + rotate the label so it reads outward.
        $mid = deg2rad(($i + 0.5) * $step - 90);
        $lr = $r * 0.62;
        $lx = round($cx + $lr * cos($mid), 3);
        $ly = round($cy + $lr * sin($mid), 3);
        $labelRot = round(($i + 0.5) * $step, 3); // text baseline follows the spoke

        $wedges[] = [
            'd' => "M{$cx},{$cy} L{$x0},{$y0} A{$r},{$r} 0 0,1 {$x1},{$y1} Z",
            'fill' => $fillClasses[$i % count($fillClasses)],
            'label' => $labelClasses[$i % count($labelClasses)],
            'lx' => $lx,
            'ly' => $ly,
            'rot' => $labelRot,
            'text' => $label,
        ];
    }

    // JSON for the Alpine segment list (used to resolve the won prize).
    $segmentsJson = json_encode(array_map(fn ($s) => __($s), $segments), JSON_UNESCAPED_UNICODE);
@endphp

<section
    x-data="{
        angle: 0,
        spinning: false,
        result: null,
        step: {{ $step }},
        count: {{ $count }},
        segments: {{ $segmentsJson }},
        spin() {
            if (this.spinning) return;
            this.spinning = true;
            this.result = null;
            const index = Math.floor(Math.random() * this.count);
            // Wedge `index` is centred at (index + 0.5) * step from the top.
            // Rotate the wheel so that centre lands under the fixed top pointer:
            // bring it back to 0 (negative), add several full turns for drama.
            const turns = 5;
            const offset = (index + 0.5) * this.step;
            this.angle += turns * 360 + (360 - (this.angle % 360)) - offset;
            setTimeout(() => {
                this.result = this.segments[index];
                this.spinning = false;
            }, 3000);
        },
    }"
    {{ $attributes->merge(['class' => 'flex min-h-svh items-center justify-center bg-muted/40 px-4 py-12 text-foreground']) }}
>
    <x-ui.card class="relative w-full max-w-3xl overflow-hidden rounded-lg border border-border bg-card p-0 shadow-xl">
        <div class="grid grid-cols-1 sm:grid-cols-2">
            {{-- LEFT: the spin wheel --}}
            <div class="relative flex items-center justify-center bg-muted/30 px-6 py-10 sm:py-12">
                {{-- Fixed pointer triangle at the top, pointing down into the wheel. --}}
                <div class="pointer-events-none absolute top-6 z-10 text-primary" aria-hidden="true">
                    <svg viewBox="0 0 24 24" class="size-7 drop-shadow" fill="currentColor">
                        <path d="M12 20 2 6h20z" />
                    </svg>
                </div>

                <div class="relative aspect-square w-full max-w-[18rem]">
                    <svg viewBox="0 0 200 200" class="size-full" aria-hidden="true">
                        {{-- The rotating wheel group. ONLY inline style is the transform. --}}
                        <g
                            class="motion-safe:transition-transform motion-safe:duration-[3000ms] motion-safe:ease-out"
                            style="transform-origin: 100px 100px;"
                            :style="'transform: rotate(' + angle + 'deg)'"
                        >
                            @foreach ($wedges as $w)
                                <path class="{{ $w['fill'] }}" fill="currentColor" stroke="currentColor" stroke-width="0.5" d="{{ $w['d'] }}" />
                            @endforeach

                            @foreach ($wedges as $w)
                                <text
                                    class="{{ $w['label'] }}"
                                    fill="currentColor"
                                    x="{{ $w['lx'] }}"
                                    y="{{ $w['ly'] }}"
                                    transform="rotate({{ $w['rot'] }} {{ $w['lx'] }} {{ $w['ly'] }})"
                                    text-anchor="middle"
                                    dominant-baseline="middle"
                                    font-size="8"
                                    font-weight="700"
                                >{{ __($w['text']) }}</text>
                            @endforeach
                        </g>

                        {{-- Hub --}}
                        <circle cx="100" cy="100" r="10" class="text-card" fill="currentColor" stroke="currentColor" stroke-width="1" />
                    </svg>
                </div>
            </div>

            {{-- RIGHT: capture + spin --}}
            <div class="flex flex-col gap-4 p-6 sm:p-8">
                <x-ui.badge variant="secondary" class="w-fit">{{ __('Exclusive offer') }}</x-ui.badge>

                <div class="flex flex-col gap-2">
                    <h2 class="text-pretty text-2xl font-semibold leading-tight tracking-tight sm:text-3xl">{{ __($heading) }}</h2>
                    <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($subline) }}</p>
                </div>

                {{-- Capture + spin (hidden once a prize is won). --}}
                <form
                    method="POST"
                    action="#"
                    class="flex flex-col gap-4"
                    x-show="!result"
                    @submit.prevent="spin()"
                >
                    @csrf

                    <x-ui.field>
                        <x-ui.label for="spin-to-win-01-email">{{ __('Email address') }}</x-ui.label>
                        <x-ui.input
                            id="spin-to-win-01-email"
                            type="email"
                            name="email"
                            autocomplete="email"
                            required
                            :placeholder="__($placeholder)"
                            class="w-full"
                        />
                    </x-ui.field>

                    <x-ui.button
                        type="submit"
                        size="lg"
                        class="w-full uppercase tracking-wide"
                        x-bind:disabled="spinning"
                    >
                        <span x-show="!spinning">{{ __('Spin') }}</span>
                        <span x-show="spinning" x-cloak>{{ __('Spinning…') }}</span>
                    </x-ui.button>

                    <p class="text-pretty text-sm leading-relaxed text-muted-foreground">
                        {{ __('One spin per email. Discount codes are single-use and expire in 24 hours.') }}
                    </p>
                </form>

                {{-- Result reveal --}}
                {{-- The payoff matches the build-up: once the wheel settles, the panel
                     pops in and its lines rise in sequence (ui.css [data-animate]
                     keyframes restart on each x-show reveal; reduced-motion renders
                     everything instantly). --}}
                <div
                    x-show="result"
                    x-cloak
                    aria-live="polite"
                    data-animate="pop"
                    class="flex flex-col items-start gap-4 rounded-lg border border-border bg-muted/40 p-6"
                >
                    <p data-animate="rise" data-animate-order="1" class="text-sm font-medium text-muted-foreground">{{ __('Congratulations') }}</p>
                    <p data-animate="rise" data-animate-order="2" class="text-pretty text-xl font-bold leading-tight">
                        {{ __('You won') }} <span x-text="result"></span>{{ __('!') }}
                    </p>
                    <div data-animate="rise" data-animate-order="3" class="flex items-center gap-2 rounded-md border border-dashed border-input bg-background px-4 py-2">
                        <span class="text-sm uppercase tracking-wide text-muted-foreground">{{ __('Code') }}</span>
                        <span class="font-mono text-sm font-semibold tracking-widest">SPIN-WIN</span>
                    </div>
                    <x-ui.button data-animate="rise" data-animate-order="4" size="lg" class="w-full">{{ __('Claim my prize') }}</x-ui.button>
                </div>
            </div>
        </div>
    </x-ui.card>
</section>