<footer class="text-gray-300 pt-[20px]" data-component-type="Footer">
  <div class="max-w-[90%] mx-auto md:px-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
      <div>
        <a
          data-node="footer_logo_link"
          data-node-type="page_links"
          data-node-label="Footer Logo Link"
          data-node-default="/"
          href="{{footer_logo_link}}"
          class="inline-flex items-center"
        >
          <img
            data-node="footer_logo"
            data-node-type="file"
            data-node-label="Footer Logo"
            data-node-default="../assets/Logo.png"
            src="{{footer_logo}}"
            class="w-[130px] h-auto"
            alt="Footer Logo"
          />
        </a>

        <p
          data-node="footer_address"
          data-node-type="text"
          data-node-label="Footer Address"
          data-node-default="Riverside Building, County Hall, London SE1 7PB, UK"
          class="mt-4 text-[#5C5C5C]"
        >
          <b>{{footer_address}}</b>
        </p>
      </div>

      <div>
        <h3
          data-node="footer_contact_heading"
          data-node-type="text"
          data-node-label="Contact Heading"
          data-node-default="Contact Info"
          class="text-[#534931] font-semibold text-[25px] mb-[20px]"
        >
          {{footer_contact_heading}}
        </h3>

        <ul class="space-y-3">
          <li class="flex items-center gap-3">
            <img
              data-node="footer_phone_icon"
              data-node-type="file"
              data-node-default="../assets/FooterImages/Icon.png"
              src="{{footer_phone_icon}}"
              class="w-[15px]"
            />
            <a
              data-node="footer_phone_1"
              data-node-type="text"
              data-node-default="+1 (800) 234-65-78"
              href="tel:{{footer_phone_1}}"
              class="text-[15px] text-[#5C5C5C]"
            >
              <b>{{footer_phone_1}}</b>
            </a>
          </li>

          <li class="flex items-center gap-3">
            <img
              data-node="footer_phone_icon_2"
              data-node-type="file"
              data-node-default="../assets/FooterImages/Icon.png"
              src="{{footer_phone_icon_2}}"
              class="w-[15px]"
            />
            <a
              data-node="footer_phone_2"
              data-node-type="text"
              data-node-default="+1 (800) 234-65-78"
              href="tel:{{footer_phone_2}}"
              class="text-[15px] text-[#5C5C5C]"
            >
              <b>{{footer_phone_2}}</b>
            </a>
          </li>

          <li class="flex items-center gap-3">
            <img
              data-node="footer_email_icon"
              data-node-type="file"
              data-node-default="../assets/FooterImages/Icon2.png"
              src="{{footer_email_icon}}"
              class="w-[15px]"
            />
            <a
              data-node="footer_email"
              data-node-type="text"
              data-node-default="cafe@example.com"
              href="mailto:{{footer_email}}"
              class="text-[15px] text-[#5C5C5C]"
            >
              <b>{{footer_email}}</b>
            </a>
          </li>
        </ul>
      </div>

      <div>
        <h3
          data-node="footer_hours_heading"
          data-node-type="text"
          data-node-default="Opening Hours"
          class="text-[#534931] font-semibold text-[25px] mb-[20px]"
        >
          {{footer_hours_heading}}
        </h3>

        <ul class="space-y-3">
          <li>
            <span
              data-node="footer_day_1"
              data-node-type="text"
              data-node-default="Mon – Fri"
              class="text-[#534931] font-bold"
            >
              {{footer_day_1}}
            </span>
            <span
              data-node="footer_time_1"
              data-node-type="text"
              data-node-default="from 8am to 9pm"
              class="text-[#5C5C5C] ml-2"
            >
              {{footer_time_1}}
            </span>
          </li>

          <li>
            <span
              data-node="footer_day_2"
              data-node-type="text"
              data-node-default="Saturday"
              class="text-[#534931] font-bold"
            >
              {{footer_day_2}}
            </span>
            <span
              data-node="footer_time_2"
              data-node-type="text"
              data-node-default="from 9am to 4pm"
              class="text-[#5C5C5C] ml-2"
            >
              {{footer_time_2}}
            </span>
          </li>

          <li>
            <span
              data-node="footer_day_3"
              data-node-type="text"
              data-node-default="Sunday"
              class="text-[#534931] font-bold"
            >
              {{footer_day_3}}
            </span>
            <span
              data-node="footer_time_3"
              data-node-type="text"
              data-node-default="from 9am to 4pm"
              class="text-[#5C5C5C] ml-2"
            >
              {{footer_time_3}}
            </span>
          </li>
        </ul>
      </div>

      <div>
        <h3
          data-node="footer_social_heading"
          data-node-type="text"
          data-node-default="Follow Our Activity"
          class="text-[#534931] font-semibold text-[25px] mb-[20px]"
        >
          {{footer_social_heading}}
        </h3>

        <p
          data-node="footer_social_text"
          data-node-type="text"
          data-node-default="We are in social networks"
          class="text-[#534931] text-[15px]"
        >
          <b>{{footer_social_text}}</b>
        </p>

        <div class="flex space-x-4 mt-6">
          <img
            data-node="footer_social_1"
            data-node-type="file"
            data-node-default="../assets/FooterImages/twitter.png"
            src="{{footer_social_1}}"
            class="w-[40px]"
          />
          <img
            data-node="footer_social_2"
            data-node-type="file"
            data-node-default="../assets/FooterImages/facebook.png"
            src="{{footer_social_2}}"
            class="w-[40px]"
          />
          <img
            data-node="footer_social_3"
            data-node-type="file"
            data-node-default="../assets/FooterImages/insta.png"
            src="{{footer_social_3}}"
            class="w-[40px]"
          />
        </div>
      </div>
    </div>
  </div>

  <div class="max-w-[90%] py-[30px]">
    <div
      class="max-w-[84%] mx-auto flex flex-col md:flex-row justify-between items-center"
    >
      <div class="text-center md:text-start text-[#5C5C5C]">
        <b
          data-node="footer_copyright"
          data-node-type="text"
          data-node-default="© 2025, All Rights Reserved."
          >{{footer_copyright}}</b
        >
      </div>
    </div>
  </div>
</footer>
