<template>
  <header class="header">
    <div class="header-container">
      <div class="header-left">
        <div class="duck-container">
          <Duck1 class="duck-svg animate-float" />
          <div class="bubble animate-wave">
            <span class="bubble-text">Quack!</span>
          </div>
        </div>
        <div class="header-info">
          <h1 class="header-title">Romaric SIRI</h1>
          <p class="header-subtitle">
            Développeur PHP | Administrateur Systèmes & Réseaux Web
          </p>
        </div>
      </div>
      <div class="social-links">
        <a href="" class="blog-link">
          <span class="blog-text">Blog</span>
        </a>
        <a href="mailto:contact@maric.ro" title="Email" class="social-link">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon"
          >
            <rect width="20" height="16" x="2" y="4" rx="2"></rect>
            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
          </svg>
        </a>
        <a href="tel:0632717245" title="Téléphone" class="social-link">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon"
          >
            <path
              d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
            ></path>
          </svg>
        </a>
        <a
          href="https://linkedin.com/in/romaric-siri-a25949181"
          target="_blank"
          rel="noopener noreferrer"
          title="LinkedIn"
          class="social-link"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon"
          >
            <path
              d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
            ></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg>
        </a>
        <a
          href="https://github.com/"
          target="_blank"
          rel="noopener noreferrer"
          title="GitHub"
          class="social-link"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon"
          >
            <path
              d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
            ></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </a>
      </div>
    </div>
  </header>
</template>

<script>
import Duck1 from './ducks/Duck1.vue';

export default {
  name: "Header",
  components: {
    Duck1
  }
};
</script>

<style scoped>
.header {
  position: relative;
  padding: 2.5rem 1rem 1rem;
  text-align: center;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.duck-container {
  position: relative;
  width: 5rem;
  height: 5rem;
}

.duck-svg {
  width: 5rem;
  height: 5rem;
}

.bubble {
  padding: 0.5rem 1rem;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: white;
  border-left: 0;
  margin-top: -8px;
  margin-left: -8px;
}

.bubble-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.header-info {
  text-align: left;
}

.header-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--duck-dark-blue);
}

.header-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header a {
  text-decoration: none;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: var(--text-color);
  transition:
    background-color 0.2s,
    color 0.2s;
}

.social-link:hover {
  background-color: #f3f4f6;
}

.icon {
  width: 1rem;
  height: 1rem;
}

/* New Blog Link Styles */
.blog-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, var(--duck-blue) 0%, var(--duck-dark-blue) 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.blog-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.blog-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.blog-link:hover::before {
  left: 100%;
}

.blog-text {
  font-size: 0.9rem;
  letter-spacing: 0.025em;
}

.blog-icon {
  width: 1rem;
  height: 1rem;
}

/* Animation for blog link pulsing effect */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--duck-blue-rgb), 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--duck-blue-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--duck-blue-rgb), 0);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-wave {
  animation: wave 1.5s ease-in-out infinite;
}

/* Updated wave animation for fixed positioning */
@keyframes wave {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .header {
    padding: 2.5rem 2rem 1rem;
  }

  .header-container {
    flex-direction: row;
    justify-content: space-between;
  }

  .header-left {
    margin-bottom: 0;
  }
  
  /* Make Blog link stand out more on desktop */
  .blog-link {
    padding: 0.5rem 1.25rem;
  }
}
</style>