<!-- Artflow Pro Portfolio for Squarespace -->
<div id="artflow-portfolio-container"></div>

<script>
/****************************************
 * ARTFLOW PORTFOLIO CONFIGURATION
 * Replace the link below with your portfolio link from Artflow Pro
 ****************************************/
const PORTFOLIO_LINK = 'https://api.artflow-pro.com/api/artistproductportfolio/external/c1a33144-b84b-4737-b8a2-eb7487f468f4';

// Optional display settings
const DISPLAY_OPTIONS = {
    columns: 4,          // Number of columns (1-6)
    showHeader: true,    // Show/hide portfolio title and description
    showTitles: true     // Show/hide artwork titles
};

/****************************************
 * DO NOT EDIT BELOW THIS LINE
 ****************************************/
(function() {
    // Extract portfolio ID from link
    const portfolioId = PORTFOLIO_LINK.split('/').pop();
    
    async function loadPortfolio() {
        const container = document.getElementById('artflow-portfolio-container');
        if (!container) return;
        
        container.innerHTML = '<div class="artflow-loading">Loading portfolio...</div>';
        
        try {
            const response = await fetch(PORTFOLIO_LINK);
            
            if (!response.ok) {
                throw new Error('Invalid portfolio link or network error');
            }
            
            const data = await response.json();
            
            // Transform API response to our format
            const portfolioData = {
                portfolioName: data.Title || '',
                portfolioDescription: data.Description || '',
                artworks: (data.PortfolioProductsViewModel || []).map(item => {
                    const product = item.ArtistProduct || {};
                    return {
                        title: product.Name || 'Untitled',
                        imageURL: product.ProductImgUrl || '',
                        shortDescription: product.ShortDescription || '',
                        series: product.SeriesName || '',
                        material: product.Material || '',
                        serialNumber: product.SerialNumber || ''
                    };
                })
            };
            
            renderPortfolio(portfolioData);
            
        } catch (error) {
            container.innerHTML = `
                <div class="artflow-error">
                    <h3>Unable to load portfolio</h3>
                    <p>Please check that your portfolio link is correct and try refreshing the page.</p>
                    <small>Error: ${error.message}</small>
                </div>
            `;
        }
    }
    
    function renderPortfolio(data) {
        const container = document.getElementById('artflow-portfolio-container');
        
        let html = '<div class="artflow-portfolio">';
        
        // Header section
        if (DISPLAY_OPTIONS.showHeader && (data.portfolioName || data.portfolioDescription)) {
            html += `
                <div class="artflow-header">
                    ${data.portfolioName ? `<h2>${escapeHtml(data.portfolioName)}</h2>` : ''}
                    ${data.portfolioDescription ? `<p class="artflow-description">${escapeHtml(data.portfolioDescription)}</p>` : ''}
                </div>
            `;
        }
        
        // Grid section
        html += `<div class="artflow-grid" style="--columns: ${DISPLAY_OPTIONS.columns}">`;
        
        if (data.artworks && data.artworks.length > 0) {
            data.artworks.forEach((artwork, index) => {
                html += `
                    <div class="artflow-item" data-index="${index}">
                        <div class="artflow-item-image-container">
                            <img class="artflow-item-image" 
                                 src="${escapeHtml(artwork.imageURL)}" 
                                 alt="${escapeHtml(artwork.title)}"
                                 loading="lazy">
                        </div>
                        ${DISPLAY_OPTIONS.showTitles ? `<h3 class="artflow-item-title">${escapeHtml(artwork.title)}</h3>` : ''}
                    </div>
                `;
            });
        } else {
            html += '<p class="artflow-no-items">No artworks found in this portfolio.</p>';
        }
        
        html += '</div></div>';
        
        container.innerHTML = html;
        
        // Add click handlers for future lightbox functionality
        document.querySelectorAll('.artflow-item').forEach(item => {
            item.addEventListener('click', function() {
                const index = this.getAttribute('data-index');
                // Lightbox functionality will be added in Phase 2
                console.log('Clicked artwork:', data.artworks[index]);
            });
        });
    }
    
    // Utility function to escape HTML
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadPortfolio);
    } else {
        loadPortfolio();
    }
})();
</script>

<style>
/* Artflow Portfolio Styles - Default Theme */
.artflow-portfolio {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0 auto;
    max-width: 1200px;
}

/* Header Styles */
.artflow-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
}

.artflow-header h2 {
    font-size: 36px;
    font-weight: 300;
    margin: 0 0 15px 0;
    color: #333;
    line-height: 1.2;
}

.artflow-description {
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid Layout */
.artflow-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), 1fr);
    gap: 20px;
    padding: 0 20px;
}

/* Artwork Items */
.artflow-item {
    background: #f8f8f8;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

.artflow-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.artflow-item-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: #eee;
}

.artflow-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artflow-item:hover .artflow-item-image {
    transform: scale(1.05);
}

.artflow-item-title {
    padding: 15px;
    margin: 0;
    text-align: center;
    background: #888;
    color: white;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

/* Loading State */
.artflow-loading {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 16px;
}

/* Error State */
.artflow-error {
    text-align: center;
    padding: 40px 20px;
    color: #d32f2f;
    background: #ffebee;
    border-radius: 4px;
    margin: 20px;
}

.artflow-error h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.artflow-error p {
    margin: 0 0 10px 0;
}

.artflow-error small {
    opacity: 0.7;
    font-size: 12px;
}

/* No Items Message */
.artflow-no-items {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .artflow-grid {
        grid-template-columns: repeat(min(var(--columns, 4), 3), 1fr);
    }
}

@media (max-width: 768px) {
    .artflow-grid {
        grid-template-columns: repeat(min(var(--columns, 4), 2), 1fr);
        gap: 15px;
        padding: 0 15px;
    }
    
    .artflow-header h2 {
        font-size: 28px;
    }
    
    .artflow-description {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .artflow-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .artflow-header {
        margin-bottom: 30px;
    }
    
    .artflow-header h2 {
        font-size: 24px;
    }
}

/* Print Styles */
@media print {
    .artflow-item {
        break-inside: avoid;
    }
}
</style>