<%# Barcelona Theme - Mediterranean Coastal Footer %>
<%# Warm, inviting design with coastal blues and golden accents %>
<footer class="bg-gradient-to-b from-pwb-secondary-800 to-pwb-secondary-900 text-warm-200">
  <!-- Wave Decoration - Mediterranean Coastal Wave -->
  <div class="relative -mb-1">
    <svg class="w-full h-16 text-warm-50 fill-current" viewBox="0 0 1440 64" preserveAspectRatio="none">
      <path d="M0,32 C180,64 360,0 540,32 C720,64 900,0 1080,32 C1260,64 1440,32 1440,32 L1440,64 L0,64 Z"></path>
    </svg>
  </div>

  <!-- Main Footer Content -->
  <div class="container mx-auto px-6 py-16">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12">

      <!-- Brand & Social Column -->
      <div class="lg:col-span-4">
        <div class="mb-8">
          <% if @current_website.logo_url.present? %>
            <img src="<%= @current_website.logo_url %>"
                 class="h-12 w-auto brightness-0 invert opacity-80"
                 alt="<%= company_display_name %>"
                 loading="lazy" decoding="async">
          <% else %>
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12 bg-gradient-to-br from-pwb-accent-400 to-pwb-accent-500 rounded-soft flex items-center justify-center">
                <%= icon(:home, class: "text-pwb-secondary-900 text-2xl") %>
              </div>
              <span class="font-display font-semibold text-2xl text-white">
                <%= company_display_name %>
              </span>
            </div>
          <% end %>
        </div>

        <p class="text-pwb-secondary-200 leading-relaxed mb-8 max-w-sm">
          <%= @current_agency&.company_name || "Your trusted partner in finding the perfect property." %>
        </p>

        <!-- Social Icons - Mediterranean Style -->
        <div class="flex items-center space-x-3">
          <% if @current_website.respond_to?(:social_media_facebook) && @current_website.social_media_facebook.present? %>
            <a href="<%= @current_website.social_media_facebook %>" target="_blank"
               class="w-11 h-11 flex items-center justify-center bg-pwb-secondary-700 text-pwb-secondary-300 rounded-full hover:bg-pwb-accent hover:text-pwb-secondary-900 transition-all duration-300">
              <%= brand_icon(:facebook, size: 20) %>
            </a>
          <% end %>
          <% if @current_website.respond_to?(:social_media_twitter) && @current_website.social_media_twitter.present? %>
            <a href="<%= @current_website.social_media_twitter %>" target="_blank"
               class="w-11 h-11 flex items-center justify-center bg-pwb-secondary-700 text-pwb-secondary-300 rounded-full hover:bg-pwb-accent hover:text-pwb-secondary-900 transition-all duration-300">
              <%= brand_icon(:x, size: 20) %>
            </a>
          <% end %>
          <% if @current_website.respond_to?(:social_media_linkedin) && @current_website.social_media_linkedin.present? %>
            <a href="<%= @current_website.social_media_linkedin %>" target="_blank"
               class="w-11 h-11 flex items-center justify-center bg-pwb-secondary-700 text-pwb-secondary-300 rounded-full hover:bg-pwb-accent hover:text-pwb-secondary-900 transition-all duration-300">
              <%= brand_icon(:linkedin, size: 20) %>
            </a>
          <% end %>
          <% if @current_website.respond_to?(:social_media_instagram) && @current_website.social_media_instagram.present? %>
            <a href="<%= @current_website.social_media_instagram %>" target="_blank"
               class="w-11 h-11 flex items-center justify-center bg-pwb-secondary-700 text-pwb-secondary-300 rounded-full hover:bg-pwb-accent hover:text-pwb-secondary-900 transition-all duration-300">
              <%= brand_icon(:instagram, size: 20) %>
            </a>
          <% end %>
          <% if @current_website.respond_to?(:social_media_youtube) && @current_website.social_media_youtube.present? %>
            <a href="<%= @current_website.social_media_youtube %>" target="_blank"
               class="w-11 h-11 flex items-center justify-center bg-pwb-secondary-700 text-pwb-secondary-300 rounded-full hover:bg-pwb-accent hover:text-pwb-secondary-900 transition-all duration-300">
              <%= brand_icon(:youtube, size: 20) %>
            </a>
          <% end %>
          <% if @current_website.respond_to?(:social_media_whatsapp) && @current_website.social_media_whatsapp.present? %>
            <a href="<%= @current_website.social_media_whatsapp %>" target="_blank"
               class="w-11 h-11 flex items-center justify-center bg-pwb-secondary-700 text-pwb-secondary-300 rounded-full hover:bg-pwb-accent hover:text-pwb-secondary-900 transition-all duration-300">
              <%= brand_icon(:whatsapp, size: 20) %>
            </a>
          <% end %>
        </div>
      </div>

      <!-- Quick Links Column -->
      <div class="lg:col-span-2">
        <h4 class="font-display font-semibold text-white text-lg mb-6">
          <%= t('pwb.footer.explore', default: 'Explore') %>
        </h4>
        <ul class="space-y-3">
          <li>
            <a href="<%= localized_buy_path %>" class="text-pwb-secondary-300 hover:text-pwb-accent-400 transition-colors duration-200 flex items-center group">
              <%= icon(:chevron_right, size: :xs, class: "mr-2 opacity-0 group-hover:opacity-100 transition-opacity") %>
              <%= t('pwb.navbar.buy', default: 'Buy') %>
            </a>
          </li>
          <li>
            <a href="<%= localized_rent_path %>" class="text-pwb-secondary-300 hover:text-pwb-accent-400 transition-colors duration-200 flex items-center group">
              <%= icon(:chevron_right, size: :xs, class: "mr-2 opacity-0 group-hover:opacity-100 transition-opacity") %>
              <%= t('pwb.navbar.rent', default: 'Rent') %>
            </a>
          </li>
          <% @current_website.links.ordered_visible_footer.first(4).each do |page| %>
            <% target_path = nil %>
            <% begin %>
              <% if page.link_path.present? %>
                <% target_path = main_app.send(page.link_path, page.link_path_params, { locale: locale }) %>
              <% elsif page.link_url.present? %>
                <% target_path = page.link_url %>
              <% end %>
            <% rescue StandardError %>
            <% end %>
            <% if target_path %>
              <li>
                <%= link_to target_path, class: "text-pwb-secondary-300 hover:text-pwb-accent-400 transition-colors duration-200 flex items-center group" do %>
                  <%= icon(:chevron_right, size: :xs, class: "mr-2 opacity-0 group-hover:opacity-100 transition-opacity") %>
                  <%= page.link_title %>
                <% end %>
              </li>
            <% end %>
          <% end %>
          <li>
            <%= link_to "/pwb_login", class: "text-pwb-secondary-300 hover:text-pwb-accent-400 transition-colors duration-200 flex items-center group" do %>
              <%= icon(:chevron_right, size: :xs, class: "mr-2 opacity-0 group-hover:opacity-100 transition-opacity") %>
              <%= I18n.t("signIn") %>
            <% end %>
          </li>
        </ul>
      </div>

      <!-- Contact Info Column -->
      <div class="lg:col-span-3">
        <h4 class="font-display font-semibold text-white text-lg mb-6">
          <%= t('pwb.footer.contact', default: 'Get in Touch') %>
        </h4>
        <ul class="space-y-4">
          <% if @current_agency&.phone_number_primary.present? %>
            <li>
              <a href="tel:<%= @current_agency.phone_number_primary %>"
                 class="flex items-start text-pwb-secondary-300 hover:text-pwb-accent-400 transition-colors duration-200 group">
                <span class="w-10 h-10 flex items-center justify-center bg-pwb-secondary-700 rounded-full mr-4 group-hover:bg-pwb-accent/20 transition-colors">
                  <%= icon(:phone, class: "text-pwb-accent-400") %>
                </span>
                <span class="pt-2"><%= @current_agency.phone_number_primary %></span>
              </a>
            </li>
          <% end %>
          <% if @current_agency&.email_primary.present? %>
            <li>
              <a href="mailto:<%= @current_agency.email_primary %>"
                 class="flex items-start text-pwb-secondary-300 hover:text-pwb-accent-400 transition-colors duration-200 group">
                <span class="w-10 h-10 flex items-center justify-center bg-pwb-secondary-700 rounded-full mr-4 group-hover:bg-pwb-accent/20 transition-colors">
                  <%= icon(:email, class: "text-pwb-accent-400") %>
                </span>
                <span class="pt-2 break-all"><%= @current_agency.email_primary %></span>
              </a>
            </li>
          <% end %>
          <% if @current_agency.respond_to?(:full_address) && @current_agency.full_address.present? %>
            <li class="flex items-start text-pwb-secondary-300">
              <span class="w-10 h-10 flex items-center justify-center bg-pwb-secondary-700 rounded-full mr-4 flex-shrink-0">
                <%= icon(:location_on, class: "text-pwb-accent-400") %>
              </span>
              <span class="pt-2 leading-relaxed"><%= @current_agency.full_address %></span>
            </li>
          <% end %>
        </ul>
      </div>

      <!-- Newsletter / Custom Content Column -->
      <div class="lg:col-span-3">
        <% if @footer_content.present? && @footer_content.respond_to?(:raw) && @footer_content.raw.present? %>
          <h4 class="font-display font-semibold text-white text-lg mb-6">
            <%= t('pwb.footer.about', default: 'About Us') %>
          </h4>
          <div class="text-pwb-secondary-300 leading-relaxed footer-custom-content">
            <%== @footer_content.raw %>
          </div>
        <% else %>
          <h4 class="font-display font-semibold text-white text-lg mb-6">
            <%= t('pwb.footer.newsletter', default: 'Stay Updated') %>
          </h4>
          <p class="text-pwb-secondary-300 mb-6 leading-relaxed">
            <%= t('pwb.footer.newsletter_text', default: 'Get the latest listings and market insights delivered to your inbox.') %>
          </p>
          <form class="space-y-3">
            <div class="relative">
              <input type="email"
                     placeholder="<%= t('pwb.footer.email_placeholder', default: 'Enter your email') %>"
                     class="w-full bg-pwb-secondary-700 border-0 rounded-soft px-5 py-4 text-white placeholder-pwb-secondary-400 focus:ring-2 focus:ring-pwb-accent focus:outline-none transition-all duration-200">
            </div>
            <button type="submit"
                    class="w-full bg-gradient-to-r from-pwb-accent-400 to-pwb-accent-500 text-pwb-secondary-900 px-6 py-4 rounded-soft font-medium hover:from-pwb-accent-500 hover:to-pwb-accent-600 transition-all duration-300 flex items-center justify-center space-x-2">
              <span><%= t('pwb.footer.subscribe', default: 'Subscribe') %></span>
              <%= icon(:send, size: :sm) %>
            </button>
          </form>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Bottom Bar -->
  <div class="border-t border-pwb-secondary-700">
    <div class="container mx-auto px-6 py-6">
      <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
        <!-- Copyright -->
        <p class="text-sm text-pwb-secondary-400">
          &copy; <%= Time.current.year %> <%= company_legal_name %>.
          <%= t('pwb.footer.rights', default: 'All rights reserved.') %>
        </p>

        <!-- Powered By -->
        <p class="text-sm text-pwb-secondary-500 flex items-center">
          <span class="mr-2"><%= t('pwb.footer.powered_by', default: 'Powered by') %></span>
          <a href="https://www.propertywebbuilder.com"
             class="text-pwb-accent-400 hover:text-pwb-accent-300 transition-colors duration-200 font-medium"
             target="_blank">
            PropertyWebBuilder
          </a>
        </p>
      </div>
    </div>
  </div>
</footer>

<style>
  /* Uses CSS variables from _barcelona.css.erb for palette consistency */
  .footer-custom-content a {
    color: var(--footer-link-color);
    transition: color 0.2s ease;
  }
  .footer-custom-content a:hover {
    color: var(--footer-link-hover-color);
  }
  .footer-custom-content p {
    margin-bottom: 0.75rem;
  }
</style>
