<script setup>
const config = useRuntimeConfig()
const { t } = useTranslation()

const solution = config.public.solutionname || 'LogShip'
const company = 'LogYou'
const year = new Date().getFullYear()

const fullHash = String(config.public.githash || '')
const shortHash = computed(() => (fullHash ? fullHash.slice(0, 7) : ''))
const buildTime = String(config.public.buildtime || '')

// Build/version tooltip — full commit hash + build timestamp
const buildTitle = computed(() => {
  const parts = []
  if (fullHash) parts.push('Build ' + fullHash)
  if (buildTime) parts.push(buildTime)
  return parts.join(' · ')
})

// Structured navigation — placeholder (dummy) targets; swap the `to` values for real routes/URLs.
const linkGroups = [
  {
    title: 'Product',
    links: [
      { label: 'Dashboard', to: '#' },
      { label: 'Orders', to: '#' },
      { label: 'Shipments', to: '#' },
      { label: 'Inventory', to: '#' }
    ]
  },
  {
    title: 'Resources',
    links: [
      { label: 'Documentation', to: '#' },
      { label: 'Release Notes', to: '#' },
      { label: 'API Reference', to: '#' },
      { label: 'System Status', to: '#' }
    ]
  },
  {
    title: 'Company',
    links: [
      { label: 'About LogYou', to: '#' },
      { label: 'Careers', to: '#' },
      { label: 'Imprint', to: '#' },
      { label: 'Privacy Policy', to: '#' }
    ]
  },
  {
    title: 'Support',
    links: [
      { label: 'Help Center', to: '#' },
      { label: 'Contact Support', to: 'mailto:info@logyou.de' },
      { label: 'Keyboard Shortcuts', to: '#' },
      { label: 'Report a Problem', to: '#' }
    ]
  }
]

// Social — placeholder (dummy) targets.
const socials = [
  { name: 'X', to: '#', path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z' },
  { name: 'LinkedIn', to: '#', path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0Z' },
  { name: 'GitHub', to: '#', path: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.91 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.015 2.898-.015 3.293 0 .322.218.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12Z' }
]

// Live connectivity indicator (client only — reflects the browser's link to the ERP)
const online = ref(true)
const syncOnline = () => { online.value = navigator.onLine }

onMounted(() => {
  online.value = navigator.onLine
  window.addEventListener('online', syncOnline)
  window.addEventListener('offline', syncOnline)
})

onBeforeUnmount(() => {
  window.removeEventListener('online', syncOnline)
  window.removeEventListener('offline', syncOnline)
})
</script>

<template>
  <footer class="ls-footer">
    <!-- Top: brand + structured link columns -->
    <div class="ls-footer__top">
      <div class="ls-footer__brand">
        <div class="ls-footer__brand-head">
          <span class="ls-footer__mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path
                fill="#fff"
                d="M12 2.15c.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18s-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.65v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18M12 4.3 6.04 7.65 12 11l5.96-3.35L12 4.3m-7 4.9v7.05l6 3.37v-6.97L5 9.2m14 0-6 3.45v6.97l6-3.37V9.2Z" />
            </svg>
          </span>
          <strong class="ls-footer__name">{{ solution }}</strong>
        </div>
        <p class="ls-footer__tagline">
          Enterprise warehouse &amp; resource planning by {{ company }}.
        </p>
        <!-- TODO: re-enable social links once the profiles/targets are ready (data: `socials` in <script>)
        <div class="ls-footer__socials">
          <a
            v-for="s in socials"
            :key="s.name"
            class="ls-footer__social"
            :href="s.to"
            :aria-label="s.name"
            target="_blank"
            rel="noopener noreferrer"
            @click="s.to === '#' && $event.preventDefault()">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
              <path fill="currentColor" :d="s.path" />
            </svg>
          </a>
        </div>
        -->
      </div>

      <!-- TODO: re-enable the structured link columns once the target pages exist (data: `linkGroups` in <script>)
      <nav class="ls-footer__nav" aria-label="Footer">
        <div v-for="group in linkGroups" :key="group.title" class="ls-footer__col">
          <h4 class="ls-footer__col-title">{{ group.title }}</h4>
          <ul class="ls-footer__list">
            <li v-for="link in group.links" :key="link.label">
              <a
                class="ls-footer__link"
                :href="link.to"
                @click="link.to === '#' && $event.preventDefault()">
                {{ link.label }}
              </a>
            </li>
          </ul>
        </div>
      </nav>
      -->
    </div>

    <!-- Bottom bar: copyright · status · build -->
    <div class="ls-footer__bottom">
      <span class="ls-footer__copy">
        © {{ year }} {{ company }} · {{ t.footer_made_in }}
      </span>

      <div class="ls-footer__meta">
        <a class="ls-footer__site" href="https://www.logyou.de/logship/" target="_blank" rel="noopener noreferrer">logyou.de</a>

        <span class="ls-footer__divider" aria-hidden="true"></span>

        <ClientOnly>
          <span
            class="ls-footer__status"
            :class="online ? 'is-online' : 'is-offline'"
            :title="online ? t.footer_connected : t.footer_offline">
            <span class="ls-footer__dot"></span>
            <span class="ls-footer__status-text">{{ online ? t.footer_connected : t.footer_offline }}</span>
          </span>
        </ClientOnly>

        <span v-if="shortHash" class="ls-footer__version" :title="buildTitle">
          <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true">
            <path
              fill="currentColor"
              d="M12 8a4 4 0 0 0-3.86 3H2v2h6.14A4 4 0 0 0 12 16a4 4 0 0 0 3.86-3H22v-2h-6.14A4 4 0 0 0 12 8m0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z" />
          </svg>
          {{ shortHash }}
        </span>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.ls-footer {
  margin-top: 1.5rem;
  position: relative;
  background: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--theme-shadow-sm);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* thin gradient accent line along the top edge */
.ls-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.75rem;
  right: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent), transparent);
  opacity: 0.85;
}

/* ---- Top region ---- */
.ls-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 1.5rem 2rem;
  padding: 1.5rem 1.75rem 1.25rem;
}

/* ---- Brand column ---- */
.ls-footer__brand {
  min-width: 0;
}

.ls-footer__brand-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ls-footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  box-shadow: 0 5px 12px -4px var(--theme-primary);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ls-footer:hover .ls-footer__mark {
  transform: translateY(-1px) rotate(-4deg);
  box-shadow: 0 7px 16px -4px var(--theme-primary);
}

.ls-footer__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--theme-text-primary);
}

.ls-footer__tagline {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--theme-text-muted);
  max-width: 22rem;
}

.ls-footer__socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.ls-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--theme-text-muted);
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ls-footer__social:hover {
  color: var(--theme-primary);
  border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
  background: var(--theme-accent-soft, var(--theme-bg-hover));
  transform: translateY(-2px);
}

/* ---- Link columns ---- */
.ls-footer__nav {
  display: contents;
}

.ls-footer__col {
  min-width: 0;
}

.ls-footer__col-title {
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-text-tertiary, var(--theme-text-muted));
}

.ls-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ls-footer__link {
  position: relative;
  display: inline-block;
  font-size: 0.8rem;
  color: var(--theme-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ls-footer__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--theme-primary);
  transition: width 0.25s ease;
}

.ls-footer__link:hover {
  color: var(--theme-primary);
}

.ls-footer__link:hover::after {
  width: 100%;
}

/* ---- Bottom bar ---- */
.ls-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.75rem;
  border-top: 1px solid var(--theme-border);
}

.ls-footer__copy {
  font-size: 0.74rem;
  color: var(--theme-text-muted);
}

.ls-footer__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.ls-footer__site {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--theme-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ls-footer__site:hover {
  color: var(--theme-primary);
}

.ls-footer__divider {
  width: 1px;
  height: 16px;
  background: var(--theme-border);
}

/* live status pill */
.ls-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ls-footer__status.is-online {
  color: var(--theme-success);
  background: var(--theme-success-bg);
  border-color: color-mix(in srgb, var(--theme-success) 28%, transparent);
}

.ls-footer__status.is-offline {
  color: var(--theme-danger);
  background: var(--theme-danger-bg);
  border-color: color-mix(in srgb, var(--theme-danger) 28%, transparent);
}

.ls-footer__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  flex: 0 0 auto;
}

.is-online .ls-footer__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  animation: ls-footer-pulse 1.8s ease-out infinite;
}

@keyframes ls-footer-pulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* build / version chip */
.ls-footer__version {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: var(--theme-bg-secondary);
  color: var(--theme-text-muted);
  font-size: 0.7rem;
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: 0.3px;
  cursor: default;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ls-footer__version:hover {
  color: var(--theme-text-secondary);
  border-color: var(--theme-border-dark);
}

.ls-footer__version svg {
  opacity: 0.75;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
  .ls-footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .ls-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .ls-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 540px) {
  .ls-footer__top {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-footer__mark,
  .ls-footer__social,
  .ls-footer__link,
  .ls-footer__link::after,
  .is-online .ls-footer__dot::after {
    transition: none;
    animation: none;
  }
}
</style>
