// Small shared primitives: logo, arrow icon, ambient glow, eyebrow, trust strip.

// The "V_" mark — bold filled V + terminal-cursor underscore. Sized via the
// outer .logo-mark; the SVG fills it. `stroke-linejoin="round"` + a thin
// stroke on the filled paths softens the corners just enough.
function LogoMark({ size = 26, blink = true }) {
  return (
    <span className="logo-mark" style={{ width: size, height: size }}>
      <svg
        viewBox="0 0 36 32"
        width="74%" height="74%"
        fill="currentColor"
        stroke="currentColor"
        strokeWidth="1.2"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M4 5 L10 5 L12 18 L14 5 L20 5 L12 27 Z" />
        <rect
          x="22.5" y="23" width="9.5" height="3.8" rx="0.7"
          className={blink ? "logo-caret" : ""}
        />
      </svg>
    </span>
  );
}

function Logo({ size = 26 }) {
  return (
    <span className="logo">
      <LogoMark size={size} />
      <span>vibn</span>
    </span>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Eyebrow({ children }) {
  return <div className="eyebrow">{children}</div>;
}

// Soft radial glow blob for ambient backgrounds. Place absolutely positioned.
function Glow({ color = "var(--accent-glow)", size = 700, opacity = 1, style = {} }) {
  return (
    <div
      aria-hidden="true"
      style={{
        position: "absolute",
        width: size,
        height: size,
        background: `radial-gradient(circle at center, ${color} 0%, transparent 62%)`,
        filter: "blur(20px)",
        opacity,
        pointerEvents: "none",
        ...style,
      }}
    />
  );
}

function TrustStrip({ items }) {
  return (
    <div
      className="mono"
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: "8px 18px",
        fontSize: 12,
        color: "var(--fg-mute)",
        letterSpacing: "0.04em",
      }}
    >
      {items.map((item, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span style={{ color: "var(--fg-faint)" }}>·</span>}
          <span>{item}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

// A subtle gradient hairline used inside cards & frames.
function Hairline({ vertical = false, style = {} }) {
  return (
    <div
      aria-hidden="true"
      style={{
        background: vertical
          ? "linear-gradient(180deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent)"
          : "linear-gradient(90deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent)",
        height: vertical ? "100%" : 1,
        width: vertical ? 1 : "100%",
        ...style,
      }}
    />
  );
}

Object.assign(window, { Logo, LogoMark, Arrow, Eyebrow, Glow, TrustStrip, Hairline });