---
// Header component from Pencil design - Responsive
// Desktop: height: 80px, padding: 0 120px
// Mobile: height: 64px, padding: 0 20px

interface Props {
  currentPage?: string;
  lang?: string;
}

const { currentPage = "home", lang = "es" } = Astro.props;

const colors = {
  primary: "#213A7E",
  textDark: "#1A1A1A",
  textGray: "#666666",
  border: "#E5E5E5",
  white: "#FFFFFF",
};

const isEn = lang === "en";

const navItems = isEn
  ? [
      { id: "home",      label: "Home",     href: "/en/" },
      { id: "about",     label: "About",    href: "/en/about" },
      { id: "products",  label: "Products", href: "/en/products" },
      { id: "processes", label: "Process",  href: "/en/process" },
      { id: "contact",   label: "Contact",  href: "/en/contact" },
    ]
  : [
      { id: "home",      label: "Inicio",    href: "/es/" },
      { id: "about",     label: "Nosotros",  href: "/es/nosotros" },
      { id: "products",  label: "Productos", href: "/es/productos" },
      { id: "processes", label: "Procesos",  href: "/es/procesos" },
      { id: "contact",   label: "Contacto",  href: "/es/contacto" },
    ];

const ctaHref  = isEn ? "/en/contact"  : "/es/contacto";
const ctaLabel = isEn ? "Request Quote" : "Solicitar Cotización";
const menuAriaLabel = isEn ? "Open menu" : "Abrir menú";
---

<header class="header">
  <!-- Logo Section -->
  <a href={isEn ? "/en/" : "/es/"} class="logo-link">
    <img
      src="/logo-isharetone.webp"
      alt="Sharetone"
      class="logo"
    />
  </a>

  <!-- Nav Section - Desktop -->
  <nav class="nav-desktop">
    {navItems.map((item) => (
      <a
        href={item.href}
        class:list={["nav-link", { active: currentPage === item.id }]}
      >
        {item.label}
      </a>
    ))}
  </nav>

  <!-- CTA Section - Desktop -->
  <a href={ctaHref} class="cta-btn cta-desktop">
    {ctaLabel}
  </a>

  <!-- Hamburger Button - Mobile -->
  <button class="hamburger" id="hamburger-btn" aria-label={menuAriaLabel}>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>
</header>

<!-- Mobile Menu Overlay -->
<div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>

<!-- Mobile Menu Drawer -->
<div class="mobile-menu" id="mobile-menu">
  <div class="mobile-menu-header">
    <a href={isEn ? "/en/" : "/es/"} class="logo-link">
      <img src="/logo-isharetone.webp" alt="Sharetone" class="logo" />
    </a>
    <button class="close-btn" id="close-menu-btn" aria-label={isEn ? "Close menu" : "Cerrar menú"}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M18 6L6 18M6 6l12 12" />
      </svg>
    </button>
  </div>

  <nav class="mobile-nav">
    {navItems.map((item) => (
      <a
        href={item.href}
        class:list={["mobile-nav-link", { active: currentPage === item.id }]}
      >
        {item.label}
      </a>
    ))}
  </nav>

  <a href={ctaHref} class="cta-btn cta-mobile">
    {ctaLabel}
  </a>
</div>

<style define:vars={{ primary: colors.primary, textGray: colors.textGray, border: colors.border, white: colors.white, textDark: colors.textDark }}>
  /* Header Base */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 120px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .logo {
    height: 32px;
    width: auto;
  }

  /* Desktop Nav */
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--textGray);
    text-decoration: none;
    transition: color 0.2s;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--primary);
  }

  /* CTA Button */
  .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .cta-btn:hover {
    opacity: 0.9;
  }

  .cta-desktop {
    display: inline-flex;
  }

  /* Hamburger Button */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--textDark);
    transition: all 0.3s ease;
  }

  /* Mobile Menu Overlay */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mobile-menu-overlay.active {
    display: block;
    opacity: 1;
  }

  /* Mobile Menu Drawer */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--white);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  }

  .mobile-menu.active {
    right: 0;
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
  }

  .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--textDark);
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
  }

  .mobile-nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--textGray);
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link.active {
    color: var(--primary);
    background: rgba(33, 58, 126, 0.08);
  }

  .cta-mobile {
    margin: 20px;
    text-align: center;
  }

  /* Tablet Breakpoint */
  @media (max-width: 1024px) {
    .header {
      padding: 0 40px;
    }

    .nav-desktop {
      gap: 24px;
    }

    .nav-link {
      font-size: 14px;
    }

    .cta-btn {
      padding: 10px 20px;
      font-size: 13px;
    }
  }

  /* Mobile Breakpoint */
  @media (max-width: 768px) {
    .header {
      height: 64px;
      padding: 0 20px;
    }

    .logo {
      height: 28px;
    }

    .nav-desktop,
    .cta-desktop {
      display: none;
    }

    .hamburger {
      display: flex;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const hamburgerBtn = document.getElementById('hamburger-btn');
    const closeMenuBtn = document.getElementById('close-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const overlay = document.getElementById('mobile-menu-overlay');

    function openMenu() {
      mobileMenu?.classList.add('active');
      overlay?.classList.add('active');
      document.body.style.overflow = 'hidden';
    }

    function closeMenu() {
      mobileMenu?.classList.remove('active');
      overlay?.classList.remove('active');
      document.body.style.overflow = '';
    }

    hamburgerBtn?.addEventListener('click', openMenu);
    closeMenuBtn?.addEventListener('click', closeMenu);
    overlay?.addEventListener('click', closeMenu);

    // Close menu on nav link click
    const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
    mobileNavLinks.forEach(link => {
      link.addEventListener('click', closeMenu);
    });
  });
</script>