// Original $HOPE mark — a stylized teary "hope eye" over a sad-mouth crescent.
// Drawn entirely as primitive shapes (no recreations of any branded character).

const HopeMark = ({ size = 80, glow = true }) => {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} className={glow ? 'pulse-glow' : ''}>
      <defs>
        <radialGradient id="bg" cx="50%" cy="45%" r="60%">
          <stop offset="0%" stopColor="#7cf08a" />
          <stop offset="55%" stopColor="#4ade5a" />
          <stop offset="100%" stopColor="#0a3d24" />
        </radialGradient>
        <radialGradient id="iris" cx="40%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#1a1f2e" />
          <stop offset="100%" stopColor="#03060c" />
        </radialGradient>
        <linearGradient id="tear" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#cfe9ff" />
          <stop offset="100%" stopColor="#7cb8ff" />
        </linearGradient>
        <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
      </defs>

      {/* outer rounded squircle */}
      <rect x="6" y="6" width="108" height="108" rx="30" fill="url(#bg)" stroke="#0a3d24" strokeWidth="2" />
      {/* soft inner highlight */}
      <ellipse cx="44" cy="34" rx="30" ry="14" fill="#fff" opacity="0.18" />

      {/* eye */}
      <ellipse cx="60" cy="56" rx="28" ry="22" fill="#fff5dc" stroke="#062013" strokeWidth="2.5" />
      {/* iris */}
      <circle cx="62" cy="58" r="14" fill="url(#iris)" />
      {/* HOPE letters in iris */}
      <text x="62" y="62" textAnchor="middle" fontFamily="'Bricolage Grotesque',sans-serif" fontSize="8" fontWeight="800" fill="#ffd166" letterSpacing="0.5">HOPE</text>
      {/* shine dots */}
      <circle cx="56" cy="51" r="2.6" fill="#ffffff" />
      <circle cx="68" cy="55" r="1.4" fill="#ffffff" />

      {/* eyelid droop */}
      <path d="M32 50 Q60 36 88 50" fill="none" stroke="#062013" strokeWidth="3" strokeLinecap="round" />

      {/* tear */}
      <path d="M48 76 Q46 86 50 92 Q54 88 52 78 Z" fill="url(#tear)" stroke="#062013" strokeWidth="1.2" />

      {/* sad mouth */}
      <path d="M40 92 Q60 102 80 92" fill="none" stroke="#062013" strokeWidth="3.2" strokeLinecap="round" />
    </svg>
  );
};

window.HopeMark = HopeMark;