// Shared primitives — used across homepage and beta page.

export 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>
  );
}

export function Logo({ size = 26, href = "/" }) {
  return (
    <a href={href} className="inline-flex items-center gap-[9px] font-semibold text-[17px] tracking-[-0.02em]">
      <LogoMark size={size} />
      <span>vibn</span>
    </a>
  );
}

export 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>
  );
}

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

export function Glow({ color = "var(--c-accent-glow)", size = 700, opacity = 1, style = {} }) {
  return (
    <div
      aria-hidden="true"
      className="absolute pointer-events-none"
      style={{
        width: size, height: size,
        background: `radial-gradient(circle at center, ${color} 0%, transparent 62%)`,
        filter: "blur(20px)",
        opacity,
        ...style,
      }}
    />
  );
}

export function TrustStrip({ items }) {
  return (
    <div className="font-mono flex flex-wrap gap-x-[18px] gap-y-2 text-[12px] text-fg-mute tracking-[0.04em]">
      {items.map((item, i) => (
        <span key={i} className="contents">
          {i > 0 && <span className="text-fg-faint">·</span>}
          <span>{item}</span>
        </span>
      ))}
    </div>
  );
}
