/* global React */
// Sprout logo — refined hi-fi version. Hand-drawn feel but cleaner.

const SproutMark = ({ size = 40, color = "var(--sprout)", accent = "var(--sun)" }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: "block", overflow: "visible", flexShrink: 0 }}>
    {/* central stem */}
    <path d="M 20 36 L 20 18" stroke={color} strokeWidth="1.6" strokeLinecap="round" fill="none" />
    {/* left leaf */}
    <path
      d="M 20 24 Q 9 22, 7 13 Q 17 11, 20 20"
      fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
    />
    {/* right leaf */}
    <path
      d="M 20 20 Q 25 9, 34 9 Q 33 19, 20 23"
      fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
    />
    {/* seed dot */}
    <circle cx="20" cy="16" r="2.2" fill={accent} />
  </svg>
);

const SproutLogo = ({ size = 32, layout = "horizontal", showTag = true, color = "var(--ink)", markColor }) => {
  const mc = markColor || "var(--sprout)";
  if (layout === "horizontal") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
        <SproutMark size={size} color={mc} />
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
          <div style={{
            fontFamily: "var(--serif)",
            fontSize: size * 0.85,
            color,
            fontWeight: 400,
            letterSpacing: "0.005em",
          }}>
            Dai
          </div>
          {showTag && (
            <div style={{
              fontFamily: "var(--sans)",
              fontSize: Math.max(8, size * 0.26),
              letterSpacing: "0.22em",
              color: "var(--ink-3)",
              marginTop: 4,
              fontWeight: 500,
            }}>
              IMPACT&nbsp;&nbsp;FUND
            </div>
          )}
        </div>
      </div>
    );
  }
  // stacked layout
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
      <SproutMark size={size} color={mc} />
      <div style={{
        fontFamily: "var(--serif)",
        fontSize: size * 0.7,
        color,
        lineHeight: 1,
      }}>Dai</div>
      {showTag && (
        <div style={{
          fontFamily: "var(--sans)",
          fontSize: Math.max(8, size * 0.22),
          letterSpacing: "0.25em",
          color: "var(--ink-3)",
          fontWeight: 500,
        }}>
          IMPACT&nbsp;&nbsp;FUND
        </div>
      )}
    </div>
  );
};

window.SproutMark = SproutMark;
window.SproutLogo = SproutLogo;