{% extends "base.html" %}

{% block title %}Pricing — Log Thread{% endblock %}

{% block content %}
<div class="min-h-screen bg-slate-50">
    <!-- Nav -->
    <nav class="bg-white border-b border-slate-200">
        <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
            <a href="/" class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <circle cx="12" cy="5" r="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>
                        <circle cx="9" cy="19" r="2"/><circle cx="15" cy="19" r="2"/>
                    </svg>
                </div>
                <span class="font-semibold text-lg">Log Thread</span>
            </a>
            <div id="navRight"></div>
        </div>
    </nav>

    <div class="max-w-4xl mx-auto px-6 py-20">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold mb-4">Unlock the full power of AI coding</h1>
            <p class="text-xl text-slate-600">One simple plan. No limits. Cancel anytime.</p>
        </div>
        
        <div class="max-w-lg mx-auto">
            <div class="p-8 rounded-3xl bg-white border-2 border-brand-500 shadow-xl relative">
                <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-6 py-2 rounded-full gradient-bg text-white font-semibold">
                    Start Today
                </div>
                
                <div class="text-center mb-8 pt-4">
                    <div class="mb-4">
                        <span class="text-6xl font-bold">$4.99</span>
                        <span class="text-xl text-slate-600">/month</span>
                    </div>
                    <p class="text-slate-600">Billed monthly. Cancel anytime.</p>
                </div>
                
                <ul class="space-y-4 mb-8">
                    <li class="flex items-center gap-3">
                        <div class="w-6 h-6 rounded-full bg-brand-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                        <span class="text-lg"><strong>Unlimited</strong> repositories</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <div class="w-6 h-6 rounded-full bg-brand-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                        <span class="text-lg">Full code intelligence</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <div class="w-6 h-6 rounded-full bg-brand-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                        <span class="text-lg">Works with Cursor, Windsurf, Claude Code</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <div class="w-6 h-6 rounded-full bg-brand-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                        <span class="text-lg">Cloud sync (optional)</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <div class="w-6 h-6 rounded-full bg-brand-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                        <span class="text-lg">Priority email support</span>
                    </li>
                </ul>
                
                <button onclick="subscribe()" id="subscribeBtn"
                    class="w-full py-4 rounded-xl gradient-bg text-white font-semibold text-lg hover:opacity-90 transition disabled:opacity-50">
                    Subscribe Now
                </button>
                
                <p class="text-center text-sm text-slate-500 mt-4">
                    Secure payment via Stripe. Cancel anytime from your dashboard.
                </p>
            </div>
        </div>
        
        <!-- Trust signals -->
        <div class="mt-16 text-center">
            <p class="text-slate-500 mb-8">Trusted by developers at</p>
            <div class="flex items-center justify-center gap-12 opacity-50">
                <span class="text-2xl font-bold text-slate-400">Google</span>
                <span class="text-2xl font-bold text-slate-400">Meta</span>
                <span class="text-2xl font-bold text-slate-400">Stripe</span>
                <span class="text-2xl font-bold text-slate-400">Vercel</span>
            </div>
        </div>
        
        <!-- FAQ -->
        <div class="mt-20 max-w-2xl mx-auto">
            <h2 class="text-2xl font-bold text-center mb-8">Common Questions</h2>
            
            <div class="space-y-4">
                <details class="p-6 rounded-xl bg-white border border-slate-200 group">
                    <summary class="font-semibold cursor-pointer flex items-center justify-between">
                        How does Log Thread make AI better?
                        <svg class="w-5 h-5 text-slate-400 group-open:rotate-180 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </summary>
                    <p class="mt-4 text-slate-600">
                        Log Thread analyzes your codebase to understand its structure — functions, classes, relationships, and patterns. 
                        When your AI assistant needs to make changes, Log Thread provides this context automatically, so the AI knows 
                        what already exists and how to use it correctly.
                    </p>
                </details>
                
                <details class="p-6 rounded-xl bg-white border border-slate-200 group">
                    <summary class="font-semibold cursor-pointer flex items-center justify-between">
                        Is my code sent to your servers?
                        <svg class="w-5 h-5 text-slate-400 group-open:rotate-180 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </summary>
                    <p class="mt-4 text-slate-600">
                        No. Log Thread runs entirely on your local machine. Your code never leaves your computer. 
                        Cloud sync is optional and only stores structural metadata, not your actual source code.
                    </p>
                </details>
                
                <details class="p-6 rounded-xl bg-white border border-slate-200 group">
                    <summary class="font-semibold cursor-pointer flex items-center justify-between">
                        Which AI tools does it work with?
                        <svg class="w-5 h-5 text-slate-400 group-open:rotate-180 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </summary>
                    <p class="mt-4 text-slate-600">
                        Log Thread works with any tool that supports the MCP protocol, including Cursor, Windsurf, Claude Code, 
                        and many others. If your tool supports MCP servers, it works with Log Thread.
                    </p>
                </details>
                
                <details class="p-6 rounded-xl bg-white border border-slate-200 group">
                    <summary class="font-semibold cursor-pointer flex items-center justify-between">
                        Can I cancel anytime?
                        <svg class="w-5 h-5 text-slate-400 group-open:rotate-180 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </summary>
                    <p class="mt-4 text-slate-600">
                        Yes, absolutely. You can cancel your subscription anytime from your dashboard. 
                        You'll continue to have access until the end of your billing period.
                    </p>
                </details>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const token = localStorage.getItem('lt_token');
    
    // Update nav based on auth state
    const navRight = document.getElementById('navRight');
    if (token) {
        navRight.innerHTML = `
            <a href="/dashboard" class="text-slate-600 hover:text-slate-900 transition">Dashboard</a>
        `;
    } else {
        navRight.innerHTML = `
            <a href="/login" class="text-slate-600 hover:text-slate-900 transition">Login</a>
        `;
    }
    
    async function subscribe() {
        const btn = document.getElementById('subscribeBtn');
        
        if (!token) {
            window.location.href = '/register';
            return;
        }
        
        btn.disabled = true;
        btn.textContent = 'Redirecting to checkout...';
        
        try {
            const res = await fetch('/billing/checkout', {
                method: 'POST',
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            const data = await res.json();
            
            if (data.checkout_url) {
                window.location.href = data.checkout_url;
            } else {
                throw new Error('Failed to create checkout session');
            }
        } catch (err) {
            alert(err.message);
            btn.disabled = false;
            btn.textContent = 'Subscribe Now';
        }
    }
    
    // Check for successful checkout
    if (new URLSearchParams(window.location.search).get('checkout') === 'success') {
        alert('Welcome to Log Thread! Your subscription is now active.');
        window.location.href = '/dashboard';
    }
</script>
{% endblock %}