@extends('layouts.app')
@section('content')
<div class="hero-card">
    <span class="eyebrow">Rsync Studio</span>
    <h1>Choose your licence</h1>
    <p class="lead">Every subscription starts with a 7-day free trial. Cancel before the trial ends and you won't be charged.</p>
    @if($paddleEnvironment === 'sandbox')<div class="sandbox-badge">Sandbox checkout — no real payment is taken</div>@endif
</div>

<div class="pricing-grid">
@foreach($plans as $code => $plan)
    <article class="price-card {{ str_starts_with($code, 'professional') ? 'featured' : '' }}">
        <div>
            <div class="plan-heading">
                <div>
                    <h2>{{ $plan['name'] }}</h2>
                    <div class="muted">{{ $plan['billing'] }} billing</div>
                </div>
                @if($plan['billing'] === 'Annual')<span class="pill">Best value</span>@endif
            </div>
            <div class="price" data-price-display="{{ $plan['price_id'] }}" data-billing="{{ strtolower($plan['billing']) }}">{{ $plan['display_price'] }}</div>
            <ul class="features">
                <li>7-day free trial</li>
                <li>{{ $plan['activation_limit'] }} active Mac{{ $plan['activation_limit'] === 1 ? '' : 's' }}</li>
                <li>Secure online activation</li>
                <li>Licence management portal</li>
            </ul>
        </div>
        <button class="checkout-button" type="button" data-price-id="{{ $plan['price_id'] }}" data-plan="{{ $plan['name'] }} {{ $plan['billing'] }}">Start free trial</button>
    </article>
@endforeach
</div>

<div class="card checkout-status" id="checkout-status" hidden>
    <h2>Purchase received</h2>
    <p>Paddle is confirming your subscription. Your Rsync Studio licence key will be sent to the email used at checkout. You can then activate it in <strong>Rsync Studio → Settings → Licence</strong>.</p>
    <p class="muted">If the email takes a moment, wait for the Paddle confirmation and check your junk folder. You can also create a portal account with the same email address.</p>
    <a class="btn" href="{{ route('register') }}">Create portal account</a>
</div>

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script>
(() => {
    const token = @json($paddleToken);
    const environment = @json($paddleEnvironment);
    if (environment === 'sandbox') Paddle.Environment.set('sandbox');
    Paddle.Initialize({
        token,
        eventCallback(event) {
            if (event && event.name === 'checkout.completed') {
                document.getElementById('checkout-status').hidden = false;
                document.getElementById('checkout-status').scrollIntoView({behavior: 'smooth', block: 'center'});
            }
        }
    });

    const priceElements = new Map(
        Array.from(document.querySelectorAll('[data-price-display]')).map(element => [element.dataset.priceDisplay, element])
    );
    const previewItems = Array.from(priceElements.keys()).map(priceId => ({priceId, quantity: 1}));
    Paddle.PricePreview({items: previewItems}).then(result => {
        for (const item of (result?.data?.details?.lineItems ?? [])) {
            const element = priceElements.get(item?.price?.id);
            const formatted = item?.formattedTotals?.subtotal ?? item?.formattedUnitTotals?.subtotal;
            if (!element || !formatted) continue;
            const suffix = element.dataset.billing === 'annual' ? ' / year' : ' / month';
            element.textContent = formatted + suffix;
        }
    }).catch(() => {
        // Keep the server-rendered GBP fallback if Paddle pricing preview is unavailable.
    });

    document.querySelectorAll('.checkout-button').forEach(button => {
        button.addEventListener('click', () => {
            Paddle.Checkout.open({
                items: [{priceId: button.dataset.priceId, quantity: 1}],
                settings: {
                    displayMode: 'overlay',
                    theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
                    allowLogout: false
                },
                customData: {
                    source: 'rsync-studio-buy-page',
                    plan: button.dataset.plan
                }
            });
        });
    });
})();
</script>
@endsection