// Primitives.jsx — shared building blocks for the Growth Mind website
const { useState, useEffect } = React;

function Kicker({ children, center, onDark }) {
  return <span className={"kicker" + (center ? " center" : "") + (onDark ? " kicker-dark" : "")}>{children}</span>;
}

function Btn({ children, variant = "primary", size, href = "#", onDark, icon, onClick, type }) {
  const cls = ["btn", "btn-" + variant, size === "sm" && "btn-sm", onDark && "btn-on-dark"]
    .filter(Boolean).join(" ");
  if (type === "submit") {
    return (
      <button className={cls} type="submit" onClick={onClick}>
        {icon && <i className={"ph-fill ph-" + icon}></i>}
        {children}
      </button>
    );
  }
  return (
    <a className={cls} href={href} onClick={onClick}>
      {icon && <i className={"ph-fill ph-" + icon}></i>}
      {children}
    </a>
  );
}

function Tag({ children, variant }) {
  return <span className={"tag" + (variant ? " tag-" + variant : "")}>{children}</span>;
}

function LogoMark({ size = 34, reversed }) {
  return (
    <img
      src={reversed ? "assets/logo-reversed.png" : "assets/logo-icon.png"}
      alt="Growth Mind"
      style={{ height: size, width: "auto", display: "block" }}
    />
  );
}

function Wordmark({ height = 30, light }) {
  return (
    <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
      <LogoMark size={height} reversed={light} />
      <span style={{
        fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
        fontSize: height * 0.62, lineHeight: .82, letterSpacing: ".01em",
        color: light ? "var(--gm-paper)" : "var(--gm-ink)"
      }}>
        Growth<br/>Mind
      </span>
    </a>
  );
}

Object.assign(window, { Kicker, Btn, Tag, LogoMark, Wordmark });