<div class="max-w-[1400px] mx-auto space-y-12">

    {{-- HEADER --}}
    <div class="text-center space-y-2">
        <h1 class="text-3xl font-semibold text-text">
            {{ t('plans.choose') }}
        </h1>
        <p class="text-text-muted">
            {{ t('plans.subtitle') }}
        </p>
    </div>

{{--    @if($subscription)--}}

{{--        <div class="bg-primary-50 border border-primary-100 rounded-xl p-4 text-sm">--}}

{{--            <div class="flex justify-between items-center">--}}

{{--                <div>--}}
{{--                    <div class="font-medium text-text">--}}
{{--                        Aktiver Plan: {{ $subscription->plan?->name }}--}}
{{--                    </div>--}}

{{--                    <div class="text-xs text-text-muted">--}}
{{--                        {{ $subscription->isActive() ? 'Aktiv' : 'Inaktiv' }}--}}
{{--                        @if($subscription->ends_at)--}}
{{--                            • endet am {{ $subscription->ends_at->format('d.m.Y') }}--}}
{{--                        @endif--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="text-right text-xs text-text-muted">--}}
{{--                    {{ ucfirst($subscription->interval) }}--}}
{{--                </div>--}}

{{--            </div>--}}

{{--        </div>--}}

{{--    @endif--}}

    <div class="flex justify-center">

        <div class="flex bg-background border border-border rounded-lg p-1">

            <button
                wire:click="$set('billing', 'monthly')"
                class="px-4 py-1 text-sm rounded-md
            {{ $billing === 'monthly' ? 'bg-primary text-white' : 'text-text-muted' }}">
                {{ t('plans.monthly') }}
            </button>

            <button
                wire:click="$set('billing', 'yearly')"
                class="px-4 py-1 text-sm rounded-md
            {{ $billing === 'yearly' ? 'bg-primary text-white' : 'text-text-muted' }}">
                {{ t('plans.yearly') }}
            </button>

        </div>

    </div>

    {{-- VALUE SECTION --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

        <div class="bg-surface border border-border rounded-xl p-4 text-center text-sm">
            <p class="font-medium text-text">{{ t('plans.feature.all_in_one') }}</p>
            <p class="text-text-muted text-xs mt-1">
                {{ t('plans.feature.all_in_one_desc') }}
            </p>
        </div>

        <div class="bg-surface border border-border rounded-xl p-4 text-center text-sm">
            <p class="font-medium text-text">{{ t('plans.feature.smart_input') }}</p>
            <p class="text-text-muted text-xs mt-1">
                {{ t('plans.feature.smart_input_desc') }}
            </p>
        </div>

        <div class="bg-surface border border-border rounded-xl p-4 text-center text-sm">
            <p class="font-medium text-text">{{ t('plans.feature.ready') }}</p>
            <p class="text-text-muted text-xs mt-1">
                {{ t('plans.feature.ready_desc') }}
            </p>
        </div>

    </div>

    {{-- CURRENT PLAN --}}
    @if($currentPlanKey)
        <div class="bg-primary-50 border border-primary-100 rounded-xl p-4 text-center text-sm text-primary">
            {{ t('plans.current_plan') }}
            <strong>{{ strtoupper(str_replace('_', ' ', $currentPlanKey)) }}</strong>
        </div>
    @endif

    {{-- PLANS --}}
    @php
        $featuredPlan = $plans->firstWhere('is_featured', true);
        $otherPlans = $plans->filter(fn($p) => !$p->is_featured)->values();
        $half = (int) floor($otherPlans->count() / 2);
        $orderedPlans = $featuredPlan
            ? $otherPlans->take($half)->push($featuredPlan)->concat($otherPlans->slice($half))
            : $plans;
    @endphp
    <div class="flex flex-nowrap gap-6 items-stretch overflow-x-auto pb-2">

        @foreach($orderedPlans as $plan)

            @php
                $isCurrent = $currentPlanKey === $plan->plan_key;
                $planFeatureKeys = $plan->features->pluck('key')->toArray();
            @endphp

            <div class="flex-1 min-w-[260px] relative rounded-[var(--radius-card)] p-6 flex flex-col transition
                {{ $plan->is_featured ? 'bg-surface border-2 border-primary scale-105 shadow-xl z-10 my-4' : 'bg-surface border border-border shadow-card' }}
                {{ $isCurrent ? 'ring-2 ring-primary' : '' }}">

                {{-- BADGE --}}
                @if($plan->is_featured)
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2">
                <span class="bg-primary text-white text-xs px-3 py-1 rounded-full shadow">
                    {{ t('subscription.popular') }}
                </span>
                    </div>
                @endif

                {{-- TITLE --}}
                <div class="space-y-3">

                    <h3 class="text-lg font-semibold text-text">
                        {{ $plan->name }}
                    </h3>

                    {{-- PRICE --}}
                    <div class="text-3xl font-bold text-text">

                        @if($plan->price === 0)
                            {{ t('plans.free') }}
                        @else
                            @if($billing === 'monthly')
                                €{{ number_format($plan->getMonthlyPrice() / 100, 0) }}
                                <span class="text-sm text-text-muted">{{ t('plans.per_month') }}</span>
                            @else
                                €{{ number_format($plan->getYearlyPrice() / 100, 0) }}
                                <span class="text-sm text-text-muted">{{ t('plans.per_year') }}</span>
                            @endif
                        @endif

                    </div>

                </div>

                {{-- LIMITS --}}
                <div class="mt-5 bg-primary-50 border border-primary-100 rounded-xl p-4 space-y-3">

                    <div class="flex justify-between items-center">
                        <span class="text-xs text-text-muted">{{ t('common.credits') }}</span>
                        <span class="text-lg font-semibold text-primary">
                    {{ $plan->credit_limit <= 0 ? '∞' : number_format($plan->credit_limit) }}
                </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-xs text-text-muted">{{ t('plans.devices') }}</span>
                        <span class="text-sm font-medium text-text">
                    {{ $plan->device_limit <= 0 ? '∞' : $plan->device_limit }}
                </span>
                    </div>

                </div>

                {{-- FEATURES VERGLEICH --}}
                <div class="mt-6 space-y-3 text-xs">

                    @foreach($allFeatures->groupBy(fn($f) => $f->group?->label ?? t('plans.general')) as $group => $features)

                        @php
                            $available = $features->filter(fn($f) => $plan->features->contains('id', $f->id));
                            $missing = $features->reject(fn($f) => $plan->features->contains('id', $f->id));
                        @endphp

                        <div class="space-y-1.5">

                            <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">{{ $group }}</p>

                            @foreach($available as $feature)
                                <div class="flex items-center gap-2 text-gray-700">
                                    <x-heroicon-o-check-circle class="w-3.5 h-3.5 text-green-500 shrink-0"/>
                                    <span>{{ $feature->label }}</span>
                                </div>
                            @endforeach

                            @foreach($missing as $feature)
                                <div class="flex items-center gap-2 text-gray-300">
                                    <x-heroicon-o-minus-circle class="w-3.5 h-3.5 text-gray-200 shrink-0"/>
                                    <span class="line-through">{{ $feature->label }}</span>
                                </div>
                            @endforeach

                        </div>

                    @endforeach

                </div>

                {{-- BUTTON --}}
                <div class="mt-6">

                    @if($isCurrent)
                        <button class="w-full bg-background border border-border text-text-muted py-2 rounded-xl text-sm cursor-default">
                            {{ t('plans.active_plan') }}
                        </button>
                    @else
                        <button class="w-full bg-primary text-white py-2 rounded-xl text-sm hover:opacity-90">
                            {{ $plan->plan_key === 'free' ? t('plans.start') : t('common.upgrade') }}
                        </button>
                    @endif

                </div>

            </div>

        @endforeach

    </div>


    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">

        {{-- TRUST --}}
        <div class="bg-surface border border-border rounded-[var(--radius-card)] p-6 shadow-card space-y-4">

            <p class="font-medium text-text">{{ t('plans.why') }}</p>

            <div class="space-y-3 text-sm text-text-muted">

                <div class="flex items-center gap-2">
                    <span class="text-success">✔</span>
                    <span>{{ t('plans.cancel_anytime') }}</span>
                </div>

                <div class="flex items-center gap-2">
                    <span class="text-success">✔</span>
                    <span>{{ t('plans.no_hidden_costs') }}</span>
                </div>

                <div class="flex items-center gap-2">
                    <span class="text-success">✔</span>
                    <span>{{ t('plans.up_down_anytime') }}</span>
                </div>

            </div>

        </div>


        {{-- FAQ --}}
        <div class="bg-surface border border-border rounded-[var(--radius-card)] p-6 shadow-card space-y-5">

            <p class="font-medium text-text">{{ t('plans.faq') }}</p>

            <div class="space-y-4 text-sm">

                <div>
                    <p class="font-medium text-text">
                        {{ t('plans.faq.switch') }}
                    </p>
                    <p class="text-text-muted text-xs mt-1">
                        {{ t('plans.faq.switch_a') }}
                    </p>
                </div>

                <div>
                    <p class="font-medium text-text">
                        {{ t('plans.faq.expire') }}
                    </p>
                    <p class="text-text-muted text-xs mt-1">
                        {{ t('plans.faq.expire_a') }}
                    </p>
                </div>

            </div>

        </div>

    </div>
</div>
