// VELOUR marketing site — header + shared web primitives (exported to window).
const { Button } = window.VelourDesignSystem_380ed4;

// Text wordmark per brand: serif, wide tracking, sentence of caps. Never recreated in another face.
function Wordmark({ size = 22, color = "var(--ink)", onClick }) {
  return (
    <span onClick={onClick} style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: size, letterSpacing: "var(--wordmark-ls)", color, paddingLeft: "var(--wordmark-ls)", cursor: onClick ? "pointer" : "default" }}>VELOUR</span>
  );
}

function Eyebrow({ children, color = "var(--text-tertiary)", style }) {
  return <div style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color, fontWeight: 500, ...style }}>{children}</div>;
}

function Section({ children, bg = "transparent", pad = 96, style, id }) {
  return (
    <section id={id} className="vlr-section" style={{ background: bg, padding: `${pad}px 40px`, ...style }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>{children}</div>
    </section>
  );
}

function SiteHeader({ current, onNavigate, member }) {
  const links = [
    { label: "Features", view: "features" },
    { label: "Pricing", view: "pricing" },
    { label: "Blog", view: "blog" },
  ];
  const go = (view) => (e) => { e.preventDefault(); onNavigate && onNavigate(view); };
  // Header sits flush with the page until the reader scrolls — then it gains a soft shadow.
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, background: "rgba(247,244,239,0.82)", backdropFilter: "saturate(140%) blur(12px)", WebkitBackdropFilter: "saturate(140%) blur(12px)", borderBottom: "var(--border-width) solid var(--border)", boxShadow: scrolled ? "0 10px 30px -18px rgba(44,44,42,0.28)" : "none", transition: "box-shadow .4s cubic-bezier(.16,1,.3,1)" }}>
      <style>{`
        .vlr-hdr-row { max-width: 1200px; margin: 0 auto; padding: 0 40px; height: 72px; display: flex; align-items: center; justify-content: space-between; }
        .vlr-hdr-nav { display: flex; align-items: center; gap: 32px; }
        /* Section keeps its 40px inline so a component rendered on its own still has
           gutters; this only narrows them where 80px of padding is a fifth of the screen. */
        @media (max-width: 540px) {
          .vlr-section { padding-left: 20px !important; padding-right: 20px !important; }
        }
        /* A wordmark, three links and two doors measure 450px; a phone offers 310.
           Three items is too few to justify burying behind a drawer and too many to
           drop, so the row wraps instead: the wordmark and the way in stay on top,
           the links take a line of their own under a hairline. */
        @media (max-width: 640px) {
          .vlr-hdr-row { flex-wrap: wrap; height: auto; padding: 10px 20px 0; }
          .vlr-hdr-nav { order: 3; width: 100%; justify-content: center; gap: 28px; margin-top: 10px; padding: 9px 0; border-top: var(--border-width) solid var(--border); }
        }
      `}</style>
      <div className="vlr-hdr-row">
        <Wordmark onClick={go("home")} />
        <nav className="vlr-hdr-nav">
          {links.map((l) => {
            const active = current === l.view;
            return (
              <a key={l.label} href="#" onClick={go(l.view)} style={{ fontSize: 14, color: active ? "var(--text-primary)" : "var(--text-secondary)", fontWeight: active ? 500 : 400, textDecoration: "none", letterSpacing: "0.01em", paddingBottom: 3, borderBottom: active ? "1.5px solid var(--ink)" : "1.5px solid transparent" }}>{l.label}</a>
            );
          })}
        </nav>
        {/* Signed in, the two doors are wrong: "Sign in" invites someone who is
            already in to request a pointless second link, and "Begin" offers to
            create an account they have. Worse, without a way through there was
            NO route back to the dashboard from here at all — a reload lands on
            this page, so a member could be signed in and simply stranded. */}
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          {member ? (
            <Button size="sm" iconRight="arrow-right" onClick={() => onNavigate && onNavigate("dashboard")}>Your space</Button>
          ) : (
            <React.Fragment>
              <a href="#" onClick={(e) => { e.preventDefault(); window.velourOpenSignIn && window.velourOpenSignIn(); }} style={{ fontSize: 14, color: "var(--text-primary)", textDecoration: "none", whiteSpace: "nowrap" }}>Sign in</a>
              <Button size="sm" iconRight="arrow-right" onClick={() => window.velourOpenSignup && window.velourOpenSignup()}>Begin</Button>
            </React.Fragment>
          )}
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Wordmark, Eyebrow, Section, SiteHeader });