{% comment %}
  Custom Footer Section - Figma Style (Logo, About, Social Icons & 3 Menus)
{% endcomment %}

<style>
  .site-footer-{{ section.id }} {
    background-color: {{ section.settings.bg_color }};
    padding: 40px 0 30px 0;
    font-family: 'Inter', sans-serif;
    border-top: 1px solid #e8e8e8;
  }

  .footer-container {
    max-width: 1347px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
  }

  /* Left Side: Logo & About */
  .footer-brand-info {
    flex: 1 1 300px;
  }

  .footer-brand-info h2 {
    margin: 0 0 20px 0;
    color: #000;
    text-transform: uppercase;
    font-family: Georgia;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    color:#000000;
    padding-bottom:16px;
    text-align:left;

    }

  .footer-brand-info p {
    max-width: 350px;
    margin-bottom: 25px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    color:#000000;
    padding-bottom:16px;
    text-align:left

  }

  .footer-socials {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .footer-socials a {
    display: inline-block;
    transition: opacity 0.3s;
  }

  .footer-socials a:hover {
    opacity: 0.7;
  }

  .footer-socials img {
    width: 20px; /* Adjust icon size */
    height: auto;
    display: block;
  }

  /* Right Side: Menus */
  .footer-nav-wrapper {
    display: flex;
    gap:45px;
    flex-wrap: wrap;
  }

  .footer-menu-column {
    min-width: 150px;
  }

  .footer-menu-column h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #000;
  }

  .footer-menu-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-menu-column ul li {
    margin-bottom: 8px;
  }

  .footer-menu-column ul li a {
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    color:#000000;
    }

  .footer-menu-column ul li a:hover {
    color: #000;
  }

  /* Bottom Copyright */
  .footer-copyright {
    text-align: center;
    margin-top:36px;
    padding-top: 20px;
    border-top: 1px solid #1E2939;
    color: #99A1AF;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    text-align: center;

  }

  /* Responsive */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      text-align:left !important;
    }
    .footer-brand-info p {
      margin: 0 auto 25px auto;
    }
    .footer-socials {
      justify-content:left;
    }
    .footer-nav-wrapper {
      justify-content:left !important;
      gap: 30px;
    }
    .footer-menu-column {
      flex: 1 1 100%;
    }
    .footer-brand-info {
    flex: 1 1 149px;
}
  }
</style>

<footer class="site-footer-{{ section.id }}">
  <div class="footer-container">
    
    <div class="footer-brand-info">
      <h2>{{ section.settings.logo_text }}</h2>
      <p>{{ section.settings.about_text }}</p>
      
      <div class="footer-socials">
        {% if section.settings.social_icon_1 != blank %}
          <a href="{{ section.settings.social_link_1 }}"><img src="{{ section.settings.social_icon_1 | img_url: '40x' }}" alt="Social 1"></a>
        {% endif %}
        {% if section.settings.social_icon_2 != blank %}
          <a href="{{ section.settings.social_link_2 }}"><img src="{{ section.settings.social_icon_2 | img_url: '40x' }}" alt="Social 2"></a>
        {% endif %}
        {% if section.settings.social_icon_3 != blank %}
          <a href="{{ section.settings.social_link_3 }}"><img src="{{ section.settings.social_icon_3 | img_url: '40x' }}" alt="Social 3"></a>
        {% endif %}
        {% if section.settings.social_icon_4 != blank %}
          <a href="{{ section.settings.social_link_4 }}"><img src="{{ section.settings.social_icon_4 | img_url: '40x' }}" alt="Social 4"></a>
        {% endif %}
      </div>
    </div>

    <div class="footer-nav-wrapper">
      {% for block in section.blocks %}
        <div class="footer-menu-column" {{ block.shopify_attributes }}>
          <h4>{{ block.settings.heading }}</h4>
          <ul>
            {% for link in block.settings.menu.links %}
              <li><a href="{{ link.url }}">{{ link.title }}</a></li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>

  </div>

  <div class="footer-copyright">
    &copy; {{ 'now' | date: "%Y" }} {{ section.settings.copyright_text }}
  </div>
</footer>

{% schema %}
{
  "name": "Custom Theme Footer",
  "max_blocks": 3,
  "settings": [
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "logo_text",
      "label": "Logo Text",
      "default": "AURELLIA"
    },
    {
      "type": "textarea",
      "id": "about_text",
      "label": "About Text",
      "default": "Crafting timeless elegance since 1985. Every piece tells a story of luxury and sophistication."
    },
    {
      "type": "header",
      "content": "Social Media Icons"
    },
    {
      "type": "image_picker",
      "id": "social_icon_1",
      "label": "Social Icon 1"
    },
    {
      "type": "url",
      "id": "social_link_1",
      "label": "Social Link 1"
    },
    {
      "type": "image_picker",
      "id": "social_icon_2",
      "label": "Social Icon 2"
    },
    {
      "type": "url",
      "id": "social_link_2",
      "label": "Social Link 2"
    },
    {
      "type": "image_picker",
      "id": "social_icon_3",
      "label": "Social Icon 3"
    },
    {
      "type": "url",
      "id": "social_link_3",
      "label": "Social Link 3"
    },
    {
      "type": "image_picker",
      "id": "social_icon_4",
      "label": "Social Icon 4"
    },
    {
      "type": "url",
      "id": "social_link_4",
      "label": "Social Link 4"
    },
    {
      "type": "header",
      "content": "Copyright"
    },
    {
      "type": "text",
      "id": "copyright_text",
      "label": "Copyright Text",
      "default": "Aurellia Fine Jewelry. All rights reserved."
    }
  ],
  "blocks": [
    {
      "type": "menu",
      "name": "Footer Menu",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Menu Heading",
          "default": "Shop"
        },
        {
          "type": "link_list",
          "id": "menu",
          "label": "Select Menu"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Theme Footer",
      "blocks": [
        { "type": "menu", "settings": { "heading": "Shop" } },
        { "type": "menu", "settings": { "heading": "Customer Service" } },
        { "type": "menu", "settings": { "heading": "About Us" } }
      ]
    }
  ]
}
{% endschema %}