/* Taktume Recruit brand mark variations
 * Originals — geometric, professional, B2B HR/talent acquisition
 * Visual DNA: precision, assessment, shortlisting, signal vs noise
 */

const RecruitMarkA = ({ size = 96 }) => (
  // "Signal" — concentric arcs converging to a point (shortlisting)
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="ra-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="1" stopColor="#3B82F6" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#0B1220" />
    <rect x="0" y="0" width="96" height="96" rx="22" fill="url(#ra-grad)" opacity="0.08" />
    <path d="M16 78 A 32 32 0 0 1 78 78" stroke="url(#ra-grad)" strokeWidth="3" strokeLinecap="round" opacity="0.35" />
    <path d="M26 78 A 22 22 0 0 1 70 78" stroke="url(#ra-grad)" strokeWidth="3" strokeLinecap="round" opacity="0.6" />
    <path d="M36 78 A 12 12 0 0 1 60 78" stroke="url(#ra-grad)" strokeWidth="3" strokeLinecap="round" />
    <circle cx="48" cy="78" r="4" fill="#22D3EE" />
    <line x1="48" y1="74" x2="48" y2="22" stroke="url(#ra-grad)" strokeWidth="3" strokeLinecap="round" />
    <circle cx="48" cy="22" r="6" fill="#0B1220" stroke="url(#ra-grad)" strokeWidth="3" />
  </svg>
);

const RecruitMarkB = ({ size = 96 }) => (
  // "Aperture" — a stylized T inside a precision aperture (assessment lens)
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="rb-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#38BDF8" />
        <stop offset="1" stopColor="#6366F1" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#0B1220" />
    {/* aperture blades */}
    <g opacity="0.5">
      <path d="M48 14 L 78 30 L 48 46 Z" fill="url(#rb-grad)" opacity="0.18" />
      <path d="M82 48 L 66 78 L 50 48 Z" fill="url(#rb-grad)" opacity="0.18" />
      <path d="M48 82 L 18 66 L 48 50 Z" fill="url(#rb-grad)" opacity="0.18" />
      <path d="M14 48 L 30 18 L 46 48 Z" fill="url(#rb-grad)" opacity="0.18" />
    </g>
    {/* T mark */}
    <rect x="28" y="32" width="40" height="6" rx="1" fill="url(#rb-grad)" />
    <rect x="45" y="32" width="6" height="36" rx="1" fill="url(#rb-grad)" />
    <circle cx="48" cy="48" r="34" stroke="url(#rb-grad)" strokeWidth="1.5" opacity="0.4" strokeDasharray="2 4" />
  </svg>
);

const RecruitMarkC = ({ size = 96 }) => (
  // "Rank" — bars + checkmark hybrid, T crossbar formed by ranking bars
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="rc-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="1" stopColor="#8B5CF6" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#0B1220" />
    {/* ranking bars forming the crossbar of a T */}
    <rect x="22" y="26" width="10" height="44" rx="2" fill="url(#rc-grad)" opacity="0.35" />
    <rect x="36" y="20" width="10" height="50" rx="2" fill="url(#rc-grad)" opacity="0.6" />
    <rect x="50" y="14" width="10" height="56" rx="2" fill="url(#rc-grad)" />
    <rect x="64" y="22" width="10" height="48" rx="2" fill="url(#rc-grad)" opacity="0.45" />
    {/* check / approval tick */}
    <path d="M30 64 L 44 76 L 70 50" stroke="#22D3EE" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

const RecruitMarkD = ({ size = 96 }) => (
  // "Pipeline" — interconnected nodes funneling, T monogram at center
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="rd-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#0EA5E9" />
        <stop offset="1" stopColor="#3B82F6" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="url(#rd-grad)" />
    {/* glassy inner panel */}
    <rect x="6" y="6" width="84" height="84" rx="18" fill="#0B1220" opacity="0.85" />
    {/* funnel of dots converging */}
    <g fill="#fff">
      <circle cx="22" cy="26" r="2.5" opacity="0.3" />
      <circle cx="36" cy="26" r="2.5" opacity="0.5" />
      <circle cx="50" cy="26" r="2.5" opacity="0.7" />
      <circle cx="64" cy="26" r="2.5" opacity="0.5" />
      <circle cx="74" cy="26" r="2.5" opacity="0.3" />
      <circle cx="32" cy="42" r="2.5" opacity="0.45" />
      <circle cx="48" cy="42" r="2.5" opacity="0.85" />
      <circle cx="64" cy="42" r="2.5" opacity="0.45" />
      <circle cx="48" cy="58" r="3" />
    </g>
    {/* T monogram */}
    <rect x="34" y="66" width="28" height="4" rx="1" fill="#22D3EE" />
    <rect x="46" y="66" width="4" height="14" rx="1" fill="#22D3EE" />
  </svg>
);

const RecruitMarkE = ({ size = 96 }) => (
  // "Compass" — square frame, diagonal needle as T, four cardinal ticks
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="re-grad" x1="0" y1="0" x2="96" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="1" stopColor="#3B82F6" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="96" height="96" rx="22" fill="#fff" />
    <rect x="6" y="6" width="84" height="84" rx="18" fill="none" stroke="#0B1220" strokeWidth="2" />
    {/* T as monumental serif */}
    <rect x="22" y="26" width="52" height="8" fill="#0B1220" />
    <rect x="44" y="26" width="8" height="48" fill="#0B1220" />
    {/* accent dot */}
    <circle cx="48" cy="78" r="4" fill="url(#re-grad)" />
  </svg>
);

const RecruitMarkF = ({ size = 96 }) => (
  // "Spectrum" — gradient stack forming a bold T, signal-strength feel.
  // Build animation: stem segments slide in bottom→top from alternating sides,
  // then the horizontal bar grows outward from center. Loops.
  <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
    <defs>
      <linearGradient id="rf-grad" x1="0" y1="0" x2="0" y2="96">
        <stop offset="0" stopColor="#22D3EE" />
        <stop offset="0.5" stopColor="#3B82F6" />
        <stop offset="1" stopColor="#1E1B4B" />
      </linearGradient>
      <style>{`
        /* 4.4s loop: 4 stem segments build bottom→top, then bar, then hold */
        @keyframes rf-stem-r {
          0%   { transform: translateX(70px); opacity: 0; }
          12%  { transform: translateX(0);    opacity: 1; }
          88%  { transform: translateX(0);    opacity: 1; }
          100% { transform: translateX(70px); opacity: 0; }
        }
        @keyframes rf-stem-l {
          0%   { transform: translateX(-70px); opacity: 0; }
          12%  { transform: translateX(0);     opacity: 1; }
          88%  { transform: translateX(0);     opacity: 1; }
          100% { transform: translateX(-70px); opacity: 0; }
        }
        @keyframes rf-bar {
          0%   { transform: scaleX(0); opacity: 0; }
          14%  { transform: scaleX(0); opacity: 0; }
          26%  { transform: scaleX(1); opacity: 1; }
          88%  { transform: scaleX(1); opacity: 1; }
          100% { transform: scaleX(0); opacity: 0; }
        }
        .rf-seg { transform-box: fill-box; }
        .rf-s4 { animation: rf-stem-r 4.4s cubic-bezier(.5,.05,.2,1) infinite;        } /* bottom, from right */
        .rf-s3 { animation: rf-stem-l 4.4s cubic-bezier(.5,.05,.2,1) infinite .35s;   }
        .rf-s2 { animation: rf-stem-r 4.4s cubic-bezier(.5,.05,.2,1) infinite .70s;   }
        .rf-s1 { animation: rf-stem-l 4.4s cubic-bezier(.5,.05,.2,1) infinite 1.05s;  } /* top stem, from left */
        .rf-bar{ transform-box: fill-box; transform-origin: center; animation: rf-bar 4.4s cubic-bezier(.5,.05,.2,1) infinite 1.40s; }
      `}</style>
    </defs>
    {/* vertical stem segments — render bottom-most first so build reads as bottom→top */}
    <rect className="rf-seg rf-s4" x="40" y="74" width="16" height="6"  rx="2" fill="#6366F1" opacity="0.4" />
    <rect className="rf-seg rf-s3" x="40" y="62" width="16" height="10" rx="2" fill="#6366F1" opacity="0.7" />
    <rect className="rf-seg rf-s2" x="40" y="50" width="16" height="10" rx="2" fill="#3B82F6" opacity="0.85" />
    <rect className="rf-seg rf-s1" x="40" y="38" width="16" height="10" rx="2" fill="#22D3EE" />
    {/* horizontal bar of T — grows outward from center after stem completes */}
    <rect className="rf-bar" x="14" y="20" width="68" height="14" rx="3" fill="url(#rf-grad)" />
  </svg>
);

window.RecruitMarkA = RecruitMarkA;
window.RecruitMarkB = RecruitMarkB;
window.RecruitMarkC = RecruitMarkC;
window.RecruitMarkD = RecruitMarkD;
window.RecruitMarkE = RecruitMarkE;
window.RecruitMarkF = RecruitMarkF;
