// Shared components + helpers, exported to window for other babel scripts
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ─── Real photos pulled from mandolinranch.com ───
const IMG = {
  portrait: "https://www.mandolinranch.com/wp-content/uploads/2017/02/cp-face.jpg",
  performance1: "https://www.mandolinranch.com/wp-content/uploads/2018/07/ajfinal8aj.jpg",
  aboutHero: "https://www.mandolinranch.com/wp-content/uploads/2023/04/IMG_0043.jpeg",
  aboutSide: "https://www.mandolinranch.com/wp-content/uploads/2015/07/IMG_1855-3.jpg",
  band: "https://www.mandolinranch.com/wp-content/uploads/2014/11/MandolinRancC63a-A09aT05a-Z_mdm.jpg",
  othello: "https://www.mandolinranch.com/wp-content/uploads/2014/09/photo-10-300x224.jpg",
  live1: "https://www.mandolinranch.com/wp-content/uploads/2015/07/IMG_0778-225x300.jpg",
  live2: "https://www.mandolinranch.com/wp-content/uploads/2017/04/unnamed-162x300.jpg",
  live3: "https://www.mandolinranch.com/wp-content/uploads/2014/11/IMG_0214-224x300.jpg",
  live4: "https://www.mandolinranch.com/wp-content/uploads/2015/03/IMG_0114-768x1024.jpg",
};

// ─── Tiny hash-router ───
function useRoute() {
  const [route, setRoute] = useState(() => (location.hash || "#/home").replace(/^#/, ""));
  useEffect(() => {
    const fn = () => {
      setRoute((location.hash || "#/home").replace(/^#/, ""));
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", fn);
    return () => window.removeEventListener("hashchange", fn);
  }, []);
  return route;
}

function go(path) {
  location.hash = "#" + path;
}

// ─── Nav ───
function Nav({ route }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["/home", "Home"],
    ["/about", "About"],
    ["/bands", "Bands"],
    ["/calendar", "Calendar"],
    ["/listen", "Listen"],
    ["/watch", "Watch"],
    ["/gallery", "Gallery"],
    ["/contact", "Book"],
  ];

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const nav = (href) => { setOpen(false); go(href); };

  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <a className="logo-mark" onClick={() => go("/home")}>
            <div className="mr-sigil">m</div>
            <div>
              <div className="mr-name">Mandolin Ranch</div>
              <div className="mr-sub">Charlie Provenza · est. 1990</div>
            </div>
          </a>
          <div className="nav-links">
            {links.slice(0, 7).map(([href, label]) => (
              <a
                key={href}
                className={route === href ? "active" : ""}
                onClick={() => go(href)}
              >
                {label}
              </a>
            ))}
          </div>
          <a className="cta-book" onClick={() => go("/contact")}>
            <span className="dot" />
            Book Charlie
          </a>
          <button className="nav-toggle" onClick={() => setOpen(true)} aria-label="Open menu">
            <span className="bars"><span /><span /><span /></span>
            Menu
          </button>
        </div>
      </nav>

      <div className={`mobile-drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="top">
          <a className="logo-mark" onClick={() => nav("/home")}>
            <div className="mr-sigil">m</div>
            <div>
              <div className="mr-name">Mandolin Ranch</div>
              <div className="mr-sub">Charlie Provenza · est. 1990</div>
            </div>
          </a>
          <button className="close" onClick={() => setOpen(false)} aria-label="Close menu">Close ×</button>
        </div>
        <nav>
          {links.map(([href, label], i) => (
            <a
              key={href}
              className={route === href ? "active" : ""}
              onClick={() => nav(href)}
            >
              <span>{label}</span>
              <span className="num">0{i + 1}</span>
            </a>
          ))}
        </nav>
        <div className="cta-stack">
          <a href="tel:+17209368877">Call <strong>(720) 936-8877</strong></a>
          <a href="mailto:charlie@mandolinranch.com">Email <strong>charlie@mandolinranch.com</strong></a>
        </div>
      </div>
    </>
  );
}

// ─── Footer ───
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="brand-block">
            <div className="mark">
              <div className="sigil">m</div>
              <div className="name">Mandolin Ranch</div>
            </div>
            <p>
              Colorado live music for weddings, corporate events, and private occasions ,
              rooted in bluegrass, gypsy jazz, and the American songbook since 1990.
            </p>
          </div>
          <div>
            <h4>Site</h4>
            <a onClick={() => go("/home")}>Home</a>
            <a onClick={() => go("/about")}>About</a>
            <a onClick={() => go("/bands")}>Bands & Projects</a>
            <a onClick={() => go("/calendar")}>Calendar</a>
          </div>
          <div>
            <h4>Media</h4>
            <a onClick={() => go("/listen")}>Listen</a>
            <a onClick={() => go("/watch")}>Watch</a>
            <a onClick={() => go("/gallery")}>Gallery</a>
          </div>
          <div>
            <h4>Booking</h4>
            <a onClick={() => go("/contact")}>Inquire</a>
            <a href="mailto:charlie@mandolinranch.com">charlie@mandolinranch.com</a>
            <a href="tel:+17209368877">(720) 936-8877</a>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Mandolin Ranch · Charlie Provenza</div>
          <div>Based in Colorado · Serving the Front Range & beyond</div>
        </div>
      </div>
    </footer>
  );
}

// ─── Ornament ───
function Ornament({ sym = "✦" }) {
  return (
    <div className="ornament">
      <div className="hr" />
      <div className="sym">{sym}</div>
      <div className="hr" />
    </div>
  );
}

// ─── Photo / Placeholder ───
function Photo({ src, alt, style, className, label }) {
  if (src) {
    return (
      <div
        className={className}
        style={{ ...style, backgroundImage: `url(${src})` }}
        role="img"
        aria-label={alt}
      />
    );
  }
  return (
    <div className={`${className || ""} ph`} style={style}>
      {label || "placeholder"}
    </div>
  );
}

Object.assign(window, { IMG, useRoute, go, Nav, Footer, Ornament, Photo });