<?php
// Read user's current tier — only if logged in
$currentTier = 'free';
$isLoggedIn = $auth->isLoggedIn();

if ($isLoggedIn) {
    try {
        $userId = $auth->getUserId();
        $stmt = $pdo->prepare('SELECT tier FROM user_profiles WHERE user_id = :uid LIMIT 1');
        $stmt->execute([':uid' => $userId]);
        $profileRow = $stmt->fetch(PDO::FETCH_ASSOC);
        if ($profileRow && !empty($profileRow['tier'])) {
            $currentTier = $profileRow['tier'];
        }
    } catch (\Throwable $e) {
        error_log("Failed to read user tier: " . $e->getMessage());
    }
}

// Free, Pro, Elite are the only three customer-facing plans as of 2026-08-18.
// Starter has been retired entirely (no card, no purchase path). A legacy
// account that still literally has tier='starter' stored (pre-existing data,
// never re-issued going forward) is treated as rank 0, same as Free, for the
// purpose of this page's "Upgrade"/"Current"/"Higher Tier" button logic.
$tierRank = ['free' => 0, 'starter' => 0, 'pro' => 1, 'elite' => 2, 'ultimate' => 3];
$currentRank = $tierRank[$currentTier] ?? 0;

// Real, finalized prices — single source of truth in config.php (see
// PRICE_PRO_MONTHLY etc.), never re-typed here. `annual` is the real, full
// amount the customer is actually charged once a year — that figure is the
// authoritative one and is what any future checkout/payment step must show
// before the customer pays. On THIS page, the Annual toggle deliberately
// leads with `effective_monthly` (annual / 12) as the large, primary number
// instead, purely for how approachable it reads at a glance — the real
// annual total and the exact dollar saving are both still shown right next
// to it, never hidden, just not the biggest number on the card.
$plans = [
    'pro' => [
        'monthly' => PRICE_PRO_MONTHLY,
        'annual'  => PRICE_PRO_ANNUAL,
        'savings' => PRICE_PRO_ANNUAL_SAVINGS,
    ],
    'elite' => [
        'monthly' => PRICE_ELITE_MONTHLY,
        'annual'  => PRICE_ELITE_ANNUAL,
        'savings' => PRICE_ELITE_ANNUAL_SAVINGS,
    ],
];
foreach ($plans as $key => &$p) {
    $p['annual_equivalent_of_monthly'] = round($p['monthly'] * 12, 2);
    $p['effective_monthly'] = round($p['annual'] / 12, 2);
    $p['savings_pct'] = $p['annual_equivalent_of_monthly'] > 0
        ? (int)round(($p['savings'] / $p['annual_equivalent_of_monthly']) * 100)
        : 0;
}
unset($p);

function fmtUsd(float $amount): string {
    return '$' . number_format($amount, 2);
}

// Ultimate is frozen/reserved for a future Full Automation release — see
// config.php's ULTIMATE_TIER_ENABLED. While false, its card is not rendered
// at all (not even as a "Coming Soon" placeholder) per the BETA policy that
// it must not appear anywhere in user-facing UI. The markup itself is kept
// below, just wrapped, so re-enabling later is a one-line flag flip.
$visibleTierCount = ULTIMATE_TIER_ENABLED ? 4 : 3;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing - TraderAlign</title>
    <meta name="description" content="Simple, transparent pricing for TraderAlign. Start free, upgrade to Pro or Elite when you're ready for deeper analytics, broker reconciliation, and institutional-grade reporting.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/traderalign/assets/tokens.css">
    <link rel="icon" type="image/png" sizes="32x32" href="/traderalign/assets/favicon/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/traderalign/assets/favicon/favicon-16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/traderalign/assets/favicon/apple-touch-icon.png">
    <link rel="shortcut icon" href="/traderalign/assets/favicon/favicon.ico">
    <link rel="stylesheet" href="/traderalign/assets/css/brand.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background: var(--background);
            color: var(--foreground);
            font-family: var(--font-sans);
            min-height: 100vh;
            padding: 2rem 1.5rem 4rem;
            -webkit-font-smoothing: antialiased;
        }

        .pricing-page {
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
        }

        /* ── Hero band (nav + title + billing toggle) ────────── */
        /* Full-bleed background layer, edge to edge of this container, no
           card framing (no border, no radius) — content simply sits on top. */
        .pricing-hero-band {
            padding: 1.75rem 1.5rem 2.25rem;
            background-image:
                linear-gradient(rgba(10, 10, 11, 0.74), rgba(10, 10, 11, 0.74)),
                url('/traderalign/assets/images/landing/pricing-visual.jpg');
            background-size: cover;
            background-position: center 20%;
            background-repeat: no-repeat;
        }
        @supports (background-image: image-set(url(a) type("image/webp"))) {
            .pricing-hero-band {
                background-image:
                    linear-gradient(rgba(10, 10, 11, 0.74), rgba(10, 10, 11, 0.74)),
                    image-set(url('/traderalign/assets/images/landing/pricing-visual.webp') type("image/webp"));
            }
        }

        /* ── Navigation ──────────────────────────── */
        .pricing-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
            padding: 0 0.5rem;
        }

        .pricing-nav .nav-links {
            display: flex;
            gap: 1.25rem;
            align-items: center;
        }

        .pricing-nav .nav-links a {
            font-size: 0.82rem;
            color: var(--foreground-dim);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.15s;
        }

        .pricing-nav .nav-links a:hover {
            color: var(--foreground);
        }

        .pricing-nav .nav-links .btn {
            width: auto;
            padding: 0.5rem 1.1rem;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: var(--radius-md);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            border: 1px solid transparent;
            font-family: var(--font-sans);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .pricing-nav .nav-links .btn-primary {
            background: var(--primary);
            color: #0b0e11;
            border-color: var(--primary);
        }

        .pricing-nav .nav-links .btn-primary:hover {
            opacity: 0.9;
        }

        /* ── Page Title ──────────────────────────── */
        .pricing-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .pricing-title h1 {
            font-size: clamp(1.75rem, 3.5vw, 2.25rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--foreground);
        }

        .pricing-title p {
            margin-top: 0.65rem;
            font-size: 0.92rem;
            color: var(--foreground-dim);
            max-width: 30rem;
            margin-inline: auto;
            line-height: 1.5;
        }

        /* ── Billing period toggle ─────────────────── */
        .billing-toggle-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 2.5rem;
        }

        .billing-toggle {
            position: relative;
            display: inline-flex;
            align-items: stretch;
            background: var(--background-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-full);
            padding: 0.3rem;
        }

        /* Fixed, equal width on both buttons — not sized by their own text —
           so the sliding pill (exactly 50% of the track) always lands
           precisely under whichever one is active, on every screen size. */
        .billing-toggle button {
            position: relative;
            z-index: 1;
            width: 7.25rem;
            border: none;
            background: transparent;
            font-family: var(--font-sans);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--foreground-dim);
            padding: 0.6rem 0.5rem;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: color 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            line-height: 1;
        }

        .billing-toggle button.active {
            color: #0b0e11;
        }

        .billing-toggle .toggle-pill {
            position: absolute;
            top: 0.3rem;
            bottom: 0.3rem;
            left: 0.3rem;
            width: calc(50% - 0.3rem);
            background: var(--primary);
            border-radius: var(--radius-full);
            transition: transform 0.28s cubic-bezier(.4,0,.2,1);
            box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent);
            pointer-events: none;
        }

        .billing-toggle[data-period="annual"] .toggle-pill {
            transform: translateX(100%);
        }

        .billing-save-hint {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--positive);
            background: color-mix(in srgb, var(--positive) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--positive) 28%, transparent);
            padding: 0.28rem 0.75rem;
            border-radius: var(--radius-full);
        }

        .billing-note {
            font-size: 0.72rem;
            color: var(--foreground-dim);
        }

        /* ── Tier Grid ─────────────────────────────── */
        .tiers {
            display: grid;
            grid-template-columns: repeat(<?= (int)$visibleTierCount ?>, 1fr);
            gap: 1.1rem;
            align-items: stretch;
        }

        .tier-card {
            background: var(--background-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 1.75rem 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
            position: relative;
        }

        .tier-card:hover {
            border-color: color-mix(in srgb, var(--primary) 30%, transparent);
            box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
            transform: translateY(-2px);
        }

        .tier-card.featured {
            border-color: color-mix(in srgb, var(--primary) 45%, transparent);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent),
                        0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .tier-card.current {
            border-color: var(--primary);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent),
                        0 8px 24px rgba(0, 0, 0, 0.25);
        }

        .current-badge, .popular-badge {
            position: absolute;
            top: -0.6rem;
            right: 1rem;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            padding: 0.18rem 0.65rem;
            border-radius: var(--radius-full);
            text-transform: uppercase;
        }

        .current-badge {
            background: var(--primary);
            color: #0b0e11;
        }

        .popular-badge {
            top: -0.7rem;
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            font-size: 0.6rem;
            padding: 0.28rem 0.85rem;
            white-space: nowrap;
            background: var(--warning);
            color: #1a1206;
            border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
            box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--warning) 55%, transparent);
        }

        .coming-soon-badge {
            position: absolute;
            top: -0.55rem;
            right: 0.75rem;
            background: color-mix(in srgb, var(--warning) 20%, transparent);
            color: var(--warning);
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            padding: 0.15rem 0.6rem;
            border-radius: var(--radius-full);
            text-transform: uppercase;
            border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
        }

        .tier-header {
            margin-bottom: 1.1rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 1rem;
        }

        .tier-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--foreground);
            letter-spacing: -0.02em;
            margin-bottom: 0.55rem;
        }

        .tier-price-block {
            min-height: 3.6rem;
        }

        .tier-price {
            font-family: var(--font-mono);
            font-size: 1.95rem;
            font-weight: 700;
            color: var(--foreground);
            line-height: 1.1;
            display: flex;
            align-items: baseline;
            gap: 0.2rem;
        }

        .tier-price .cents-period {
            font-family: var(--font-sans);
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--foreground-dim);
            letter-spacing: normal;
        }

        .tier-card.free .tier-price { color: var(--foreground); }
        .tier-card.pro .tier-price { color: var(--primary); }
        .tier-card.elite .tier-price { color: var(--positive); }

        .tier-save-badge {
            display: none;
            align-items: center;
            gap: 0.3rem;
            margin-top: 0.5rem;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--positive);
            background: color-mix(in srgb, var(--positive) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--positive) 30%, transparent);
            padding: 0.22rem 0.55rem;
            border-radius: var(--radius-md);
            width: fit-content;
        }

        .tiers.period-annual .tier-save-badge {
            display: inline-flex;
        }

        .tier-billed-as {
            margin-top: 0.35rem;
            font-size: 0.68rem;
            color: var(--foreground-dim);
        }

        .tier-desc {
            font-size: 0.75rem;
            color: var(--foreground-dim);
            margin-top: 0.5rem;
            line-height: 1.4;
        }

        .tier-features {
            list-style: none;
            margin: 0 0 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .tier-features li {
            font-size: 0.75rem;
            color: var(--foreground-dim);
            padding-left: 1.3rem;
            position: relative;
            line-height: 1.4;
        }

        .tier-features li strong {
            color: var(--foreground-muted);
            font-weight: 600;
        }

        .tier-features li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.15rem;
            width: 0.85rem;
            height: 0.85rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2326A69A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.8;
        }

        .tier-features li.new-feature {
            color: var(--foreground-muted);
        }

        .tier-features li.new-feature::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2360A5FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        }

        .tier-cta {
            margin-top: auto;
        }

        .tier-cta .btn {
            width: 100%;
            justify-content: center;
            font-weight: 600;
            font-size: 0.8rem;
            padding: 0.65rem 0.8rem;
            border-radius: var(--radius-md);
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            border: 1px solid transparent;
            font-family: var(--font-sans);
        }

        .btn-primary {
            background: var(--primary);
            color: #0b0e11;
            border-color: var(--primary);
            font-weight: 600;
        }

        .btn-primary:hover {
            opacity: 0.9;
        }

        .btn-outline {
            background: transparent;
            color: var(--foreground);
            border-color: var(--border);
            font-weight: 500;
        }

        .btn-outline:hover {
            background: var(--background-surface);
            border-color: var(--foreground-dim);
        }

        .btn-ghost {
            background: transparent;
            color: var(--foreground-dim);
            border-color: transparent;
            font-weight: 500;
        }

        .btn-ghost:hover {
            color: var(--foreground);
        }

        .btn-disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* ── Comparison hint row ─────────────────────── */
        .plan-note {
            text-align: center;
            margin-top: 2rem;
            font-size: 0.78rem;
            color: var(--foreground-dim);
        }

        .plan-note a { color: var(--primary); text-decoration: none; }

        /* ── FAQ ──────────────────────────────────────── */
        .pricing-faq {
            margin-top: 4rem;
            max-width: 42rem;
            margin-inline: auto;
        }

        .pricing-faq h2 {
            text-align: center;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--foreground);
            margin-bottom: 1.5rem;
        }

        .faq-item {
            border-bottom: 1px solid var(--border);
            padding: 1rem 0;
        }

        .faq-item h3 {
            font-size: 0.86rem;
            font-weight: 600;
            color: var(--foreground);
            margin-bottom: 0.4rem;
        }

        .faq-item p {
            font-size: 0.8rem;
            color: var(--foreground-dim);
            line-height: 1.55;
        }

        /* ── Footer note ──────────────────────────── */
        .pricing-footer {
            text-align: center;
            margin-top: 2.5rem;
            color: var(--foreground-dim);
            font-size: 0.78rem;
        }

        .pricing-footer a {
            color: var(--primary);
            text-decoration: none;
        }

        @media (max-width: 900px) {
            .tiers { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
        }

        @media (max-width: 768px) {
            body { padding: 1.5rem 1rem 3rem; }
            .tier-card { padding: 1.5rem; }
            .tier-price { font-size: 1.8rem; }
            .pricing-nav { flex-direction: column; gap: 1rem; }
            .billing-toggle button { width: 6rem; font-size: 0.8rem; }
            .pricing-hero-band { padding: 1.5rem 1rem 1.75rem; background-position: center 12%; }
        }
    </style>
</head>
<body>

<div class="pricing-page">

<div class="pricing-hero-band">

    <!-- Navigation -->
    <div class="pricing-nav">
        <a href="/traderalign/" class="logo ta-brand"><img src="/traderalign/images/logo.png" alt="" class="ta-logo ta-logo--md"><span class="ta-word">TraderAlign</span></a>
        <div class="nav-links">
            <?php if ($isLoggedIn): ?>
                <a href="/traderalign/dashboard">Dashboard</a>
            <?php else: ?>
                <a href="/traderalign/sign-in">Sign In</a>
                <a href="/traderalign/sign-up" class="btn btn-primary">Get Started</a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Page Title -->
    <div class="pricing-title">
        <h1>Simple pricing. Serious upgrades.</h1>
        <p>Start free and journal with structure from day one. Upgrade when you're ready for deeper analytics, broker reconciliation, and institutional-grade reporting.</p>
    </div>

    <!-- Billing Toggle -->
    <div class="billing-toggle-wrap">
        <div class="billing-toggle" id="billingToggle" data-period="monthly">
            <span class="toggle-pill"></span>
            <button type="button" class="active" data-set-period="monthly">Monthly</button>
            <button type="button" data-set-period="annual">Annual</button>
        </div>
        <span class="billing-save-hint">Save up to <?= max($plans['pro']['savings_pct'], $plans['elite']['savings_pct']) ?>% with annual billing</span>
        <p class="billing-note">Annual plans are billed once a year, up front. Cancel anytime.</p>
    </div>

</div>

    <!-- Tier Cards -->
    <div class="tiers" id="tiersGrid">

        <!-- Free -->
        <div class="tier-card free <?= $isLoggedIn && $currentTier === 'free' ? 'current' : '' ?>">
            <?php if ($isLoggedIn && $currentTier === 'free'): ?><span class="current-badge">Current</span><?php endif; ?>
            <div class="tier-header">
                <div class="tier-name">Free</div>
                <div class="tier-price-block">
                    <div class="tier-price">$0<span class="cents-period">/forever</span></div>
                </div>
                <div class="tier-desc">A simple way to experience TraderAlign's core philosophy. No credit card, no expiry.</div>
            </div>
            <ul class="tier-features">
                <li>Risk Calculator with core position sizing</li>
                <li>Auto risk-based lot sizing</li>
                <li>No trading workspace, journal, or account setup required</li>
            </ul>
            <div class="tier-cta">
                <?php if ($isLoggedIn && $currentTier === 'free'): ?>
                    <span class="btn btn-ghost btn-disabled">Current Plan</span>
                <?php else: ?>
                    <a class="btn btn-outline" href="/traderalign/sign-up">Start Free</a>
                <?php endif; ?>
            </div>
        </div>

        <!-- Pro -->
        <div class="tier-card pro featured <?= $isLoggedIn && $currentTier === 'pro' ? 'current' : '' ?>">
            <?php if ($isLoggedIn && $currentTier === 'pro'): ?>
                <span class="current-badge">Current</span>
            <?php else: ?>
                <span class="popular-badge">Most Popular</span>
            <?php endif; ?>
            <div class="tier-header">
                <div class="tier-name">Pro</div>
                <div class="tier-price-block">
                    <div class="tier-price" data-price-monthly="<?= htmlspecialchars(fmtUsd($plans['pro']['monthly'])) ?>" data-price-annual="<?= htmlspecialchars(fmtUsd($plans['pro']['effective_monthly'])) ?>">
                        <span class="amount"><?= htmlspecialchars(fmtUsd($plans['pro']['monthly'])) ?></span><span class="cents-period suffix">/month</span>
                    </div>
                    <div class="tier-save-badge">Save <?= htmlspecialchars(fmtUsd($plans['pro']['savings'])) ?>/year</div>
                    <div class="tier-billed-as billed-annual-note" style="display:none">Billed <?= htmlspecialchars(fmtUsd($plans['pro']['annual'])) ?> once a year</div>
                </div>
                <div class="tier-desc">See exactly what's working and what's leaking, with broker-verified truth behind every number.</div>
            </div>
            <ul class="tier-features">
                <li>Everything in Free</li>
                <li class="new-feature">Full Advanced Calculator (live session risk bar, contextual warnings)</li>
                <li class="new-feature">Dashboard performance analytics: win rate, expectancy, profit factor, streaks</li>
                <li class="new-feature">Automated MT5 broker reconciliation and sync</li>
                <li class="new-feature">Performance and Drawdown Analysis in Reports</li>
                <li class="new-feature">Institutional metrics: Sharpe, Sortino, CAGR, Calmar</li>
                <li class="new-feature">Strategy Performance breakdowns</li>
                <li class="new-feature">Trader Profile behavioral reports</li>
                <li class="new-feature">Expanded Colex AI usage</li>
            </ul>
            <div class="tier-cta">
                <?php if ($isLoggedIn && $currentTier === 'pro'): ?>
                    <span class="btn btn-ghost btn-disabled">Current Plan</span>
                <?php elseif ($isLoggedIn && $currentRank < 1): ?>
                    <a class="btn btn-primary" href="/traderalign/pricing">Upgrade to Pro</a>
                <?php elseif ($isLoggedIn): ?>
                    <span class="btn btn-ghost btn-disabled">Higher Tier</span>
                <?php else: ?>
                    <a class="btn btn-primary" href="/traderalign/sign-up">Get Started</a>
                <?php endif; ?>
            </div>
        </div>

        <!-- Elite -->
        <div class="tier-card elite <?= $isLoggedIn && $currentTier === 'elite' ? 'current' : '' ?>">
            <?php if ($isLoggedIn && $currentTier === 'elite'): ?><span class="current-badge">Current</span><?php endif; ?>
            <div class="tier-header">
                <div class="tier-name">Elite</div>
                <div class="tier-price-block">
                    <div class="tier-price" data-price-monthly="<?= htmlspecialchars(fmtUsd($plans['elite']['monthly'])) ?>" data-price-annual="<?= htmlspecialchars(fmtUsd($plans['elite']['effective_monthly'])) ?>">
                        <span class="amount"><?= htmlspecialchars(fmtUsd($plans['elite']['monthly'])) ?></span><span class="cents-period suffix">/month</span>
                    </div>
                    <div class="tier-save-badge">Save <?= htmlspecialchars(fmtUsd($plans['elite']['savings'])) ?>/year</div>
                    <div class="tier-billed-as billed-annual-note" style="display:none">Billed <?= htmlspecialchars(fmtUsd($plans['elite']['annual'])) ?> once a year</div>
                </div>
                <div class="tier-desc">Full portfolio visibility for traders managing serious size across strategies and accounts.</div>
            </div>
            <ul class="tier-features">
                <li>Everything in Pro</li>
                <li class="new-feature">Analytics Across Strategies: full portfolio comparison</li>
                <li class="new-feature">Risk of Ruin monitoring</li>
                <li class="new-feature">Trading Archive: Lessons From Success and Failure, evidence-linked</li>
                <li class="new-feature">Full Prop Firm Risk Panel: drawdown-tier sizing, loss-streak circuit breaker, daily loss guard</li>
                <li class="new-feature">Weekly through Annual reporting, unlimited historical lookback</li>
                <li class="new-feature">Validation Workflow: test a new strategy risk-free before it touches your real results</li>
                <li class="new-feature">Multi-currency account support</li>
                <li class="new-feature">Highest Colex AI usage allowance</li>
                <li class="new-feature">Priority support</li>
            </ul>
            <div class="tier-cta">
                <?php if ($isLoggedIn && $currentTier === 'elite'): ?>
                    <span class="btn btn-ghost btn-disabled">Current Plan</span>
                <?php elseif ($isLoggedIn && $currentRank < 2): ?>
                    <a class="btn btn-primary" href="/traderalign/pricing">Upgrade to Elite</a>
                <?php elseif ($isLoggedIn): ?>
                    <span class="btn btn-ghost btn-disabled">Higher Tier</span>
                <?php else: ?>
                    <a class="btn btn-primary" href="/traderalign/sign-up">Get Started</a>
                <?php endif; ?>
            </div>
        </div>

        <?php if (ULTIMATE_TIER_ENABLED): ?>
        <!-- Ultimate — reserved for the future Full Automation release.
             Hidden entirely while ULTIMATE_TIER_ENABLED is false (see
             config.php); kept here, not deleted, so it can be switched back
             on with one flag flip once that release is ready. -->
        <div class="tier-card <?= $isLoggedIn && $currentTier === 'ultimate' ? 'current' : '' ?>">
            <?php if ($isLoggedIn && $currentTier === 'ultimate'): ?>
                <span class="current-badge">Current</span>
            <?php else: ?>
                <span class="coming-soon-badge">Coming Soon</span>
            <?php endif; ?>
            <div class="tier-header">
                <div class="tier-name">Ultimate</div>
                <div class="tier-price">$89<span class="cents-period">/mo</span></div>
                <div class="tier-desc">Full automation, reserved for a future release.</div>
            </div>
            <ul class="tier-features">
                <li>Everything in Elite</li>
                <li class="new-feature">Full automation, agent-driven trading</li>
                <li class="new-feature">PineScript / MQL5 bridge</li>
            </ul>
            <div class="tier-cta">
                <span class="btn btn-ghost btn-disabled">Coming Soon</span>
            </div>
        </div>
        <?php endif; ?>

    </div>

    <p class="plan-note">Not sure which plan fits? <a href="/traderalign/sign-up">Start on Free</a>, it upgrades in place the moment you need more.</p>

    <!-- FAQ -->
    <div class="pricing-faq">
        <h2>Pricing questions</h2>
        <div class="faq-item">
            <h3>Is Free really free forever?</h3>
            <p>Yes. Free never expires and never requires a card. It gives traders a simple way to experience TraderAlign's core philosophy without database-backed features or the full trading workspace. When you're ready for the complete experience, upgrade to Pro.</p>
        </div>
        <div class="faq-item">
            <h3>What's the difference between Monthly and Annual billing?</h3>
            <p>Annual billing charges the full year up front at a lower effective rate than paying monthly for twelve months. The exact amount you're charged and the exact amount you save are both shown on the toggle above, nothing is hidden behind a per-month figure.</p>
        </div>
        <div class="faq-item">
            <h3>Can I change plans later?</h3>
            <p>Yes, upgrades and downgrades are available anytime from Settings &gt; Billing.</p>
        </div>
    </div>

    <!-- Footer -->
    <div class="pricing-footer">
        All prices in USD. Cancel anytime.
        <?php if ($isLoggedIn): ?>
            · <a href="/traderalign/dashboard">← Back to Dashboard</a>
        <?php endif; ?>
    </div>

</div>

<script>
(function () {
    var toggle = document.getElementById('billingToggle');
    var grid = document.getElementById('tiersGrid');
    if (!toggle || !grid) return;

    var buttons = toggle.querySelectorAll('button[data-set-period]');

    function setPeriod(period) {
        toggle.setAttribute('data-period', period);
        buttons.forEach(function (b) {
            b.classList.toggle('active', b.getAttribute('data-set-period') === period);
        });

        var isAnnual = period === 'annual';
        grid.classList.toggle('period-annual', isAnnual);

        // The suffix always reads "/month" — Annual billing shows the real
        // annual charge divided into an effective monthly rate as its big
        // number (data-price-annual holds that effective rate, not the full
        // yearly total), with the real total and the exact dollar saving
        // both still printed right below it, never hidden.
        grid.querySelectorAll('.tier-price[data-price-monthly]').forEach(function (priceEl) {
            var amountEl = priceEl.querySelector('.amount');
            if (!amountEl) return;
            amountEl.textContent = isAnnual ? priceEl.getAttribute('data-price-annual') : priceEl.getAttribute('data-price-monthly');
        });

        grid.querySelectorAll('.billed-annual-note').forEach(function (note) {
            note.style.display = isAnnual ? 'block' : 'none';
        });

        try { localStorage.setItem('ta_pricing_period', period); } catch (e) {}
    }

    buttons.forEach(function (b) {
        b.addEventListener('click', function () {
            setPeriod(b.getAttribute('data-set-period'));
        });
    });

    var saved = null;
    try { saved = localStorage.getItem('ta_pricing_period'); } catch (e) {}
    if (saved === 'annual') setPeriod('annual');
})();
</script>

</body>
</html>
