/* Taktume Anytime brand mark variations
 * Originals — playful, energetic, B2C job-seekers practicing soft skills
 * Visual DNA: practice, growth, confidence, conversational AI
 */

const AnytimeMarkA = ({ size = 96 }) => (
  // "Orb" — particle ring with speech indicator, references the in-app orb
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <radialGradient id="aa-grad" cx="50%" cy="50%" r="50%">
        <stop offset="0" stopColor="#A78BFA" />
        <stop offset="1" stopColor="#7C3AED" />
      </radialGradient>
      <linearGradient id="aa-ring" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="1" stopColor="#A855F7" />
      </linearGradient>
      <style>{`
        @keyframes aa-ring-spin   { to { transform: rotate(360deg); } }
        @keyframes aa-ring-spin-r { to { transform: rotate(-360deg); } }
        @keyframes aa-ring-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
        @keyframes aa-orb-pulse   { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.05); opacity:.92; } }
        @keyframes aa-bar-1 { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.25); } }
        @keyframes aa-bar-2 { 0%,100% { transform: scaleY(1.30); } 50% { transform: scaleY(.55); } }
        @keyframes aa-bar-3 { 0%,100% { transform: scaleY(.60); } 35% { transform: scaleY(1.50); } 70% { transform: scaleY(.40); } }
        @keyframes aa-bar-4 { 0%,100% { transform: scaleY(1.10); } 40% { transform: scaleY(.45); } 80% { transform: scaleY(1.35); } }
        .aa-ring-outer { transform-origin: 48px 48px; transform-box: fill-box; animation: aa-ring-spin 22s linear infinite, aa-ring-breath 4.2s ease-in-out infinite; }
        .aa-ring-inner { transform-origin: 48px 48px; transform-box: fill-box; animation: aa-ring-spin-r 32s linear infinite; }
        .aa-orb        { transform-origin: 48px 48px; transform-box: fill-box; animation: aa-orb-pulse 2.6s ease-in-out infinite; }
        .aa-bar        { transform-box: fill-box; transform-origin: center; }
        .aa-b1 { animation: aa-bar-1 .9s ease-in-out infinite;   }
        .aa-b2 { animation: aa-bar-2 .75s ease-in-out infinite .12s; }
        .aa-b3 { animation: aa-bar-3 1.1s ease-in-out infinite .25s; }
        .aa-b4 { animation: aa-bar-4 .85s ease-in-out infinite .05s; }
      `}</style>
    </defs>
    {/* outer particle ring (slow spin + slight breathing) */}
    <g className="aa-ring-outer">
      {Array.from({ length: 24 }).map((_, i) => {
        const angle = (i / 24) * Math.PI * 2;
        const r = 32 + (i % 3) * 1.5;
        const x = 48 + Math.cos(angle) * r;
        const y = 48 + Math.sin(angle) * r;
        return <circle key={i} cx={x} cy={y} r={i % 4 === 0 ? 1.8 : 1} fill="#22D3EE" opacity={0.4 + (i % 5) * 0.12} />;
      })}
    </g>
    {/* inner counter-rotating ring of small accents for depth */}
    <g className="aa-ring-inner" opacity="0.6">
      {Array.from({ length: 12 }).map((_, i) => {
        const angle = (i / 12) * Math.PI * 2;
        const r = 26;
        const x = 48 + Math.cos(angle) * r;
        const y = 48 + Math.sin(angle) * r;
        return <circle key={i} cx={x} cy={y} r="0.7" fill="#A855F7" />;
      })}
    </g>
    {/* core orb */}
    <g className="aa-orb">
      <circle cx="48" cy="48" r="18" fill="url(#aa-grad)" />
      <circle cx="48" cy="48" r="18" fill="none" stroke="url(#aa-ring)" strokeWidth="1.5" />
    </g>
    {/* sound waves — animated like EQ bars while "speaking" */}
    <line className="aa-bar aa-b1" x1="40" y1="44" x2="40" y2="52" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
    <line className="aa-bar aa-b2" x1="46" y1="40" x2="46" y2="56" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
    <line className="aa-bar aa-b3" x1="52" y1="42" x2="52" y2="54" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
    <line className="aa-bar aa-b4" x1="58" y1="44" x2="58" y2="52" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
  </svg>
);

const AnytimeMarkB = ({ size = 96 }) => (
  // "Chat star" — speech bubble morphed into a star/burst (conversational practice)
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="ab-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="0.5" stopColor="#A855F7" />
        <stop offset="1" stopColor="#EC4899" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#10071E" />
    {/* speech-bubble-meets-burst */}
    <path d="M48 16 L 56 38 L 80 40 L 62 56 L 68 80 L 48 66 L 28 80 L 34 56 L 16 40 L 40 38 Z"
          fill="url(#ab-grad)" />
    {/* speech tail */}
    <path d="M36 70 L 28 84 L 42 74 Z" fill="url(#ab-grad)" />
    {/* inner highlight */}
    <circle cx="48" cy="48" r="6" fill="#fff" opacity="0.85" />
  </svg>
);

const AnytimeMarkC = ({ size = 96 }) => (
  // "Soundwave A" — letter A formed by a soundwave (Anytime, voice-driven)
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="ac-grad" x1="0" y1="0" x2="0" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="1" stopColor="#A855F7" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#10071E" />
    {/* soundwave bars in A shape - tall in middle */}
    {[
      { x: 16, h: 10 }, { x: 24, h: 22 }, { x: 32, h: 36 },
      { x: 40, h: 52 }, { x: 48, h: 64 }, { x: 56, h: 52 },
      { x: 64, h: 36 }, { x: 72, h: 22 }, { x: 80, h: 10 },
    ].map((b, i) => (
      <rect key={i} x={b.x - 3} y={48 - b.h / 2} width="6" height={b.h} rx="3" fill="url(#ac-grad)"
            opacity={0.6 + (Math.abs(i - 4) < 3 ? 0.4 : 0)} />
    ))}
    {/* the crossbar of the A */}
    <rect x="32" y="56" width="32" height="3" rx="1.5" fill="#fff" opacity="0.9" />
  </svg>
);

const AnytimeMarkD = ({ size = 96 }) => (
  // "Sun" — rising arc + rays, optimistic growth
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="ad-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#FBBF24" />
        <stop offset="0.6" stopColor="#A855F7" />
        <stop offset="1" stopColor="#7C3AED" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#10071E" />
    {/* rays */}
    {Array.from({ length: 12 }).map((_, i) => {
      const angle = (-Math.PI / 2) + (i - 5.5) * 0.18;
      const x1 = 48 + Math.cos(angle) * 26;
      const y1 = 60 + Math.sin(angle) * 26;
      const x2 = 48 + Math.cos(angle) * 36;
      const y2 = 60 + Math.sin(angle) * 36;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="url(#ad-grad)" strokeWidth="3" strokeLinecap="round" />;
    })}
    {/* sun core */}
    <circle cx="48" cy="60" r="14" fill="url(#ad-grad)" />
    {/* horizon */}
    <rect x="14" y="74" width="68" height="3" rx="1.5" fill="url(#ad-grad)" opacity="0.5" />
  </svg>
);

const AnytimeMarkE = ({ size = 96 }) => (
  // "Infinity practice" — figure-8 made of voice waveforms (always-on practice)
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="ae-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="1" stopColor="#EC4899" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#10071E" />
    <path
      d="M28 48 C 28 32 48 32 48 48 C 48 64 68 64 68 48 C 68 32 48 32 48 48 C 48 64 28 64 28 48 Z"
      fill="none" stroke="url(#ae-grad)" strokeWidth="5" strokeLinecap="round"
    />
    <circle cx="28" cy="48" r="3" fill="#22D3EE" />
    <circle cx="68" cy="48" r="3" fill="#EC4899" />
    {/* small waveform inside one loop */}
    <g stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.7">
      <line x1="22" y1="48" x2="22" y2="48" />
      <line x1="20" y1="46" x2="20" y2="50" />
      <line x1="74" y1="46" x2="74" y2="50" />
      <line x1="76" y1="48" x2="76" y2="48" />
    </g>
  </svg>
);

const AnytimeMarkF = ({ size = 96 }) => (
  // "Play" — rounded play triangle inside a chat bubble
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="af-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#A855F7" />
        <stop offset="1" stopColor="#22D3EE" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="url(#af-grad)" />
    {/* speech bubble */}
    <path d="M22 24 H 74 A 6 6 0 0 1 80 30 V 60 A 6 6 0 0 1 74 66 H 56 L 44 78 L 46 66 H 22 A 6 6 0 0 1 16 60 V 30 A 6 6 0 0 1 22 24 Z"
          fill="#10071E" />
    {/* play triangle */}
    <path d="M40 36 L 40 56 L 58 46 Z" fill="#fff" />
  </svg>
);

window.AnytimeMarkA = AnytimeMarkA;
window.AnytimeMarkB = AnytimeMarkB;
window.AnytimeMarkC = AnytimeMarkC;
window.AnytimeMarkD = AnytimeMarkD;
window.AnytimeMarkE = AnytimeMarkE;
window.AnytimeMarkF = AnytimeMarkF;
