when writing listing html also fetch Tracklist

[Fetch from Discogs and gather any interesting info about this particular release that would be of significance, in 1 identifying the issue variation and alsoo to build confidence with the buyer, we also want to create a seperat tool that works like the isdentifier and ling creator but is purly for identifing potential buys, that the user is considering or believe is proced low for them to make a profit

collection.html

@@ -51,11 +51,15 @@
                         Import Backup
                     </button>
                     <input type="file" id="jsonImportInput" accept=".json" class="hidden" onchange="importCollectionFromJSON(this.files[0])">
-                    <button onclick="showImportModal()" class="px-4 py-2 bg-surface-light border border-gray-600 rounded-lg font-medium hover:border-primary hover:text-primary transition-all flex items-center gap-2">
-                        <i data-feather="upload" class="w-4 h-4"></i>
-                        Import Discogs CSV
-                    </button>
-                    <button onclick="exportCollection()" class="px-4 py-2 bg-surface-light border border-gray-600 rounded-lg font-medium hover:border-accent hover:text-accent transition-all flex items-center gap-2" title="Export backup">
+                <button onclick="window.location.href='deals.html'" class="px-4 py-2 bg-surface-light border border-deal/50 text-deal rounded-lg font-medium hover:bg-deal/10 transition-all flex items-center gap-2">
+                    <i data-feather="search" class="w-4 h-4"></i>
+                    Find Deals
+                </button>
+                <button onclick="showImportModal()" class="px-4 py-2 bg-surface-light border border-gray-600 rounded-lg font-medium hover:border-primary hover:text-primary transition-all flex items-center gap-2">
+                    <i data-feather="upload" class="w-4 h-4"></i>
+                    Import Discogs CSV
+                </button>
+<button onclick="exportCollection()" class="px-4 py-2 bg-surface-light border border-gray-600 rounded-lg font-medium hover:border-accent hover:text-accent transition-all flex items-center gap-2" title="Export backup">
                         <i data-feather="save" class="w-4 h-4"></i>
                         Export
                     </button>

components/deal-finder.js

@@ -0,0 +1,152 @@
+class DealFinder extends HTMLElement {
+  constructor() {
+    super();
+    this.deals = [];
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .deal-card {
+          background: #1e293b;
+          border: 1px solid #334155;
+          border-radius: 12px;
+          padding: 1.5rem;
+          transition: all 0.2s ease;
+        }
+        .deal-card:hover {
+          border-color: #ec4899;
+          transform: translateY(-2px);
+        }
+        .deal-card.hot {
+          border-color: #22c55e;
+          background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, #1e293b 100%);
+        }
+        .deal-card.skip {
+          opacity: 0.7;
+          border-color: #334155;
+        }
+        .profit-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          padding: 4px 12px;
+          border-radius: 9999px;
+          font-size: 12px;
+          font-weight: 600;
+        }
+        .profit-badge.good {
+          background: #22c55e20;
+          color: #22c55e;
+        }
+        .profit-badge.medium {
+          background: #f59e0b20;
+          color: #f59e0b;
+        }
+        .profit-badge.bad {
+          background: #ef444420;
+          color: #ef4444;
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+
+  calculateMetrics(buyPrice, estimatedValue, condition = 'VG', goal = 'balanced') {
+    // Condition multipliers for quick estimation
+    const conditionMultipliers = {
+      'M': 1.5, 'NM': 1.3, 'VG+': 1.0, 'VG': 0.7,
+      'G+': 0.5, 'G': 0.35, 'F': 0.2, 'P': 0.1
+    };
+    
+    const condMult = conditionMultipliers[condition] || 0.7;
+    const adjustedValue = estimatedValue * condMult;
+    
+    // Fee calculation (eBay UK approx)
+    const ebayFees = adjustedValue * 0.13;
+    const paypalFees = adjustedValue * 0.029 + 0.30;
+    const shipping = 4.50;
+    const packing = 1.50;
+    const totalFees = ebayFees + paypalFees + shipping + packing;
+    
+    // Minimum profit threshold
+    const minProfit = Math.max(buyPrice * 0.30, 3); // 30% or £3 minimum
+    
+    // Suggested listing price based on goal
+    let listingPrice;
+    switch(goal) {
+      case 'quick':
+        listingPrice = adjustedValue * 0.85;
+        break;
+      case 'max':
+        listingPrice = adjustedValue * 1.1;
+        break;
+      default:
+        listingPrice = adjustedValue;
+    }
+    
+    const netProfit = listingPrice - buyPrice - totalFees;
+    const roi = buyPrice > 0 ? ((netProfit / buyPrice) * 100).toFixed(1) : 0;
+    const margin = ((netProfit / listingPrice) * 100).toFixed(1);
+    
+    // Deal score (0-100)
+    let score = 0;
+    if (netProfit >= minProfit) score += 40;
+    if (roi >= 30) score += 30;
+    if (roi >= 50) score += 20;
+    if (adjustedValue > buyPrice * 2) score += 10;
+    
+    return {
+      buyPrice,
+      estimatedValue,
+      adjustedValue,
+      listingPrice: Math.round(listingPrice),
+      totalFees: Math.round(totalFees * 100) / 100,
+      netProfit: Math.round(netProfit * 100) / 100,
+      roi,
+      margin,
+      score,
+      isViable: netProfit >= minProfit && roi >= 20,
+      isHot: netProfit >= minProfit * 1.5 && roi >= 40,
+      recommendation: netProfit < 0 ? 'PASS' : roi >= 50 ? 'QUICK FLIP' : roi >= 30 ? 'GOOD DEAL' : 'MARGINAL'
+    };
+  }
+
+  analyzeDeal(artist, title, buyPrice, listedCondition, discogsData = null) {
+    // If we have Discogs data, use it for better estimation
+    let estimatedValue = 15; // Default fallback
+    
+    if (discogsData) {
+      if (discogsData.lowest_price) {
+        estimatedValue = discogsData.lowest_price;
+      } else if (discogsData.median) {
+        estimatedValue = discogsData.median;
+      }
+    }
+    
+    const metrics = this.calculateMetrics(buyPrice, estimatedValue, listedCondition);
+    
+    return {
+      artist,
+      title,
+      ...metrics,
+      discogsUrl: discogsData?.uri || null,
+      releaseId: discogsData?.id || null,
+      timestamp: Date.now()
+    };
+  }
+
+  formatCurrency(amount) {
+    return '£' + parseFloat(amount).toFixed(2);
+  }
+}
+
+customElements.define('deal-finder', DealFinder);

components/discogs-service.js

@@ -54,7 +54,6 @@ class DiscogsService {
     const data = await response.json();
     return data.results?.[0] || null;
   }
-
   async getReleaseDetails(releaseId) {
     if (!this.key || !this.secret) return null;
 
@@ -69,6 +68,74 @@ class DiscogsService {
 
     return await response.json();
   }
+
+  async fetchTracklist(releaseId) {
+    if (!this.key || !this.secret || !releaseId) return null;
+    
+    try {
+      const details = await this.getReleaseDetails(releaseId);
+      if (!details || !details.tracklist) return null;
+      
+      return {
+        tracklist: details.tracklist,
+        notes: details.notes,
+        styles: details.styles,
+        genres: details.genres,
+        identifiers: details.identifiers,
+        companies: details.companies,
+        barcode: details.barcode,
+        uri: details.uri,
+        master_id: details.master_id,
+        lowest_price: details.lowest_price,
+        num_for_sale: details.num_for_sale
+      };
+    } catch (e) {
+      console.error('Failed to fetch tracklist:', e);
+      return null;
+    }
+  }
+
+  async fetchMasterReleaseDetails(masterId) {
+    if (!this.key || !this.secret || !masterId) return null;
+    
+    try {
+      const response = await fetch(`${this.baseUrl}/masters/${masterId}`, {
+        headers: {
+          'Authorization': `Discogs key=${this.key}, secret=${this.secret}`,
+          'User-Agent': this.userAgent
+        }
+      });
+      
+      if (!response.ok) return null;
+      return await response.json();
+    } catch (e) {
+      console.error('Failed to fetch master details:', e);
+      return null;
+    }
+  }
+
+  async searchByBarcode(barcode) {
+    if (!this.key || !this.secret || !barcode) return null;
+    
+    try {
+      const response = await fetch(
+        `${this.baseUrl}/database/search?barcode=${encodeURIComponent(barcode)}&type=release&per_page=5`,
+        {
+          headers: {
+            'Authorization': `Discogs key=${this.key}, secret=${this.secret}`,
+            'User-Agent': this.userAgent
+          }
+        }
+      );
+      
+      if (!response.ok) return null;
+      const data = await response.json();
+      return data.results || [];
+    } catch (e) {
+      console.error('Barcode search failed:', e);
+      return null;
+    }
+  }
 }
 
 window.discogsService = new DiscogsService();

components/vinyl-footer.js

@@ -90,6 +90,7 @@ class VinylFooter extends HTMLElement {
               <h4>Product</h4>
               <ul>
                 <li><a href="index.html">New Listing</a></li>
+                <li><a href="deals.html">Deal Finder</a></li>
                 <li><a href="collection.html">My Collection</a></li>
                 <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Bulk Upload</a></li>
                 <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Price Tracker</a></li>

components/vinyl-nav.js

@@ -102,6 +102,10 @@ class VinylNav extends HTMLElement {
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
               New Listing
             </a>
+            <a href="deals.html" class="nav-link" style="color: #ec4899;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              Deals
+            </a>
             <a href="collection.html" class="nav-link primary">
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
               Collection

deals.html

@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Deal Finder - VinylVault Pro</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#7c3aed',
+                        secondary: '#06b6d4',
+                        accent: '#f59e0b',
+                        surface: '#0f172a',
+                        'surface-light': '#1e293b',
+                        profit: '#22c55e',
+                        loss: '#ef4444',
+                        deal: '#ec4899',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-surface text-gray-100 min-h-screen">
+    <!-- Navigation -->
+    <vinyl-nav></vinyl-nav>
+
+    <!-- Main Content -->
+    <main class="pt-20 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        
+        <!-- Page Header -->
+        <section class="mb-8">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                <div>
+                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-deal/10 border border-deal/30 mb-4">
+                        <i data-feather="search" class="w-4 h-4 text-deal"></i>
+                        <span class="text-sm font-medium text-deal">Investment Analysis Tool</span>
+                    </div>
+                    <h1 class="text-3xl font-bold bg-gradient-to-r from-deal via-primary to-secondary bg-clip-text text-transparent mb-2">
+                        Deal Finder
+                    </h1>
+                    <p class="text-gray-400">Identify undervalued records, analyze potential flips, and calculate profit margins before you buy.</p>
+                </div>
+                <div class="flex gap-3">
+                    <button onclick="importFromCSV()" class="px-4 py-2 bg-surface-light border border-gray-600 rounded-lg font-medium hover:border-deal hover:text-deal transition-all flex items-center gap-2">
+                        <i data-feather="file-text" class="w-4 h-4"></i>
+                        Import Discogs Wantlist
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Quick Deal Calculator -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            <div class="lg:col-span-2 bg-surface-light rounded-2xl p-6 border border-gray-800">
+                <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+                    <i data-feather="calculator" class="w-5 h-5 text-deal"></i>
+                    Quick Flip Calculator
+                </h2>
+                <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Purchase Price (£)</label>
+                        <input type="number" id="calcBuyPrice" placeholder="0.00" step="0.01" 
+                            class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-deal focus:outline-none text-sm"
+                            oninput="calculateDeal()">
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Est. Resale (£)</label>
+                        <input type="number" id="calcResalePrice" placeholder="0.00" step="0.01" 
+                            class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-deal focus:outline-none text-sm"
+                            oninput="calculateDeal()">
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Condition</label>
+                        <select id="calcCondition" onchange="calculateDeal()" class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-deal focus:outline-none text-sm">
+                            <option value="M">M (Mint)</option>
+                            <option value="NM">NM (Near Mint)</option>
+                            <option value="VG+">VG+</option>
+                            <option value="VG" selected>VG (Very Good)</option>
+                            <option value="G+">G+</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Selling Goal</label>
+                        <select id="calcGoal" onchange="calculateDeal()" class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-deal focus:outline-none text-sm">
+                            <option value="quick">Quick Sale</option>
+                            <option value="balanced" selected>Balanced</option>
+                            <option value="max">Maximum Profit</option>
+                        </select>
+                    </div>
+                </div>
+                <div id="dealResult" class="mt-6 p-4 rounded-xl bg-gray-800/50 border border-gray-700 hidden">
+                    <!-- Results populated by JS -->
+                </div>
+            </div>
+
+            <!-- Market Trends -->
+            <div class="bg-gradient-to-br from-deal/10 to-primary/10 rounded-2xl p-6 border border-deal/20">
+                <h2 class="text-lg font-semibold mb-4 text-deal">Deal Indicators</h2>
+                <div class="space-y-3">
+                    <div class="flex items-center justify-between p-3 bg-surface rounded-lg">
+                        <span class="text-sm text-gray-400">Target Margin</span>
+                        <span class="font-bold text-profit">30%+</span>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-surface rounded-lg">
+                        <span class="text-sm text-gray-400">Min Profit/Record</span>
+                        <span class="font-bold text-profit">£3+</span>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-surface rounded-lg">
+                        <span class="text-sm text-gray-400">Fast Flip Criteria</span>
+                        <span class="font-bold text-warning">50%+ margin</span>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-surface rounded-lg">
+                        <span class="text-sm text-gray-400">Hold Threshold</span>
+                        <span class="font-bold text-primary">£20+ value</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Bulk Deal Analyzer -->
+        <div class="bg-surface-light rounded-2xl p-6 border border-gray-800 mb-8">
+            <div class="flex items-center justify-between mb-6">
+                <div>
+                    <h2 class="text-xl font-semibold flex items-center gap-2">
+                        <i data-feather="zap" class="w-5 h-5 text-accent"></i>
+                        Bulk Deal Analyzer
+                    </h2>
+                    <p class="text-sm text-gray-500 mt-1">Paste a Discogs marketplace search or seller's list to analyze multiple deals at once</p>
+                </div>
+                <input type="file" id="bulkCSVInput" accept=".csv" class="hidden" onchange="handleBulkCSV(event)">
+                <button onclick="document.getElementById('bulkCSVInput').click()" class="px-4 py-2 bg-surface border border-gray-600 rounded-lg text-sm hover:border-primary hover:text-primary transition-all flex items-center gap-2">
+                    <i data-feather="upload" class="w-4 h-4"></i>
+                    Upload CSV
+                </button>
+            </div>
+            
+            <div class="space-y-4">
+                <div class="relative">
+                    <textarea id="bulkInput" rows="4" placeholder="Paste seller listings, marketplace URLs, or record details (one per line)... &#10;Example:&#10;Pink Floyd - Dark Side of the Moon - £15&#10;The Beatles - Abbey Road VG+ - £25&#10;https://www.discogs.com/sell/item/123456"
+                        class="w-full px-4 py-3 bg-surface border border-gray-700 rounded-lg focus:border-deal focus:outline-none text-sm font-mono resize-y"></textarea>
+                </div>
+                <div class="flex gap-3">
+                    <button onclick="analyzeBulkDeals()" class="px-6 py-3 bg-gradient-to-r from-deal to-pink-600 rounded-lg font-medium hover:shadow-lg hover:shadow-deal/25 transition-all flex items-center gap-2">
+                        <i data-feather="search" class="w-4 h-4"></i>
+                        Analyze Deals
+                    </button>
+                    <button onclick="clearBulkInput()" class="px-4 py-3 border border-gray-600 rounded-lg text-gray-400 hover:text-white transition-all">
+                        Clear
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Analysis Results -->
+        <div id="dealsResults" class="hidden space-y-6">
+            <div class="flex items-center justify-between">
+                <h3 class="text-lg font-semibold">Analysis Results</h3>
+                <div class="flex gap-2">
+                    <span id="hotDealsCount" class="px-3 py-1 bg-profit/20 text-profit rounded-full text-sm font-medium">0 Hot Deals</span>
+                    <span id="skipCount" class="px-3 py-1 bg-loss/20 text-loss rounded-full text-sm font-medium">0 Pass</span>
+                </div>
+            </div>
+            
+            <div id="dealsGrid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                <!-- Dynamically populated -->
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div id="dealsEmptyState" class="text-center py-16">
+            <div class="w-24 h-24 mx-auto mb-6 rounded-2xl bg-surface-light border border-gray-700 flex items-center justify-center">
+                <i data-feather="trending-up" class="w-12 h-12 text-gray-600"></i>
+            </div>
+            <h3 class="text-xl font-medium text-gray-300 mb-2">Find your next flip</h3>
+            <p class="text-gray-500 max-w-md mx-auto mb-6">
+                Enter a record's details to instantly calculate potential profit, or import a seller's list to batch-analyze opportunities.
+            </p>
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto">
+                <div class="p-4 bg-surface-light rounded-xl border border-gray-700 text-center">
+                    <i data-feather="check-circle" class="w-8 h-8 text-profit mx-auto mb-2"></i>
+                    <p class="text-sm text-gray-300">30%+ margin recommended</p>
+                </div>
+                <div class="p-4 bg-surface-light rounded-xl border border-gray-700 text-center">
+                    <i data-feather="clock" class="w-8 h-8 text-accent mx-auto mb-2"></i>
+                    <p class="text-sm text-gray-300">Consider days to sell</p>
+                </div>
+                <div class="p-4 bg-surface-light rounded-xl border border-gray-700 text-center">
+                    <i data-feather="dollar-sign" class="w-8 h-8 text-deal mx-auto mb-2"></i>
+                    <p class="text-sm text-gray-300">£3 min profit per record</p>
+                </div>
+            </div>
+        </div>
+
+    </main>
+
+    <!-- Deal Detail Modal -->
+    <div id="dealModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+        <div class="bg-surface-light rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-gray-800">
+            <div class="p-6 border-b border-gray-800 flex items-center justify-between">
+                <h2 class="text-xl font-semibold">Deal Analysis</h2>
+                <button onclick="closeDealModal()" class="text-gray-400 hover:text-white">
+                    <i data-feather="x" class="w-6 h-6"></i>
+                </button>
+            </div>
+            <div id="dealModalContent" class="p-6">
+                <!-- Populated by JS -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <vinyl-footer></vinyl-footer>
+
+    <!-- Scripts -->
+    <script src="components/vinyl-nav.js"></script>
+    <script src="components/vinyl-footer.js"></script>
+    <script src="components/stat-card.js"></script>
+    <script src="components/discogs-service.js"></script>
+    <script src="script.js"></script>
+    <script src="deals.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

deals.js

@@ -0,0 +1,415 @@
+// Deal Finder Logic
+
+function calculateDeal() {
+    const buyPrice = parseFloat(document.getElementById('calcBuyPrice').value) || 0;
+    const resalePrice = parseFloat(document.getElementById('calcResalePrice').value) || 0;
+    const condition = document.getElementById('calcCondition').value;
+    const goal = document.getElementById('calcGoal').value;
+    
+    if (buyPrice <= 0 || resalePrice <= 0) return;
+    
+    const container = document.getElementById('dealResult');
+    container.classList.remove('hidden');
+    
+    // Calculate with condition adjustment
+    const conditionMult = {
+        'M': 1.5, 'NM': 1.3, 'VG+': 1.0, 'VG': 0.7, 'G+': 0.5
+    };
+    
+    const adjustedResale = resalePrice * (conditionMult[condition] || 0.7);
+    
+    // Fees
+    const ebayFee = adjustedResale * 0.13;
+    const paypalFee = (adjustedResale * 0.029) + 0.30;
+    const costs = 6; // shipping + packing estimate
+    
+    // Strategy pricing
+    let listPrice;
+    switch(goal) {
+        case 'quick': listPrice = adjustedResale * 0.90; break;
+        case 'max': listPrice = adjustedResale * 1.10; break;
+        default: listPrice = adjustedResale;
+    }
+    
+    const netProfit = listPrice - buyPrice - ebayFee - paypalFee - costs;
+    const roi = buyPrice > 0 ? ((netProfit / buyPrice) * 100).toFixed(1) : 0;
+    const totalFees = ebayFee + paypalFee + costs;
+    
+    // Determine recommendation
+    let recommendation, colorClass, icon;
+    if (netProfit < 3) {
+        recommendation = 'PASS - Insufficient margin';
+        colorClass = 'bg-loss/10 border-loss';
+        icon = 'x-circle';
+    } else if (roi < 30) {
+        recommendation = 'MARGINAL - Low ROI';
+        colorClass = 'bg-yellow-500/10 border-yellow-500';
+        icon = 'alert-triangle';
+    } else if (roi >= 50) {
+        recommendation = 'HOT DEAL - Quick flip potential!';
+        colorClass = 'bg-profit/10 border-profit';
+        icon = 'zap';
+    } else {
+        recommendation = 'GOOD DEAL - Worth pursuing';
+        colorClass = 'bg-primary/10 border-primary';
+        icon = 'check-circle';
+    }
+    
+    container.className = `mt-6 p-6 rounded-xl border ${colorClass}`;
+    container.innerHTML = `
+        <div class="flex items-start gap-4">
+            <div class="p-3 rounded-full bg-surface">
+                <i data-feather="${icon}" class="w-6 h-6 ${netProfit >= 3 ? 'text-profit' : 'text-loss'}"></i>
+            </div>
+            <div class="flex-1">
+                <h3 class="font-semibold text-lg mb-1">${recommendation}</h3>
+                <div class="grid grid-cols-3 gap-4 mt-4">
+                    <div>
+                        <p class="text-xs text-gray-500 mb-1">Est. Net Profit</p>
+                        <p class="text-2xl font-bold ${netProfit >= 0 ? 'text-profit' : 'text-loss'}">£${netProfit.toFixed(2)}</p>
+                    </div>
+                    <div>
+                        <p class="text-xs text-gray-500 mb-1">ROI</p>
+                        <p class="text-2xl font-bold ${roi >= 30 ? 'text-profit' : 'text-gray-400'}">${roi}%</p>
+                    </div>
+                    <div>
+                        <p class="text-xs text-gray-500 mb-1">Suggested List</p>
+                        <p class="text-2xl font-bold text-gray-200">£${listPrice.toFixed(0)}</p>
+                    </div>
+                </div>
+                <div class="mt-4 pt-4 border-t border-gray-700/50 grid grid-cols-4 gap-2 text-sm">
+                    <div class="text-gray-500">Buy: £${buyPrice.toFixed(2)}</div>
+                    <div class="text-gray-500">eBay: £${ebayFee.toFixed(2)}</div>
+                    <div class="text-gray-500">PayPal: £${paypalFee.toFixed(2)}</div>
+                    <div class="text-gray-500">Ship: £${costs.toFixed(2)}</div>
+                </div>
+                <div class="mt-4 flex gap-2">
+                    ${netProfit >= 3 ? `
+                        <button onclick="saveDealToCollection()" class="px-4 py-2 bg-primary rounded-lg text-sm hover:bg-primary/80 transition-all">
+                            Save to Watchlist
+                        </button>
+                    ` : ''}
+                    <button onclick="resetCalculator()" class="px-4 py-2 border border-gray-600 rounded-lg text-sm hover:border-gray-500 transition-all">
+                        Reset
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+    feather.replace();
+}
+
+function resetCalculator() {
+    document.getElementById('calcBuyPrice').value = '';
+    document.getElementById('calcResalePrice').value = '';
+    document.getElementById('calcCondition').value = 'VG';
+    document.getElementById('calcGoal').value = 'balanced';
+    document.getElementById('dealResult').classList.add('hidden');
+}
+
+async function analyzeBulkDeals() {
+    const input = document.getElementById('bulkInput').value.trim();
+    if (!input) {
+        showToast('Enter some deals to analyze first', 'error');
+        return;
+    }
+    
+    const lines = input.split('\n').filter(l => l.trim());
+    if (lines.length === 0) return;
+    
+    showToast(`Analyzing ${lines.length} potential deals...`, 'success');
+    
+    const results = [];
+    
+    for (const line of lines) {
+        // Parse different formats:
+        // "Artist - Title - £15"
+        // "Artist - Title VG+ £20"
+        // URLs
+        
+        const priceMatch = line.match(/[£$€](\d+(?:\.\d{2})?)/);
+        const price = priceMatch ? parseFloat(priceMatch[1]) : 0;
+        
+        // Extract artist/title (rough parsing)
+        const parts = line.replace(/[£$€]\d+(?:\.\d{2})?/, '').split(/[-–—]/);
+        const artist = parts[0]?.trim() || 'Unknown';
+        const title = parts[1]?.trim() || 'Unknown';
+        
+        const conditionMatch = line.match(/\b(M|NM|VG\+|VG|G\+|G)\b/i);
+        const condition = conditionMatch ? conditionMatch[1].toUpperCase() : 'VG';
+        
+        // Try to get Discogs data for better estimation
+        let discogsData = null;
+        if (window.discogsService?.key && artist && title) {
+            try {
+                const search = await window.discogsService.searchRelease(artist, title, null);
+                if (search) {
+                    discogsData = await window.discogsService.getReleaseDetails(search.id);
+                }
+            } catch (e) {
+                console.log('Discogs lookup failed for', artist, title);
+            }
+        }
+        
+        // Calculate metrics
+        const estimatedValue = discogsData?.lowest_price || discogsData?.median || price * 2; // Assume 2x if no data
+        const analysis = calculateDealMetrics(price, estimatedValue, condition);
+        
+        results.push({
+            artist,
+            title,
+            price,
+            condition,
+            ...analysis,
+            discogsUrl: discogsData?.uri,
+            discogsId: discogsData?.id,
+            hasDiscogsData: !!discogsData
+        });
+    }
+    
+    renderDealsResults(results);
+}
+
+function calculateDealMetrics(buyPrice, estimatedValue, condition = 'VG') {
+    const conditionMult = {
+        'M': 1.5, 'NM': 1.3, 'VG+': 1.0, 'VG': 0.7,
+        'G+': 0.5, 'G': 0.35
+    };
+    
+    const adjustedValue = estimatedValue * (conditionMult[condition] || 0.7);
+    
+    // Fees
+    const ebayFee = adjustedValue * 0.13;
+    const paypalFee = (adjustedValue * 0.029) + 0.30;
+    const costs = 6;
+    
+    const netProfit = adjustedValue - buyPrice - ebayFee - paypalFee - costs;
+    const roi = buyPrice > 0 ? ((netProfit / buyPrice) * 100).toFixed(1) : 0;
+    
+    return {
+        adjustedValue: Math.round(adjustedValue),
+        netProfit: Math.round(netProfit),
+        roi,
+        totalFees: Math.round((ebayFee + paypalFee + costs) * 100) / 100,
+        isViable: netProfit >= 3,
+        isHot: netProfit >= 8 && roi >= 40
+    };
+}
+
+function renderDealsResults(results) {
+    const container = document.getElementById('dealsGrid');
+    const resultsSection = document.getElementById('dealsResults');
+    const emptyState = document.getElementById('dealsEmptyState');
+    
+    emptyState.classList.add('hidden');
+    resultsSection.classList.remove('hidden');
+    
+    // Update counts
+    const hotCount = results.filter(r => r.isHot).length;
+    const skipCount = results.filter(r => !r.isViable).length;
+    document.getElementById('hotDealsCount').textContent = `${hotCount} Hot Deals`;
+    document.getElementById('skipCount').textContent = `${skipCount} Pass`;
+    
+    container.innerHTML = results.map((deal, index) => {
+        const profitClass = deal.netProfit >= 0 ? 'text-profit' : 'text-loss';
+        const cardClass = deal.isHot ? 'border-profit bg-profit/5' : 
+                         !deal.isViable ? 'border-gray-700 opacity-75' : 'border-deal/50';
+        const badgeText = deal.isHot ? '🔥 HOT' : deal.isViable ? 'GOOD' : 'PASS';
+        const badgeClass = deal.isHot ? 'bg-profit text-white' : deal.isViable ? 'bg-deal/20 text-deal' : 'bg-gray-700 text-gray-400';
+        
+        return `
+            <div class="deal-card ${cardClass} p-4 rounded-xl border cursor-pointer transition-all hover:-translate-y-1" onclick="showDealDetail(${index})">
+                <div class="flex justify-between items-start mb-3">
+                    <span class="px-2 py-1 rounded text-xs font-bold ${badgeClass}">${badgeText}</span>
+                    ${deal.hasDiscogsData ? '<span class="text-xs text-gray-500" title="Discogs data available">🎵</span>' : ''}
+                </div>
+                <h3 class="font-semibold text-gray-100 truncate mb-1" title="${deal.artist}">${deal.artist}</h3>
+                <p class="text-sm text-gray-400 truncate mb-3" title="${deal.title}">${deal.title}</p>
+                
+                <div class="grid grid-cols-2 gap-2 mb-3 text-sm">
+                    <div>
+                        <span class="text-gray-500 text-xs">Buy</span>
+                        <p class="font-medium">£${deal.price.toFixed(2)}</p>
+                    </div>
+                    <div>
+                        <span class="text-gray-500 text-xs">Est. Value</span>
+                        <p class="font-medium">£${deal.adjustedValue}</p>
+                    </div>
+                </div>
+                
+                <div class="flex items-center justify-between pt-3 border-t border-gray-700">
+                    <div class="${profitClass} font-bold">
+                        £${deal.netProfit} profit
+                    </div>
+                    <div class="text-sm ${deal.roi >= 30 ? 'text-profit' : 'text-gray-400'}">
+                        ${deal.roi}% ROI
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+    
+    // Store for detail view
+    window.analyzedDeals = results;
+}
+
+function showDealDetail(index) {
+    const deal = window.analyzedDeals[index];
+    const modal = document.getElementById('dealModal');
+    const content = document.getElementById('dealModalContent');
+    
+    const profitColor = deal.netProfit >= 3 ? 'text-profit' : 'text-loss';
+    const headerColor = deal.isHot ? 'bg-profit/10 border-profit' : deal.isViable ? 'bg-deal/10 border-deal' : 'bg-gray-800 border-gray-700';
+    
+    content.innerHTML = `
+        <div class="space-y-4">
+            <div class="p-4 rounded-xl border ${headerColor}">
+                <h3 class="text-lg font-bold mb-1">${deal.artist}</h3>
+                <p class="text-gray-400">${deal.title}</p>
+                <p class="text-sm text-gray-500 mt-2">Condition: ${deal.condition}</p>
+            </div>
+            
+            <div class="grid grid-cols-2 gap-4">
+                <div class="p-4 bg-surface rounded-lg">
+                    <p class="text-xs text-gray-500 mb-1">Purchase Price</p>
+                    <p class="text-xl font-bold">£${deal.price.toFixed(2)}</p>
+                </div>
+                <div class="p-4 bg-surface rounded-lg">
+                    <p class="text-xs text-gray-500 mb-1">Market Value (adj.)</p>
+                    <p class="text-xl font-bold">£${deal.adjustedValue}</p>
+                </div>
+                <div class="p-4 bg-surface rounded-lg">
+                    <p class="text-xs text-gray-500 mb-1">Total Fees (~16%)</p>
+                    <p class="text-xl font-bold text-gray-400">£${deal.totalFees}</p>
+                </div>
+                <div class="p-4 bg-surface rounded-lg">
+                    <p class="text-xs text-gray-500 mb-1">Net Profit</p>
+                    <p class="text-xl font-bold ${profitColor}">£${deal.netProfit}</p>
+                </div>
+            </div>
+            
+            <div class="p-4 bg-surface rounded-lg">
+                <div class="flex justify-between items-center mb-2">
+                    <span class="text-sm text-gray-400">Return on Investment</span>
+                    <span class="text-lg font-bold ${deal.roi >= 30 ? 'text-profit' : 'text-yellow-400'}">${deal.roi}%</span>
+                </div>
+                <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
+                    <div class="h-full ${deal.roi >= 30 ? 'bg-profit' : deal.roi > 0 ? 'bg-yellow-500' : 'bg-loss'}" style="width: ${Math.min(Math.abs(deal.roi), 100)}%"></div>
+                </div>
+            </div>
+            
+            ${deal.discogsUrl ? `
+                <a href="${deal.discogsUrl}" target="_blank" class="flex items-center gap-2 text-sm text-primary hover:underline">
+                    View on Discogs
+                    <i data-feather="external-link" class="w-4 h-4"></i>
+                </a>
+            ` : ''}
+            
+            <div class="flex gap-3 mt-6">
+                ${deal.isViable ? `
+                    <button onclick="addDealToCollection(${index})" class="flex-1 px-4 py-3 bg-gradient-to-r from-deal to-pink-600 rounded-lg font-medium hover:shadow-lg transition-all">
+                        Add to Collection
+                    </button>
+                ` : ''}
+                <button onclick="closeDealModal()" class="px-4 py-3 border border-gray-600 rounded-lg hover:border-gray-500 transition-all">
+                    Close
+                </button>
+            </div>
+        </div>
+    `;
+    feather.replace();
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+}
+
+function closeDealModal() {
+    document.getElementById('dealModal').classList.add('hidden');
+    document.getElementById('dealModal').classList.remove('flex');
+}
+
+function addDealToCollection(index) {
+    const deal = window.analyzedDeals[index];
+    // Create collection entry
+    const record = {
+        artist: deal.artist,
+        title: deal.title,
+        purchasePrice: deal.price,
+        purchaseDate: new Date().toISOString().split('T')[0],
+        purchaseSource: 'prospective_deal',
+        conditionVinyl: deal.condition,
+        conditionSleeve: deal.condition,
+        estimatedValue: deal.adjustedValue,
+        status: 'prospective',
+        dateAdded: new Date().toISOString(),
+        notes: `Deal analysis: Potential profit £${deal.netProfit} (${deal.roi}% ROI). ${deal.discogsUrl ? 'Discogs: ' + deal.discogsUrl : ''}`
+    };
+    
+    // Add to local collection storage
+    let collection = JSON.parse(localStorage.getItem('vinyl_collection') || '[]');
+    collection.push(record);
+    localStorage.setItem('vinyl_collection', JSON.stringify(collection));
+    
+    showToast('Deal saved to collection!', 'success');
+    closeDealModal();
+}
+
+function clearBulkInput() {
+    document.getElementById('bulkInput').value = '';
+    document.getElementById('dealsResults').classList.add('hidden');
+    document.getElementById('dealsEmptyState').classList.remove('hidden');
+}
+
+function handleBulkCSV(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    
+    Papa.parse(file, {
+        header: true,
+        skipEmptyLines: true,
+        complete: function(results) {
+            // Convert CSV to text format for analysis
+            const lines = results.data.map(row => {
+                const artist = row.Artist || row.artist || '';
+                const title = row.Title || row.title || '';
+                const price = row.Price || row.price || row['Purchase Price'] || '';
+                const condition = row.Condition || row.condition || 'VG';
+                if (artist && title) {
+                    return `${artist} - ${title} ${condition} £${price}`;
+                }
+                return null;
+            }).filter(Boolean);
+            
+            document.getElementById('bulkInput').value = lines.join('\n');
+            analyzeBulkDeals();
+        }
+    });
+}
+
+function saveDealToCollection() {
+    // Quick save from calculator
+    const buyPrice = parseFloat(document.getElementById('calcBuyPrice').value);
+    const resalePrice = parseFloat(document.getElementById('calcResalePrice').value);
+    
+    if (!buyPrice || !resalePrice) return;
+    
+    const record = {
+        artist: 'Unknown (from calculator)',
+        title: 'Deal analysis',
+        purchasePrice: buyPrice,
+        estimatedValue: resalePrice,
+        status: 'prospective',
+        dateAdded: new Date().toISOString(),
+        notes: `Calculated potential deal. Buy: £${buyPrice}, Est. value: £${resalePrice}`
+    };
+    
+    let collection = JSON.parse(localStorage.getItem('vinyl_collection') || '[]');
+    collection.push(record);
+    localStorage.setItem('vinyl_collection', JSON.stringify(collection));
+    
+    showToast('Deal saved to watchlist!', 'success');
+}
+
+function importFromCSV() {
+    // Trigger file input
+    document.getElementById('bulkCSVInput').click();
+}

script.js

@@ -676,23 +676,22 @@ function performAnalysis(data) {
     // Generate titles
     const baseTitle = `${artist || 'ARTIST'} - ${title || 'TITLE'}`;
     const titles = generateTitles(baseTitle, catNo, year, goal);
+        // Render results
+        renderTitleOptions(titles);
+        renderPricingStrategy(recommendedBin, strategy, comps, currency, goal);
+        renderFeeFloor(cost, totalFees, shippingCost, packingCost, safeFloor, currency);
+        await renderHTMLDescription(data, titles[0]);
+        renderTags(artist, title, catNo, year);
+        renderShotList(uploadedPhotos);
 
-    // Render results
-    renderTitleOptions(titles);
-    renderPricingStrategy(recommendedBin, strategy, comps, currency, goal);
-    renderFeeFloor(cost, totalFees, shippingCost, packingCost, safeFloor, currency);
-    renderHTMLDescription(data, titles[0]);
-    renderTags(artist, title, catNo, year);
-    renderShotList(uploadedPhotos);
-
-    // Show results
-    resultsSection.classList.remove('hidden');
-    emptyState.classList.add('hidden');
-    resultsSection.scrollIntoView({ behavior: 'smooth' });
-
-    currentAnalysis = {
-        titles, recommendedBin, strategy, breakEven, safeFloor, currency
-    };
+        // Show results
+        resultsSection.classList.remove('hidden');
+        emptyState.classList.add('hidden');
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+        currentAnalysis = {
+            titles, recommendedBin, strategy, breakEven, safeFloor, currency
+        };
 }
 function generateTitles(base, catNo, year, goal) {
     const titles = [];
@@ -805,7 +804,7 @@ function renderFeeFloor(cost, fees, shipping, packing, safeFloor, currency) {
         </div>
     `;
 }
-function renderHTMLDescription(data, titleObj) {
+async function renderHTMLDescription(data, titleObj) {
     const { artist, title, catNo, year } = data;
     // Use hosted URL if available, otherwise fallback to local object URL
     let heroImg = '';
@@ -818,13 +817,115 @@ function renderHTMLDescription(data, titleObj) {
         heroImg = URL.createObjectURL(uploadedPhotos[0]);
         galleryImages = uploadedPhotos.slice(1).map((_, i) => URL.createObjectURL(uploadedPhotos[i + 1]));
     }
-// Use OCR-detected values if available
+    
+    // Use OCR-detected values if available
     const detectedLabel = window.detectedLabel || '[Verify from photos]';
     const detectedCountry = window.detectedCountry || 'UK';
     const detectedFormat = window.detectedFormat || 'LP • 33rpm';
     const detectedGenre = window.detectedGenre || 'rock';
     const detectedCondition = window.detectedCondition || 'VG+/VG+';
     const detectedPressingInfo = window.detectedPressingInfo || '';
+    
+    // Fetch tracklist and detailed info from Discogs if available
+    let tracklistHtml = '';
+    let pressingDetailsHtml = '';
+    let provenanceHtml = '';
+    
+    if (window.discogsReleaseId && window.discogsService?.key) {
+        try {
+            const discogsData = await window.discogsService.fetchTracklist(window.discogsReleaseId);
+            if (discogsData && discogsData.tracklist) {
+                // Build tracklist HTML
+                const hasSideBreakdown = discogsData.tracklist.some(t => t.position && (t.position.startsWith('A') || t.position.startsWith('B')));
+                
+                if (hasSideBreakdown) {
+                    // Group by sides
+                    const sides = {};
+                    discogsData.tracklist.forEach(track => {
+                        const side = track.position ? track.position.charAt(0) : 'Other';
+                        if (!sides[side]) sides[side] = [];
+                        sides[side].push(track);
+                    });
+                    
+                    tracklistHtml = Object.entries(sides).map(([side, tracks]) => `
+                        <div style="margin-bottom: 16px;">
+                            <h4 style="color: #7c3aed; font-size: 13px; font-weight: 600; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px;">Side ${side}</h4>
+                            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                                ${tracks.map(track => `
+                                    <div style="flex: 1 1 200px; min-width: 200px; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;">
+                                        <span style="color: #1e293b; font-size: 13px;"><strong>${track.position}</strong> ${track.title}</span>
+                                        ${track.duration ? `<span style="color: #64748b; font-size: 12px; font-family: monospace;">${track.duration}</span>` : ''}
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                    `).join('');
+                } else {
+                    // Simple list
+                    tracklistHtml = `
+                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                            ${discogsData.tracklist.map(track => `
+                                <div style="flex: 1 1 200px; min-width: 200px; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;">
+                                    <span style="color: #1e293b; font-size: 13px;">${track.position ? `<strong>${track.position}</strong> ` : ''}${track.title}</span>
+                                    ${track.duration ? `<span style="color: #64748b; font-size: 12px; font-family: monospace;">${track.duration}</span>` : ''}
+                                </div>
+                            `).join('')}
+                        </div>
+                    `;
+                }
+                
+                // Build pressing/variation details
+                const identifiers = discogsData.identifiers || [];
+                const barcodeInfo = identifiers.find(i => i.type === 'Barcode');
+                const matrixInfo = identifiers.filter(i => i.type === 'Matrix / Runout' || i.type === 'Runout');
+                const pressingInfo = identifiers.filter(i => i.type === 'Pressing Plant' || i.type === 'Mastering');
+                
+                if (matrixInfo.length > 0 || barcodeInfo || pressingInfo.length > 0) {
+                    pressingDetailsHtml = `
+                        <div style="background: #f0fdf4; border-left: 4px solid #22c55e; padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0;">
+                            <h3 style="margin: 0 0 12px 0; color: #166534; font-size: 15px; font-weight: 600;">Pressing & Matrix Information</h3>
+                            <div style="font-family: monospace; font-size: 13px; line-height: 1.6; color: #15803d;">
+                                ${barcodeInfo ? `<p style="margin: 4px 0;"><strong>Barcode:</strong> ${barcodeInfo.value}</p>` : ''}
+                                ${matrixInfo.map(m => `<p style="margin: 4px 0;"><strong>${m.type}:</strong> ${m.value}${m.description ? ` <em>(${m.description})</em>` : ''}</p>`).join('')}
+                                ${pressingInfo.map(p => `<p style="margin: 4px 0;"><strong>${p.type}:</strong> ${p.value}</p>`).join('')}
+                            </div>
+                            ${discogsData.notes ? `<p style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #bbf7d0; font-size: 12px; color: #166534; font-style: italic;">${discogsData.notes.substring(0, 300)}${discogsData.notes.length > 300 ? '...' : ''}</p>` : ''}
+                        </div>
+                    `;
+                }
+                
+                // Build provenance data for buyer confidence
+                const companies = discogsData.companies || [];
+                const masteredBy = companies.find(c => c.entity_type_name === 'Mastered At' || c.name.toLowerCase().includes('mastering'));
+                const pressedBy = companies.find(c => c.entity_type_name === 'Pressed By' || c.name.toLowerCase().includes('pressing'));
+                const lacquerCut = companies.find(c => c.entity_type_name === 'Lacquer Cut At');
+                
+                if (masteredBy || pressedBy || lacquerCut) {
+                    provenanceHtml = `
+                        <div style="background: #eff6ff; border: 1px solid #bfdbfe; padding: 16px; margin: 24px 0; border-radius: 8px;">
+                            <h3 style="margin: 0 0 12px 0; color: #1e40af; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                                Provenance & Production
+                            </h3>
+                            <div style="font-size: 13px; color: #1e3a8a; line-height: 1.6;">
+                                ${masteredBy ? `<p style="margin: 4px 0;">✓ Mastered at <strong>${masteredBy.name}</strong></p>` : ''}
+                                ${lacquerCut ? `<p style="margin: 4px 0;">✓ Lacquer cut at <strong>${lacquerCut.name}</strong></p>` : ''}
+                                ${pressedBy ? `<p style="margin: 4px 0;">✓ Pressed at <strong>${pressedBy.name}</strong></p>` : ''}
+                                ${discogsData.num_for_sale ? `<p style="margin: 8px 0 0 0; padding-top: 8px; border-top: 1px solid #bfdbfe; color: #3b82f6; font-size: 12px;">Reference: ${discogsData.num_for_sale} copies currently for sale on Discogs</p>` : ''}
+                            </div>
+                        </div>
+                    `;
+                }
+            }
+        } catch (e) {
+            console.error('Failed to fetch Discogs details for HTML:', e);
+        }
+    }
+    
+    // If no tracklist from Discogs, provide placeholder
+    if (!tracklistHtml) {
+        tracklistHtml = `<p style="color: #64748b; font-style: italic;">Tracklist verification recommended. Please compare with Discogs entry for accuracy.</p>`;
+    }
 const galleryHtml = galleryImages.length > 0 ? `
   <!-- PHOTO GALLERY -->
   <div style="margin-bottom: 24px;">
@@ -898,8 +999,12 @@ const html = `<div style="max-width: 800px; margin: 0 auto; font-family: -apple-
 <!-- TRACKLIST -->
   <h3 style="color: #1e293b; font-size: 18px; font-weight: 600; margin-bottom: 12px;">Tracklist</h3>
   <div style="background: #f8fafc; padding: 16px 20px; border-radius: 8px; margin-bottom: 24px;">
-    <p style="color: #64748b; font-style: italic; margin: 0;">[Fetch from Discogs or verify from label photos. Format as Side A / Side B with track times if available.]</p>
+    ${tracklistHtml}
   </div>
+  
+  ${pressingDetailsHtml}
+  
+  ${provenanceHtml}
 <!-- PACKING -->
   <div style="background: #eff6ff; border-left: 4px solid #3b82f6; padding: 16px 20px; margin-bottom: 24px; border-radius: 0 8px 8px 0;">
     <h3 style="margin: 0 0 12px 0; color: #1e40af; font-size: 16px; font-weight: 600;">Packing & Postage</h3>