<!DOCTYPE html>
<html lang="<%= lang %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Premium - <%= botName %></title>
    <meta name="description" content="Upgrade to <%= botName %> Premium for automatic game log posts and more.">
    <link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preload" href="/Fonts/symbols_skyquake.ttf" as="font" type="font/ttf" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="/css/output.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">

    <style>
        @font-face {
            font-family: 'skyquakesymbols';
            src: url('/Fonts/symbols_skyquake.ttf') format('truetype');
            font-display: swap;
        }

        *, *::before, *::after { box-sizing: border-box; }

        body {
            background: #1b1b1b;
            min-height: 100vh;
        }

        /* ── Palette tokens ── */
        .gradient-text {
            background: linear-gradient(135deg, #F5F5DC 0%, #d4d4b0 50%, #F5F5DC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-accent { color: #F5F5DC; }
        .text-muted  { color: #90EE90; }

        /* ── Buttons ── */
        .btn-primary {
            background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
            box-shadow: 0 4px 20px rgba(245, 245, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            color: #1E1E1E;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-primary:hover {
            box-shadow: 0 8px 30px rgba(245, 245, 220, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            transform: translateY(-2px);
        }
        .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* ── Hero background effects ── */
        .hero-section {
            position: relative;
        }

        .crown-glow {
            text-shadow: 0 0 60px rgba(245, 245, 220, 0.25), 0 0 120px rgba(245, 245, 220, 0.08);
        }

        /* Pricing accent corner glow */
        .pricing-glow {
            position: absolute;
            top: -80px;
            right: -80px;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(144, 238, 144, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        /* ── Steps ── */
        .step-card {
            background: rgba(30, 30, 30, 0.4);
            border: 1px solid rgba(245, 245, 220, 0.05);
            transition: all 0.3s ease;
        }
        .step-card:hover {
            border-color: rgba(245, 245, 220, 0.1);
            background: rgba(30, 30, 30, 0.6);
        }

        .step-number {
            background: linear-gradient(135deg, rgba(144, 238, 144, 0.15) 0%, rgba(144, 238, 144, 0.05) 100%);
            border: 1px solid rgba(144, 238, 144, 0.2);
            color: #90EE90;
            font-weight: 700;
        }

        /* ── Success state ── */
        .success-card {
            background: linear-gradient(135deg, rgba(62, 78, 62, 0.25) 0%, rgba(44, 78, 44, 0.15) 100%);
            border: 1px solid rgba(144, 238, 144, 0.15);
            backdrop-filter: blur(12px);
            position: relative;
            overflow: hidden;
        }
        .success-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(144, 238, 144, 0.4), transparent);
        }
        .success-icon-ring {
            background: linear-gradient(135deg, rgba(144, 238, 144, 0.15) 0%, rgba(144, 238, 144, 0.05) 100%);
            border: 2px solid rgba(144, 238, 144, 0.3);
        }

        /* ── Check items ── */
        .check-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.5rem 0;
        }
        .check-icon {
            color: #90EE90;
            flex-shrink: 0;
            margin-top: 2px;
        }

        /* ── Dividers ── */
        .accent-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(144, 238, 144, 0.2), transparent);
        }

        /* ── Plan cards ── */
        .plan-card {
            background: linear-gradient(160deg, rgba(40, 40, 40, 0.5) 0%, rgba(30, 30, 30, 0.4) 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s ease;
        }
        .plan-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
        }

        .plan-card-premium {
            background: linear-gradient(160deg, rgba(62, 78, 62, 0.25) 0%, rgba(30, 30, 30, 0.5) 50%, rgba(62, 78, 62, 0.15) 100%);
            border: 1px solid rgba(245, 245, 220, 0.12);
        }
        .plan-card-premium::before {
            background: linear-gradient(90deg, transparent, rgba(245, 245, 220, 0.3), transparent);
        }

        .plan-feature-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }
        .plan-feature-row:last-child {
            border-bottom: none;
        }

        /* ── Animations ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .fade-up { animation: fadeUp 0.6s ease-out both; }
        .fade-up-1 { animation-delay: 0.05s; }
        .fade-up-2 { animation-delay: 0.12s; }
        .fade-up-3 { animation-delay: 0.19s; }
        .fade-up-4 { animation-delay: 0.26s; }
        .fade-up-5 { animation-delay: 0.33s; }
        .fade-up-6 { animation-delay: 0.40s; }

        @keyframes shimmer {
            0%   { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        .shimmer-border::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(245, 245, 220, 0.15) 50%, transparent 100%);
            background-size: 200% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: shimmer 4s ease-in-out infinite;
            pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .fade-up { animation: none; opacity: 1; }
            .shimmer-border::after { animation: none; }
        }
    </style>
</head>
<body class="text-white antialiased">
    <%- include('partials/nav', { activePage: 'premium' }) %>

    <% if (success) { %>

    <!-- ════════════ SUCCESS STATE ════════════ -->
    <section class="pt-32 pb-20 lg:pt-40">
        <div class="max-w-[640px] mx-auto px-6 lg:px-8">
            <div class="success-card rounded-2xl p-8 lg:p-10 text-center fade-up">
                <div class="success-icon-ring w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-check text-3xl text-muted"></i>
                </div>

                <h1 class="text-2xl lg:text-3xl font-bold text-accent mb-3"><%= t('premium.successTitle') %></h1>
                <p class="text-white/70 leading-relaxed mb-8 max-w-md mx-auto">
                    <%= t('premium.successDesc') %>
                </p>

                <div class="accent-divider mb-8"></div>

                <h3 class="text-sm font-semibold text-accent uppercase tracking-wider mb-4"><%= t('premium.whatHappensNext') %></h3>
                <div class="space-y-3 text-left max-w-sm mx-auto">
                    <div class="check-item">
                        <i class="fas fa-circle-check check-icon text-sm"></i>
                        <span class="text-white/70 text-sm"><%= t('premium.autoLogging') %></span>
                    </div>
                    <div class="check-item">
                        <i class="fas fa-circle-check check-icon text-sm"></i>
                        <span class="text-white/70 text-sm"><%= t('premium.setLogChannel') %> <code class="text-accent/80 bg-white/5 px-1.5 py-0.5 rounded text-xs">/quick-log</code></span>
                    </div>
                    <div class="check-item">
                        <i class="fas fa-circle-check check-icon text-sm"></i>
                        <span class="text-white/70 text-sm"><%= t('premium.everyResult') %></span>
                    </div>
                </div>

                <div class="mt-8">
                    <a href="/docs" class="text-muted hover:text-accent transition-colors text-sm font-medium">
                        <i class="fas fa-book mr-1.5"></i><%= t('premium.readSetupGuide') %>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <% } else { %>

    <!-- ════════════ HERO ════════════ -->
    <section class="hero-section pt-32 pb-16 lg:pt-40 lg:pb-20">
        <div class="max-w-[1100px] mx-auto px-6 lg:px-8 relative z-10">

            <div class="text-center fade-up fade-up-1">

                <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-6 crown-glow leading-tight">
                    <span class="gradient-text"><%= t('premium.upgradeTitle') %></span>
                </h1>
                <p class="text-sm md:text-base text-white/45 max-w-2xl mx-auto leading-loose mb-10">
                    <%= t('premium.heroDesc') %>
                </p>

                <!-- Compact feature pills -->
                <div class="flex flex-wrap justify-center gap-3 fade-up fade-up-2">
                    <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-2">
                        <i class="fas fa-bolt text-muted text-[10px]"></i>
                        <span class="text-[12px] text-white/50 font-medium"><%= t('premium.instantScoreboards') %></span>
                    </div>
                    <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-2">
                        <i class="fas fa-route text-muted text-[10px]"></i>
                        <span class="text-[12px] text-white/50 font-medium"><%= t('premium.viewPaths') %></span>
                    </div>
                    <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-2">
                        <i class="fas fa-comments text-muted text-[10px]"></i>
                        <span class="text-[12px] text-white/50 font-medium"><%= t('premium.chatBattleLogs') %></span>
                    </div>
                    <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-2">
                        <i class="fas fa-gamepad text-muted text-[10px]"></i>
                        <span class="text-[12px] text-white/50 font-medium"><%= t('premium.replayLookups') %></span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ════════════ FREE vs TIERED PLANS ════════════ -->
    <section class="pb-14 lg:pb-24">
        <div class="max-w-[1200px] mx-auto px-6 lg:px-8">

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5">

                <!-- ── FREE PLAN ── -->
                <div id="free" class="plan-card rounded-2xl p-6 fade-up fade-up-3 flex flex-col">
                    <div class="mb-5">
                        <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-1.5 mb-3">
                            <i class="fas fa-paper-plane text-white/30 text-[10px]"></i>
                            <span class="text-[11px] font-semibold text-white/40 uppercase tracking-wider"><%= t('premium.free') %></span>
                        </div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-2xl font-extrabold text-white/70 tracking-tight">$0</span>
                            <span class="text-white/25 text-xs font-medium"><%= t('premium.perMonth') %></span>
                        </div>
                        <p class="text-[11px] text-white/25 mt-1"><%= t('premium.alwaysFree') %> &middot; <%= t('premium.noCardNeeded') %></p>
                    </div>
                    <div class="flex-1">
                        <p class="text-[10px] font-semibold text-white/20 uppercase tracking-wider mb-2"><%= t('premium.included') %></p>
                        <div class="plan-feature-row">
                            <i class="fas fa-check text-xs text-white/25"></i>
                            <span class="text-[13px] text-white/50"><%= t('premium.manualLookups') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-check text-xs text-white/25"></i>
                            <span class="text-[13px] text-white/50"><%= t('premium.playerStats') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-check text-xs text-white/25"></i>
                            <span class="text-[13px] text-white/50"><%= t('premium.leaderboards') %></span>
                        </div>
                    </div>
                    <div class="mt-5">
                        <a href="https://discord.com/oauth2/authorize?client_id=1254679514466877540&permissions=2048&scope=bot%20applications.commands" target="_blank" rel="noopener noreferrer"
                           class="w-full py-2.5 rounded-xl text-[13px] font-bold inline-flex items-center justify-center gap-2 text-center border border-white/10 text-white/50 hover:border-white/20 hover:text-white/70 hover:bg-white/[0.03] transition-all cursor-pointer">
                            <%= t('premium.stickWithFree') %>
                            <span class="text-white/20">&middot;</span>
                            <i class="fab fa-discord text-xs"></i> <%= t('nav.addToDiscord') %>
                        </a>
                    </div>
                </div>

                <!-- ── STANDARD TIER ── -->
                <div id="standard" class="plan-card rounded-2xl p-6 fade-up fade-up-3 flex flex-col">
                    <div class="mb-5">
                        <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-1.5 mb-3">
                            <i class="fas fa-shield-alt text-white/40 text-[10px]"></i>
                            <span class="text-[11px] font-semibold text-white/60 uppercase tracking-wider"><%= t('premium.tierStandardName') %></span>
                        </div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-2xl font-extrabold text-white/80 tracking-tight">$<%= plans.standard.price %></span>
                            <span class="text-white/30 text-xs font-medium"><%= t('premium.perMonth') %></span>
                        </div>
                        <p class="text-[11px] text-white/30 mt-1"><%= t('premium.perServer') %> &middot; <%= t('premium.cancelAnytime') %></p>
                    </div>
                    <div class="flex-1">
                        <p class="text-[10px] font-semibold text-accent uppercase tracking-wider mb-2">
                            <%= t('premium.squadCap', { cap: plans.standard.squadCap }) %>
                        </p>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.autoScoreboards') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.pathMaps') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.replayLookupsFeature') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.unlimitedComp') %></span>
                        </div>
                    </div>
                    <div class="mt-5">
                        <% if (plans.standard.whopPlanId) { %>
                        <a href="https://whop.com/checkout/<%= plans.standard.whopPlanId %>/?d2c=true" target="_blank" rel="noopener noreferrer"
                           class="btn-primary w-full py-2.5 rounded-xl text-[13px] font-bold inline-block text-center">
                            <i class="fas fa-shield-alt mr-2"></i><%= t('premium.subscribeNow') %>
                        </a>
                        <% } else { %>
                        <button class="btn-primary w-full py-2.5 rounded-xl text-[13px] font-bold" disabled>
                            <%= t('premium.comingSoon') %>
                        </button>
                        <% } %>
                    </div>
                </div>

                <!-- ── PRO TIER (highlighted) ── -->
                <div id="pro" class="plan-card plan-card-premium shimmer-border rounded-2xl p-6 fade-up fade-up-4 flex flex-col">
                    <div class="pricing-glow"></div>
                    <div class="relative z-10 flex flex-col h-full">
                        <div class="mb-5">
                            <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-1.5 mb-3">
                                <i class="fas fa-crown text-accent text-[10px]"></i>
                                <span class="text-[11px] font-semibold text-accent uppercase tracking-wider"><%= t('premium.tierProName') %></span>
                            </div>
                            <div class="flex items-baseline gap-2">
                                <span class="text-2xl font-extrabold text-accent tracking-tight">
                                    <% if (plans.pro.price) { %>$<%= plans.pro.price %><% } else { %>—<% } %>
                                </span>
                                <span class="text-white/30 text-xs font-medium"><%= t('premium.perMonth') %></span>
                            </div>
                            <p class="text-[11px] text-white/30 mt-1"><%= t('premium.perServer') %> &middot; <%= t('premium.cancelAnytime') %></p>
                        </div>
                        <div class="flex-1">
                            <p class="text-[10px] font-semibold text-accent uppercase tracking-wider mb-2">
                                <%= t('premium.squadCap', { cap: plans.pro.squadCap }) %>
                            </p>
                            <div class="plan-feature-row">
                                <i class="fas fa-circle-check text-xs text-muted"></i>
                                <span class="text-[13px] text-white/60"><%= t('premium.everythingInStandard') %></span>
                            </div>
                            <div class="plan-feature-row">
                                <i class="fas fa-circle-check text-xs text-muted"></i>
                                <span class="text-[13px] text-white/60"><%= t('premium.wildcardSupport') %></span>
                            </div>
                            <div class="plan-feature-row">
                                <i class="fas fa-circle-check text-xs text-muted"></i>
                                <span class="text-[13px] text-white/60"><%= t('premium.prioritySupport') %></span>
                            </div>
                        </div>
                        <div class="mt-5">
                            <% if (plans.pro.whopPlanId) { %>
                            <a href="https://whop.com/checkout/<%= plans.pro.whopPlanId %>/?d2c=true" target="_blank" rel="noopener noreferrer"
                               class="btn-primary w-full py-2.5 rounded-xl text-[13px] font-bold inline-block text-center">
                                <i class="fas fa-crown mr-2"></i><%= t('premium.subscribeNow') %>
                            </a>
                            <% } else { %>
                            <button class="btn-primary w-full py-2.5 rounded-xl text-[13px] font-bold" disabled>
                                <%= t('premium.comingSoon') %>
                            </button>
                            <% } %>
                        </div>
                    </div>
                </div>

                <!-- ── MAX TIER ── -->
                <div id="max" class="plan-card rounded-2xl p-6 fade-up fade-up-4 flex flex-col">
                    <div class="mb-5">
                        <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/[0.06] rounded-full px-4 py-1.5 mb-3">
                            <i class="fas fa-infinity text-accent text-[10px]"></i>
                            <span class="text-[11px] font-semibold text-accent uppercase tracking-wider"><%= t('premium.tierMaxName') %></span>
                        </div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-2xl font-extrabold text-accent tracking-tight">
                                <% if (plans.max.price) { %>$<%= plans.max.price %><% } else { %>—<% } %>
                            </span>
                            <span class="text-white/30 text-xs font-medium"><%= t('premium.perMonth') %></span>
                        </div>
                        <p class="text-[11px] text-white/30 mt-1"><%= t('premium.perServer') %> &middot; <%= t('premium.cancelAnytime') %></p>
                    </div>
                    <div class="flex-1">
                        <p class="text-[10px] font-semibold text-accent uppercase tracking-wider mb-2">
                            <%= t('premium.squadCapUnlimited') %>
                        </p>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.everythingInPro') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.noSquadCap') %></span>
                        </div>
                        <div class="plan-feature-row">
                            <i class="fas fa-circle-check text-xs text-muted"></i>
                            <span class="text-[13px] text-white/60"><%= t('premium.earlyAccessFeatures') %></span>
                        </div>
                    </div>
                    <div class="mt-5">
                        <% if (plans.max.whopPlanId) { %>
                        <a href="https://whop.com/checkout/<%= plans.max.whopPlanId %>/?d2c=true" target="_blank" rel="noopener noreferrer"
                           class="btn-primary w-full py-2.5 rounded-xl text-[13px] font-bold inline-block text-center">
                            <i class="fas fa-infinity mr-2"></i><%= t('premium.subscribeNow') %>
                        </a>
                        <% } else { %>
                        <button class="btn-primary w-full py-2.5 rounded-xl text-[13px] font-bold" disabled>
                            <%= t('premium.comingSoon') %>
                        </button>
                        <% } %>
                    </div>
                </div>

            </div>

            <!-- Server ID info (compact inline stepper) -->
            <div class="max-w-lg mx-auto mt-6 rounded-xl p-4 step-card fade-up fade-up-5">
                <p class="text-white/30 text-xs leading-relaxed mb-3 text-center">
                    <i class="fas fa-info-circle mr-1 text-white/20"></i>
                    <%= t('premium.serverIdInfo') %> <span class="text-white/50 font-medium"><%= t('premium.discordServerId') %></span> <%= t('premium.duringCheckout') %>
                </p>
                <div class="flex items-center justify-center gap-2 text-[11px] text-white/30">
                    <span class="step-number w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-[10px]">1</span>
                    <span><%= t('premium.developerMode') %></span>
                    <i class="fas fa-chevron-right text-[8px] text-white/15 mx-1"></i>
                    <span class="step-number w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-[10px]">2</span>
                    <span><%= t('premium.rightClickServer') %></span>
                    <i class="fas fa-chevron-right text-[8px] text-white/15 mx-1"></i>
                    <span class="step-number w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-[10px]">3</span>
                    <span><%= t('premium.copyId') %></span>
                </div>
            </div>

        </div>
    </section>

    <% } %>

    <!-- Footer -->
    <%- include('partials/footer') %>

    <script>
        window.__lang = '<%= lang %>';
        window.__i18n = <%- localeJson %>;
        window.__t = function(key) {
            var parts = key.split('.'), obj = window.__i18n;
            for (var i = 0; i < parts.length; i++) { obj = obj && obj[parts[i]]; }
            return obj !== undefined ? obj : key;
        };
        window.switchLanguage = function(lang) {
            var next = lang || (document.documentElement.lang === 'en' ? 'ru' : 'en');
            if (next === document.documentElement.lang) return;
            document.cookie = 'lang=' + next + ';path=/;max-age=31536000;SameSite=Lax';
            window.location.reload();
        };
    </script>
    <script src="/js/main.js?v=3"></script>
    <script src="/js/api-client.js"></script>
</body>
</html>
