components/blog-section.js

class BlogSection extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 5rem 1rem;
          background: #0F172A;
        }
        
        .container {
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .section-header {
          text-align: center;
          margin-bottom: 3rem;
        }
        
        .section-title {
          font-size: 2.5rem;
          margin-bottom: 1rem;
          color: #F8FAFC;
        }
        
        .section-subtitle {
          color: #94A3B8;
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.6;
        }
        
        .blog-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
        }
        
        .blog-card {
          background: rgba(30, 41, 59, 0.5);
          border: 1px solid #1E293B;
          border-radius: 10px;
          overflow: hidden;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .blog-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.2), 0 10px 10px -5px rgba(212, 175, 55, 0.1);
          border-color: #D4AF37;
        }
        
        .blog-image {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
        
        .blog-content {
          padding: 1.5rem;
        }
        
        .blog-category {
          color: #D4AF37;
          font-weight: 600;
          font-size: 0.875rem;
          text-transform: uppercase;
          margin-bottom: 0.5rem;
        }
        
        .blog-title {
          font-size: 1.25rem;
          margin-bottom: 0.75rem;
          color: #F8FAFC;
        }
        
        .blog-excerpt {
          color: #94A3B8;
          margin-bottom: 1rem;
          line-height: 1.6;
        }
        
        .blog-meta {
          display: flex;
          justify-content: space-between;
          color: #64748B;
          font-size: 0.875rem;
        }
        
        .blog-link {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          color: #D4AF37;
          text-decoration: none;
          font-weight: 500;
          margin-top: 1rem;
        }
        
        .blog-link:hover {
          text-decoration: underline;
        }
      </style>
      
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Sailing Insights & Tips</h2>
          <p class="section-subtitle">Learn from our experts and enhance your sailing knowledge</p>
        </div>
        
        <div class="blog-grid">
          <div class="blog-card">
            <img src="http://static.photos/nature/320x240/10" alt="Navigating the Solent" class="blog-image">
            <div class="blog-content">
              <div class="blog-category">Navigation</div>
              <h3 class="blog-title">Mastering Solent Tides: A Sailor's Guide</h3>
              <p class="blog-excerpt">
                Understanding the complex tidal patterns of the Solent is crucial for safe sailing. 
                Our expert tips will help you navigate like a pro.
              </p>
              <div class="blog-meta">
                <span>June 15, 2026</span>
                <span>5 min read</span>
              </div>
              <a href="#" class="blog-link">
                <span>Read More</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
          
          <div class="blog-card">
            <img src="http://static.photos/nature/320x240/11" alt="Weather Planning" class="blog-image">
            <div class="blog-content">
              <div class="blog-category">Safety</div>
              <h3 class="blog-title">Weather Planning for Coastal Sailing</h3>
              <p class="blog-excerpt">
                Learn how to interpret weather forecasts and make informed decisions 
                about when to sail and when to stay ashore.
              </p>
              <div class="blog-meta">
                <span>June 10, 2026</span>
                <span>7 min read</span>
              </div>
              <a href="#" class="blog-link">
                <span>Read More</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
          
          <div class="blog-card">
            <img src="http://static.photos/nature/320x240/12" alt="Boat Maintenance" class="blog-image">
            <div class="blog-content">
              <div class="blog-category">Maintenance</div>
              <h3 class="blog-title">Essential Boat Maintenance Checklist</h3>
              <p class="blog-excerpt">
                Keep your yacht in perfect condition with our comprehensive maintenance 
                guide covering engines, sails, and safety equipment.
              </p>
              <div class="blog-meta">
                <span>June 5, 2026</span>
                <span>6 min read</span>
              </div>
              <a href="#" class="blog-link">
                <span>Read More</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    `;
    
    // Initialize feather icons
    import('https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js').then(() => {
      feather.replace({ icons: this.shadowRoot.querySelectorAll('[data-feather]') });
    });
  }
}

customElements.define('blog-section', BlogSection);