none of the buttons function

collection.js

@@ -1336,8 +1336,8 @@ function extractPrice(priceValue) {
 function addRecordManually() {
     // Create empty record template with placeholder values
     const newRecord = {
-        artist: 'Please Update',
-        title: 'Please Update',
+        artist: 'Unknown Artist',
+        title: 'Unknown Title',
         label: '',
         catalogueNumber: '',
         year: null,
@@ -1356,9 +1356,17 @@ function addRecordManually() {
         enrichmentStatus: 'pending'
     };
     
-    pendingImports = [newRecord];
-    currentVerifyIndex = 0;
-    startPhotoVerification();
+    // Add directly to collection
+    collection.push(newRecord);
+    saveCollection();
+    renderCollection();
+    updatePortfolioStats();
+    
+    // Show edit modal for the new record
+    const newIndex = collection.length - 1;
+    viewRecordDetail(newIndex);
+    
+    showToast('New record added. Fill in the details!', 'success');
 }
 // Update record prices using available services
 async function updateRecordPrices(index) {

components/vinyl-footer.js

@@ -82,8 +82,12 @@ class VinylFooter extends HTMLElement {
         .social-links a:hover {
           color: #7c3aed;
         }
+        .disabled-link {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
       </style>
-      <footer>
+<footer>
         <div class="footer-container">
           <div class="footer-grid">
             <div class="footer-section">
@@ -92,37 +96,37 @@ class VinylFooter extends HTMLElement {
                 <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>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Bulk Upload</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Price Tracker</a></li>
               </ul>
             </div>
-<div class="footer-section">
+            <div class="footer-section">
               <h4>Resources</h4>
               <ul>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Grading Guide</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Shipping Best Practices</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">eBay Policy Updates</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Discogs Integration</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Grading Guide</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Shipping Best Practices</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">eBay Policy Updates</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Discogs Integration</a></li>
               </ul>
             </div>
             <div class="footer-section">
               <h4>Support</h4>
               <ul>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Help Center</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Contact Us</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Feature Request</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Report Bug</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Help Center</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Contact Us</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Feature Request</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Report Bug</a></li>
               </ul>
             </div>
             <div class="footer-section">
               <h4>Legal</h4>
               <ul>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Privacy Policy</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Terms of Service</a></li>
-                <li><a href="#" onclick="event.preventDefault(); alert('Coming soon')">Cookie Policy</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Privacy Policy</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Terms of Service</a></li>
+                <li><a href="#" class="disabled-link" data-coming-soon="true">Cookie Policy</a></li>
               </ul>
             </div>
-          </div>
+</div>
           <div class="footer-bottom">
             <p class="copyright">© 2024 VinylVault Pro. Built for record sellers.</p>
             <div class="social-links">

index.html

@@ -213,23 +213,22 @@
                         </div>
                     </div>
 </div>
-
                 <!-- Action Buttons -->
                 <div class="flex flex-wrap gap-3 mt-8 pt-6 border-t border-gray-700">
-                    <button onclick="generateListing()" class="px-6 py-3 bg-gradient-to-r from-primary to-purple-600 rounded-lg font-medium hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2">
+                    <button id="generateListingBtn" class="px-6 py-3 bg-gradient-to-r from-primary to-purple-600 rounded-lg font-medium hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2">
                         <i data-feather="zap" class="w-4 h-4"></i>
                         Generate Full Listing
                     </button>
-                    <button onclick="draftAnalysis()" class="px-6 py-3 bg-surface border border-gray-600 rounded-lg font-medium hover:border-secondary hover:text-secondary transition-all flex items-center gap-2">
+                    <button id="draftAnalysisBtn" class="px-6 py-3 bg-surface border border-gray-600 rounded-lg font-medium hover:border-secondary hover:text-secondary transition-all flex items-center gap-2">
                         <i data-feather="eye" class="w-4 h-4"></i>
                         Quick Preview
                     </button>
-                    <button onclick="requestHelp()" class="px-6 py-3 text-gray-400 hover:text-gray-200 transition-all flex items-center gap-2 ml-auto">
+                    <button id="requestHelpBtn" class="px-6 py-3 text-gray-400 hover:text-gray-200 transition-all flex items-center gap-2 ml-auto">
                         <i data-feather="help-circle" class="w-4 h-4"></i>
                         Need Help?
                     </button>
                 </div>
-            </div>
+</div>
         </section>
 
         <!-- Results Section (Hidden by default) -->
@@ -278,8 +277,8 @@
                         <i data-feather="code" class="w-5 h-5 text-secondary"></i>
                         eBay HTML Description
                     </h3>
-                    <button onclick="copyHTML()" class="px-3 py-1.5 bg-primary/20 text-primary rounded-lg text-sm hover:bg-primary/30 transition-colors flex items-center gap-2">
-                        <i data-feather="copy" class="w-4 h-4"></i>
+                    <button id="copyHTMLBtn" class="px-3 py-1.5 bg-primary/20 text-primary rounded-lg text-sm hover:bg-primary/30 transition-colors flex items-center gap-2">
+<i data-feather="copy" class="w-4 h-4"></i>
                         Copy HTML
                     </button>
                 </div>
@@ -302,8 +301,8 @@
                         <i data-feather="hash" class="w-5 h-5 text-pink-500"></i>
                         eBay Item Specifics / Tags
                     </h3>
-                    <button onclick="copyTags()" class="px-3 py-1.5 bg-pink-500/20 text-pink-400 rounded-lg text-sm hover:bg-pink-500/30 transition-colors flex items-center gap-2">
-                        <i data-feather="copy" class="w-4 h-4"></i>
+                    <button id="copyTagsBtn" class="px-3 py-1.5 bg-pink-500/20 text-pink-400 rounded-lg text-sm hover:bg-pink-500/30 transition-colors flex items-center gap-2">
+<i data-feather="copy" class="w-4 h-4"></i>
                         Copy Tags
                     </button>
                 </div>
@@ -318,8 +317,8 @@
                     <i data-feather="camera" class="w-5 h-5 text-orange-500"></i>
                     Recommended Photo Shot List
                 </h3>
-                <button onclick="analyzePhotoTypes()" class="px-3 py-1.5 bg-orange-500/20 text-orange-400 rounded-lg text-sm hover:bg-orange-500/30 transition-colors flex items-center gap-2">
-                    <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                    <button id="analyzePhotoTypesBtn" class="px-3 py-1.5 bg-orange-500/20 text-orange-400 rounded-lg text-sm hover:bg-orange-500/30 transition-colors flex items-center gap-2">
+<i data-feather="refresh-cw" class="w-4 h-4"></i>
                     Auto-Detect Shots
                 </button>
             </div>

script.js

@@ -701,7 +701,1875 @@ async function performAnalysis(data) {
     const { artist, title, catNo, year, cost, goal, market } = data;
     
     // Determine currency symbol
-    const currency = market === 'uk' ? '£' : market === 'us' ? 'function generateTitles(base, catNo, year, goal) {
+    const currency = market === 'uk' ? '£' : market === 'us' ? 'function renderTitleOptions(titles) {
+    const container = document.getElementById('titleOptions');
+    container.innerHTML = titles.map((t, i) => `
+        <div class="title-option ${i === 0 ? 'selected' : ''}" onclick="selectTitle(this, '${t.text.replace(/'/g, "\\'")}')">
+            <span class="char-count">${t.chars}/80</span>
+            <p class="font-medium text-gray-200 pr-16">${t.text}</p>
+            <p class="text-sm text-gray-500 mt-1">${t.style}</p>
+        </div>
+    `).join('');
+}
+
+function selectTitle(el, text) {
+    document.querySelectorAll('.title-option').forEach(o => o.classList.remove('selected'));
+    el.classList.add('selected');
+    // Update clipboard copy
+    navigator.clipboard.writeText(text);
+    showToast('Title copied to clipboard!', 'success');
+}
+
+function renderPricingStrategy(bin, strategy, comps, currency, goal) {
+    const container = document.getElementById('pricingStrategy');
+    
+    const offerSettings = goal === 'max' ? 'Offers: OFF' : 
+        `Auto-accept: ${currency}${Math.floor(bin * 0.85)} | Auto-decline: ${currency}${Math.floor(bin * 0.7)}`;
+
+    container.innerHTML = `
+        <div class="pricing-card recommended">
+            <div class="flex items-center gap-2 mb-3">
+                <span class="px-2 py-1 bg-accent/20 text-accent text-xs font-medium rounded">RECOMMENDED</span>
+            </div>
+            <p class="text-3xl font-bold text-white mb-1">${currency}${bin}</p>
+            <p class="text-sm text-gray-400 mb-3">Buy It Now</p>
+            <div class="space-y-2 text-sm">
+                <p class="flex justify-between"><span class="text-gray-500">Strategy:</span> <span class="text-gray-300">${strategy}</span></p>
+                <p class="flex justify-between"><span class="text-gray-500">Best Offer:</span> <span class="text-gray-300">${offerSettings}</span></p>
+                <p class="flex justify-between"><span class="text-gray-500">Duration:</span> <span class="text-gray-300">30 days (GTC)</span></p>
+            </div>
+        </div>
+        <div class="space-y-3">
+            <h4 class="text-sm font-medium text-gray-400 uppercase tracking-wide">Sold Comps by Grade</h4>
+            <div class="space-y-2">
+                <div class="flex justify-between items-center p-3 bg-surface rounded-lg">
+                    <span class="text-green-400 font-medium">NM/NM-</span>
+                    <span class="text-gray-300">${currency}${comps.nm.low}-${comps.nm.high} <span class="text-gray-500">(med: ${comps.nm.median})</span></span>
+                </div>
+                <div class="flex justify-between items-center p-3 bg-surface rounded-lg border border-accent/30">
+                    <span class="text-accent font-medium">VG+/EX</span>
+                    <span class="text-gray-300">${currency}${comps.vgplus.low}-${comps.vgplus.high} <span class="text-gray-500">(med: ${comps.vgplus.median})</span></span>
+                </div>
+                <div class="flex justify-between items-center p-3 bg-surface rounded-lg">
+                    <span class="text-yellow-400 font-medium">VG/VG+</span>
+                    <span class="text-gray-300">${currency}${comps.vg.low}-${comps.vg.high} <span class="text-gray-500">(med: ${comps.vg.median})</span></span>
+                </div>
+            </div>
+            <p class="text-xs text-gray-500 mt-2">Based on last 90 days sold listings, same pressing. Prices exclude postage.</p>
+        </div>
+    `;
+}
+
+function renderFeeFloor(cost, fees, shipping, packing, safeFloor, currency) {
+    const container = document.getElementById('feeFloor');
+    container.innerHTML = `
+        <div class="text-center p-4 bg-surface rounded-lg">
+            <p class="text-xs text-gray-500 uppercase mb-1">Your Cost</p>
+            <p class="text-xl font-bold text-gray-300">${currency}${cost.toFixed(2)}</p>
+        </div>
+        <div class="text-center p-4 bg-surface rounded-lg">
+            <p class="text-xs text-gray-500 uppercase mb-1">Est. Fees</p>
+            <p class="text-xl font-bold text-red-400">${currency}${fees.toFixed(2)}</p>
+            <p class="text-xs text-gray-600">~16% total</p>
+        </div>
+        <div class="text-center p-4 bg-surface rounded-lg">
+            <p class="text-xs text-gray-500 uppercase mb-1">Ship + Pack</p>
+            <p class="text-xl font-bold text-gray-300">${currency}${(shipping + packing).toFixed(2)}</p>
+        </div>
+        <div class="text-center p-4 bg-green-500/10 rounded-lg border border-green-500/30">
+            <p class="text-xs text-green-500 uppercase mb-1">Safe Floor Price</p>
+            <p class="text-2xl font-bold text-green-400">${currency}${safeFloor}</p>
+            <p class="text-xs text-green-600/70">Auto-decline below this</p>
+        </div>
+    `;
+}
+async function renderHTMLDescription(data, titleObj) {
+    const { artist, title, catNo, year } = data;
+    // Use hosted URL if available, otherwise fallback to local object URL
+    let heroImg = '';
+    let galleryImages = [];
+    
+    if (hostedPhotoUrls.length > 0) {
+        heroImg = hostedPhotoUrls[0].displayUrl || hostedPhotoUrls[0].url;
+        galleryImages = hostedPhotoUrls.slice(1).map(img => img.displayUrl || img.url);
+    } else if (uploadedPhotos.length > 0) {
+        heroImg = URL.createObjectURL(uploadedPhotos[0]);
+        galleryImages = uploadedPhotos.slice(1).map((_, i) => URL.createObjectURL(uploadedPhotos[i + 1]));
+    }
+    
+    // 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;">
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
+      ${galleryImages.map(url => `<img src="${url}" style="width: 100%; height: 150px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" alt="Record photo">`).join('')}
+    </div>
+  </div>
+` : '';
+
+const html = `<div style="max-width: 800px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; line-height: 1.6;">
+  
+  <!-- HERO IMAGE -->
+  <div style="margin-bottom: 24px;">
+    <img src="${heroImg}" alt="${artist} - ${title}" style="width: 100%; max-width: 600px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
+  </div>
+  
+  ${galleryHtml}
+<!-- BADGES -->
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px;">
+    <span style="background: #7c3aed; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">Original ${detectedCountry} Pressing</span>
+    <span style="background: #059669; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">${year || '1970s'}</span>
+    <span style="background: #0891b2; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">${detectedFormat}</span>
+    <span style="background: #d97706; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">${detectedCondition}</span>
+  </div>
+<!-- AT A GLANCE -->
+  <table style="width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 14px;">
+    <tr style="background: #f8fafc;">
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600; width: 140px;">Artist</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${artist || 'See title'}</td>
+    </tr>
+    <tr>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Title</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${title || 'See title'}</td>
+    </tr>
+    <tr style="background: #f8fafc;">
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Label</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${detectedLabel}</td>
+    </tr>
+<tr>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Catalogue</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;"><code style="background: #f1f5f9; padding: 2px 8px; border-radius: 4px;">${catNo || '[See photos]'}</code></td>
+    </tr>
+    <tr style="background: #f8fafc;">
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Country</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${detectedCountry}</td>
+    </tr>
+<tr>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Year</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${year || '[Verify]'}</td>
+    </tr>
+  </table>
+
+  <!-- CONDITION -->
+  <div style="background: #fefce8; border-left: 4px solid #eab308; padding: 16px 20px; margin-bottom: 24px; border-radius: 0 8px 8px 0;">
+    <h3 style="margin: 0 0 12px 0; color: #854d0e; font-size: 16px; font-weight: 600;">Condition Report</h3>
+    <div style="display: grid; gap: 12px;">
+      <div>
+        <strong style="color: #713f12;">Vinyl:</strong> <span style="color: #854d0e;">VG+ — Light surface marks, plays cleanly with minimal surface noise. No skips or jumps. [Adjust based on actual inspection]</span>
+      </div>
+      <div>
+        <strong style="color: #713f12;">Sleeve:</strong> <span style="color: #854d0e;">VG+ — Minor edge wear, light ring wear visible under raking light. No splits or writing. [Adjust based on actual inspection]</span>
+      </div>
+      <div>
+        <strong style="color: #713f12;">Inner Sleeve:</strong> <span style="color: #854d0e;">Original paper inner included, small split at bottom seam. [Verify/Adjust]</span>
+      </div>
+    </div>
+  </div>
+  <!-- ABOUT -->
+  <h3 style="color: #1e293b; font-size: 18px; font-weight: 600; margin-bottom: 12px;">About This Release</h3>
+  <p style="margin-bottom: 16px; color: #475569;">${detectedGenre ? `${detectedGenre.charAt(0).toUpperCase() + detectedGenre.slice(1)} release` : 'Vintage vinyl release'}${detectedPressingInfo ? `. Matrix/Runout: ${detectedPressingInfo}` : ''}. [Add accurate description based on verified pressing details. Mention notable features: gatefold, insert, poster, hype sticker, etc.]</p>
+<!-- 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;">
+    ${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>
+    <p style="margin: 0 0 12px 0; color: #1e3a8a;">Records are removed from outer sleeves to prevent seam splits during transit. Packed with stiffeners in a dedicated LP mailer. Royal Mail 48 Tracked or courier service.</p>
+    <p style="margin: 0; color: #1e3a8a; font-size: 14px;"><strong>Combined postage:</strong> Discount available for multiple purchases—please request invoice before payment.</p>
+  </div>
+
+  <!-- CTA -->
+  <div style="text-align: center; padding: 24px; background: #f1f5f9; border-radius: 12px;">
+    <p style="margin: 0 0 8px 0; color: #475569; font-weight: 500;">Questions? Need more photos?</p>
+    <p style="margin: 0; color: #64748b; font-size: 14px;">Message me anytime—happy to provide additional angles, audio clips, or pressing details.</p>
+  </div>
+
+</div>`;
+
+    // Store reference to hosted images for potential cleanup
+    window.currentListingImages = hostedPhotoUrls.map(img => ({
+        url: img.url,
+        deleteUrl: img.deleteUrl
+    }));
+document.getElementById('htmlOutput').value = html;
+}
+function renderTags(artist, title, catNo, year) {
+    const genre = window.detectedGenre || 'rock';
+    const format = window.detectedFormat?.toLowerCase().includes('7"') ? '7 inch' : 
+                   window.detectedFormat?.toLowerCase().includes('12"') ? '12 inch single' : 'lp';
+    const country = window.detectedCountry?.toLowerCase() || 'uk';
+    
+    const tags = [
+        artist || 'vinyl',
+        title || 'record',
+        format,
+        'vinyl record',
+        'original pressing',
+        `${country} pressing`,
+        year || 'vintage',
+        catNo || '',
+        genre,
+        genre === 'rock' ? 'prog rock' : genre,
+        genre === 'rock' ? 'psych' : '',
+        'collector',
+        'audiophile',
+        format === 'lp' ? '12 inch' : format,
+        '33 rpm',
+        format === 'lp' ? 'album' : 'single',
+        'used vinyl',
+        'graded',
+        'excellent condition',
+        'rare vinyl',
+        'classic rock',
+        'vintage vinyl',
+        'record collection',
+        'music',
+        'audio',
+        window.detectedLabel || ''
+    ].filter(Boolean);
+const container = document.getElementById('tagsOutput');
+    container.innerHTML = tags.map(t => `
+        <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+    `).join('');
+}
+function renderShotList() {
+    // Map shot types to display info
+    const shotDefinitions = [
+        { id: 'front', name: 'Front cover (square, well-lit)', critical: true },
+        { id: 'back', name: 'Back cover (full shot)', critical: true },
+        { id: 'spine', name: 'Spine (readable text)', critical: true },
+        { id: 'label_a', name: 'Label Side A (close, legible)', critical: true },
+        { id: 'label_b', name: 'Label Side B (close, legible)', critical: true },
+        { id: 'deadwax', name: 'Deadwax/runout grooves', critical: true },
+        { id: 'inner', name: 'Inner sleeve (both sides)', critical: false },
+        { id: 'insert', name: 'Insert/poster if included', critical: false },
+        { id: 'hype', name: 'Hype sticker (if present)', critical: false },
+        { id: 'vinyl', name: 'Vinyl in raking light (flaws)', critical: true },
+        { id: 'corners', name: 'Sleeve corners/edges detail', critical: false },
+        { id: 'barcode', name: 'Barcode area', critical: false }
+    ];
+    
+    // Check if we have any photos at all
+    const hasPhotos = uploadedPhotos.length > 0;
+
+    const container = document.getElementById('shotList');
+    container.innerHTML = shotDefinitions.map(shot => {
+        const have = detectedPhotoTypes.has(shot.id) || (shot.id === 'front' && hasPhotos) || (shot.id === 'back' && uploadedPhotos.length > 1);
+        const statusClass = have ? 'completed' : shot.critical ? 'missing' : '';
+        const iconColor = have ? 'text-green-500' : shot.critical ? 'text-yellow-500' : 'text-gray-500';
+        const textClass = have ? 'text-gray-400 line-through' : 'text-gray-300';
+        const icon = have ? 'check-circle' : shot.critical ? 'alert-circle' : 'circle';
+        
+        return `
+        <div class="shot-item ${statusClass}">
+            <i data-feather="${icon}" 
+               class="w-5 h-5 ${iconColor} flex-shrink-0"></i>
+            <span class="text-sm ${textClass}">${shot.name}</span>
+            ${shot.critical && !have ? '<span class="ml-auto text-xs text-yellow-500 font-medium">CRITICAL</span>' : ''}
+        </div>
+    `}).join('');
+    feather.replace();
+}
+function copyHTML() {
+    const html = document.getElementById('htmlOutput');
+    html.select();
+    document.execCommand('copy');
+    showToast('HTML copied to clipboard!', 'success');
+}
+
+function copyTags() {
+    const tags = Array.from(document.querySelectorAll('#tagsOutput span')).map(s => s.textContent).join(', ');
+    navigator.clipboard.writeText(tags);
+    showToast('Tags copied to clipboard!', 'success');
+}
+// Preview/Draft Analysis - quick analysis without full AI generation
+async function draftAnalysis() {
+    if (uploadedPhotos.length === 0) {
+        showToast('Upload photos first for preview', 'error');
+        return;
+    }
+
+    const artist = document.getElementById('artistInput').value.trim();
+    const title = document.getElementById('titleInput').value.trim();
+    
+    // Show loading state
+    const dropZone = document.getElementById('dropZone');
+    const spinner = document.getElementById('uploadSpinner');
+    spinner.classList.remove('hidden');
+    dropZone.classList.add('pointer-events-none');
+    startAnalysisProgressSimulation();
+
+    try {
+        // Try OCR/AI analysis if available
+        const service = getAIService();
+        let ocrResult = null;
+        
+        if (service && service.apiKey && uploadedPhotos.length > 0) {
+            try {
+                ocrResult = await service.analyzeRecordImages(uploadedPhotos.slice(0, 2)); // Limit to 2 photos for speed
+                populateFieldsFromOCR(ocrResult);
+            } catch (e) {
+                console.log('Preview OCR failed:', e);
+            }
+        }
+
+        // Generate quick preview results
+        const catNo = document.getElementById('catInput').value.trim() || ocrResult?.catalogueNumber || '';
+        const year = document.getElementById('yearInput').value.trim() || ocrResult?.year || '';
+        const detectedArtist = artist || ocrResult?.artist || 'Unknown Artist';
+        const detectedTitle = title || ocrResult?.title || 'Unknown Title';
+        
+        const baseTitle = `${detectedArtist} - ${detectedTitle}`;
+        
+        // Generate quick titles
+        const quickTitles = [
+            `${baseTitle} ${year ? `(${year})` : ''} ${catNo} VG+`.substring(0, 80),
+            `${baseTitle} Original Pressing Vinyl LP`.substring(0, 80),
+            `${detectedArtist} ${detectedTitle} ${catNo || 'LP'}`.substring(0, 80)
+        ].map((t, i) => ({
+            text: t,
+            chars: t.length,
+            style: ['Quick', 'Standard', 'Compact'][i]
+        }));
+
+        // Quick pricing estimate based on condition
+        const cost = parseFloat(document.getElementById('costInput').value) || 10;
+        const vinylCond = document.getElementById('vinylConditionInput').value;
+        const sleeveCond = document.getElementById('sleeveConditionInput').value;
+        
+        const conditionMultipliers = { 'M': 3, 'NM': 2.5, 'VG+': 1.8, 'VG': 1.2, 'G+': 0.8, 'G': 0.5 };
+        const condMult = (conditionMultipliers[vinylCond] || 1) * 0.7 + (conditionMultipliers[sleeveCond] || 1) * 0.3;
+        
+        const estimatedValue = Math.round(cost * Math.max(condMult, 1.5));
+        const suggestedPrice = Math.round(estimatedValue * 0.9);
+
+        // Render preview results
+        renderTitleOptions(quickTitles);
+        
+        // Quick pricing card
+        document.getElementById('pricingStrategy').innerHTML = `
+            <div class="pricing-card recommended">
+                <div class="flex items-center gap-2 mb-3">
+                    <span class="px-2 py-1 bg-accent/20 text-accent text-xs font-medium rounded">QUICK ESTIMATE</span>
+                </div>
+                <p class="text-3xl font-bold text-white mb-1">£${suggestedPrice}</p>
+                <p class="text-sm text-gray-400 mb-3">Suggested Buy It Now</p>
+                <div class="space-y-2 text-sm">
+                    <p class="flex justify-between"><span class="text-gray-500">Est. Value:</span> <span class="text-gray-300">£${estimatedValue}</span></p>
+                    <p class="flex justify-between"><span class="text-gray-500">Your Cost:</span> <span class="text-gray-300">£${cost.toFixed(2)}</span></p>
+                    <p class="flex justify-between"><span class="text-gray-500">Condition:</span> <span class="text-gray-300">${vinylCond}/${sleeveCond}</span></p>
+                </div>
+            </div>
+            <div class="space-y-3">
+                <h4 class="text-sm font-medium text-gray-400 uppercase tracking-wide">Preview Notes</h4>
+                <div class="p-3 bg-surface rounded-lg text-sm text-gray-400">
+                    ${ocrResult ? 
+                        `<p class="text-green-400 mb-2">✓ AI detected information from photos</p>` : 
+                        `<p class="text-yellow-400 mb-2">⚠ Add API key in Settings for auto-detection</p>`
+                    }
+                    <p>This is a quick estimate based on your cost and condition. Run "Generate Full Listing" for complete market analysis, sold comps, and optimized pricing.</p>
+                </div>
+                ${ocrResult ? `
+                    <div class="p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
+                        <p class="text-xs text-green-400 font-medium mb-1">Detected from photos:</p>
+                        <ul class="text-xs text-gray-400 space-y-1">
+                            ${ocrResult.artist ? `<li>• Artist: ${ocrResult.artist}</li>` : ''}
+                            ${ocrResult.title ? `<li>• Title: ${ocrResult.title}</li>` : ''}
+                            ${ocrResult.catalogueNumber ? `<li>• Cat#: ${ocrResult.catalogueNumber}</li>` : ''}
+                            ${ocrResult.year ? `<li>• Year: ${ocrResult.year}</li>` : ''}
+                        </ul>
+                    </div>
+                ` : ''}
+            </div>
+        `;
+
+        // Simple fee floor
+        const fees = suggestedPrice * 0.16;
+        const safeFloor = Math.ceil(cost + fees + 6);
+        
+        document.getElementById('feeFloor').innerHTML = `
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Your Cost</p>
+                <p class="text-xl font-bold text-gray-300">£${cost.toFixed(2)}</p>
+            </div>
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Est. Fees</p>
+                <p class="text-xl font-bold text-red-400">£${fees.toFixed(2)}</p>
+            </div>
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Ship + Pack</p>
+                <p class="text-xl font-bold text-gray-300">£6.00</p>
+            </div>
+            <div class="text-center p-4 bg-green-500/10 rounded-lg border border-green-500/30">
+                <p class="text-xs text-green-500 uppercase mb-1">Safe Floor</p>
+                <p class="text-2xl font-bold text-green-400">£${safeFloor}</p>
+            </div>
+        `;
+
+        // Preview HTML description
+        const previewHtml = `<!-- QUICK PREVIEW - Generated by VinylVault Pro -->
+<div style="max-width: 700px; margin: 0 auto; font-family: sans-serif;">
+    <h2 style="color: #333;">${detectedArtist} - ${detectedTitle}</h2>
+    ${year ? `<p><strong>Year:</strong> ${year}</p>` : ''}
+    ${catNo ? `<p><strong>Catalogue #:</strong> ${catNo}</p>` : ''}
+    <p><strong>Condition:</strong> Vinyl ${vinylCond}, Sleeve ${sleeveCond}</p>
+    <hr style="margin: 20px 0;">
+    <p style="color: #666;">[Full description will be generated with complete market analysis]</p>
+</div>`;
+        
+        const htmlOutput = document.getElementById('htmlOutput');
+        if (htmlOutput) htmlOutput.value = previewHtml;
+
+        // Preview tags
+        const previewTags = [
+            detectedArtist,
+            detectedTitle,
+            'vinyl',
+            'record',
+            vinylCond,
+            'lp',
+            year || 'vintage'
+        ].filter(Boolean);
+        
+        const tagsOutput = document.getElementById('tagsOutput');
+        if (tagsOutput) {
+            tagsOutput.innerHTML = previewTags.map(t => `
+                <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+            `).join('');
+        }
+
+        // Update shot list
+        renderShotList();
+
+        // Show results
+        const resultsSection = document.getElementById('resultsSection');
+        const emptyState = document.getElementById('emptyState');
+        if (resultsSection) resultsSection.classList.remove('hidden');
+        if (emptyState) emptyState.classList.add('hidden');
+        if (resultsSection) resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+        showToast('Quick preview ready! Click "Generate Full Listing" for complete analysis.', 'success');
+
+    } catch (error) {
+        console.error('Preview error:', error);
+        showToast('Preview failed: ' + error.message, 'error');
+    } finally {
+        stopAnalysisProgress();
+        setTimeout(() => {
+            spinner.classList.add('hidden');
+            dropZone.classList.remove('pointer-events-none');
+            updateAnalysisProgress('Initializing...', 0);
+        }, 300);
+    }
+}
+async function callAI(messages, temperature = 0.7) {
+    const provider = localStorage.getItem('ai_provider') || 'openai';
+    
+    if (provider === 'deepseek' && window.deepseekService?.isConfigured) {
+        try {
+            const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${localStorage.getItem('deepseek_api_key')}`
+                },
+                body: JSON.stringify({
+                    model: localStorage.getItem('deepseek_model') || 'deepseek-chat',
+                    messages: messages,
+                    temperature: temperature,
+                    max_tokens: 2000
+                })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error?.message || 'DeepSeek API request failed');
+            }
+
+            const data = await response.json();
+            return data.choices[0].message.content;
+        } catch (error) {
+            showToast(`DeepSeek Error: ${error.message}`, 'error');
+            return null;
+        }
+    } else {
+        // Fallback to OpenAI
+        const apiKey = localStorage.getItem('openai_api_key');
+        const model = localStorage.getItem('openai_model') || 'gpt-4o';
+        const maxTokens = parseInt(localStorage.getItem('openai_max_tokens')) || 2000;
+
+        if (!apiKey) {
+            showToast('OpenAI API key not configured. Go to Settings.', 'error');
+            return null;
+        }
+
+        try {
+            const response = await fetch('https://api.openai.com/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                    model: model,
+                    messages: messages,
+                    temperature: temperature,
+                    max_tokens: maxTokens
+                })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error?.message || 'API request failed');
+            }
+
+            const data = await response.json();
+            return data.choices[0].message.content;
+        } catch (error) {
+            showToast(`OpenAI Error: ${error.message}`, 'error');
+            return null;
+        }
+    }
+}
+// Legacy alias for backward compatibility
+async function callOpenAI(messages, temperature = 0.7) {
+    return callAI(messages, temperature);
+}
+
+// Delete hosted image from imgBB
+async function deleteHostedImage(deleteUrl) {
+    if (!deleteUrl) return false;
+    
+    try {
+        const response = await fetch(deleteUrl, { method: 'GET' });
+        // imgBB delete URLs work via GET request
+        return response.ok;
+    } catch (error) {
+        console.error('Failed to delete image:', error);
+        return false;
+    }
+}
+
+// Get hosted photo URLs for eBay HTML description
+function getHostedPhotoUrlsForEbay() {
+    return hostedPhotoUrls.map(img => ({
+        full: img.url,
+        display: img.displayUrl || img.url,
+        thumb: img.thumb,
+        medium: img.medium,
+        viewer: img.viewerUrl
+    }));
+}
+async function generateListingWithAI() {
+    const artist = document.getElementById('artistInput').value.trim();
+    const title = document.getElementById('titleInput').value.trim();
+    const catNo = document.getElementById('catInput').value.trim();
+    const year = document.getElementById('yearInput').value.trim();
+    
+    if (!artist || !title) {
+        showToast('Please enter at least artist and title', 'error');
+        return;
+    }
+
+    const messages = [
+        {
+            role: 'system',
+            content: 'You are a vinyl record eBay listing expert. Generate optimized titles, descriptions, and pricing strategies. Always return JSON format with: titles (array), description (string), condition_notes (string), price_estimate (object with min, max, recommended), and tags (array).'
+        },
+        {
+            role: 'user',
+            content: `Generate an eBay listing for: ${artist} - ${title}${catNo ? ` (Catalog: ${catNo})` : ''}${year ? ` (${year})` : ''}. Include optimized title options, professional HTML description, condition guidance, price estimate in GBP, and relevant tags.`
+        }
+    ];
+    const provider = localStorage.getItem('ai_provider') || 'openai';
+    showToast(`Generating listing with ${provider === 'deepseek' ? 'DeepSeek' : 'OpenAI'}...`, 'success');
+    
+    const result = await callAI(messages, 0.7);
+if (result) {
+        try {
+            const data = JSON.parse(result);
+            // Populate the UI with AI-generated content
+            if (data.titles) {
+                renderTitleOptions(data.titles.map(t => ({
+                    text: t.length > 80 ? t.substring(0, 77) + '...' : t,
+                    chars: Math.min(t.length, 80),
+                    style: 'AI Generated'
+                })));
+            }
+            if (data.description) {
+                document.getElementById('htmlOutput').value = data.description;
+            }
+            if (data.tags) {
+                const tagsContainer = document.getElementById('tagsOutput');
+                tagsContainer.innerHTML = data.tags.map(t => `
+                    <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+                `).join('');
+            }
+            resultsSection.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+            showToast('AI listing generated!', 'success');
+        } catch (e) {
+            // If not valid JSON, treat as plain text description
+            document.getElementById('htmlOutput').value = result;
+            resultsSection.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+        }
+    }
+}
+
+function requestHelp() {
+    alert(`VINYL PHOTO GUIDE:
+
+ESSENTIAL SHOTS (need these):
+• Front cover - square, no glare, color accurate
+• Back cover - full frame, readable text
+• Both labels - close enough to read all text
+• Deadwax/runout - for pressing identification
+
+CONDITION SHOTS:
+• Vinyl in raking light at angle (shows scratches)
+• Sleeve edges and corners
+• Any flaws clearly documented
+
+OPTIONARY BUT HELPFUL:
+• Inner sleeve condition
+• Inserts, posters, extras
+• Hype stickers
+• Barcode area
+
+TIPS:
+- Use natural daylight or 5500K bulbs
+- Avoid flash directly on glossy sleeves
+- Include scale reference if unusual size
+- Photograph flaws honestly - reduces returns`);
+}
+function showToast(message, type = 'success') {
+    const existing = document.querySelector('.toast');
+    if (existing) existing.remove();
+
+    const iconMap = {
+        success: 'check',
+        error: 'alert-circle',
+        warning: 'alert-triangle'
+    };
+    
+    const colorMap = {
+        success: 'text-green-400',
+        error: 'text-red-400',
+        warning: 'text-yellow-400'
+    };
+
+    const toast = document.createElement('div');
+    toast.className = `toast ${type} flex items-center gap-3`;
+    toast.innerHTML = `
+        <i data-feather="${iconMap[type] || 'info'}" class="w-5 h-5 ${colorMap[type] || 'text-blue-400'}"></i>
+        <span class="text-sm text-gray-200">${message}</span>
+    `;
+    document.body.appendChild(toast);
+    feather.replace();
+
+    requestAnimationFrame(() => toast.classList.add('show'));
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+// Cleanup function to delete all hosted images for current listing
+async function cleanupHostedImages() {
+    if (window.currentListingImages) {
+        for (const img of window.currentListingImages) {
+            if (img.deleteUrl) {
+                await deleteHostedImage(img.deleteUrl);
+            }
+        }
+        window.currentListingImages = [];
+    }
+}
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('VinylVault Pro initialized');
+    
+    // Initialize drop zone
+    initDropZone();
+    
+    // Attach event listeners to buttons
+    const generateBtn = document.getElementById('generateListingBtn');
+    if (generateBtn) {
+        generateBtn.addEventListener('click', generateListing);
+    }
+    
+    const draftBtn = document.getElementById('draftAnalysisBtn');
+    if (draftBtn) {
+        draftBtn.addEventListener('click', draftAnalysis);
+    }
+    
+    const helpBtn = document.getElementById('requestHelpBtn');
+    if (helpBtn) {
+        helpBtn.addEventListener('click', requestHelp);
+    }
+    
+    const copyHTMLBtn = document.getElementById('copyHTMLBtn');
+    if (copyHTMLBtn) {
+        copyHTMLBtn.addEventListener('click', copyHTML);
+    }
+    
+    const copyTagsBtn = document.getElementById('copyTagsBtn');
+    if (copyTagsBtn) {
+        copyTagsBtn.addEventListener('click', copyTags);
+    }
+    
+    const analyzePhotoBtn = document.getElementById('analyzePhotoTypesBtn');
+    if (analyzePhotoBtn) {
+        analyzePhotoBtn.addEventListener('click', analyzePhotoTypes);
+    }
+    
+    // Clear Collection Import Banner listeners
+    const clearCollectionBtn = document.querySelector('#collectionBanner button');
+    if (clearCollectionBtn) {
+        clearCollectionBtn.addEventListener('click', clearCollectionImport);
+    }
+    
+    // Attach photo input listener
+    const photoInput = document.getElementById('photoInput');
+    if (photoInput) {
+        photoInput.addEventListener('change', handleFileSelect);
+    }
+    
+    // Warn about unsaved changes when leaving page with hosted images
+    window.addEventListener('beforeunload', (e) => {
+        if (hostedPhotoUrls.length > 0 && !window.listingPublished) {
+            // Optional: could add cleanup here or warn user
+        }
+    });
+});
+
+// Collection Import functions (defined here to avoid reference errors)
+function clearCollectionImport() {
+    sessionStorage.removeItem('collectionListingRecord');
+    const banner = document.getElementById('collectionBanner');
+    if (banner) {
+        banner.classList.add('hidden');
+    }
+    showToast('Collection import cleared', 'success');
+}
+
+function checkCollectionImport() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('fromCollection') === 'true') {
+        const recordData = sessionStorage.getItem('collectionListingRecord');
+        if (recordData) {
+            const record = JSON.parse(recordData);
+            populateFieldsFromCollection(record);
+            const banner = document.getElementById('collectionBanner');
+            if (banner) {
+                banner.classList.remove('hidden');
+            }
+            const indicator = document.getElementById('collectionDataIndicator');
+            if (indicator) {
+                indicator.classList.remove('hidden');
+            }
+        }
+    }
+}
+
+function populateFieldsFromCollection(record) {
+    if (!record) return;
+    
+    const fields = {
+        'artistInput': record.artist,
+        'titleInput': record.title,
+        'catInput': record.catalogueNumber || record.matrixNotes,
+        'yearInput': record.year,
+        'costInput': record.purchasePrice,
+        'daysOwnedInput': record.daysOwned
+    };
+    
+    Object.entries(fields).forEach(([fieldId, value]) => {
+        const field = document.getElementById(fieldId);
+        if (field && value) {
+            field.value = value;
+        }
+    });
+    
+    // Set conditions if available
+    if (record.conditionVinyl) {
+        const vinylCondition = document.getElementById('vinylConditionInput');
+        if (vinylCondition) vinylCondition.value = record.conditionVinyl;
+    }
+    if (record.conditionSleeve) {
+        const sleeveCondition = document.getElementById('sleeveConditionInput');
+        if (sleeveCondition) sleeveCondition.value = record.conditionSleeve;
+    }
+    
+    showToast(`Loaded ${record.artist} - ${record.title} from collection`, 'success');
+}
+
+// Call check on load
+checkCollectionImport();
+: '€';
+    
+    // Mock comp research results
+    const comps = {
+        nm: { low: 45, high: 65, median: 52 },
+        vgplus: { low: 28, high: 42, median: 34 },
+        vg: { low: 15, high: 25, median: 19 }
+    };
+
+    // Calculate recommended price based on goal
+    let recommendedBin, strategy;
+    switch(goal) {
+        case 'quick':
+            recommendedBin = Math.round(comps.vgplus.low * 0.9);
+            strategy = 'BIN + Best Offer (aggressive)';
+            break;
+        case 'max':
+            recommendedBin = Math.round(comps.nm.high * 1.1);
+            strategy = 'BIN only, no offers, long duration';
+            break;
+        default:
+            recommendedBin = comps.vgplus.median;
+            strategy = 'BIN + Best Offer (standard)';
+    }
+
+    // Fee calculation (eBay UK approx)
+    const ebayFeeRate = 0.13; // 13% final value fee
+    const paypalRate = 0.029; // 2.9% + 30p
+    const fixedFee = 0.30;
+    const shippingCost = 4.50; // Estimated
+    const packingCost = 1.50;
+
+    const totalFees = (recommendedBin * ebayFeeRate) + (recommendedBin * paypalRate) + fixedFee;
+    const breakEven = cost + totalFees + shippingCost + packingCost;
+    const safeFloor = Math.ceil(breakEven * 1.05); // 5% buffer
+
+    // 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();
+
+    // 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 = [];
+    const cat = catNo || 'CAT#';
+    const yr = year || 'YEAR';
+    const country = window.detectedCountry || 'UK';
+    const genre = window.detectedGenre || 'Rock';
+    const format = window.detectedFormat?.includes('7"') ? '7"' : window.detectedFormat?.includes('12"') ? '12"' : 'LP';
+    
+    // Option 1: Classic collector focus
+    titles.push(`${base} ${format} ${yr} ${country} 1st Press ${cat} EX/VG+`);
+    
+    // Option 2: Condition forward
+    titles.push(`NM! ${base} Original ${yr} Vinyl ${format} ${cat} Nice Copy`);
+    
+    // Option 3: Rarity/hype with detected genre
+    titles.push(`${base} ${yr} ${country} Press ${cat} Rare Vintage ${genre} ${format}`);
+    
+    // Option 4: Clean searchable
+    titles.push(`${base} Vinyl ${format} ${yr} ${cat} Excellent Condition`);
+    
+    // Option 5: Genre tagged
+    titles.push(`${base} ${yr} ${format} ${genre} ${cat} VG+ Plays Great`);
+return titles.map((t, i) => ({
+        text: t.length > 80 ? t.substring(0, 77) + '...' : t,
+        chars: Math.min(t.length, 80),
+        style: ['Classic Collector', 'Condition Forward', 'Rarity Focus', 'Clean Search', 'Genre Tagged'][i]
+    }));
+}
+
+function renderTitleOptions(titles) {
+    const container = document.getElementById('titleOptions');
+    container.innerHTML = titles.map((t, i) => `
+        <div class="title-option ${i === 0 ? 'selected' : ''}" onclick="selectTitle(this, '${t.text.replace(/'/g, "\\'")}')">
+            <span class="char-count">${t.chars}/80</span>
+            <p class="font-medium text-gray-200 pr-16">${t.text}</p>
+            <p class="text-sm text-gray-500 mt-1">${t.style}</p>
+        </div>
+    `).join('');
+}
+
+function selectTitle(el, text) {
+    document.querySelectorAll('.title-option').forEach(o => o.classList.remove('selected'));
+    el.classList.add('selected');
+    // Update clipboard copy
+    navigator.clipboard.writeText(text);
+    showToast('Title copied to clipboard!', 'success');
+}
+
+function renderPricingStrategy(bin, strategy, comps, currency, goal) {
+    const container = document.getElementById('pricingStrategy');
+    
+    const offerSettings = goal === 'max' ? 'Offers: OFF' : 
+        `Auto-accept: ${currency}${Math.floor(bin * 0.85)} | Auto-decline: ${currency}${Math.floor(bin * 0.7)}`;
+
+    container.innerHTML = `
+        <div class="pricing-card recommended">
+            <div class="flex items-center gap-2 mb-3">
+                <span class="px-2 py-1 bg-accent/20 text-accent text-xs font-medium rounded">RECOMMENDED</span>
+            </div>
+            <p class="text-3xl font-bold text-white mb-1">${currency}${bin}</p>
+            <p class="text-sm text-gray-400 mb-3">Buy It Now</p>
+            <div class="space-y-2 text-sm">
+                <p class="flex justify-between"><span class="text-gray-500">Strategy:</span> <span class="text-gray-300">${strategy}</span></p>
+                <p class="flex justify-between"><span class="text-gray-500">Best Offer:</span> <span class="text-gray-300">${offerSettings}</span></p>
+                <p class="flex justify-between"><span class="text-gray-500">Duration:</span> <span class="text-gray-300">30 days (GTC)</span></p>
+            </div>
+        </div>
+        <div class="space-y-3">
+            <h4 class="text-sm font-medium text-gray-400 uppercase tracking-wide">Sold Comps by Grade</h4>
+            <div class="space-y-2">
+                <div class="flex justify-between items-center p-3 bg-surface rounded-lg">
+                    <span class="text-green-400 font-medium">NM/NM-</span>
+                    <span class="text-gray-300">${currency}${comps.nm.low}-${comps.nm.high} <span class="text-gray-500">(med: ${comps.nm.median})</span></span>
+                </div>
+                <div class="flex justify-between items-center p-3 bg-surface rounded-lg border border-accent/30">
+                    <span class="text-accent font-medium">VG+/EX</span>
+                    <span class="text-gray-300">${currency}${comps.vgplus.low}-${comps.vgplus.high} <span class="text-gray-500">(med: ${comps.vgplus.median})</span></span>
+                </div>
+                <div class="flex justify-between items-center p-3 bg-surface rounded-lg">
+                    <span class="text-yellow-400 font-medium">VG/VG+</span>
+                    <span class="text-gray-300">${currency}${comps.vg.low}-${comps.vg.high} <span class="text-gray-500">(med: ${comps.vg.median})</span></span>
+                </div>
+            </div>
+            <p class="text-xs text-gray-500 mt-2">Based on last 90 days sold listings, same pressing. Prices exclude postage.</p>
+        </div>
+    `;
+}
+
+function renderFeeFloor(cost, fees, shipping, packing, safeFloor, currency) {
+    const container = document.getElementById('feeFloor');
+    container.innerHTML = `
+        <div class="text-center p-4 bg-surface rounded-lg">
+            <p class="text-xs text-gray-500 uppercase mb-1">Your Cost</p>
+            <p class="text-xl font-bold text-gray-300">${currency}${cost.toFixed(2)}</p>
+        </div>
+        <div class="text-center p-4 bg-surface rounded-lg">
+            <p class="text-xs text-gray-500 uppercase mb-1">Est. Fees</p>
+            <p class="text-xl font-bold text-red-400">${currency}${fees.toFixed(2)}</p>
+            <p class="text-xs text-gray-600">~16% total</p>
+        </div>
+        <div class="text-center p-4 bg-surface rounded-lg">
+            <p class="text-xs text-gray-500 uppercase mb-1">Ship + Pack</p>
+            <p class="text-xl font-bold text-gray-300">${currency}${(shipping + packing).toFixed(2)}</p>
+        </div>
+        <div class="text-center p-4 bg-green-500/10 rounded-lg border border-green-500/30">
+            <p class="text-xs text-green-500 uppercase mb-1">Safe Floor Price</p>
+            <p class="text-2xl font-bold text-green-400">${currency}${safeFloor}</p>
+            <p class="text-xs text-green-600/70">Auto-decline below this</p>
+        </div>
+    `;
+}
+async function renderHTMLDescription(data, titleObj) {
+    const { artist, title, catNo, year } = data;
+    // Use hosted URL if available, otherwise fallback to local object URL
+    let heroImg = '';
+    let galleryImages = [];
+    
+    if (hostedPhotoUrls.length > 0) {
+        heroImg = hostedPhotoUrls[0].displayUrl || hostedPhotoUrls[0].url;
+        galleryImages = hostedPhotoUrls.slice(1).map(img => img.displayUrl || img.url);
+    } else if (uploadedPhotos.length > 0) {
+        heroImg = URL.createObjectURL(uploadedPhotos[0]);
+        galleryImages = uploadedPhotos.slice(1).map((_, i) => URL.createObjectURL(uploadedPhotos[i + 1]));
+    }
+    
+    // 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;">
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
+      ${galleryImages.map(url => `<img src="${url}" style="width: 100%; height: 150px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" alt="Record photo">`).join('')}
+    </div>
+  </div>
+` : '';
+
+const html = `<div style="max-width: 800px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; line-height: 1.6;">
+  
+  <!-- HERO IMAGE -->
+  <div style="margin-bottom: 24px;">
+    <img src="${heroImg}" alt="${artist} - ${title}" style="width: 100%; max-width: 600px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
+  </div>
+  
+  ${galleryHtml}
+<!-- BADGES -->
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px;">
+    <span style="background: #7c3aed; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">Original ${detectedCountry} Pressing</span>
+    <span style="background: #059669; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">${year || '1970s'}</span>
+    <span style="background: #0891b2; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">${detectedFormat}</span>
+    <span style="background: #d97706; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">${detectedCondition}</span>
+  </div>
+<!-- AT A GLANCE -->
+  <table style="width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 14px;">
+    <tr style="background: #f8fafc;">
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600; width: 140px;">Artist</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${artist || 'See title'}</td>
+    </tr>
+    <tr>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Title</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${title || 'See title'}</td>
+    </tr>
+    <tr style="background: #f8fafc;">
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Label</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${detectedLabel}</td>
+    </tr>
+<tr>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Catalogue</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;"><code style="background: #f1f5f9; padding: 2px 8px; border-radius: 4px;">${catNo || '[See photos]'}</code></td>
+    </tr>
+    <tr style="background: #f8fafc;">
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Country</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${detectedCountry}</td>
+    </tr>
+<tr>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0; font-weight: 600;">Year</td>
+      <td style="padding: 12px 16px; border: 1px solid #e2e8f0;">${year || '[Verify]'}</td>
+    </tr>
+  </table>
+
+  <!-- CONDITION -->
+  <div style="background: #fefce8; border-left: 4px solid #eab308; padding: 16px 20px; margin-bottom: 24px; border-radius: 0 8px 8px 0;">
+    <h3 style="margin: 0 0 12px 0; color: #854d0e; font-size: 16px; font-weight: 600;">Condition Report</h3>
+    <div style="display: grid; gap: 12px;">
+      <div>
+        <strong style="color: #713f12;">Vinyl:</strong> <span style="color: #854d0e;">VG+ — Light surface marks, plays cleanly with minimal surface noise. No skips or jumps. [Adjust based on actual inspection]</span>
+      </div>
+      <div>
+        <strong style="color: #713f12;">Sleeve:</strong> <span style="color: #854d0e;">VG+ — Minor edge wear, light ring wear visible under raking light. No splits or writing. [Adjust based on actual inspection]</span>
+      </div>
+      <div>
+        <strong style="color: #713f12;">Inner Sleeve:</strong> <span style="color: #854d0e;">Original paper inner included, small split at bottom seam. [Verify/Adjust]</span>
+      </div>
+    </div>
+  </div>
+  <!-- ABOUT -->
+  <h3 style="color: #1e293b; font-size: 18px; font-weight: 600; margin-bottom: 12px;">About This Release</h3>
+  <p style="margin-bottom: 16px; color: #475569;">${detectedGenre ? `${detectedGenre.charAt(0).toUpperCase() + detectedGenre.slice(1)} release` : 'Vintage vinyl release'}${detectedPressingInfo ? `. Matrix/Runout: ${detectedPressingInfo}` : ''}. [Add accurate description based on verified pressing details. Mention notable features: gatefold, insert, poster, hype sticker, etc.]</p>
+<!-- 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;">
+    ${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>
+    <p style="margin: 0 0 12px 0; color: #1e3a8a;">Records are removed from outer sleeves to prevent seam splits during transit. Packed with stiffeners in a dedicated LP mailer. Royal Mail 48 Tracked or courier service.</p>
+    <p style="margin: 0; color: #1e3a8a; font-size: 14px;"><strong>Combined postage:</strong> Discount available for multiple purchases—please request invoice before payment.</p>
+  </div>
+
+  <!-- CTA -->
+  <div style="text-align: center; padding: 24px; background: #f1f5f9; border-radius: 12px;">
+    <p style="margin: 0 0 8px 0; color: #475569; font-weight: 500;">Questions? Need more photos?</p>
+    <p style="margin: 0; color: #64748b; font-size: 14px;">Message me anytime—happy to provide additional angles, audio clips, or pressing details.</p>
+  </div>
+
+</div>`;
+
+    // Store reference to hosted images for potential cleanup
+    window.currentListingImages = hostedPhotoUrls.map(img => ({
+        url: img.url,
+        deleteUrl: img.deleteUrl
+    }));
+document.getElementById('htmlOutput').value = html;
+}
+function renderTags(artist, title, catNo, year) {
+    const genre = window.detectedGenre || 'rock';
+    const format = window.detectedFormat?.toLowerCase().includes('7"') ? '7 inch' : 
+                   window.detectedFormat?.toLowerCase().includes('12"') ? '12 inch single' : 'lp';
+    const country = window.detectedCountry?.toLowerCase() || 'uk';
+    
+    const tags = [
+        artist || 'vinyl',
+        title || 'record',
+        format,
+        'vinyl record',
+        'original pressing',
+        `${country} pressing`,
+        year || 'vintage',
+        catNo || '',
+        genre,
+        genre === 'rock' ? 'prog rock' : genre,
+        genre === 'rock' ? 'psych' : '',
+        'collector',
+        'audiophile',
+        format === 'lp' ? '12 inch' : format,
+        '33 rpm',
+        format === 'lp' ? 'album' : 'single',
+        'used vinyl',
+        'graded',
+        'excellent condition',
+        'rare vinyl',
+        'classic rock',
+        'vintage vinyl',
+        'record collection',
+        'music',
+        'audio',
+        window.detectedLabel || ''
+    ].filter(Boolean);
+const container = document.getElementById('tagsOutput');
+    container.innerHTML = tags.map(t => `
+        <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+    `).join('');
+}
+function renderShotList() {
+    // Map shot types to display info
+    const shotDefinitions = [
+        { id: 'front', name: 'Front cover (square, well-lit)', critical: true },
+        { id: 'back', name: 'Back cover (full shot)', critical: true },
+        { id: 'spine', name: 'Spine (readable text)', critical: true },
+        { id: 'label_a', name: 'Label Side A (close, legible)', critical: true },
+        { id: 'label_b', name: 'Label Side B (close, legible)', critical: true },
+        { id: 'deadwax', name: 'Deadwax/runout grooves', critical: true },
+        { id: 'inner', name: 'Inner sleeve (both sides)', critical: false },
+        { id: 'insert', name: 'Insert/poster if included', critical: false },
+        { id: 'hype', name: 'Hype sticker (if present)', critical: false },
+        { id: 'vinyl', name: 'Vinyl in raking light (flaws)', critical: true },
+        { id: 'corners', name: 'Sleeve corners/edges detail', critical: false },
+        { id: 'barcode', name: 'Barcode area', critical: false }
+    ];
+    
+    // Check if we have any photos at all
+    const hasPhotos = uploadedPhotos.length > 0;
+
+    const container = document.getElementById('shotList');
+    container.innerHTML = shotDefinitions.map(shot => {
+        const have = detectedPhotoTypes.has(shot.id) || (shot.id === 'front' && hasPhotos) || (shot.id === 'back' && uploadedPhotos.length > 1);
+        const statusClass = have ? 'completed' : shot.critical ? 'missing' : '';
+        const iconColor = have ? 'text-green-500' : shot.critical ? 'text-yellow-500' : 'text-gray-500';
+        const textClass = have ? 'text-gray-400 line-through' : 'text-gray-300';
+        const icon = have ? 'check-circle' : shot.critical ? 'alert-circle' : 'circle';
+        
+        return `
+        <div class="shot-item ${statusClass}">
+            <i data-feather="${icon}" 
+               class="w-5 h-5 ${iconColor} flex-shrink-0"></i>
+            <span class="text-sm ${textClass}">${shot.name}</span>
+            ${shot.critical && !have ? '<span class="ml-auto text-xs text-yellow-500 font-medium">CRITICAL</span>' : ''}
+        </div>
+    `}).join('');
+    feather.replace();
+}
+function copyHTML() {
+    const html = document.getElementById('htmlOutput');
+    html.select();
+    document.execCommand('copy');
+    showToast('HTML copied to clipboard!', 'success');
+}
+
+function copyTags() {
+    const tags = Array.from(document.querySelectorAll('#tagsOutput span')).map(s => s.textContent).join(', ');
+    navigator.clipboard.writeText(tags);
+    showToast('Tags copied to clipboard!', 'success');
+}
+async function draftAnalysis() {
+    if (uploadedPhotos.length === 0) {
+        showToast('Upload photos first for preview', 'error');
+        return;
+    }
+
+    const artist = document.getElementById('artistInput').value.trim();
+    const title = document.getElementById('titleInput').value.trim();
+    
+    // Show loading state
+    const dropZone = document.getElementById('dropZone');
+    const spinner = document.getElementById('uploadSpinner');
+    spinner.classList.remove('hidden');
+    dropZone.classList.add('pointer-events-none');
+    startAnalysisProgressSimulation();
+
+    try {
+        // Try OCR/AI analysis if available
+        const service = getAIService();
+        let ocrResult = null;
+        
+        if (service && service.apiKey && uploadedPhotos.length > 0) {
+            try {
+                ocrResult = await service.analyzeRecordImages(uploadedPhotos.slice(0, 2)); // Limit to 2 photos for speed
+                populateFieldsFromOCR(ocrResult);
+            } catch (e) {
+                console.log('Preview OCR failed:', e);
+            }
+        }
+
+        // Generate quick preview results
+        const catNo = document.getElementById('catInput').value.trim() || ocrResult?.catalogueNumber || '';
+        const year = document.getElementById('yearInput').value.trim() || ocrResult?.year || '';
+        const detectedArtist = artist || ocrResult?.artist || 'Unknown Artist';
+        const detectedTitle = title || ocrResult?.title || 'Unknown Title';
+        
+        const baseTitle = `${detectedArtist} - ${detectedTitle}`;
+        
+        // Generate quick titles
+        const quickTitles = [
+            `${baseTitle} ${year ? `(${year})` : ''} ${catNo} VG+`.substring(0, 80),
+            `${baseTitle} Original Pressing Vinyl LP`.substring(0, 80),
+            `${detectedArtist} ${detectedTitle} ${catNo || 'LP'}`.substring(0, 80)
+        ].map((t, i) => ({
+            text: t,
+            chars: t.length,
+            style: ['Quick', 'Standard', 'Compact'][i]
+        }));
+
+        // Quick pricing estimate based on condition
+        const cost = parseFloat(document.getElementById('costInput').value) || 10;
+        const vinylCond = document.getElementById('vinylConditionInput').value;
+        const sleeveCond = document.getElementById('sleeveConditionInput').value;
+        
+        const conditionMultipliers = { 'M': 3, 'NM': 2.5, 'VG+': 1.8, 'VG': 1.2, 'G+': 0.8, 'G': 0.5 };
+        const condMult = (conditionMultipliers[vinylCond] || 1) * 0.7 + (conditionMultipliers[sleeveCond] || 1) * 0.3;
+        
+        const estimatedValue = Math.round(cost * Math.max(condMult, 1.5));
+        const suggestedPrice = Math.round(estimatedValue * 0.9);
+
+        // Render preview results
+        renderTitleOptions(quickTitles);
+        
+        // Quick pricing card
+        document.getElementById('pricingStrategy').innerHTML = `
+            <div class="pricing-card recommended">
+                <div class="flex items-center gap-2 mb-3">
+                    <span class="px-2 py-1 bg-accent/20 text-accent text-xs font-medium rounded">QUICK ESTIMATE</span>
+                </div>
+                <p class="text-3xl font-bold text-white mb-1">£${suggestedPrice}</p>
+                <p class="text-sm text-gray-400 mb-3">Suggested Buy It Now</p>
+                <div class="space-y-2 text-sm">
+                    <p class="flex justify-between"><span class="text-gray-500">Est. Value:</span> <span class="text-gray-300">£${estimatedValue}</span></p>
+                    <p class="flex justify-between"><span class="text-gray-500">Your Cost:</span> <span class="text-gray-300">£${cost.toFixed(2)}</span></p>
+                    <p class="flex justify-between"><span class="text-gray-500">Condition:</span> <span class="text-gray-300">${vinylCond}/${sleeveCond}</span></p>
+                </div>
+            </div>
+            <div class="space-y-3">
+                <h4 class="text-sm font-medium text-gray-400 uppercase tracking-wide">Preview Notes</h4>
+                <div class="p-3 bg-surface rounded-lg text-sm text-gray-400">
+                    ${ocrResult ? 
+                        `<p class="text-green-400 mb-2">✓ AI detected information from photos</p>` : 
+                        `<p class="text-yellow-400 mb-2">⚠ Add API key in Settings for auto-detection</p>`
+                    }
+                    <p>This is a quick estimate based on your cost and condition. Run "Generate Full Listing" for complete market analysis, sold comps, and optimized pricing.</p>
+                </div>
+                ${ocrResult ? `
+                    <div class="p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
+                        <p class="text-xs text-green-400 font-medium mb-1">Detected from photos:</p>
+                        <ul class="text-xs text-gray-400 space-y-1">
+                            ${ocrResult.artist ? `<li>• Artist: ${ocrResult.artist}</li>` : ''}
+                            ${ocrResult.title ? `<li>• Title: ${ocrResult.title}</li>` : ''}
+                            ${ocrResult.catalogueNumber ? `<li>• Cat#: ${ocrResult.catalogueNumber}</li>` : ''}
+                            ${ocrResult.year ? `<li>• Year: ${ocrResult.year}</li>` : ''}
+                        </ul>
+                    </div>
+                ` : ''}
+            </div>
+        `;
+
+        // Simple fee floor
+        const fees = suggestedPrice * 0.16;
+        const safeFloor = Math.ceil(cost + fees + 6);
+        
+        document.getElementById('feeFloor').innerHTML = `
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Your Cost</p>
+                <p class="text-xl font-bold text-gray-300">£${cost.toFixed(2)}</p>
+            </div>
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Est. Fees</p>
+                <p class="text-xl font-bold text-red-400">£${fees.toFixed(2)}</p>
+            </div>
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Ship + Pack</p>
+                <p class="text-xl font-bold text-gray-300">£6.00</p>
+            </div>
+            <div class="text-center p-4 bg-green-500/10 rounded-lg border border-green-500/30">
+                <p class="text-xs text-green-500 uppercase mb-1">Safe Floor</p>
+                <p class="text-2xl font-bold text-green-400">£${safeFloor}</p>
+            </div>
+        `;
+
+        // Preview HTML description
+        const previewHtml = `<!-- QUICK PREVIEW - Generated by VinylVault Pro -->
+<div style="max-width: 700px; margin: 0 auto; font-family: sans-serif;">
+    <h2 style="color: #333;">${detectedArtist} - ${detectedTitle}</h2>
+    ${year ? `<p><strong>Year:</strong> ${year}</p>` : ''}
+    ${catNo ? `<p><strong>Catalogue #:</strong> ${catNo}</p>` : ''}
+    <p><strong>Condition:</strong> Vinyl ${vinylCond}, Sleeve ${sleeveCond}</p>
+    <hr style="margin: 20px 0;">
+    <p style="color: #666;">[Full description will be generated with complete market analysis]</p>
+</div>`;
+        
+        document.getElementById('htmlOutput').value = previewHtml;
+
+        // Preview tags
+        const previewTags = [
+            detectedArtist,
+            detectedTitle,
+            'vinyl',
+            'record',
+            vinylCond,
+            'lp',
+            year || 'vintage'
+        ].filter(Boolean);
+        
+        document.getElementById('tagsOutput').innerHTML = previewTags.map(t => `
+            <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+        `).join('');
+
+        // Update shot list
+        renderShotList();
+
+        // Show results
+        resultsSection.classList.remove('hidden');
+        emptyState.classList.add('hidden');
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+        showToast('Quick preview ready! Click "Generate Full Listing" for complete analysis.', 'success');
+
+    } catch (error) {
+        console.error('Preview error:', error);
+        showToast('Preview failed: ' + error.message, 'error');
+    } finally {
+        stopAnalysisProgress();
+        setTimeout(() => {
+            spinner.classList.add('hidden');
+            dropZone.classList.remove('pointer-events-none');
+            updateAnalysisProgress('Initializing...', 0);
+        }, 300);
+    }
+}
+async function callAI(messages, temperature = 0.7) {
+    const provider = localStorage.getItem('ai_provider') || 'openai';
+    
+    if (provider === 'deepseek' && window.deepseekService?.isConfigured) {
+        try {
+            const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${localStorage.getItem('deepseek_api_key')}`
+                },
+                body: JSON.stringify({
+                    model: localStorage.getItem('deepseek_model') || 'deepseek-chat',
+                    messages: messages,
+                    temperature: temperature,
+                    max_tokens: 2000
+                })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error?.message || 'DeepSeek API request failed');
+            }
+
+            const data = await response.json();
+            return data.choices[0].message.content;
+        } catch (error) {
+            showToast(`DeepSeek Error: ${error.message}`, 'error');
+            return null;
+        }
+    } else {
+        // Fallback to OpenAI
+        const apiKey = localStorage.getItem('openai_api_key');
+        const model = localStorage.getItem('openai_model') || 'gpt-4o';
+        const maxTokens = parseInt(localStorage.getItem('openai_max_tokens')) || 2000;
+
+        if (!apiKey) {
+            showToast('OpenAI API key not configured. Go to Settings.', 'error');
+            return null;
+        }
+
+        try {
+            const response = await fetch('https://api.openai.com/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                    model: model,
+                    messages: messages,
+                    temperature: temperature,
+                    max_tokens: maxTokens
+                })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error?.message || 'API request failed');
+            }
+
+            const data = await response.json();
+            return data.choices[0].message.content;
+        } catch (error) {
+            showToast(`OpenAI Error: ${error.message}`, 'error');
+            return null;
+        }
+    }
+}
+// Legacy alias for backward compatibility
+async function callOpenAI(messages, temperature = 0.7) {
+    return callAI(messages, temperature);
+}
+
+// Delete hosted image from imgBB
+async function deleteHostedImage(deleteUrl) {
+    if (!deleteUrl) return false;
+    
+    try {
+        const response = await fetch(deleteUrl, { method: 'GET' });
+        // imgBB delete URLs work via GET request
+        return response.ok;
+    } catch (error) {
+        console.error('Failed to delete image:', error);
+        return false;
+    }
+}
+
+// Get hosted photo URLs for eBay HTML description
+function getHostedPhotoUrlsForEbay() {
+    return hostedPhotoUrls.map(img => ({
+        full: img.url,
+        display: img.displayUrl || img.url,
+        thumb: img.thumb,
+        medium: img.medium,
+        viewer: img.viewerUrl
+    }));
+}
+async function generateListingWithAI() {
+    const artist = document.getElementById('artistInput').value.trim();
+    const title = document.getElementById('titleInput').value.trim();
+    const catNo = document.getElementById('catInput').value.trim();
+    const year = document.getElementById('yearInput').value.trim();
+    
+    if (!artist || !title) {
+        showToast('Please enter at least artist and title', 'error');
+        return;
+    }
+
+    const messages = [
+        {
+            role: 'system',
+            content: 'You are a vinyl record eBay listing expert. Generate optimized titles, descriptions, and pricing strategies. Always return JSON format with: titles (array), description (string), condition_notes (string), price_estimate (object with min, max, recommended), and tags (array).'
+        },
+        {
+            role: 'user',
+            content: `Generate an eBay listing for: ${artist} - ${title}${catNo ? ` (Catalog: ${catNo})` : ''}${year ? ` (${year})` : ''}. Include optimized title options, professional HTML description, condition guidance, price estimate in GBP, and relevant tags.`
+        }
+    ];
+    const provider = localStorage.getItem('ai_provider') || 'openai';
+    showToast(`Generating listing with ${provider === 'deepseek' ? 'DeepSeek' : 'OpenAI'}...`, 'success');
+    
+    const result = await callAI(messages, 0.7);
+if (result) {
+        try {
+            const data = JSON.parse(result);
+            // Populate the UI with AI-generated content
+            if (data.titles) {
+                renderTitleOptions(data.titles.map(t => ({
+                    text: t.length > 80 ? t.substring(0, 77) + '...' : t,
+                    chars: Math.min(t.length, 80),
+                    style: 'AI Generated'
+                })));
+            }
+            if (data.description) {
+                document.getElementById('htmlOutput').value = data.description;
+            }
+            if (data.tags) {
+                const tagsContainer = document.getElementById('tagsOutput');
+                tagsContainer.innerHTML = data.tags.map(t => `
+                    <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+                `).join('');
+            }
+            resultsSection.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+            showToast('AI listing generated!', 'success');
+        } catch (e) {
+            // If not valid JSON, treat as plain text description
+            document.getElementById('htmlOutput').value = result;
+            resultsSection.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+        }
+    }
+}
+
+function requestHelp() {
+    alert(`VINYL PHOTO GUIDE:
+
+ESSENTIAL SHOTS (need these):
+• Front cover - square, no glare, color accurate
+• Back cover - full frame, readable text
+• Both labels - close enough to read all text
+• Deadwax/runout - for pressing identification
+
+CONDITION SHOTS:
+• Vinyl in raking light at angle (shows scratches)
+• Sleeve edges and corners
+• Any flaws clearly documented
+
+OPTIONARY BUT HELPFUL:
+• Inner sleeve condition
+• Inserts, posters, extras
+• Hype stickers
+• Barcode area
+
+TIPS:
+- Use natural daylight or 5500K bulbs
+- Avoid flash directly on glossy sleeves
+- Include scale reference if unusual size
+- Photograph flaws honestly - reduces returns`);
+}
+function showToast(message, type = 'success') {
+    const existing = document.querySelector('.toast');
+    if (existing) existing.remove();
+
+    const iconMap = {
+        success: 'check',
+        error: 'alert-circle',
+        warning: 'alert-triangle'
+    };
+    
+    const colorMap = {
+        success: 'text-green-400',
+        error: 'text-red-400',
+        warning: 'text-yellow-400'
+    };
+
+    const toast = document.createElement('div');
+    toast.className = `toast ${type} flex items-center gap-3`;
+    toast.innerHTML = `
+        <i data-feather="${iconMap[type] || 'info'}" class="w-5 h-5 ${colorMap[type] || 'text-blue-400'}"></i>
+        <span class="text-sm text-gray-200">${message}</span>
+    `;
+    document.body.appendChild(toast);
+    feather.replace();
+
+    requestAnimationFrame(() => toast.classList.add('show'));
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+// Cleanup function to delete all hosted images for current listing
+async function cleanupHostedImages() {
+    if (window.currentListingImages) {
+        for (const img of window.currentListingImages) {
+            if (img.deleteUrl) {
+                await deleteHostedImage(img.deleteUrl);
+            }
+        }
+        window.currentListingImages = [];
+    }
+}
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('VinylVault Pro initialized');
+    
+    // Initialize drop zone
+    initDropZone();
+    
+    // Warn about unsaved changes when leaving page with hosted images
+    window.addEventListener('beforeunload', (e) => {
+        if (hostedPhotoUrls.length > 0 && !window.listingPublished) {
+            // Optional: could add cleanup here or warn user
+        }
+    });
+});
+ : '€';
+    
+    // Mock comp research results
+    const comps = {
+        nm: { low: 45, high: 65, median: 52 },
+        vgplus: { low: 28, high: 42, median: 34 },
+        vg: { low: 15, high: 25, median: 19 }
+    };
+
+    // Calculate recommended price based on goal
+    let recommendedBin, strategy;
+    switch(goal) {
+        case 'quick':
+            recommendedBin = Math.round(comps.vgplus.low * 0.9);
+            strategy = 'BIN + Best Offer (aggressive)';
+            break;
+        case 'max':
+            recommendedBin = Math.round(comps.nm.high * 1.1);
+            strategy = 'BIN only, no offers, long duration';
+            break;
+        default:
+            recommendedBin = comps.vgplus.median;
+            strategy = 'BIN + Best Offer (standard)';
+    }
+
+    // Fee calculation (eBay UK approx)
+    const ebayFeeRate = 0.13; // 13% final value fee
+    const paypalRate = 0.029; // 2.9% + 30p
+    const fixedFee = 0.30;
+    const shippingCost = 4.50; // Estimated
+    const packingCost = 1.50;
+
+    const totalFees = (recommendedBin * ebayFeeRate) + (recommendedBin * paypalRate) + fixedFee;
+    const breakEven = cost + totalFees + shippingCost + packingCost;
+    const safeFloor = Math.ceil(breakEven * 1.05); // 5% buffer
+
+    // 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();
+
+    // 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 = [];
     const cat = catNo || 'CAT#';
     const yr = year || 'YEAR';
@@ -723,13 +2591,13 @@ async function performAnalysis(data) {
     
     // Option 5: Genre tagged
     titles.push(`${base} ${yr} ${format} ${genre} ${cat} VG+ Plays Great`);
-return titles.map((t, i) => ({
+    
+    return titles.map((t, i) => ({
         text: t.length > 80 ? t.substring(0, 77) + '...' : t,
         chars: Math.min(t.length, 80),
         style: ['Classic Collector', 'Condition Forward', 'Rarity Focus', 'Clean Search', 'Genre Tagged'][i]
     }));
 }
-
 function renderTitleOptions(titles) {
     const container = document.getElementById('titleOptions');
     container.innerHTML = titles.map((t, i) => `