Nav.js

'use client'
import { useState, useEffect } from "react"
import styles from "./Nav.module.css"

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

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50)
    window.addEventListener("scroll", onScroll, { passive: true })
    return () => window.removeEventListener("scroll", onScroll)
  }, [])

  return (
    <nav className={`${styles.nav} ${scrolled ? styles.scrolled : ""}`}>
      <div className={styles.inner}>
        <a href="/" className={styles.brand}>
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <rect x="2" y="2" width="28" height="28" rx="6" stroke="#00d4ff" strokeWidth="2" />
            <path d="M10 16h12M16 10v12" stroke="#00d4ff" strokeWidth="2" strokeLinecap="round" />
            <circle cx="16" cy="16" r="3" fill="#00d4ff" opacity="0.3" />
          </svg>
          <span className={styles.name}>GHZHOST</span>
        </a>

        <ul className={`${styles.links} ${menuOpen ? styles.open : ""}`}>
          <li><a href="#terminal" className={styles.link} onClick={() => setMenuOpen(false)}>Terminal</a></li>
          <li><a href="#servicos" className={styles.link} onClick={() => setMenuOpen(false)}>Serviços</a></li>
          <li><a href="#precos" className={styles.link} onClick={() => setMenuOpen(false)}>Preços</a></li>
          <li><a href="#status" className={styles.link} onClick={() => setMenuOpen(false)}>Status</a></li>
          <li><a href="#contato" className={styles.link} onClick={() => setMenuOpen(false)}>Contato</a></li>
        </ul>

        <a href="#precos" className="btn btn-primary" style={{ padding: "10px 20px", fontSize: "0.7rem" }}>
          Começar
        </a>

        <button
          className={styles.mobileBtn}
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label="Menu"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            {menuOpen ? <path d="M6 6l12 12M6 18L18 6" /> : <path d="M3 12h18M3 6h18M3 18h18" />}
          </svg>
        </button>
      </div>
    </nav>
  )
}