// Custom gold-tinted feature icons for WuClock capability cards.
// Stroke 1.5, gold (#D4A852), 32x32 viewBox.

const GOLD = "#D4A852";
const GOLD_LITE = "#E4BE6A";

// 1. Clock with check badge — "Medí"
const FeatClockCheck = ({ size = 56 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <defs>
      <linearGradient id="fcc-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={GOLD_LITE} />
        <stop offset="100%" stopColor={GOLD} />
      </linearGradient>
    </defs>
    {/* main clock */}
    <circle cx="14" cy="17" r="11" stroke="url(#fcc-grad)" strokeWidth="1.6" />
    <path d="M14 10 V17 L18.5 19.5" stroke="url(#fcc-grad)" strokeWidth="1.6" strokeLinecap="round" />
    <circle cx="14" cy="17" r="0.9" fill={GOLD_LITE} />
    {/* check badge */}
    <circle cx="24" cy="8" r="5.4" fill="#1A051F" stroke="url(#fcc-grad)" strokeWidth="1.4" />
    <path d="M21.7 8.2 L23.4 9.8 L26.4 6.6" stroke={GOLD_LITE} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

// 2. Brain with sparkle — "Entendé"
const FeatBrainSpark = ({ size = 56 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <defs>
      <linearGradient id="fbs-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={GOLD_LITE} />
        <stop offset="100%" stopColor={GOLD} />
      </linearGradient>
    </defs>
    {/* left lobe */}
    <path
      d="M12 8 C9.5 8 7.5 10 7.5 12.5 C5.5 13.5 5 16 6.5 17.5 C5.5 19 6 21 8 22 C8 24 10 25.5 12 24.5 L14 24.5 L14 7.5 C13.5 7 12.7 7 12 8 Z"
      stroke="url(#fbs-grad)" strokeWidth="1.5" strokeLinejoin="round"
    />
    {/* right lobe */}
    <path
      d="M21 8 C23.5 8 25.5 10 25.5 12.5 C27.5 13.5 28 16 26.5 17.5 C27.5 19 27 21 25 22 C25 24 23 25.5 21 24.5 L19 24.5 L19 7.5 C19.5 7 20.3 7 21 8 Z"
      stroke="url(#fbs-grad)" strokeWidth="1.5" strokeLinejoin="round"
    />
    {/* sulcus hint */}
    <path d="M10.5 13 Q11.5 14 12 15 M22 13 Q21 14 20.5 15" stroke="url(#fbs-grad)" strokeWidth="1.2" strokeLinecap="round" opacity="0.7" />
    {/* sparkle */}
    <path d="M27 4 L27 9 M24.5 6.5 L29.5 6.5" stroke={GOLD_LITE} strokeWidth="1.5" strokeLinecap="round" />
    <circle cx="27" cy="6.5" r="0.9" fill={GOLD_LITE} />
  </svg>
);

// 3. Lotus flower — "Actuá"
const FeatLotus = ({ size = 56 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <defs>
      <linearGradient id="fl-grad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={GOLD_LITE} />
        <stop offset="100%" stopColor={GOLD} />
      </linearGradient>
      <linearGradient id="fl-petal" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="rgba(228,190,106,0.20)" />
        <stop offset="100%" stopColor="rgba(212,168,82,0)" />
      </linearGradient>
    </defs>
    {/* center petal */}
    <path d="M16 25 Q13.5 16 16 5 Q18.5 16 16 25 Z"
          fill="url(#fl-petal)" stroke="url(#fl-grad)" strokeWidth="1.5" strokeLinejoin="round" />
    {/* mid left */}
    <path d="M16 25 Q9 17 8 9 Q13.5 15 16 25 Z"
          fill="url(#fl-petal)" stroke="url(#fl-grad)" strokeWidth="1.5" strokeLinejoin="round" />
    {/* mid right */}
    <path d="M16 25 Q23 17 24 9 Q18.5 15 16 25 Z"
          fill="url(#fl-petal)" stroke="url(#fl-grad)" strokeWidth="1.5" strokeLinejoin="round" />
    {/* outer left */}
    <path d="M16 25 Q5 21 3 14 Q11 17 16 25 Z"
          fill="url(#fl-petal)" stroke="url(#fl-grad)" strokeWidth="1.5" strokeLinejoin="round" />
    {/* outer right */}
    <path d="M16 25 Q27 21 29 14 Q21 17 16 25 Z"
          fill="url(#fl-petal)" stroke="url(#fl-grad)" strokeWidth="1.5" strokeLinejoin="round" />
    {/* water line */}
    <path d="M4 26 Q16 28.5 28 26" stroke={GOLD} strokeWidth="1" strokeLinecap="round" opacity="0.55" />
  </svg>
);

Object.assign(window, { FeatClockCheck, FeatBrainSpark, FeatLotus });
