// Global chrome: preview bar, site header, footer
function PreviewBar({ path, device, setDevice, signedIn, setSignedIn, onReset }) {
  return (
    <div className="preview-bar" role="toolbar" aria-label="Preview controls">
      <span className="pb-tag">Preview</span>
      <span className="pb-path">{path || "/"}</span>
      <span className="pb-spacer" />
      <span className="pb-tag">Device</span>
      <div className="pb-toggle" role="tablist" aria-label="Viewport">
        <button className={device === "desktop" ? "is-active" : ""} onClick={() => setDevice("desktop")} role="tab" aria-selected={device === "desktop"}>Desktop</button>
        <button className={device === "mobile" ? "is-active" : ""} onClick={() => setDevice("mobile")} role="tab" aria-selected={device === "mobile"}>Mobile</button>
      </div>
      <button className="pb-auth" data-signed={signedIn} onClick={() => setSignedIn(!signedIn)} aria-label="Toggle sign-in state">
        <span className="dot" /> {signedIn ? "Signed in (demo)" : "Signed out"}
      </button>
      <button className="pb-reset" onClick={onReset}>reset</button>
    </div>
  );
}

function Brand({ size, variant }) {
  // variant: "header" (default, compact mark + wordmark inline) | "mark" (just the symbol) | "stacked" (full lockup)
  const v = variant || "header";
  if (v === "stacked") {
    return (
      <span className="brand brand-stacked">
        <img src="assets/school-of-stillness-logo.png" alt="School of Stillness — Where Everyone is a Healer" />
      </span>
    );
  }
  if (v === "mark") {
    return (
      <span className="brand brand-mark" style={{ "--brand-mark-size": (size || 28) + "px" }}>
        <img src="assets/school-of-stillness-logo.png" alt="School of Stillness logomark" />
      </span>
    );
  }
  // header: crop the symbol on the left, set the wordmark in type next to it for legibility at small sizes
  return (
    <span className="brand brand-header">
      <span className="brand-symbol" aria-hidden="true">
        <img src="assets/school-of-stillness-logo.png" alt="" />
      </span>
      <span className="brand-words">
        <span className="brand-name serif" style={{ fontSize: size || 17 }}>School of Stillness</span>
        <span className="brand-tag">Where Everyone is a Healer</span>
      </span>
    </span>
  );
}

function SiteHeader({ path, device, signedIn, nav, onNav, setSignedIn }) {
  const isMobile = device === "mobile";
  if (isMobile) {
    return (
      <header className="m-header">
        <a href="#/" onClick={(e) => { e.preventDefault(); nav("/"); }}><Brand size={15} /></a>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          {signedIn ? (
            <a href="#/account" onClick={(e) => { e.preventDefault(); nav("/account"); }}>
              <span className="avatar">A</span>
            </a>
          ) : (
            <Button size="sm" onClick={() => nav("/auth/sign-in")}>Sign in</Button>
          )}
          <button aria-label="Menu" className="m-menu">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M4 7h16M4 12h16M4 17h16" />
            </svg>
          </button>
        </div>
      </header>
    );
  }
  const links = signedIn
    ? [["Catalog", "/catalog"], ["My Library", "/library"]]
    : [["Catalog", "/catalog"], ["About", "/"]];
  return (
    <header className="site-header">
      <a href="#/" onClick={(e) => { e.preventDefault(); nav("/"); }}><Brand /></a>
      <nav aria-label="Primary">
        {links.map(([label, to]) => (
          <a key={to+label} href={`#${to}`} onClick={(e) => { e.preventDefault(); nav(to); }}
             className={path === to ? "is-active" : ""}>{label}</a>
        ))}
      </nav>
      <div className="header-right">
        {signedIn ? (
          <>
            <a href="#/account" onClick={(e) => { e.preventDefault(); nav("/account"); }} aria-label="Account">
              <span className="avatar">A</span>
            </a>
          </>
        ) : (
          <Button onClick={() => nav("/auth/sign-in")}>Sign in</Button>
        )}
      </div>
    </header>
  );
}

function SiteFooter({ device }) {
  if (device === "mobile") {
    return (
      <footer className="m-footer">
        <span className="brand-foot">School of Stillness</span>
        <span>A teaching home for Dr. Arlene Dijamco's <em>I Am Intuitive</em>.</span>
        <div className="m-foot-links"><a>Terms</a><a>Privacy</a><a>Support</a></div>
        <span style={{ marginTop: 8, opacity: 0.7 }}>Powered by <strong>Corantor</strong></span>
      </footer>
    );
  }
  return (
    <footer className="site-footer">
      <div className="foot-left">
        <div className="brand-foot">School of Stillness</div>
        <div style={{ marginTop: 6 }}>A teaching home for Dr. Arlene Dijamco's <em>I Am Intuitive</em>.</div>
      </div>
      <div className="foot-center">
        <a>Terms</a><a>Privacy</a><a>Support</a>
      </div>
      <div className="foot-right">
        Powered by <strong>Corantor</strong>
      </div>
    </footer>
  );
}

Object.assign(window, { PreviewBar, SiteHeader, SiteFooter, Brand });