/* Wastafy AI logomark v2
   ───────────────────────
   Atlassian-style geometric "two-peak" mark — but the peaks form a W:
   • One tall asymmetric peak (right) and one short peak (left)
   • A hard inner cut between them creates a negative-space valley
   • Single accent color; the shorter peak is rendered at 65% tone
     to give the mark depth without introducing a second hue
   • Clean filled shapes (no strokes) so the mark stays crisp at any size

   The two peaks read as a "W" at a glance and as twin mountains on
   second look — geometric, premium, software-y, like Atlassian/Linear. */

const Logo = ({ size = 28, color = "currentColor", animated = false, className = "" }) => {
  return (
    <svg
      className={`wf-logo ${animated ? "is-animated" : ""} ${className}`}
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      aria-hidden="true"
    >
      {/* Short left peak — 65% tone */}
      <path
        className="wf-peak wf-peak-left"
        d="M 4 25
           L 11 8
           L 14 14.5
           L 9.5 25 Z"
        fill={color}
        fillOpacity="0.55"
      />
      {/* Tall right peak — full tone, with a notch on its lower-left
          edge that creates the valley between the two peaks */}
      <path
        className="wf-peak wf-peak-right"
        d="M 19 8
           L 28 25
           L 12 25
           L 16 17
           L 17.6 20.2
           L 19 17.4 Z"
        fill={color}
      />

      <style>{`
        .wf-logo .wf-peak { transform-origin: 16px 25px; }
        .wf-logo.is-animated .wf-peak-left {
          opacity: 0;
          transform: translateY(8px);
          animation: wfPeakL .7s cubic-bezier(.7,0,.2,1) .15s forwards;
        }
        .wf-logo.is-animated .wf-peak-right {
          opacity: 0;
          transform: translateY(8px);
          animation: wfPeakR .8s cubic-bezier(.7,0,.2,1) .35s forwards;
        }
        @keyframes wfPeakL { to { opacity: 1; transform: translateY(0); } }
        @keyframes wfPeakR { to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </svg>
  );
};

const Wordmark = ({ size = 26, accent = "var(--accent, #ff5a1f)", animated = false, gap = 10, className = "" }) => {
  return (
    <span className={`wf-wordmark ${className}`} style={{ display: "inline-flex", alignItems: "center", gap: `${gap}px` }}>
      <Logo size={size} color={accent} animated={animated} />
      <span className="wf-wordmark-text">
        <span className="wf-w-name">WASTAFY</span>
        <span className="wf-w-ai" style={{ color: accent }}>AI</span>
      </span>
      <style>{`
        .wf-wordmark-text {
          display: inline-flex;
          gap: 0.4em;
          font-family: inherit;
          font-weight: 600;
          letter-spacing: 0.14em;
          font-size: 0.78rem;
          line-height: 1;
          white-space: nowrap;
        }
        .wf-w-ai { font-weight: 700; }
      `}</style>
    </span>
  );
};

const LogoAnimated = (props) => <Logo {...props} animated />;

window.Logo = Logo;
window.Wordmark = Wordmark;
window.LogoAnimated = LogoAnimated;