components/feature-card.js

class FeatureCard extends HTMLElement {
    connectedCallback() {
        const icon = this.getAttribute('icon') || 'star';
        const title = this.getAttribute('title') || 'Feature Title';
        const description = this.getAttribute('description') || 'Feature description goes here';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap');
                
                :host {
                    display: block;
                }
                
                .feature-card {
                    background: white;
                    padding: 2rem;
                    border-radius: 16px;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    cursor: pointer;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    font-family: 'Inter', sans-serif;
                }
                
                .feature-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                }
                
                .feature-icon {
                    width: 60px;
                    height: 60px;
                    background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
                    border-radius: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    transition: all 0.3s ease;
                }
                
                .feature-icon svg {
                    color: #9C27B0;
                    width: 28px;
                    height: 28px;
                    stroke-width: 2;
                }
                
                .feature-card:hover .feature-icon {
                    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
                }
                
                .feature-card:hover .feature-icon svg {
                    color: white;
                }
                
                .feature-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    color: #1C1B1F;
                    margin-bottom: 0.75rem;
                }
                
                .feature-description {
                    color: #616161;
                    line-height: 1.6;
                    flex-grow: 1;
                }
                
                .feature-link {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    color: #9C27B0;
                    text-decoration: none;
                    font-weight: 500;
                    margin-top: 1rem;
                    transition: gap 0.2s ease;
                }
                
                .feature-link:hover {
                    gap: 0.75rem;
                }
                
                .feature-link svg {
                    width: 16px;
                    height: 16px;
                }
                
                @media (max-width: 640px) {
                    .feature-card {
                        padding: 1.5rem;
                    }
                    
                    .feature-icon {
                        width: 50px;
                        height: 50px;
                    }
                    
                    .feature-title {
                        font-size: 1.125rem;
                    }
                }
            </style>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                        ${this.getIconPath(icon)}
                    </svg>
                </div>
                <h3 class="feature-title">${title}</h3>
                <p class="feature-description">${description}</p>
                <a href="#" class="feature-link">
                    Learn more
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </a>
            </div>
        `;
    }
    
    getIconPath(iconName) {
        const icons = {
            'wifi-off': '<path d="M1 1l22 22"></path><path d="M5 12.85a11 11 0 0 1 5.95-5.95"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line>',
            'shield': '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>',
            'smartphone': '<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line>',
            'star': '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>',
            'credit-card': '<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line>',
            'grid': '<rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect>',
            'activity': '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>',
            'message-circle': '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>'
        };
        return icons[iconName] || icons['star'];
    }
}

customElements.define('feature-card', FeatureCard);