components/footer.js

class ShopFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background: linear-gradient(135deg, #1f2937, #374151);
          color: white;
          padding: 4rem 0 2rem;
          margin-top: 6rem;
        }
        
        .footer-content {
          max-width: 1400px;
          margin: 0 auto;
          padding: 0 2rem;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 3rem;
        }
        
        .footer-section h3 {
          margin-bottom: 1.5rem;
          font-size: 1.2rem;
          color: #fbbf24;
        }
        
        .footer-section ul {
          list-style: none;
        }
        
        .footer-section ul li {
          margin-bottom: 0.8rem;
        }
        
        .footer-section a {
          color: #d1d5db;
          text-decoration: none;
          transition: color 0.3s ease;
        }
        
        .footer-section a:hover {
          color: #fbbf24;
        }
        
        .social-icons {
          display: flex;
          gap: 1rem;
          margin-top: 1rem;
        }
        
        .social-icon {
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }
        
        .social-icon:hover {
          background: #fbbf24;
          transform: scale(1.1);
        }
        
        .footer-bottom {
          text-align: center;
          padding: 2rem;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          margin-top: 3rem;
        }
      </style>
      
      <footer>
        <div class="footer-content">
          <div class="footer-section">
            <h3>درباره شاپ‌ویستا</h3>
            <p>فروشگاه آنلاین شاپ‌ویستا با هدف ارائه بهترین محصولات با کیفیت و قیمت مناسب فعالیت می‌کند.</p>
            <div class="social-icons">
              <div class="social-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
              </div>
              <div class="social-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                  <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                </svg>
              </div>
              <div class="social-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z"/>
                  <path d="M12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zm0 10.162a3.999 3.999 0 110-7.998 3.999 3.999 0 010 7.998z"/>
                  <circle cx="18.406" cy="5.594" r="1.44"/>
                </svg>
              </div>
            </div>
          </div>
          
          <div class="footer-section">
            <h3>لینک‌های سریع</h3>
            <ul>
              <li><a href="/about.html">درباره ما</a></li>
              <li><a href="/contact.html">تماس با ما</a></li>
              <li><a href="/faq.html">سوالات متداول</a></li>
              <li><a href="/privacy.html">حریم خصوصی</a></li>
              <li><a href="/terms.html">شرایط استفاده</a></li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h3>خدمات مشتریان</h3>
            <ul>
              <li><a href="/shipping.html">روش‌های ارسال</a></li>
              <li><a href="/returns.html">بازگشت کالا</a></li>
              <li><a href="/warranty.html">ضمانت کالا</a></li>
              <li><a href="/support.html">پشتیبانی</a></li>
              <li><a href="/track-order.html">پیگیری سفارش</a></li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h3>اطلاعات تماس</h3>
            <ul>
              <li>آدرس: تهران، خیابان ولیعصر، پلاک 123</li>
              <li>تلفن: 021-12345678</li>
              <li>ایمیل: info@shopvista.ir</li>
              <li>ساعت کاری: شنبه تا چهارشنبه 9:00 تا 18:00</li>
            </ul>
          </div>
        </div>
        
        <div class="footer-bottom">
          <p>&copy; 2024 شاپ‌ویستا. تمامی حقوق محفوظ است.</p>
        </div>
      </footer>
    `;
  }
}

customElements.define('shop-footer', ShopFooter);