'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { PawPrint } from 'lucide-react';
import SideMenu from './SideMenu';

export default function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  return (
    <>
      <header className={`header${scrolled ? ' scrolled' : ''}`}>
        {/* Logo */}
        <Link href="/" className="logo" aria-label="PetLink — Início">
          <PawPrint size={22} strokeWidth={2.5} />
          PetLink
        </Link>

        {/* Hambúrguer animado */}
        <button
          id="menu-toggle"
          className={`menu-btn${menuOpen ? ' open' : ''}`}
          onClick={() => setMenuOpen(v => !v)}
          aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu de navegação'}
          aria-expanded={menuOpen}
          aria-controls="side-menu"
        >
          <span />
          <span />
          <span />
        </button>
      </header>

      {/* Side Menu — sempre montado, abre/fecha via CSS */}
      <SideMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
    </>
  );
}