<script>
  import { resolve } from '$app/paths';
  import { t } from '$lib/translations';
  import logo from '$lib/assets/logo.svg';

  let navOpen = $state(false);
</script>

<header>
  <div class="nav-container">
    <div class="logo">
      <a href={resolve('/')} aria-label={$t('header.homeAria')}
        ><img src={logo} alt={$t('header.logoAlt')} width="45" /></a
      >
    </div>

    <nav class:open={navOpen}>
      <ul>
        <li>
          <a onclick={() => (navOpen = !navOpen)} href={resolve('/')}
            >{$t('header.navHome')}</a
          >
        </li>
        <li>
          <a onclick={() => (navOpen = !navOpen)} href="#featured-works"
            >{$t('header.navWorks')}</a
          >
        </li>
        <li>
          <a onclick={() => (navOpen = !navOpen)} href="#about"
            >{$t('header.navAbout')}</a
          >
        </li>
        <li>
          <a onclick={() => (navOpen = !navOpen)} href="#contact"
            >{$t('header.navContact')}</a
          >
        </li>
      </ul>
    </nav>

    <div class="button-group">
      <a class="primary-button" href="#resume">{$t('header.resume')}</a>
      <button
        class="secondary-button nav-toggle"
        aria-controls="primary-navigation"
        aria-expanded={navOpen}
        onclick={() => (navOpen = !navOpen)}
        aria-label={$t('header.menuAria')}
        style="margin-left: 20px;"
        class:open={navOpen}
      >
        <span class="hamburger"></span>
      </button>
    </div>
  </div>
</header>

<style>
  /* ================================
     LAYOUT / STRUCTURE
  ================================= */
  header {
    position: fixed;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    z-index: 1;
  }

  .nav-container {
    width: min-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    color: var(--color-dark-background);
    border-radius: 20px;
    padding: 5px 15px;
    border-color: rgba(33, 33, 33, 0.1);
    box-shadow:
      rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px,
      rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px,
      rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px,
      rgb(205, 204, 203) 0px 3px 0px 0px;
  }

  ul {
    list-style: none;
    display: flex;
    gap: 20px;
  }

  /* ================================
     NAV LINKS
  ================================= */
  li a:hover {
    border-bottom: 2px solid var(--color-dark-background);
    transition: all 0.1s ease-in-out;
  }

  /* ================================
     BUTTON GROUP
  ================================= */
  .button-group {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  /* ================================
     NAV TOGGLE (HAMBURGER)
  ================================= */
  .nav-toggle {
    border: none;
    display: none;
    width: 30px;
    height: 100%;
    position: relative;
    z-index: 1;
  }

  /* Hamburger lines */
  .hamburger,
  .hamburger::before,
  .hamburger::after {
    content: '';
    background-color: white;
    height: 3px;
    width: 20px;
    position: absolute;
    left: 12px;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .hamburger {
    transform: translateY(-50%);
  }

  .hamburger::before {
    top: -8px;
    left: 0;
  }

  .hamburger::after {
    bottom: -8px;
    left: 0;
  }

  /* Hamburger → Cross (open state) */
  .nav-toggle.open .hamburger {
    background-color: transparent;
  }

  .nav-toggle.open .hamburger::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .nav-toggle.open .hamburger::after {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }

  /* ================================
     MOBILE / RESPONSIVE
  ================================= */
  @media (max-width: 810px) {
    header {
      margin-top: 15px;
    }
    .nav-container {
      width: 90%;
      padding: 10px;
    }

    .button-group {
      height: 100%;
    }

    .nav-toggle {
      display: block;
    }

    nav {
      position: absolute;
      top: 120%;
      left: 5%;
      right: 0;
      width: 90%;

      background-color: white;
      border-radius: 20px;
      border-color: rgba(33, 33, 33, 0.1);

      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;

      flex: unset;

      box-shadow:
        rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px,
        rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px,
        rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px,
        rgb(205, 204, 203) 0px 3px 0px 0px;
    }

    nav.open {
      max-height: 500px;
    }

    nav ul {
      flex-direction: column;
      gap: 0;
      justify-content: flex-start;
    }

    nav li {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav a {
      display: block;
      padding: 1rem;
    }

    li a:hover {
      border-bottom: 0;
    }
  }
</style>
