<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Planes y Precios | Veltrix</title>
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg: #eaf1f8;
            --panel: #ffffff;
            --panel-soft: #f8fbff;
            --ink: #182136;
            --muted: #5f6b84;
            --line: #d7e1ef;
            --navy: #182238;
            --navy-2: #111a2d;
            --cyan: #31c3dc;
            --cyan-soft: #dff8ff;
            --green: #0f9d66;
            --red: #ff5d63;
            --shadow: 0 24px 56px rgba(23, 35, 62, 0.12);
        }

        body {
            min-height: 100vh;
            background: linear-gradient(180deg, #eef4fb 0%, #e8f0f8 100%);
            color: var(--ink);
            font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
        }

        a { color: inherit; }

        .shell {
            width: min(1240px, calc(100% - 28px));
            margin: 32px auto 54px;
        }

        .pricing-frame {
            overflow: hidden;
            border-radius: 24px;
            background: var(--panel);
            box-shadow: var(--shadow);
        }

        .pricing-topbar {
            background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
            color: #fff;
            padding: 18px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .brand-wrap {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand-mark {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: rgba(255,255,255,.08);
            display: grid;
            place-items: center;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
            overflow: hidden;
        }

        .brand-mark img {
            width: 30px;
            height: 30px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        .brand-copy {
            display: grid;
            gap: 3px;
        }

        .brand-title {
            font-size: 1.03rem;
            font-weight: 800;
            letter-spacing: -.02em;
        }

        .brand-sub {
            color: rgba(255,255,255,.72);
            font-size: .9rem;
        }

        .topbar-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: #dce8ff;
            font-size: .9rem;
            font-weight: 700;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.16);
            background: rgba(255,255,255,.04);
        }

        .pricing-body {
            padding: 28px 32px 34px;
        }

        .pricing-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 22px;
        }

        .pricing-title {
            font-size: 1.08rem;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .pricing-sub {
            margin-top: 4px;
            font-size: .98rem;
            color: var(--muted);
        }

        .pricing-head-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: #52617e;
            font-size: .94rem;
            font-weight: 700;
            padding: 12px 18px;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: #fff;
            white-space: nowrap;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 26px;
        }

        .plan-card {
            border-radius: 20px;
            border: 1px solid var(--line);
            background: #fff;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            overflow: hidden;
        }

        .plan-card.featured {
            border-color: var(--navy);
            box-shadow: 0 18px 36px rgba(24, 34, 56, 0.12);
        }

        .plan-card.highlight {
            border-color: #9cecff;
        }

        .plan-ribbon {
            min-height: 36px;
            padding: 10px 16px;
            background: transparent;
            color: transparent;
            font-size: .86rem;
            font-weight: 800;
            text-align: center;
        }

        .plan-card.featured .plan-ribbon {
            background: var(--navy);
            color: #fff;
        }

        .plan-inner {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 22px 22px 18px;
            height: 100%;
        }

        .plan-name {
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .annual-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: fit-content;
            max-width: 100%;
            padding: 5px 11px;
            border-radius: 999px;
            background: var(--cyan-soft);
            border: 1px solid #87eaff;
            color: var(--navy);
            font-size: .78rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .plan-copy {
            color: var(--muted);
            font-size: .95rem;
            line-height: 1.55;
            min-height: 44px;
        }

        .price-block {
            display: grid;
            gap: 4px;
            padding-top: 2px;
        }

        .old-price-line {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-height: 22px;
        }

        .old-price {
            color: var(--muted);
            text-decoration: line-through;
            font-size: .88rem;
            font-weight: 600;
        }

        .discount-chip {
            display: inline-flex;
            align-items: center;
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--cyan-soft);
            color: #315267;
            font-size: .74rem;
            font-weight: 800;
        }

        .current-price {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
        }

        .current-price strong {
            font-size: 1.02rem;
            letter-spacing: -.02em;
        }

        .current-price .value {
            font-size: 2rem;
            line-height: .95;
            letter-spacing: -.05em;
            font-weight: 900;
        }

        .current-price .suffix {
            color: #23c4ea;
            font-size: .86rem;
            font-weight: 800;
        }

        .billing-note {
            color: var(--muted);
            font-size: .88rem;
            line-height: 1.45;
        }

        .saving-chip {
            width: fit-content;
            padding: 6px 11px;
            border-radius: 999px;
            background: #effbf4;
            border: 1px solid #b6edcb;
            color: #1a7d52;
            font-size: .8rem;
            font-weight: 800;
        }

        .cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 52px;
            border-radius: 12px;
            text-decoration: none;
            font-size: .95rem;
            font-weight: 800;
            margin-top: 4px;
        }

        .cta-primary {
            background: var(--navy);
            color: #fff;
        }

        .plan-card.featured .cta-primary {
            background: var(--cyan);
            color: #071725;
        }

        .features {
            margin-top: 2px;
            padding-top: 14px;
            border-top: 1px solid var(--line);
            display: grid;
            gap: 8px;
        }

        .feature {
            display: flex;
            align-items: start;
            gap: 8px;
            color: #39455f;
            font-size: .91rem;
            line-height: 1.45;
        }

        .feature i {
            margin-top: 1px;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .feature.ok i { color: var(--green); }
        .feature.no i { color: var(--red); }

        .footer-note {
            margin-top: 22px;
            text-align: center;
            color: var(--muted);
            font-size: .84rem;
        }

        .footer-note a {
            color: var(--navy);
            font-weight: 800;
            text-decoration: none;
        }

        .footer-note a:hover {
            text-decoration: underline;
        }

        @media (max-width: 1040px) {
            .plans-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }
        }

        @media (max-width: 720px) {
            .shell {
                width: min(100% - 16px, 1240px);
                margin-top: 14px;
            }

            .pricing-topbar,
            .pricing-body {
                padding-left: 18px;
                padding-right: 18px;
            }

            .pricing-topbar,
            .pricing-head {
                flex-direction: column;
                align-items: start;
            }

            .brand-mark {
                width: 40px;
                height: 40px;
                border-radius: 12px;
            }

            .brand-mark img {
                width: 26px;
                height: 26px;
            }

            .pricing-frame {
                border-radius: 20px;
            }

            .pricing-body {
                padding-top: 22px;
                padding-bottom: 24px;
            }
        }
    </style>
</head>
<body>
@php
    $planSummaries = $planes->values()->map(function ($plan, $index) use ($todosModulos) {
        $monthlyPrice = (float) ($plan->precio_mensual ?? 0);
        $isFree = $monthlyPrice <= 0;
        $featured = $plan->slug === 'profesional' || ($index === 1 && $plan->slug !== 'basico');
        $promo12 = $plan->promociones->firstWhere('meses', 12);
        $bestPromo = $promo12 && $promo12->activo ? $promo12 : $plan->promociones->where('activo', true)->sortByDesc('meses')->first();
        $annualDiscount = $bestPromo ? (float) ($bestPromo->descuento_porcentaje ?? 0) : 0.0;
        $annualMonths = $bestPromo ? (int) ($bestPromo->meses ?? 12) : 12;
        $annualMonthly = $bestPromo && $monthlyPrice > 0
            ? round($monthlyPrice * (1 - ($annualDiscount / 100)), 2)
            : $monthlyPrice;
        $annualTotal = $annualMonthly * $annualMonths;
        $annualSavings = max(0, ($monthlyPrice * $annualMonths) - $annualTotal);
        $features = $plan->modulos
            ->pluck('modulo')
            ->map(fn ($key) => $todosModulos[$key]['label'] ?? null)
            ->filter()
            ->values();
        $featureFlags = [
            'Reportes avanzados' => $features->contains('Reportes avanzados'),
            'Notificaciones' => true,
            'API / Integraciones' => $features->contains('Integración ManyChat') || $features->contains('Facturación electrónica'),
            'Formulario público' => $features->contains('Integración ManyChat') || $features->count() >= 6,
        ];

        return [
            'model' => $plan,
            'featured' => $featured,
            'highlight' => $plan->slug === 'premium' || $plan->slug === 'empresarial',
            'is_free' => $isFree,
            'monthly_price' => $monthlyPrice,
            'annual_months' => $annualMonths,
            'annual_discount' => $annualDiscount,
            'annual_monthly' => $annualMonthly,
            'annual_total' => $annualTotal,
            'annual_savings' => $annualSavings,
            'features' => $features,
            'feature_flags' => $featureFlags,
        ];
    });
@endphp

<div class="shell">
    <section class="pricing-frame">
        <div class="pricing-topbar">
            <div class="brand-wrap">
                <div class="brand-mark">
                    <img src="{{ asset('assets/img/veltrix-logo-vertical-white.png') }}" alt="Veltrix">
                </div>
                <div class="brand-copy">
                    <div class="brand-title">Adquiere Veltrix</div>
                    <div class="brand-sub">Elige el plan para tu empresa y actívalo en minutos</div>
                </div>
            </div>

            <a href="{{ route('login') }}" class="topbar-link">
                <i class='bx bx-log-in'></i>
                Ya tengo cuenta
            </a>
        </div>

        <div class="pricing-body">
            <div class="pricing-head">
                <div>
                    <div class="pricing-title">Planes disponibles</div>
                    <div class="pricing-sub">Pago seguro en línea y activación automática del sistema.</div>
                </div>

                <a href="{{ route('login') }}" class="pricing-head-link">
                    <i class='bx bx-user-check'></i>
                    Ingresar al panel
                </a>
            </div>

            <div class="plans-grid">
                @foreach ($planSummaries as $summary)
                    @php
                        $plan = $summary['model'];
                        $description = match ($plan->slug) {
                            'basico' => 'Plan base para negocios que quieren empezar con orden y control.',
                            'profesional' => 'Plan ideal para empresas medianas que necesitan más capacidad comercial.',
                            'premium', 'empresarial' => 'Plan avanzado para operaciones más exigentes y de mayor volumen.',
                            default => 'Plan pensado para crecer con una estructura clara y escalable.',
                        };
                        $visibleBaseFeatures = [
                            $plan->max_usuarios.' usuarios',
                            $plan->max_sucursales.' sucursales',
                            number_format($plan->max_productos).' productos',
                        ];
                        $moduleFeatures = $summary['features']->take(2)->all();
                    @endphp

                    <article class="plan-card {{ $summary['featured'] ? 'featured' : '' }} {{ $summary['highlight'] ? 'highlight' : '' }}">
                        <div class="plan-ribbon">
                            {{ $summary['featured'] ? 'Recomendado' : 'Plan' }}
                        </div>

                        <div class="plan-inner">
                            <div class="plan-name">{{ $plan->nombre }}</div>

                            @if (! $summary['is_free'] && $summary['annual_discount'] > 0)
                                <div class="annual-badge">
                                    <i class='bx bx-sparkles'></i>
                                    {{ $summary['annual_months'] }} meses con {{ number_format($summary['annual_discount'], 0, ',', '.') }}% OFF
                                </div>
                            @endif

                            <div class="plan-copy">{{ $description }}</div>

                            <div class="price-block">
                                @if (! $summary['is_free'] && $summary['annual_discount'] > 0)
                                    <div class="old-price-line">
                                        <span class="old-price">${{ number_format($summary['monthly_price'] * $summary['annual_months'], 0, ',', '.') }} COP</span>
                                        <span class="discount-chip">{{ number_format($summary['annual_discount'], 0, ',', '.') }}% OFF</span>
                                    </div>
                                @else
                                    <div class="old-price-line"></div>
                                @endif

                                <div class="current-price">
                                    @if ($summary['is_free'])
                                        <span class="value">Gratis</span>
                                    @else
                                        <strong>$</strong>
                                        <span class="value">{{ number_format($summary['annual_discount'] > 0 ? $summary['annual_monthly'] : $summary['monthly_price'], 0, ',', '.') }}</span>
                                        <span class="suffix">COP /mes{{ $summary['annual_discount'] > 0 ? '*' : '' }}</span>
                                    @endif
                                </div>

                                <div class="billing-note">
                                    @if ($summary['is_free'])
                                        Disponible sin costo de activación.
                                    @elseif ($summary['annual_discount'] > 0)
                                        ${{ number_format($summary['annual_total'], 0, ',', '.') }} COP por {{ $summary['annual_months'] }} meses
                                    @else
                                        Facturación mensual sin promoción
                                    @endif
                                </div>

                                @if (! $summary['is_free'] && $summary['annual_discount'] > 0)
                                    <div class="saving-chip">
                                        Ahorra ${{ number_format($summary['annual_savings'], 0, ',', '.') }} COP
                                    </div>
                                @endif
                            </div>

                            <a href="{{ route('registro-empresa.create') }}" class="cta cta-primary">
                                Contratar ahora
                            </a>

                            <div class="features">
                                @foreach ($visibleBaseFeatures as $baseFeature)
                                    <div class="feature ok">
                                        <i class='bx bx-check-circle'></i>
                                        <span>{{ $baseFeature }}</span>
                                    </div>
                                @endforeach

                                @foreach ($moduleFeatures as $moduleFeature)
                                    <div class="feature ok">
                                        <i class='bx bx-check-circle'></i>
                                        <span>{{ $moduleFeature }}</span>
                                    </div>
                                @endforeach

                                @foreach ($summary['feature_flags'] as $label => $enabled)
                                    <div class="feature {{ $enabled ? 'ok' : 'no' }}">
                                        <i class='bx {{ $enabled ? 'bx-check-circle' : 'bx-x-circle' }}'></i>
                                        <span>{{ $label }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="footer-note">
                Todos los precios están en COP. ¿Ya eres cliente? <a href="{{ route('login') }}">Ingresa aquí</a>.
            </div>
        </div>
    </section>
</div>
</body>
</html>
