<template>
  <footer class="home-footer">
    <div class="page-shell">
      <div class="footer-card">
        <div class="row q-col-gutter-xl">
          <div class="col-12 col-lg-5">
            <div class="footer-brand">
              <img class="footer-logo" :src="footerLogoUrl" alt="Omnimed footer logo" />
              <p class="footer-description">
                We offer a wide range of healthcare services to meet your needs.
              </p>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="footer-group">
              <h3 class="footer-title">Healthcare</h3>
              <div class="footer-links">
                <router-link
                  v-for="link in healthcareLinks"
                  :key="link.label"
                  class="footer-link"
                  :to="link.to"
                >
                  {{ link.label }}
                </router-link>
              </div>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="footer-group">
              <h3 class="footer-title">Quick Links</h3>
              <div class="footer-links">
                <router-link
                  v-for="link in quickLinks"
                  :key="link.label"
                  class="footer-link"
                  :to="link.to"
                >
                  {{ link.label }}
                </router-link>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-4 col-lg-3">
            <div class="footer-group">
              <h3 class="footer-title">Contact Us</h3>
              <div class="footer-contact-list">
                <div
                  v-for="item in contactItems"
                  :key="item.text"
                  class="footer-contact-item"
                >
                  <img class="footer-contact-icon" :src="item.icon" :alt="item.label" />
                  <span class="footer-contact-text">{{ item.text }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="footer-social-band">
          <div class="footer-line" />
          <div class="footer-social-links">
            <q-btn
              v-for="social in socialLinks"
              :key="social.label"
              round
              flat

              class="social-btn"
              :aria-label="social.label"
            >
              <q-tooltip>{{ social.label }}</q-tooltip>
              <img class="social-icon" :src="social.icon" :alt="social.label" />
            </q-btn>
          </div>
          <div class="footer-line" />
        </div>

        <div class="footer-meta">
          <div class="footer-copyright">
            Copyright © 2024 All Rights Reserved.
          </div>

          <div class="footer-legal">
            <router-link class="footer-legal-link" to="/privacy">
              Privacy policy
            </router-link>
            <router-link class="footer-legal-link" to="/terms">
              Terms &amp; conditions
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import footerLogoUrl from 'src/assets/home/logo.png';
import phoneIcon from 'src/assets/contact/icon-phone.svg';
import locationIcon from 'src/assets/contact/icon-location.svg';
import mailIcon from 'src/assets/contact/icon-mail.svg';
import facebookIconUrl from 'src/assets/icons/facebook.svg';
import instagramIconUrl from 'src/assets/icons/instagram.svg';
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';

const healthcareLinks = [
  { label: 'Doctors', to: '/doctors' },
  { label: 'Diagnostics', to: '/services' },
  { label: 'Caregiver', to: '/services' },
  { label: 'Hospitality', to: '/about' },
  { label: 'Emergency', to: '/contact' },
];

const quickLinks = [
  { label: 'Home', to: '/' },
  { label: 'About us', to: '/about' },
  { label: 'Services', to: '/services' },
  { label: 'Doctors', to: '/doctors' },
  { label: 'Contact', to: '/contact' },
];

const contactItems = [
  { label: 'Mail', text: 'info@domain.com', icon: mailIcon },
  { label: 'Phone', text: '+1 (213) 465 789', icon: phoneIcon },
  { label: 'Location', text: '2464 Royal Ln. Mesa, New Jersey', icon: locationIcon },
];

const socialLinks = [
  { icon: whatsappIconUrl, label: 'WhatsApp' },
  { icon: facebookIconUrl, label: 'Facebook' },
  { icon: instagramIconUrl, label: 'Instagram' },
];
</script>

<style lang="sass" scoped>
.home-footer
  padding: 0 0 36px

.page-shell
  width: min(1180px, calc(100% - 32px))
  margin: 0 auto

.footer-card
  padding: 56px 44px 28px
  border-radius: 46px
  background: #163047
  color: #eef8ff
  box-shadow: 0 24px 70px rgba(22, 48, 71, 0.16)

.footer-brand
  max-width: 360px

.footer-logo
  display: block
  width: 150px
  max-width: 100%
  margin-bottom: 22px

.footer-description
  margin: 0
  color: rgba(238, 248, 255, 0.76)
  line-height: 1.75

.footer-group
  height: 100%

.footer-title
  margin: 0 0 18px
  font-size: 1.15rem
  font-weight: 800
  color: #fff

.footer-links
  display: grid
  gap: 12px

.footer-link
  color: rgba(238, 248, 255, 0.76)
  text-decoration: none
  transition: color 0.2s ease

.footer-link:hover
  color: #7ce0c3

.footer-contact-list
  display: grid
  gap: 16px

.footer-contact-item
  display: flex
  align-items: flex-start
  gap: 12px

.footer-contact-icon
  width: 20px
  height: 20px
  margin-top: 2px
  filter: brightness(0) invert(1)

.footer-contact-text
  color: rgba(238, 248, 255, 0.76)
  line-height: 1.6

.footer-social-band
  display: flex
  align-items: center
  gap: 20px
  margin: 34px 0 26px

.footer-line
  flex: 1
  height: 1px
  background: rgba(238, 248, 255, 0.14)

.footer-social-links
  display: flex
  gap: 8px

.social-btn
  color: #fff
  border: 1px solid rgba(255, 255, 255, 0.18)
  background: rgba(255, 255, 255, 0.04)

.social-icon
  display: block
  width: 18px
  height: 18px
  filter: brightness(0) invert(1)

.footer-meta
  display: flex
  align-items: center
  justify-content: space-between
  gap: 16px

.footer-copyright
  color: rgba(238, 248, 255, 0.68)

.footer-legal
  display: flex
  flex-wrap: wrap
  justify-content: flex-end
  gap: 18px

.footer-legal-link
  color: rgba(238, 248, 255, 0.76)
  text-decoration: none

.footer-legal-link:hover
  color: #7ce0c3

@media (max-width: 599px)
  .page-shell
    width: min(100% - 24px, 1180px)

  .footer-card
    padding: 32px 22px 22px
    border-radius: 26px

  .footer-social-band
    gap: 12px

  .footer-meta
    align-items: flex-start
    flex-direction: column

  .footer-legal
    justify-content: flex-start
</style>
