{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}

{% block layout_footer_inner_container %}
  <footer class="footer-main" dir="auto">
    <div class="container">
      <div class="row">
        {# About ASOCUT Column #}
        <div class="col-lg-4 col-md-6 footer-column mb-4 mb-lg-0">
          <div class="footer-logo mb-3">
            <img class="logo" src="{{ theme_config('sw-logo-desktop') }}" alt="{{ salesChannel.translated.name }}" />
          </div>
          <p class="footer-description">{{ 'theme.aboutAsocutText'|trans|default('Leading supplier of premium construction and maintenance tools since 2015. Trusted by professionals worldwide.')|raw }}</p>

          {# Social Media Icons #}
          <div class="footer-social mt-4">
            <h6 class="footer-social-title">{{ 'theme.followUs'|trans|default('Follow Us') }}</h6>
            <div class="social-icons">
              <a href="#" target="_blank" rel="noopener" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
              <a href="#" target="_blank" rel="noopener" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a>
              <a href="#" target="_blank" rel="noopener" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
              <a href="#" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>

        {# Quick Links Column #}
        <div class="col-lg-2 col-md-6 footer-column mb-4 mb-lg-0">
          <h5 class="footer-column-title">{{ 'theme.quickLinks'|trans|default('Quick Links') }}</h5>
          <ul class="footer-links">
            <li>
              <a href="{{ path('frontend.home.page') }}">{{ 'general.homeLink'|trans|default('Home') }}</a>
            </li>
            <li>
              <a href="{{ path('frontend.cms.page', { id: config('core.basicInformation.contactPage') }) }}">{{ 'theme.contactUs'|trans|default('Contact Us') }}</a>
            </li>
            <li>
              <a href="{{ path('frontend.cms.page', { id: config('core.basicInformation.shippingPaymentInfoPage') }) }}">{{ 'theme.shippingInfo'|trans|default('Shipping Info') }}</a>
            </li>
            <li>
              <a href="{{ path('frontend.cms.page', { id: config('core.basicInformation.privacyPage') }) }}">{{ 'theme.privacyPolicy'|trans|default('Privacy Policy') }}</a>
            </li>
            <li>
              <a href="{{ path('frontend.cms.page', { id: config('core.basicInformation.tosPage') }) }}">{{ 'theme.termsOfService'|trans|default('Terms of Service') }}</a>
            </li>
          </ul>
        </div>

        {# Categories - FIXED ✅ #}
        <div class="col-lg-2 col-md-6 footer-column mb-4 mb-lg-0">
          <h5 class="footer-column-title">Categories</h5>

          {% if page.header.navigation.tree is defined and (page.header.navigation.tree|length) > 0 %}
            <ul class="footer-links">
              {% for item in page.header.navigation.tree %}
                {% if item.category and item.category.type == 'page' and item.category.level > 1 %}
                  <li>
                    <a href="{{ path('frontend.navigation.page', { navigationId: item.category.id }) }}">{{ item.category.translated.name }}</a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>
          {% else %}
            {# Fallback: استخدم IDs مباشرة #}
            <ul class="footer-links">
              <li>
                <a href="{{ path('frontend.navigation.page', { navigationId: '019aa0b72dc6774297cc5f2ebe8c93c3' }) }}">{{ 'all products'|trans|default('Terms of Service') }}</a>
              </li>
              <li>
                <a href="{{ path('frontend.navigation.page', { navigationId: '019a7967c2c872f8bd119b683a488ce0' }) }}">Router Cutter</a>
              </li>
              <li>
                <a href="{{ path('frontend.navigation.page', { navigationId: '019a79683d3f79178da949cfa2ba0ed9' }) }}">Drill Bits</a>
              </li>
              <li>
                <a href="{{ path('frontend.navigation.page', { navigationId: '019a7968586a7133b2e4fe594e78b3d9' }) }}">Saw Blades</a>
              </li>
            </ul>
          {% endif %}
        </div>

        {# Newsletter Column #}
        <div class="col-lg-4 col-md-6 footer-column mb-4 mb-lg-0">
          <h5 class="footer-column-title">{{ 'account.newsletterTitle'|trans|default('Newsletter') }}</h5>
          <p class="footer-newsletter-text">{{ 'footer.newsletter'|trans|default('Subscribe to our newsletter for the latest updates and offers.') }}</p>

          {# Newsletter Form #}
          <form class="footer-newsletter-form" method="post" action="{{ path('frontend.form.newsletter.register.handle') }}">
            <div class="input-group">
              <input type="email" name="email" class="form-control" placeholder="{{ 'footer.newsletterInput'|trans|default('Your email address') }}" required aria-label="{{ 'theme.emailPlaceholder'|trans|default('Your email address') }}" />
              <button class="btn btn-primary" type="submit">{{ 'newsletter.formSubmit'|trans|default('Subscribe') }}</button>
            </div>
          </form>
          {# Resources Column #}
        </div>
        <div>
          <a class="catalogue btn btn-primary float-end mt-3" target="_blank" href="124c71d524604ccbad6042edce3ac799/mediaId/019adbb1dbd3700d955a969bd2b89319#" rel="noreferrer noopener"><i class="bi bi-file-pdf footer-icon"></i>Products catalogue</a>
        </div>
      </div>

      {# Footer Bottom #}
      <div class="footer-bottom">
        <p>&copy; {{ 'now'|date('Y') }} ASOCUT.
          {{ 'theme.allRightsReserved'|trans|default('All rights reserved.') }}</p>
      </div>
    </div>
  </footer>
{% endblock %}