// Top utility bar + sticky main header with mobile sheet menu.
const NAV_LINKS = [
  { label: "Home",             href: "#top" },
  { label: "Book Now",         href: "#book" },
  { label: "Tide Schedule",    href: "#tides" },
  { label: "FAQ",              href: "#faq" },
  { label: "Why Raft With Us?", href: "#about" },
  { label: "Contact Us",       href: "#contact" },
  { label: "Tidal Bore Blog",  href: "#blog" },
];

const SOCIAL_LINKS = [
  { Ic: IconFacebook,    href: "https://www.facebook.com/shubiewranglers/", label: "Facebook" },
  { Ic: IconInstagram,   href: "https://www.instagram.com/river_wranglers/?hl=en", label: "Instagram" },
  { Ic: IconYouTube,     href: "https://www.youtube.com/@shubieriverwranglers4931", label: "YouTube" },
  { Ic: IconX,           href: "https://x.com/riverwranglers", label: "X (Twitter)" },
  { Ic: IconTripAdvisor, href: "https://www.tripadvisor.ca/Attraction_Review-g4600890-d10664089-Reviews-Shubie_River_Wranglers-Shubenacadie_Southwest_Nova_Scotia_Nova_Scotia.html", label: "Tripadvisor" },
];

function UtilityBar({ scrolled }) {
  return (
    <div style={{
      background: "#000",
      color: "var(--bone)",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 38, fontSize: 12, gap: 14,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
          <a href="tel:+19024562673" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <IconPhone size={14} />
            <span className="narrow" style={{ letterSpacing: ".06em" }}>+1 902-456-2673</span>
          </a>
          <a href="mailto:shubiewranglers@gmail.com" className="hide-sm" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <IconMail size={14} />
            <span className="narrow" style={{ letterSpacing: ".06em" }}>shubiewranglers@gmail.com</span>
          </a>
        </div>
        <div className="hide-sm" style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-ui)", fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", fontSize: 11 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "5px 11px",
            background: "rgba(46, 204, 113, 0.14)",
            border: "1px solid rgba(46, 204, 113, 0.5)",
            borderRadius: 99,
            color: "#a7f3c5",
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: 99,
              background: "#22C55E",
              boxShadow: "0 0 0 4px rgba(34, 197, 94, 0.25)",
              animation: "pulseDot 1.8s ease-in-out infinite",
            }} />
            2026 Season — Booking now open
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          {SOCIAL_LINKS.map(({ Ic, href, label }) => (
            <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
              style={{
                opacity: .9,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                transition: "opacity .15s ease, color .15s ease",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.opacity = 1; e.currentTarget.style.color = "var(--red)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.opacity = 0.9; e.currentTarget.style.color = "inherit"; }}
            >
              <Ic size={20} />
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

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

  React.useEffect(() => {
    // Switch to opaque after scrolling past the hero buffer (~80vh)
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.body.classList.toggle("menu-open", menuOpen);
  }, [menuOpen]);

  // Visual states
  const navColor = scrolled ? "var(--ink)" : "var(--bone)";
  const linkOpacity = scrolled ? 1 : 0.95;

  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
      <UtilityBar scrolled={scrolled} />
      <div style={{
        background: scrolled ? "rgba(255,255,255,0.96)" : "transparent",
        backdropFilter: scrolled ? "saturate(160%) blur(10px)" : "none",
        borderBottom: `1px solid ${scrolled ? "var(--line)" : "transparent"}`,
        transition: "background .25s ease, border-color .25s ease",
        color: navColor,
      }}>
        <div className="wrap" style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          height: 76, gap: 16,
        }}>
          <a href="#top" aria-label="Shubie River Wranglers home"
            style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src="assets/logo.webp" alt="Shubie River Wranglers"
              style={{
                height: 56, width: "auto",
                filter: scrolled ? "none" : "drop-shadow(0 2px 12px rgba(0,0,0,0.6))",
                transition: "filter .25s ease",
              }} />
          </a>

          <nav className="hide-sm" style={{ display: "flex", alignItems: "center", gap: 28 }}>
            {NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href}
                className="narrow"
                style={{
                  fontSize: 13, letterSpacing: ".1em",
                  color: "#000",
                  opacity: linkOpacity,
                  textShadow: "none",
                }}>
                {l.label}
              </a>
            ))}
          </nav>

          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <a href="#book" className="btn btn-primary" style={{ padding: "12px 20px" }}>
              Book Now <IconArrow size={16} />
            </a>
            <button className="show-sm" aria-label="Open menu" onClick={() => setMenuOpen(true)}
              style={{ padding: 8, color: navColor }}>
              <IconMenu size={26} />
            </button>
          </div>
        </div>
      </div>

      {menuOpen && (
        <div style={{
          position: "fixed", inset: 0, zIndex: 100,
          background: "var(--ink)", color: "var(--bone)",
          display: "flex", flexDirection: "column",
          animation: "fade 200ms ease",
        }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 20px", borderBottom: "1px solid var(--line-on-dark)" }}>
            <img src="assets/logo.webp" alt="" style={{ height: 44, filter: "brightness(1.05)" }} />
            <button aria-label="Close menu" onClick={() => setMenuOpen(false)} style={{ padding: 6 }}>
              <IconClose size={28} />
            </button>
          </div>
          <nav style={{ padding: "24px 24px 8px", display: "flex", flexDirection: "column", gap: 4 }}>
            {NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}
                className="display"
                style={{ fontSize: 42, padding: "10px 0", borderBottom: "1px solid var(--line-on-dark)" }}>
                {l.label}
              </a>
            ))}
          </nav>
          <div style={{ marginTop: "auto", padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
            <a href="#book" onClick={() => setMenuOpen(false)} className="btn btn-primary btn-lg btn-block">
              Book Now <IconArrow size={18} />
            </a>
            <div style={{ display: "flex", gap: 12 }}>
              <a href="tel:+19024562673" className="btn btn-ghost-dark" style={{ flex: 1, justifyContent: "center" }}>
                <IconPhone size={16} /> Call
              </a>
              <a href="mailto:shubiewranglers@gmail.com" className="btn btn-ghost-dark" style={{ flex: 1, justifyContent: "center" }}>
                <IconMail size={16} /> Email
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Header, UtilityBar, SOCIAL_LINKS });