class CustomPricingCard extends HTMLElement {
    static get observedAttributes() {
        return ['tier', 'price', 'features', 'popular'];
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
    }

    render() {
        const tier = this.getAttribute('tier') || 'starter';
        const price = this.getAttribute('price') || '0';
        const features = JSON.parse(this.getAttribute('features') || '[]');
        const isPopular = this.getAttribute('popular') === 'true';

        const tierConfig = {
            starter: { name: 'Starter', color: '#94a3b8', gradient: 'from-slate-500 to-slate-600' },
            creator: { name: 'Creator', color: '#0ea5e9', gradient: 'from-primary-500 to-secondary-500' },
            enterprise: { name: 'Enterprise', color: '#d946ef', gradient: 'from-secondary-500 to-accent-500' }
        };

        const config = tierConfig[tier];

        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                
                .card {
                    position: relative;
                    height: 100%;
                    background: rgba(30, 41, 59, 0.4);
                    backdrop-filter: blur(12px);
                    border: 1px solid rgba(148, 163, 184, 0.1);
                    border-radius: 24px;
                    padding: 2rem;
                    transition: all 0.4s ease;
                }
                
                .card:hover {
                    transform: translateY(-8px);
                    border-color: ${config.color}40;
                }
                
                .card.popular {
                    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(217, 70, 239, 0.1));
                    border-color: rgba(14, 165, 233, 0.3);
                    box-shadow: 0 25px 50px -12px rgba(14, 165, 233, 0.25);
                }
                
                .popular-badge {
                    position: absolute;
                    top: -12px;
                    left: 50%;
                    transform: translateX(-50%);
                    padding: 0.5rem 1.5rem;
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    border-radius: 9999px;
                    font-size: 0.75rem;
                    font-weight: 700;
                    color: white;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                
                .tier-name {
                    font-size: 1.25rem;
                    font-weight: 700;
                    color: #f8fafc;
                    margin-bottom: 0.5rem;
                    text-transform: capitalize;
                }
                
                .price {
                    display: flex;
                    align-items: baseline;
                    gap: 0.25rem;
                    margin-bottom: 1.5rem;
                }
                
                .price-amount {
                    font-size: 3.5rem;
                    font-weight: 800;
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                
                .price-period {
                    color: #64748b;
                    font-size: 1rem;
                }
                
                .features {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    margin-bottom: 2rem;
                }
                
                .feature {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    font-size: 0.9375rem;
                    color: #94a3b8;
                }
                
                .feature i {
                    color: #10b981;
                    flex-shrink: 0;
                }
                
                .cta-btn {
                    width: 100%;
                    padding: 1rem;
                    border-radius: 16px;
                    font-size: 1rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    border: none;
                }
                
                .cta-btn.primary {
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    color: white;
                }
                
                .cta-btn.primary:hover {
                    transform: scale(1.02);
                    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.4);
                }
                
                .cta-btn.secondary {
                    background: rgba(30, 41, 59, 0.6);
                    border: 1px solid rgba(148, 163, 184, 0.2);
                    color: #e2e8f0;
                }
                
                .cta-btn.secondary:hover {
                    background: rgba(30, 41, 59, 0.8);
                    border-color: #0ea5e9;
                }
                
                .resolution-limits {
                    margin-top: 1.5rem;
                    padding-top: 1.5rem;
                    border-top: 1px solid rgba(148, 163, 184, 0.1);
                }
                
                .limit-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 0.875rem;
                    margin-bottom: 0.5rem;
                }
                
                .limit-label {
                    color: #64748b;
                }
                
                .limit-value {
                    color: #e2e8f0;
                    font-weight: 600;
                }
            </style>
            
            <div class="card ${isPopular ? 'popular' : ''}">
                ${isPopular ? '<span class="popular-badge">Most Popular</span>' : ''}
                
                <h3 class="tier-name">${config.name}</h3>
                
                <div class="price">
                    <span class="price-amount">$${price}</span>
                    <span class="price-period">/month</span>
                </div>
                
                <div class="features">
                    ${features.map(f => `
                        <div class="feature">
                            <i data-feather="check" style="width: 18px; height: 18px;"></i>
                            <span>${f}</span>
                        </div>
                    `).join('')}
                </div>
                
                <div class="resolution-limits">
                    <div class="limit-row">
                        <span class="limit-label">Max Resolution</span>
                        <span class="limit-value">${tier === 'starter' ? '4K (3840×2160)' : tier === 'creator' ? '8K (7680×4320)' : '20K+ Unlimited'}</span>
                    </div>
                    <div class="limit-row">
                        <span class="limit-label">File Format</span>
                        <span class="limit-value">${tier === 'starter' ? 'PNG/JPG' : tier === 'creator' ? 'PNG/TIFF' : 'All + RAW'}</span>
                    </div>
                </div>
                
                <button class="cta-btn ${isPopular ? 'primary' : 'secondary'}">
                    ${price === '0' ? 'Get Started Free' : 'Subscribe Now'}
                </button>
            </div>
        `;
        
        if (window.feather) {
            setTimeout(() => feather.replace(), 0);
        }
    }
}

customElements.define('custom-pricing-card', CustomPricingCard);