<template>
  <div class="home-header">
    <section class="topbar-section">
      <div class="page-shell topbar-row">
        <div class="topbar-group">
          <div class="topbar-item">
            <q-icon name="schedule" size="18px" />
            <span><strong>Working Hour:</strong> 08:00am to 09:00pm</span>
          </div>
          <div class="topbar-item">
            <q-icon name="mail" size="18px" />
            <span><strong>Email:</strong> info@domainname.com</span>
          </div>
        </div>

        <div class="topbar-group topbar-group-end">
          <div class="social-links">
            <q-btn
              v-for="social in socialLinks"
              :key="social.label"
              round
              flat
              dense
              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="topbar-item">
            <q-icon name="call" size="18px" />
            <span><strong>Contact:</strong> +123 (456) 789</span>
          </div>
        </div>
      </div>
    </section>

    <section class="header-section">
      <div class="page-shell">
        <q-toolbar class="header-toolbar">
          <div class="desktop-nav gt-sm">
            <q-btn
              v-for="link in navLinks"
              :key="link.label"
              flat
              no-caps
              class="nav-btn"
              :label="link.label"
              :to="link.link"
            />
          </div>

          <q-space />

          <q-btn
            class="lt-md"
            flat
            round
            dense
            icon="menu"
            aria-label="Open navigation"
          />
        </q-toolbar>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
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 navLinks = [
  { label: 'Home', link: '/' },
  { label: 'About Us', link: '/about' },
  { label: 'Services', link: '/services' },
  { label: 'Doctors', link: '/doctors' },
  { label: 'Contact Us', link: '/contact' },
];

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

<style lang="sass" scoped>
.page-shell
  width: min(1180px, calc(100% - 32px))
  margin: 0 auto

.topbar-section
  background: #163047
  color: #eff8ff

.topbar-row
  display: flex
  align-items: center
  justify-content: space-between
  gap: 16px
  padding: 12px 0

.topbar-group
  display: flex
  align-items: center
  flex-wrap: wrap
  gap: 18px

.topbar-group-end
  justify-content: flex-end

.topbar-item
  display: inline-flex
  align-items: center
  gap: 8px
  font-size: 0.92rem

.topbar-item strong
  font-weight: 700

.social-links
  display: flex
  gap: 4px

.social-btn
  color: #fff

.social-icon
  display: block
  width: 32px
  height: 32px

.header-section
  position: sticky
  top: 0
  z-index: 10
  backdrop-filter: blur(14px)
  background: rgba(255, 255, 255, 0.9)
  border-bottom: 1px solid rgba(22, 48, 71, 0.08)

.header-toolbar
  min-height: 88px
  padding: 0

.desktop-nav
  display: flex
  align-items: center
  gap: 4px
  margin-right: 12px

.nav-btn
  color: #163047
  font-weight: 600

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

  .topbar-row
    padding: 10px 0

  .topbar-row,
  .topbar-group,
  .topbar-group-end
    justify-content: center

  .header-toolbar
    min-height: 76px
</style>
