/* global React */
const { useState, useEffect } = React;

function Header({ onContact }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { href: "#services", label: "Services" },
    { href: "#projects", label: "Project experience" },
    { href: "#capability", label: "Machine capability" },
    { href: "#why", label: "Why Pathway" },
    { href: "#contact", label: "Contact" },
  ];

  return (
    <header className={`pc-nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="pc-nav__inner">
        <a href="#top" className="pc-nav__brand" aria-label="Pathway Civil home">
          <span className="pc-nav__mark" />
          <span className="pc-nav__word">
            <span>PATHWAY CIVIL</span>
            <span className="pc-nav__sub">Civil earthworks · Wet hire · SA</span>
          </span>
        </a>
        <nav className="pc-nav__links" aria-label="Primary">
          {nav.map((n) => (
            <a key={n.href} href={n.href}>{n.label}</a>
          ))}
        </nav>
        <div className="pc-nav__cta">
          <a href="#contact" className="pc-btn pc-btn--accent pc-btn--sm">
            <span>Request a quote</span>
            <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
            </svg>
          </a>
          <a href="tel:+61459235860" className="pc-btn pc-btn--primary pc-btn--sm" onClick={onContact}>
            <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
            </svg>
            <span>Call Pathway Civil</span>
          </a>
        </div>
        <button
          className="pc-nav__menu"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            {open ? (
              <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>
            ) : (
              <><path d="M3 7h18" /><path d="M3 17h18" /></>
            )}
          </svg>
        </button>
      </div>
      {open ? (
        <div className="pc-nav__sheet" role="dialog" aria-label="Menu">
          <ul>
            {nav.map((n) => (
              <li key={n.href}>
                <a href={n.href} onClick={() => setOpen(false)}>{n.label}</a>
              </li>
            ))}
          </ul>
          <a href="tel:+61459235860" className="pc-btn pc-btn--accent" onClick={() => setOpen(false)}>
            <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
            </svg>
            <span>Call Pathway Civil</span>
          </a>
        </div>
      ) : null}
    </header>
  );
}

window.Header = Header;