{% schema %}
{
  "name": "Motopunk Product Custom",
  "settings": [
    {
      "type": "text",
      "id": "subtitle",
      "label": "Red Subtitle",
      "default": "CNC MACHINED"
    },
    {
      "type": "text",
      "id": "hero_tagline",
      "label": "Hero Tagline",
      "default": "RIDE LOWER. RIDE HARDER."
    }
  ],
  "presets": [
    {
      "name": "Motopunk Product Custom"
    }
  ]
}
{% endschema %}

<style>
  :root {
    --mp-dark: #0a0a0a;
    --mp-darker: #141414;
    --mp-red: #ff1e1e;
    --mp-text: #e0e0e0;
    --mp-border: #333333;
  }

  .motopunk-product-wrapper {
    background-color: var(--mp-dark);
    color: var(--mp-text);
    font-family: 'Inter', sans-serif; /* Replace with your theme font */
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* --- HERO SECTION --- */
  .mp-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
  }
  .mp-hero-text {
    flex: 1;
    min-width: 300px;
  }
  .mp-badge {
    background: #4a0000;
    color: var(--mp-red);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
    border-radius: 2px;
  }
  .mp-hero-title {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 10px 0;
    color: #fff;
  }
  .mp-hero-title span { color: var(--mp-red); }
  .mp-tagline {
    font-style: italic;
    color: #aaa;
    font-size: 18px;
    margin-bottom: 30px;
  }
  .mp-hero-bullets list {
    list-style: none;
    padding: 0;
  }
  .mp-hero-bullets li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
  }
  .mp-hero-bullets li svg { width: 20px; fill: var(--mp-red); }
  
  .mp-hero-image {
    flex: 1.5;
    min-width: 300px;
    position: relative;
  }
  .mp-hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* --- SPECS GRID --- */
  .mp-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
  }
  .mp-spec-card {
    background: var(--mp-darker);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
  }
  .mp-spec-card h4 {
    color: var(--mp-red);
    margin: 0 0 5px 0;
    font-size: 14px;
    text-transform: uppercase;
  }
  .mp-spec-card p {
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
  }
  .mp-spec-card img {
    max-width: 100%;
    height: auto;
  }

  /* --- MAIN BUY AREA --- */
  .mp-buy-area {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }
  .mp-buy-left {
    flex: 1.5;
    min-width: 300px;
  }
  .mp-buy-right {
    flex: 1;
    min-width: 350px;
    background: var(--mp-darker);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    padding: 30px;
  }

  /* Left Side: Title & Description */
  .mp-buy-title {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px 0;
  }
  .mp-reviews {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .mp-stars { color: var(--mp-red); }
  .mp-description {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 30px;
  }
  
  /* Feature Icons */
  .mp-feature-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    border-top: 1px solid var(--mp-border);
    padding-top: 30px;
  }
  .mp-icon-box {
    text-align: center;
    flex: 1;
  }
  .mp-icon-box svg { width: 30px; fill: #fff; margin-bottom: 10px; }
  .mp-icon-box span { display: block; font-size: 12px; color: #aaa; }
  .mp-icon-box strong { display: block; font-size: 13px; color: #fff; }

  /* Accordions */
  .mp-accordion {
    border-top: 1px solid var(--mp-border);
  }
  .mp-accordion-item {
    border-bottom: 1px solid var(--mp-border);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .mp-accordion-item-content {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .mp-accordion-item h4 { margin: 0; font-size: 16px; color: #fff; }
  .mp-accordion-item p { margin: 5px 0 0 0; font-size: 13px; color: #888; }

  /* Right Side: Price Box */
  .mp-price-compare {
    text-decoration: line-through;
    color: #888;
    font-size: 18px;
  }
  .mp-discount-badge {
    background: var(--mp-red);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
  }
  .mp-price-current {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    margin: 5px 0;
  }
  .mp-tax-note { font-size: 12px; color: #888; margin-bottom: 20px; }
  .mp-urgency {
    color: #00ff00;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .mp-add-to-cart {
    width: 100%;
    background: var(--mp-red);
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 15px;
  }
  .mp-add-to-cart:hover { background: #cc0000; }
  
  .mp-payment-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .mp-payment-btn {
    flex: 1;
    background: #000;
    border: 1px solid var(--mp-border);
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
  }
  
  .mp-trust-badges {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    border-top: 1px solid var(--mp-border);
    padding-top: 15px;
  }
</style>

<div class="motopunk-product-wrapper">
  
  <!-- HERO SECTION -->
  <div class="mp-hero">
    <div class="mp-hero-text">
      <div class="mp-badge">{{ section.settings.subtitle }}</div>
      <!-- Dynamically pulls product title and splits for the red highlight, or you can hardcode based on need -->
      <h1 class="mp-hero-title">51MM<br>CAFE RACER<br><span>CLIP-ONS</span></h1>
      <div class="mp-tagline">{{ section.settings.hero_tagline }}</div>
      
      <ul class="mp-hero-bullets">
        <li><span>Shield Icon</span> PREMIUM QUALITY</li>
        <li><span>Gear Icon</span> PERFECT FITMENT</li>
        <li><span>Flag Icon</span> RACE INSPIRED</li>
        <li><span>Check Icon</span> BUILT TO LAST</li>
      </ul>
    </div>
    <div class="mp-hero-image">
      <!-- Renders the primary product image -->
      <img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.title }}">
    </div>
  </div>

  <!-- TECH SPECS GRID (Ideally driven by product metafields in the future) -->
  <div class="mp-specs-grid">
    <div class="mp-spec-card">
      <h4>360° ROTATION</h4>
      <p>FULLY ADJUSTABLE</p>
      <!-- Placeholder for spec image -->
    </div>
    <div class="mp-spec-card">
      <h4>DIMENSIONS</h4>
      <p>PRECISE ENGINEERING</p>
      <!-- Placeholder for spec image -->
    </div>
    <div class="mp-spec-card">
      <h4>FORK TUBE FITMENT</h4>
      <p>51MM (2 INCH)</p>
      <!-- Placeholder for spec image -->
    </div>
    <div class="mp-spec-card">
      <h4>RISER HEIGHT</h4>
      <p>40MM (1 37/64INCH)</p>
      <!-- Placeholder for spec image -->
    </div>
  </div>

  <!-- MAIN BUY AREA -->
  <div class="mp-buy-area">
    
    <!-- Left Column -->
    <div class="mp-buy-left">
      <h2 class="mp-buy-title">{{ product.title }}</h2>
      <div class="mp-reviews">
        <span class="mp-stars">★★★★★</span> 4.9 Rider Rated (128 Reviews)
      </div>
      
      <div class="mp-description">
        {{ product.description }}
      </div>

      <div class="mp-feature-icons">
        <div class="mp-icon-box">
          <strong>CNC</strong>
          <span>Machined</span>
        </div>
        <div class="mp-icon-box">
          <strong>6061-T6</strong>
          <span>Aluminum</span>
        </div>
        <div class="mp-icon-box">
          <strong>Anodized</strong>
          <span>Finish</span>
        </div>
        <div class="mp-icon-box">
          <strong>Lightweight</strong>
          <span>& Strong</span>
        </div>
      </div>

      <!-- Accordions -->
      <div class="mp-accordion">
        <div class="mp-accordion-item">
          <div class="mp-accordion-item-content">
            <div>
              <h4>FITMENT DETAILS</h4>
              <!-- This text can be mapped to a metafield later for the compatibility marketplace -->
              <p>Compatible with most 51mm (2 inch) fork tubes.</p>
            </div>
          </div>
          <span>+</span>
        </div>
        <div class="mp-accordion-item">
          <div class="mp-accordion-item-content">
            <div>
              <h4>ENGINEERING & MATERIALS</h4>
              <p>CNC Machined 6061-T6 Aluminum with black anodized finish.</p>
            </div>
          </div>
          <span>+</span>
        </div>
        <div class="mp-accordion-item">
          <div class="mp-accordion-item-content">
            <div>
              <h4>SHIPPING & RETURNS</h4>
              <p>Fast shipping across India. 7-day easy returns.</p>
            </div>
          </div>
          <span>+</span>
        </div>
      </div>
    </div>

    <!-- Right Column (Buy Box) -->
    <div class="mp-buy-right">
      {% form 'product', product %}
        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
        
        <div class="mp-price-wrapper">
          <span class="mp-price-compare">{{ product.compare_at_price | money }}</span>
          {% if product.compare_at_price > product.price %}
            {% assign discount = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
            <span class="mp-discount-badge">{{ discount }}% OFF</span>
          {% endif %}
          <div class="mp-price-current">{{ product.price | money }}</div>
          <div class="mp-tax-note">(Incl. of all taxes)</div>
        </div>

        <div class="mp-urgency">
          ✓ ONLY {{ product.selected_or_first_available_variant.inventory_quantity }} UNITS REMAINING
        </div>

        <button type="submit" class="mp-add-to-cart">
          SECURE MY KIT – {{ product.price | money }}
        </button>

        <!-- Mock Payment Buttons -->
        <div class="mp-payment-icons">
          <div class="mp-payment-btn">G Pay</div>
          <div class="mp-payment-btn">PhonePe</div>
        </div>

        <div class="mp-trust-badges">
          <span>Secure Payment</span>
          <span>Easy Returns</span>
          <span>Fast Shipping</span>
        </div>
      {% endform %}
    </div>

  </div>
</div>

<script>
  // Simple script for accordion functionality
  document.querySelectorAll('.mp-accordion-item').forEach(item => {
    item.addEventListener('click', () => {
      // Add logic here to expand/collapse content if needed
      item.classList.toggle('active');
    });
  });
</script>