/* global React */

/* =========================================================
   BSpoke — Navigation
   Three styles: classic, minimal, editorial-rule
   ========================================================= */

/* =========================================================
   Site-wide config — single source of truth.

   ▸ CALENDAR_URL: swap this string with your real Google Calendar
     appointment-booking link when you have it. Every "Schedule a Call"
     button across the site reads from here.
   ▸ NAV_LINKS: the seven top-level pages.
   ========================================================= */
const CALENDAR_URL = "https://calendar.app.google/BGBSYqcsmRPJpk8XA";
window.BSPOKE_CALENDAR_URL = CALENDAR_URL;

const NAV_LINKS = [
{ label: "Home", href: "#home" },
{ label: "Services", href: "#services" },
{ label: "About", href: "#about" },
{ label: "Why Us", href: "#why-us" },
{ label: "Reviews", href: "#reviews" },
{ label: "Blog", href: "#blog" },
{ label: "Contact", href: "#contact" }];


/* Active section tracking — observes which #section is in the viewport so the
   matching nav link can be highlighted. Falls back to "home" pre-scroll. */
function useActiveSection() {
  const [active, setActive] = React.useState("#home");
  React.useEffect(() => {
    const sectionIds = NAV_LINKS.map((l) => l.href.slice(1));
    const sections = sectionIds.
    map((id) => document.getElementById(id)).
    filter(Boolean);
    if (sections.length === 0) return;

    const observer = new IntersectionObserver(
      (entries) => {
        // Prefer the top-most intersecting entry.
        const visible = entries.
        filter((e) => e.isIntersecting).
        sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible[0]) setActive("#" + visible[0].target.id);
      },
      { rootMargin: "-30% 0px -60% 0px", threshold: 0 }
    );
    sections.forEach((s) => observer.observe(s));
    return () => observer.disconnect();
  }, []);
  return active;
}

function Logo({ variant = "dark", size = 44, backing = "white" }) {
  const titleColor = variant === "light" ? "var(--inverse)" : "var(--navy)";
  const subColor = variant === "light" ? "rgba(245,240,235,0.62)" : "var(--ink-3)";
  const ruleColor = variant === "light" ? "rgba(245,240,235,0.25)" : "var(--line-strong)";

  /* Logo backing — keep the colored mark legible on dark navs by giving it
     a small light tile to sit on. */
  const tile = {
    none: null,
    white: { bg: "#FFFFFF", ring: "transparent", shape: 4 },
    cream: { bg: "var(--cream)", ring: "rgba(184,150,62,0.35)", shape: 4 },
    circle: { bg: "#FFFFFF", ring: "transparent", shape: 999 },
    rule: { bg: "transparent", ring: "rgba(184,150,62,0.6)", shape: 4 }
  }[backing] || null;

  const imgEl =
  <img
    src="assets/bspoke-logo.png"
    alt="BSpoke Hospitality & Asset Group"
    style={{
      width: size, height: size, objectFit: "contain",
      filter: "none",
      display: "block"
    }} />;



  return (
    <a href="#home" className="bspoke-logo" style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
      {tile ?
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: size + 14, height: size + 14,
        background: tile.bg,
        borderRadius: tile.shape,
        boxShadow: tile.ring !== "transparent" ? `inset 0 0 0 1px ${tile.ring}` : "none",
        padding: 7
      }}>{imgEl}</span> :
      imgEl}
      <span style={{
        display: "inline-flex", flexDirection: "column", gap: 3,
        paddingLeft: 14, borderLeft: `1px solid ${ruleColor}`
      }}>
        <span style={{
          fontFamily: "var(--font-sans)",
          fontWeight: 600,
          fontSize: 22,
          letterSpacing: "-0.015em",
          color: titleColor,
          lineHeight: 1.05
        }}>BSpoke</span>
        <span style={{
          fontFamily: "var(--font-mono)",
          fontWeight: 500,
          fontSize: 12,
          letterSpacing: "var(--tracking-label)",
          textTransform: "uppercase",
          color: subColor,
          lineHeight: 1.1
        }}>Hospitality &amp; Asset Group</span>
      </span>
    </a>);

}

/* ---------- Style A: Classic horizontal bar ---------- */
function NavClassic({ variant = "dark", logoBacking = "white" }) {
  const isLight = variant === "light";
  const active = useActiveSection();
  return (
    <nav
      className="nav-classic"
      style={{
        position: "sticky", top: 0, zIndex: 50,
        background: isLight ? "rgba(17, 30, 60, 0.94)" : "rgba(251, 248, 244, 0.94)",
        backdropFilter: "saturate(140%) blur(10px)",
        WebkitBackdropFilter: "saturate(140%) blur(10px)",
        borderBottom: isLight ? "1px solid rgba(245,240,235,0.08)" : "1px solid var(--line)"
      }}>
      
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 88
      }}>
        <Logo variant={variant} backing={logoBacking} />
        <div style={{ display: "flex", alignItems: "center", gap: 36 }}>
          <ul style={{ display: "flex", gap: 32, listStyle: "none", margin: 0, padding: 0 }}>
            {NAV_LINKS.map((l) => {
              const isActive = l.href === active;
              return (
                <li key={l.label}>
                  <a href={l.href} style={{
                    fontSize: 14, fontWeight: isActive ? 600 : 500, letterSpacing: "0.01em",
                    color: isLight ? "rgba(245,240,235,0.85)" : "var(--ink)",
                    paddingBottom: 2,
                    borderBottom: isActive ? "1px solid var(--gold)" : "1px solid transparent",
                    transition: "border-color 200ms ease, color 200ms ease"
                  }}
                  onMouseEnter={(e) => {if (!isActive) e.currentTarget.style.borderBottomColor = "var(--gold)";}}
                  onMouseLeave={(e) => {if (!isActive) e.currentTarget.style.borderBottomColor = "transparent";}}>
                    {l.label}</a>
                </li>);

            })}
          </ul>
          <a href={CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold" style={{
            padding: "10px 20px",
            fontSize: 12,
            letterSpacing: "0.12em"
          }}>
            Schedule a Call
          </a>
        </div>
      </div>
    </nav>);

}

/* ---------- Style B: Minimal (small logo, very light) ---------- */
function NavMinimal({ variant = "dark" }) {
  const isLight = variant === "light";
  const active = useActiveSection();
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "transparent",
      paddingTop: 24, paddingBottom: 24
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <a href="#home" style={{
          display: "inline-flex", alignItems: "center", gap: 12
        }}>
          <img src="assets/bspoke-logo.png" alt="BSpoke Hospitality & Asset Group"
          style={{ width: 32, height: 32, objectFit: "contain" }} />
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 12, letterSpacing: "var(--tracking-label)",
            textTransform: "uppercase", fontWeight: 500,
            color: isLight ? "rgba(245,240,235,0.85)" : "var(--ink)"
          }}>BSpoke &nbsp;/&nbsp; Hospitality &amp; Asset Group</span>
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <ul style={{ display: "flex", gap: 24, listStyle: "none", margin: 0, padding: 0 }}>
            {NAV_LINKS.map((l) => {
              const isActive = l.href === active;
              return (
                <li key={l.label}>
                  <a href={l.href} style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 12,
                    letterSpacing: "var(--tracking-label)",
                    textTransform: "uppercase",
                    fontWeight: isActive ? 600 : 500,
                    color: isActive ?
                    isLight ? "var(--gold-light)" : "var(--navy)" :
                    isLight ? "rgba(245,240,235,0.75)" : "var(--ink-2)"
                  }}>{l.label}</a>
                </li>);

            })}
          </ul>
          <a href={CALENDAR_URL} target="_blank" rel="noopener" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-mono)",
            fontSize: 12, letterSpacing: "var(--tracking-label)",
            textTransform: "uppercase", fontWeight: 600,
            color: isLight ? "var(--inverse)" : "var(--navy)",
            paddingBottom: 4, borderBottom: "1px solid var(--gold)"
          }}>
            Schedule <span style={{ color: "var(--gold)" }}>→</span>
          </a>
        </div>
      </div>
    </nav>);

}

/* ---------- Style C: Editorial-rule (advisor firm vibe) ---------- */
function NavEditorial({ variant = "dark", logoBacking = "white" }) {
  const isLight = variant === "light";
  const active = useActiveSection();
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: isLight ? "var(--navy-dark)" : "var(--paper)",
      borderBottom: `1px solid var(--gold)`
    }}>
      {/* Top meta line */}
      <div style={{
        background: isLight ? "rgba(0,0,0,0.2)" : "var(--cream)",
        borderBottom: isLight ? "1px solid rgba(245,240,235,0.06)" : "1px solid var(--line)"
      }}>
        <div className="wrap" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          height: 32,
          fontFamily: "var(--font-mono)",
          fontSize: 12, letterSpacing: "var(--tracking-label)",
          textTransform: "uppercase",
          color: isLight ? "rgba(245,240,235,0.55)" : "var(--ink-3)"
        }}>
          <span>Owner-Side Hospitality Advisory · South Florida</span>
          <span>EST. 2021 · YANN CRINE, FOUNDER & PRINCIPAL</span>
        </div>
      </div>
      {/* Main bar */}
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 76
      }}>
        <Logo variant={variant} backing={logoBacking} />
        <ul style={{ display: "flex", gap: 28, listStyle: "none", margin: 0, padding: 0 }}>
          {NAV_LINKS.map((l) => {
            const isActive = l.href === active;
            return (
              <li key={l.label}>
                <a href={l.href} style={{
                  fontSize: 14, fontWeight: isActive ? 600 : 500, letterSpacing: "0.01em",
                  color: isLight ? "rgba(245,240,235,0.85)" : "var(--ink)",
                  paddingBottom: 2,
                  borderBottom: isActive ? "1px solid var(--gold)" : "1px solid transparent"
                }}>{l.label}</a>
              </li>);

          })}
        </ul>
        <a href={CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold" style={{
          padding: "10px 20px",
          fontSize: 12,
          letterSpacing: "0.12em"
        }}>
          Schedule a Call
        </a>
      </div>
    </nav>);

}

function Nav({ style = "classic", variant = "dark", logoBacking = "white" }) {
  if (style === "minimal") return <NavMinimal variant={variant} logoBacking={logoBacking} />;
  if (style === "editorial") return <NavEditorial variant={variant} logoBacking={logoBacking} />;
  return <NavClassic variant={variant} logoBacking={logoBacking} />;
}

window.BSPNav = Nav;