// myflyers.ai wordmark + Lola lockups
// Following myLoanIQ brand: lowercase "my" gray + bold middle + colored suffix
//
// variant: "coral" | "teal" | "gradient"
// lockup: "none" | "inline" | "stacked"

function Wordmark({ variant = "coral", size = 28, onInk = false, lockup = "none", style = {} }) {
  const my = onInk ? "rgba(250,250,250,0.55)" : "#A8A8A8";
  const middle = onInk ? "#FAFAFA" : "#0A0A0A";
  const muted = onInk ? "rgba(250,250,250,0.45)" : "#A8A8A8";
  const lolaColor = onInk ? "#FAFAFA" : "#0A0A0A";

  let suffix;
  if (variant === "coral") {
    suffix = <span style={{ color: "#E8573A", fontWeight: 700 }}>.ai</span>;
  } else if (variant === "teal") {
    suffix = <span style={{ color: "#2EBDBD", fontWeight: 700 }}>.ai</span>;
  } else {
    suffix = (
      <span
        style={{
          fontWeight: 700,
          backgroundImage: "linear-gradient(135deg, #E8573A 0%, #2EBDBD 100%)",
          WebkitBackgroundClip: "text",
          backgroundClip: "text",
          color: "transparent",
        }}
      >
        .ai
      </span>
    );
  }

  const wordmarkInline = (
    <span
      className="wordmark"
      style={{
        fontFamily: '"Space Grotesk", -apple-system, sans-serif',
        fontSize: size,
        letterSpacing: "-0.02em",
        lineHeight: 1,
        whiteSpace: "nowrap",
        display: "inline-flex",
        alignItems: "baseline",
      }}
    >
      <span style={{ color: my, fontWeight: 400 }}>my</span>
      <span style={{ color: middle, fontWeight: 700, marginLeft: size * 0.06 }}>flyers</span>
      {suffix}
    </span>
  );

  if (lockup === "none") {
    return <span style={style}>{wordmarkInline}</span>;
  }

  // Lola attribution — Lola wordmark is set in Space Grotesk italic-ish 600,
  // paired with the orb (always at fixed brand gradient).
  const lolaSize = Math.max(10, Math.round(size * 0.5));
  const eyebrowSize = Math.max(7, Math.round(size * 0.28));

  const lolaMark = (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: Math.max(4, size * 0.18),
      fontFamily: '"Space Grotesk", sans-serif',
      fontSize: lolaSize,
      fontWeight: 600,
      letterSpacing: "-0.01em",
      color: lolaColor,
      lineHeight: 1,
    }}>
      <LolaOrb size={Math.max(10, Math.round(size * 0.55))} />
      <span>Lola</span>
    </span>
  );

  const eyebrow = (
    <span style={{
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: eyebrowSize,
      letterSpacing: "0.16em",
      color: muted,
      lineHeight: 1,
    }}>
      POWERED BY
    </span>
  );

  if (lockup === "inline") {
    // Wordmark · POWERED BY · [orb] Lola
    return (
      <span style={{
        display: "inline-flex",
        alignItems: "center",
        gap: size * 0.55,
        ...style,
      }}>
        {wordmarkInline}
        <span style={{
          width: 1,
          height: size * 0.7,
          background: muted,
          opacity: 0.4,
          flexShrink: 0,
        }} />
        <span style={{
          display: "inline-flex",
          flexDirection: "column",
          gap: Math.max(3, size * 0.12),
          alignItems: "flex-start",
        }}>
          {eyebrow}
          {lolaMark}
        </span>
      </span>
    );
  }

  // stacked: wordmark on top, eyebrow + Lola underneath
  return (
    <span style={{
      display: "inline-flex",
      flexDirection: "column",
      alignItems: "flex-start",
      gap: Math.max(6, size * 0.32),
      ...style,
    }}>
      {wordmarkInline}
      <span style={{
        display: "inline-flex",
        alignItems: "center",
        gap: size * 0.32,
      }}>
        {eyebrow}
        {lolaMark}
      </span>
    </span>
  );
}

window.Wordmark = Wordmark;