const React = window.React;
const { Button } = window.CreativeTherapyZoneDesignSystem_30174f;

function Wordmark() {
  return (
    <a href="#top" style={{ display: "flex", alignItems: "center", gap: 11, textDecoration: "none" }}>
      <img src={(window.__resources && window.__resources.logoMark) || "assets/logo-mark.png"} alt="" style={{ height: 56, width: "auto", flex: "0 0 auto" }} />
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 23, letterSpacing: "-.01em", color: "var(--text-strong)", lineHeight: 1 }}>
        Creative <span style={{ fontStyle: "italic", color: "var(--brand-strong)" }}>Therapy</span> Zone
      </span>
    </a>
  );
}

function Navbar() {
  const links = ["Art Therapy", "For Kids", "Psychotherapy", "Virtual", "About"];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, background: "rgba(253,251,247,.82)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border-soft)" }}>
      <nav style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "16px var(--gutter)", display: "flex", alignItems: "center", gap: 24 }}>
        <Wordmark />
        <div style={{ display: "flex", gap: 26, marginLeft: "auto", alignItems: "center" }}>
          {links.map((l) => (
            <a key={l} href="#" style={{ fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 600, color: "var(--text-body)", textDecoration: "none" }}>{l}</a>
          ))}
        </div>
        <Button variant="primary" size="sm" href="#contact">Book Free Consultation</Button>
      </nav>
    </header>
  );
}
window.Navbar = Navbar;

