// Sahh wordmark — clean typographic logotype.
// Inter Tight 800, tight tracking. Confident, balanced lowercase.
// (Locked per user — do not redesign.)

const SahhMark = ({ size = 32, color }) => {
  // Mark = stylized "S" in a chip — kept simple, brand-neutral
  // Used only as decorative bullet alongside the wordmark when needed.
  const c = color || "var(--green)";
  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: size,
      height: size,
      background: c,
      color: "var(--paper)",
      borderRadius: size * 0.28,
      fontFamily: "var(--f-display)",
      fontWeight: 800,
      fontSize: size * 0.55,
      letterSpacing: "-0.06em",
      lineHeight: 1,
    }}>S</span>
  );
};

const SahhWordmark = ({ size = 28, color }) => {
  const c = color || "var(--ink)";
  return (
    <span style={{
      fontFamily: "var(--f-display)",
      fontWeight: 800,
      fontSize: size,
      letterSpacing: "-0.045em",
      lineHeight: 1,
      color: c,
    }}>Sahh</span>
  );
};

const SahhNavMark = ({ color }) => {
  const c = color || "var(--ink)";
  return (
    <a href="#" style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 8,
      color: c,
      textDecoration: "none",
    }}>
      <SahhWordmark size={26} color={c} />
    </a>
  );
};

// Big lockup variant for hero / footer. Kept to wordmark only.
const SahhLockup = ({ size = 36, color }) => (
  <SahhWordmark size={size} color={color} />
);

// Verified "seal" — used inside dashboard sidebar; built from a check ring (no logo glyph)
const SahhSeal = ({ size = 32, dark = false }) => {
  const fg = dark ? "var(--lime)" : "var(--green)";
  const bg = dark ? "var(--green-3)" : "var(--lime-soft)";
  return (
    <div style={{
      width: size, height: size,
      borderRadius: "50%",
      background: bg,
      display: "grid",
      placeItems: "center",
      flexShrink: 0,
      border: dark ? "1px solid rgba(255,255,255,0.1)" : "1px solid var(--green-tint)",
    }}>
      <svg width={size * 0.5} height={size * 0.5} viewBox="0 0 12 12" fill="none">
        <path d="M2 6.5L5 9.5L10 3" stroke={fg} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
};

window.SahhMark = SahhMark;
window.SahhWordmark = SahhWordmark;
window.SahhNavMark = SahhNavMark;
window.SahhLockup = SahhLockup;
window.SahhSeal = SahhSeal;