<!DOCTYPE html>l Styles */
<html lang="en">
<head>sition: fixed;
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Store - Austin Credit Doctors</title>
    <meta name="description" content="Professional credit repair templates. À la carte pricing $12-$30. Save up to 46.6% with crypto + bulk discounts.">
    <meta name="keywords" content="credit repair templates, dispute letters, credit restoration, à la carte pricing">
    z-index: 1000;
    <!-- Open Graph -->
    <meta property="og:title" content="Credit Repair Templates - Austin Credit Doctors">
    <meta property="og:description" content="Professional templates, individual pricing. Save 20% with crypto, 33% bulk discount.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://austincreditdoctors.com/shop/">
    
    <style>ent {
        * {und-color: #fefefe;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }: 80%;
        width: 500px;
        body {ius: 8px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;ase-out;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }ay: flex;
        ify-content: space-between;
        .header {center;
            background: rgba(255,255,255,0.1);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }size: 1.5rem;
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }ng: 5px;
        er-radius: 50%;
        .logo { all 0.2s ease;
            font-size: 1.8rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
            display: flex;r;
            align-items: center;
            gap: 10px;
        }dal:hover {
        ground: #f5f5f5;
        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }ng: 25px;
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 16px;
            border-radius: 20px;
        }
        -summary h4 {
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }
        
        .cta-button {
            background: linear-gradient(45deg, #FF6B35, #F7931E);
            color: white;
            padding: 12px 25px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }ng-left: 20px;
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        }: #555;
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        -option {
        .page-header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }r-radius: 10px;
        in-bottom: 15px;
        .page-header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }align: left;
        -family: inherit;
        .page-header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }r-color: #667eea;
        sform: translateY(-2px);
        .pricing-info {5px rgba(102, 126, 234, 0.2);
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }
        
        .discount-tags {
            display: flex;7eea;
            gap: 15px;x;
            justify-content: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }size: 2rem;
        in-right: 15px;
        .discount-tag {
            padding: 8px 16px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 0.9rem;
            color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        -details h4 {
        .crypto-tag {;
            background: linear-gradient(45deg, #FF6B35, #F7931E);
        }size: 1.1rem;
        
        .bulk-tag {
            background: linear-gradient(45deg, #8E44AD, #9B59B6);
        }n: 0 0 10px 0;
        r: #666;
        .max-savings {
            background: linear-gradient(45deg, #E74C3C, #C0392B);
            animation: pulse 2s infinite;
        }price {
        -weight: bold;
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }iscount {
        ground: #4CAF50;
        .bundle-cta {
            background: linear-gradient(45deg, #27AE60, #2ECC71);
            color: white;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 30px;
        }
        -radio {
        .bundle-cta h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }ition: all 0.2s ease;
        
        .bundle-cta p {
            margin-bottom: 15px;t-radio {
            opacity: 0.9;
        }
        
        .bundle-links {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }r-top: 1px solid #eee;
        
        .bundle-link {
            background: rgba(255,255,255,0.2);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
        }size: 1rem;
        
        .bundle-link:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }: #666;
        er: 1px solid #ddd;
        .shop-container {
            position: relative;
            min-height: 600px;
        }round: #e0e0e0;
        
        .cart-sidebar {
            position: fixed;
            right: 20px;radient(45deg, #667eea, #764ba2);
            top: 50%;
            transform: translateY(-50%);, 234, 0.3);
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 20px;
            width: 320px;(-2px);
            max-height: 70vh;ba(102, 126, 234, 0.4);
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            z-index: 50;
        }form: none;
        
        .cart-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }{
        opacity: 0;
        .cart-item {ranslateY(-50px) scale(0.9);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;Y(0) scale(1);
            border-bottom: 1px solid #eee;
        }
        
        .cart-item-name {
            font-weight: 500;
            color: #333;
            flex: 1;
        } 0;
        t: 0;
        .cart-item-price {
            font-weight: bold; 255, 0.9);
            color: #27AE60;
            margin-left: 10px;
        }fy-content: center;
        er-radius: 15px;
        .remove-btn {
            background: #E74C3C;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;3;
            font-size: 0.8rem;eea;
            margin-left: 10px;
        }tion: spin 1s linear infinite;
        
        .cart-summary {
            margin-top: 20px;
            padding-top: 15px;g); }
            border-top: 2px solid #eee;
        }
        
        .discount-options {es */
            margin-bottom: 15px; {
        }tion: fadeIn 0.3s ease-out;
        
        .crypto-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            color: #FF6B35;
            cursor: pointer;t;
        }
        
        .summary-row { */
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .summary-total {
            font-size: 1.2rem;
            font-weight: bold;
            color: #27AE60;eY(-50px) scale(0.9);
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }pacity: 1;
        transform: translateY(0) scale(1);
        .checkout-btn {
            width: 100%;
            background: linear-gradient(45deg, #27AE60, #2ECC71);
            color: white;
            border: none;
            padding: 15px;teX(100%); 
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;X(0); 
            margin-top: 15px;
            transition: all 0.3s ease;
        }
        
        .checkout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
        }pacity: 1; 
        
        .checkout-btn:disabled {
            background: #ccc;(100%); 
            cursor: not-allowed;
            transform: none;
        }
        
        .templates-grid {ovements */
            display: grid;{
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }argin: 20px;
        
        .template-card {
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 25px;;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }argin-bottom: 10px;
        margin-right: 0;
        .template-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        }osition: absolute;
        top: 10px;
        .template-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }ap: 10px;
        
        .template-category {
            background: #667eea;
            color: white;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
            display: inline-block;0px; margin: 0 auto; padding: 20px; }
            margin-bottom: 15px;splay: none; } /* Hide by default, show via JS */
        }rst-child { display: block; } /* Show Credit Repair first */
        -card, .package { border: 1px solid #ddd; padding: 20px; margin: 10px; border-radius: 8px; }
        .template-description {olor: white; border: none; padding: 10px; cursor: pointer; }
            color: #666;position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
            margin-bottom: 20px;te; margin: 15% auto; padding: 20px; width: 80%; max-width: 500px; }
            line-height: 1.5;ize: 28px; cursor: pointer; }
        }ax-width: 768px) { .service-card, .package { margin: 5px; padding: 15px; } }
                .template-pricing {            display: flex;            align-items: center;            gap: 10px;            margin-bottom: 15px;        }                .template-price {            font-size: 1.4rem;            font-weight: bold;            color: #27AE60;        }                .template-crypto-price {            font-size: 1.1rem;            color: #FF6B35;            text-decoration: line-through;            opacity: 0.7;        }                .add-to-cart-btn {            width: 100%;            background: linear-gradient(45deg, #667eea, #764ba2);            color: white;            border: none;            padding: 12px;            border-radius: 8px;            font-weight: bold;            cursor: pointer;            transition: all 0.3s ease;        }                .add-to-cart-btn:hover {            transform: translateY(-2px);            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);        }                .loading {            text-align: center;            padding: 60px 20px;            color: white;        }                .loading-icon {            font-size: 3rem;            margin-bottom: 20px;            animation: spin 2s linear infinite;        }                @keyframes spin {            0% { transform: rotate(0deg); }            100% { transform: rotate(360deg); }        }                @media (max-width: 768px) {            .nav-links {                display: none;            }                        .templates-grid {                grid-template-columns: 1fr;                gap: 20px;            }                        .cart-sidebar {                position: relative;                right: auto;                top: auto;                transform: none;                width: 100%;                margin: 20px 0;            }                        .discount-tags {                flex-direction: column;                align-items: center;            }                        .bundle-links {                flex-direction: column;            }        }        /* Payment Button Styles */        .payment-method-btn {            display: flex;            align-items: center;            width: 100%;            padding: 20px;            margin-bottom: 15px;            background: rgba(255, 255, 255, 0.95);            border: 2px solid #e0e0e0;            border-radius: 12px;            cursor: pointer;            transition: all 0.3s ease;            text-align: left;            font-family: inherit;        }        .payment-method-btn:hover {            border-color: #667eea;            transform: translateY(-2px);            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);            background: rgba(255, 255, 255, 1);        }        .payment-method-btn:active {            transform: translateY(0);        }        .payment-icon {            font-size: 2.5rem;            margin-right: 20px;            width: 60px;            text-align: center;        }        .payment-content {            flex: 1;        }        .payment-title {            font-size: 1.3rem;            font-weight: bold;            color: #333;            margin-bottom: 5px;        }        .payment-description {            color: #666;            font-size: 0.95rem;            margin-bottom: 10px;        }        .payment-price {            display: flex;            align-items: center;            gap: 10px;            margin-bottom: 8px;        }        .current-price {            font-size: 1.4rem;            font-weight: bold;            color: #333;        }        .original-price {            font-size: 1.1rem;            color: #999;            text-decoration: line-through;        }        .discount-badge {            background: #4CAF50;            color: white;            padding: 3px 8px;            border-radius: 12px;            font-size: 0.8rem;            font-weight: bold;        }        .payment-perks {            display: flex;            gap: 8px;            flex-wrap: wrap;        }        .perk-tag {            background: #e3f2fd;            color: #1976d2;            padding: 4px 10px;            border-radius: 15px;            font-size: 0.8rem;            font-weight: 500;        }        .payment-arrow {            font-size: 1.5rem;            color: #667eea;            margin-left: 15px;        }        /* Payment Loading and Messages */        #payment-loading-overlay {            position: absolute;            top: 0;            left: 0;            right: 0;            bottom: 0;            background: rgba(255, 255, 255, 0.95);            display: flex;            align-items: center;            justify-content: center;            border-radius: 12px;            z-index: 10;        }        .payment-loading {            text-align: center;            padding: 30px;        }        .loading-spinner {            width: 50px;            height: 50px;            border: 4px solid #f3f3f3;            border-top: 4px solid #667eea;            border-radius: 50%;            animation: spin 1s linear infinite;            margin: 0 auto 15px;        }        @keyframes spin {            0% { transform: rotate(0deg); }            100% { transform: rotate(360deg); }        }        .payment-success-content,        .payment-error-content {            text-align: center;            padding: 30px;        }        .success-icon,        .error-icon {            font-size: 4rem;            margin-bottom: 15px;        }        .payment-success-content h3 {            color: #4CAF50;            margin-bottom: 15px;        }        .payment-error-content h3 {            color: #f44336;            margin-bottom: 15px;        }        .payment-details {            background: #f5f5f5;            padding: 15px;            border-radius: 8px;            margin: 15px 0;            text-align: left;        }        .redirect-notice {            color: #666;            font-style: italic;            margin-top: 15px;        }        .error-actions {            display: flex;            gap: 15px;            justify-content: center;            margin-top: 20px;        }        .retry-btn,        .support-btn {            padding: 12px 25px;            border-radius: 25px;            font-weight: bold;            cursor: pointer;            transition: all 0.3s ease;            border: none;        }        .retry-btn {            background: #667eea;            color: white;        }        .retry-btn:hover {            background: #5a67d8;        }        .support-btn {            background: #f5f5f5;            color: #666;            border: 1px solid #ddd;        }        .support-btn:hover {            background: #e0e0e0;        }        /* Mobile responsiveness for payment buttons */        @media (max-width: 768px) {            .payment-method-btn {                flex-direction: column;                text-align: center;                padding: 15px;            }            .payment-icon {                margin-right: 0;                margin-bottom: 10px;            }            .payment-arrow {                margin-left: 0;                margin-top: 10px;            }            .payment-perks {                justify-content: center;            }        }        /* Cart and Payment Display States */        .cart-summary {            display: none;        }        .cart-summary.show {            display: block !important;        }        #payment-buttons-container {            display: none;        }        #payment-buttons-container.show {            display: block !important;        }        .checkout-btn.hide {            display: none !important;        }        .catalog-filters {            display: flex;            gap: 15px;            margin-bottom: 25px;        }                .catalog-filters input,        .catalog-filters select {            padding: 10px;            border: 2px solid #ddd;            border-radius: 8px;            font-size: 1rem;            width: 100%;            max-width: 300px;        }                .catalog-filters input:focus,        .catalog-filters select:focus {            border-color: #667eea;            outline: none;        }                .catalog-grid {            display: grid;            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));            gap: 20px;        }                .template-card {            background: rgba(255,255,255,0.95);            border-radius: 15px;            padding: 25px;            box-shadow: 0 8px 25px rgba(0,0,0,0.1);            transition: all 0.3s ease;            -webkit-backdrop-filter: blur(10px);            backdrop-filter: blur(10px);        }                .template-card:hover {            transform: translateY(-5px);            box-shadow: 0 12px 30px rgba(0,0,0,0.15);        }                .template-card h4 {            font-size: 1.2rem;            font-weight: bold;            color: #333;            margin-bottom: 10px;        }                .template-card p {            color: #666;            margin-bottom: 15px;            line-height: 1.4;        }                .template-card button {            width: 100%;            background: linear-gradient(45deg, #667eea, #764ba2);            color: white;            border: none;            padding: 10px;            border-radius: 8px;            font-weight: bold;            cursor: pointer;            transition: all 0.3s ease;        }                .template-card button:hover {            transform: translateY(-2px);            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);        }        .empty-cart-message {            text-align: center;            color: #666;            padding: 20px;        }    </style></head><body>    <!-- Header with Unified Navigation -->    <div class="header">        <div class="nav-container">            <a href="/" class="logo">                🏦 Austin Credit Doctors            </a>            <ul class="nav-links">                <li><a href="/">Home</a></li>                <li><a href="/diy/">DIY Packages</a></li>                <li><a href="/done-for-you/">Done For You</a></li>                <li><a href="/shop/" class="active">Template Store</a></li>                <li><a href="/testimonials/">Testimonials</a></li>            </ul>            <a href="/done-for-you/" class="cta-button">Get Started</a>        </div>    </div>    <div class="container">        <!-- Page Header -->        <div class="page-header">            <h1>🛒 Template Store</h1>            <p>Professional credit repair templates - Choose exactly what you need</p>        </div>        <!-- Bundle Promotion -->        <div class="bundle-cta">            <h3>💡 Save More with DIY Bundles!</h3>            <p>Individual templates add up fast. Our bundles include multiple templates at huge savings!</p>            <div class="bundle-links">                <a href="/diy/" class="bundle-link">DIY Starter - $39 (Save $57+)</a>                <a href="/diy/" class="bundle-link">DIY Advanced - $79 (Save $101+)</a>                <a href="/diy/" class="bundle-link">DIY Complete - $149 (Save $151+)</a>            </div>        </div>        <!-- Pricing Info -->        <div class="pricing-info">            <div class="discount-tags">                <div class="discount-tag crypto-tag">💰 20% Crypto Discount</div>                <div class="discount-tag bulk-tag">📦 33% Bulk Discount (3+ Files)</div>                <div class="discount-tag max-savings">🎯 Max 46.6% Savings!</div>            </div>            <p style="text-align: center; color: #666; margin-top: 15px;">                Professional templates from <strong>$12-$30</strong>.                 <strong>Save more with crypto payments and bulk purchases!</strong>            </p>        </div>        <!-- Catalog Filters -->        <div class="catalog-filters">            <input type="text" id="searchInput" placeholder="Search templates..." aria-label="Search Templates">            <select id="categoryFilter" aria-label="Filter by Category">                <option value="">All Categories</option>                <option value="free">Free</option>                <option value="basic">Basic</option>                <option value="advanced">Advanced</option>                <option value="premium">Premium</option>            </select>        </div>        <!-- Shop Container -->        <div class="shop-container">            <!-- Templates will be loaded here -->            <div id="templates-container">                <div class="loading">                    <div class="loading-icon">🔄</div>                    <h3>Loading Templates...</h3>                    <p>Fetching the latest credit repair templates from our catalog</p>                </div>            </div>            <!-- Cart Sidebar -->            <div class="cart-sidebar" id="cart-sidebar">                <div class="cart-title">🛒 Your Cart</div>                <div id="cart-items">                    <p class="empty-cart-message">Your cart is empty<br><small>Add templates to see them here</small></p>                </div>                <div class="cart-summary" id="cart-summary">                    <div class="discount-options">                        <label class="crypto-toggle">                            <input type="checkbox" id="crypto-discount">                             💰 Use Crypto (20% off)                        </label>                    </div>                    <div class="summary-row">                        <span>Subtotal:</span>                        <span id="subtotal">$0.00</span>                    </div>                    <div class="summary-row" id="bulk-discount-row" style="display: none;">                        <span>Bulk Discount (33%):</span>                        <span id="bulk-discount" style="color: #E74C3C;">-$0.00</span>                    </div>                    <div class="summary-row" id="crypto-discount-row" style="display: none;">                        <span>Crypto Discount (20%):</span>                        <span id="crypto-discount-amount" style="color: #FF6B35;">-$0.00</span>                    </div>                    <div class="summary-row summary-total">                        <span>Total:</span>                        <span id="total">$0.00</span>                    </div>                                        <!-- Enhanced Payment Buttons -->                    <div id="payment-buttons-container">                        <!-- Payment buttons will be inserted here -->                    </div>                                        <!-- Fallback checkout button -->                    <button class="checkout-btn" id="checkout-btn" disabled>                        🚀 Checkout (<span id="checkout-total">$0.00</span>)                    </button>                </div>            </div>        </div>        <!-- Catalog Grid -->        <div class="catalog-grid" id="catalogGrid">            <!-- Templates loaded via create-catalog-data.js -->        </div>    </div>    <script>        // Cart management        let cart = [];        let templates = [];        // Load templates from API        async function loadTemplates() {            try {                const response = await fetch('https://shop.austincreditdoctors.com/api/files');                const data = await response.json();                                if (data.success && data.files) {                    templates = data.files;                    renderTemplates();                } else {                    showError('Failed to load templates');                }            } catch (error) {                console.error('Error loading templates:', error);                showError('Error loading templates');            }        }        function renderTemplates() {            const container = document.getElementById('templates-container');                        if (templates.length === 0) {                container.innerHTML = `                    <div class="loading">                        <div style="font-size: 3rem; margin-bottom: 20px;">📋</div>                        <h3>No templates available</h3>                        <p>Please try again later</p>                    </div>                `;                return;            }            const html = `                <div class="templates-grid">                    ${templates.map(template => `                        <div class="template-card">                            <div class="template-category">${template.category || 'Credit Repair'}</div>                            <h3 class="template-title">${template.title || template.name}</h3>                            <p class="template-description">${template.description || 'Professional credit repair template'}</p>                            <div class="template-pricing">                                <span class="template-price">$${template.price}</span>                                <span class="template-crypto-price">$${template.crypto_price} with crypto</span>                            </div>                            <button class="add-to-cart-btn" onclick="addToCart('${template.name}')">                                Add to Cart                            </button>                        </div>                    `).join('')}                </div>            `;                        container.innerHTML = html;        }        function addToCart(templateName) {            const template = templates.find(t => t.name === templateName);            if (!template) return;            const existingItem = cart.find(item => item.name === templateName);            if (existingItem) {                alert('This template is already in your cart!');                return;            }            cart.push(template);            updateCartDisplay();        }        function removeFromCart(templateName) {            cart = cart.filter(item => item.name !== templateName);            updateCartDisplay();        }        function updateCartDisplay() {            const cartItems = document.getElementById('cart-items');            const cartSummary = document.getElementById('cart-summary');            if (cart.length === 0) {                cartItems.innerHTML = `                    <p class="empty-cart-message">Your cart is empty<br><small>Add templates to see them here</small></p>                `;                cartSummary.style.display = 'none';                return;            }            // Show cart items            cartItems.innerHTML = cart.map(item => `                <div class="cart-item">                    <span class="cart-item-name">${item.title || item.name}</span>                    <span class="cart-item-price">$${item.price}</span>                    <button class="remove-btn" onclick="removeFromCart('${item.name}')">×</button>                </div>            `).join('');            cartSummary.style.display = 'block';            updatePricing();        }        function updatePricing() {            const cryptoCheckbox = document.getElementById('crypto-discount');            const useCrypto = cryptoCheckbox.checked;            let subtotal = cart.reduce((sum, item) => sum + parseFloat(item.price), 0);            let total = subtotal;            let bulkDiscount = 0;            let cryptoDiscount = 0;            // Bulk discount (3+ items = 33% off)            if (cart.length >= 3) {                bulkDiscount = subtotal * 0.33;                total -= bulkDiscount;                document.getElementById('bulk-discount-row').style.display = 'flex';                document.getElementById('bulk-discount').textContent = `-$${bulkDiscount.toFixed(2)}`;            } else {                document.getElementById('bulk-discount-row').style.display = 'none';            }            // Crypto discount (20% off final price)            if (useCrypto) {                cryptoDiscount = total * 0.20;                total -= cryptoDiscount;                document.getElementById('crypto-discount-row').style.display = 'flex';                document.getElementById('crypto-discount-amount').textContent = `-$${cryptoDiscount.toFixed(2)}`;            } else {                document.getElementById('crypto-discount-row').style.display = 'none';            }            // Update display            document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;            document.getElementById('total').textContent = `$${total.toFixed(2)}`;            document.getElementById('checkout-total').textContent = `$${total.toFixed(2)}`;                        const checkoutBtn = document.getElementById('checkout-btn');            const cartSummary = document.getElementById('cart-summary');                        if (cart.length > 0) {                // Show cart summary when there are items                cartSummary.classList.add('show');                checkoutBtn.disabled = false;            } else {                // Hide cart summary when empty                cartSummary.classList.remove('show');                checkoutBtn.disabled = true;            }        }        function showError(message) {            document.getElementById('templates-container').innerHTML = `                <div class="loading">                    <div style="font-size: 3rem; margin-bottom: 20px; color: #E74C3C;">⚠️</div>                    <h3>Error Loading Templates</h3>                    <p>${message}</p>                    <button onclick="loadTemplates()" style="margin-top: 20px; padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer;">                        Try Again                    </button>                </div>            `;        }        // Checkout function        document.getElementById('checkout-btn').addEventListener('click', function() {            if (cart.length === 0) return;            const useCrypto = document.getElementById('crypto-discount').checked;            const total = document.getElementById('total').textContent.replace('$', '');                        // Create payment request            const paymentData = {                items: cart,                total: parseFloat(total),                paymentMethod: useCrypto ? 'crypto' : 'card',                timestamp: Date.now()            };            // For now, redirect to the existing payment system            // This will be enhanced with the new hybrid payment system            const encodedData = encodeURIComponent(JSON.stringify(paymentData));            window.location.href = `https://shop.austincreditdoctors.com/checkout?data=${encodedData}`;        });        // Event listeners        document.getElementById('crypto-discount').addEventListener('change', updatePricing);        // Initialize        loadTemplates();        // Enhanced payment system integration        let paymentButtonsCreated = false;        function createEnhancedPaymentButtons() {            if (paymentButtonsCreated || cart.length === 0) return;            const container = document.getElementById('payment-buttons-container');            const oldButton = document.getElementById('checkout-btn');            const total = parseFloat(document.getElementById('total').textContent.replace('$', ''));            const useCrypto = document.getElementById('crypto-discount').checked;            if (total > 0) {                // Create custom tier data for the cart                const tierData = {                    tier: 'custom',                    name: `${cart.length} Template${cart.length > 1 ? 's' : ''}`,                    price: total,                    crypto_price: useCrypto ? total : total * 0.8, // 20% crypto discount                    cashapp_price: total,                    description: `Selected credit repair templates: ${cart.map(item => item.title).join(', ')}`,                    files: cart                };                // Show enhanced buttons, hide old button using CSS classes                container.classList.add('show');                oldButton.classList.add('hide');                // Create payment buttons (this function comes from payment-buttons.js)                if (typeof createPaymentButtons === 'function') {                    createPaymentButtons(tierData, 'payment-buttons-container');                    paymentButtonsCreated = true;                } else {                    // Fallback to old button if script not loaded                    console.warn('createPaymentButtons function not found, falling back to basic checkout');                    container.classList.remove('show');                    oldButton.classList.remove('hide');                }            } else {                // Hide payment buttons for free items                container.classList.remove('show');                oldButton.classList.remove('hide');                paymentButtonsCreated = false;            }        }        // Update the existing updatePricing function to trigger payment buttons        const originalUpdatePricing = updatePricing;        updatePricing = function() {            originalUpdatePricing();                        // Reset payment buttons when pricing changes            paymentButtonsCreated = false;            const container = document.getElementById('payment-buttons-container');            const oldButton = document.getElementById('checkout-btn');                        // Clear payment buttons and reset visibility            container.innerHTML = '';            container.classList.remove('show');            oldButton.classList.remove('hide');                        // Create new payment buttons            setTimeout(createEnhancedPaymentButtons, 100);        };        // Override the payment API endpoint        window.PAYMENT_API_ENDPOINT = 'https://shop.austincreditdoctors.com/api/create-payment';        // Load catalog from create-catalog-data.js        fetch('/api/catalog')            .then(response => response.json())            .then(data => {                renderCatalog(data.files);            });        function renderCatalog(files) {            const grid = document.getElementById('catalogGrid');            grid.innerHTML = files.map(file => `                <div class="template-card" data-category="${file.category}">                    <h4>${file.name}</h4>                    <p>${file.description}</p>                    <p>PayPal: $${file.price} | Crypto: $${file.crypto_price}</p>                    <button onclick="initiateServicePayment('${file.id}', 'card', ${file.price}, 'diy')">Buy Now</button>                </div>            `).join('');        }        // Search and filter functionality        document.getElementById('searchInput').addEventListener('input', filterCatalog);        document.getElementById('categoryFilter').addEventListener('change', filterCatalog);        function filterCatalog() {            const search = document.getElementById('searchInput').value.toLowerCase();            const category = document.getElementById('categoryFilter').value;            document.querySelectorAll('.template-card').forEach(card => {                const matchesSearch = card.textContent.toLowerCase().includes(search);                const matchesCategory = !category || card.dataset.category === category;                card.style.display = matchesSearch && matchesCategory ? 'block' : 'none';            });        }    </script>    <!-- Load Enhanced Payment Buttons -->    <script src="payment-buttons.js"></script>    <script>        // Initialize payment buttons when both scripts are loaded        document.addEventListener('DOMContentLoaded', function() {            // Ensure payment buttons are created when cart changes            const observer = new MutationObserver(function(mutations) {                mutations.forEach(function(mutation) {                    if (mutation.target.id === 'total' && mutation.type === 'childList') {                        setTimeout(createEnhancedPaymentButtons, 200);                    }                });            });            // Watch for changes to the total amount            const totalElement = document.getElementById('total');            if (totalElement) {                observer.observe(totalElement, { childList: true });            }        });    </script></body></html>