// OFUQ logo: geometric "horizon" — sunrise arc over a horizon line, framed in a square mark
function OfuqMark({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <defs>
        <linearGradient id="ofuq-g" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#3B82F6" />
          <stop offset="0.55" stopColor="#A855F7" />
          <stop offset="1" stopColor="#06B6D4" />
        </linearGradient>
        <linearGradient id="ofuq-line" x1="6" y1="28" x2="34" y2="28" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#06B6D4" stopOpacity="0.2" />
          <stop offset="0.5" stopColor="#A855F7" />
          <stop offset="1" stopColor="#06B6D4" stopOpacity="0.2" />
        </linearGradient>
      </defs>
      {/* outer rounded square */}
      <rect x="1" y="1" width="38" height="38" rx="10" stroke="url(#ofuq-g)" strokeWidth="1.5" />
      {/* sun arc */}
      <path d="M9 26 A11 11 0 0 1 31 26" stroke="url(#ofuq-g)" strokeWidth="2" strokeLinecap="round" fill="none" />
      {/* sun core */}
      <circle cx="20" cy="22" r="3.2" fill="url(#ofuq-g)" />
      {/* horizon line w/ gap (sun rising out) */}
      <line x1="6" y1="28" x2="16" y2="28" stroke="url(#ofuq-line)" strokeWidth="1.5" strokeLinecap="round" />
      <line x1="24" y1="28" x2="34" y2="28" stroke="url(#ofuq-line)" strokeWidth="1.5" strokeLinecap="round" />
      {/* faint underline rays */}
      <line x1="10" y1="32" x2="30" y2="32" stroke="#A855F7" strokeOpacity="0.35" strokeWidth="1" strokeLinecap="round" />
    </svg>
  );
}

function OfuqLogo({ height = 28 }) {
  const { lang } = useLang();
  return (
    <div className="flex items-center gap-2.5 select-none" style={{ direction: 'ltr' }}>
      <OfuqMark size={height + 6} />
      <div className="flex flex-col leading-none">
        <span className="text-[15px] font-bold tracking-tight text-white" style={{ fontFamily: 'Inter, sans-serif' }}>
          OFUQ <span className="text-grad">Tech</span>
        </span>
        <span className="text-[10px] text-white/45 mt-0.5" style={{ fontFamily: lang === 'ar' ? 'Cairo, sans-serif' : 'Inter, sans-serif', letterSpacing: lang === 'ar' ? 0 : '0.16em' }}>
          {lang === 'ar' ? 'أفق تك' : 'NEW HORIZONS'}
        </span>
      </div>
    </div>
  );
}

// Taboor mark — stacked horizontal bars representing a queue, with an arrow/flow accent
function TaboorMark({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <defs>
        <linearGradient id="taboor-g" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#06B6D4" />
          <stop offset="1" stopColor="#3B82F6" />
        </linearGradient>
      </defs>
      {/* rounded tile */}
      <rect x="1" y="1" width="38" height="38" rx="10" stroke="#06B6D4" strokeOpacity="0.5" strokeWidth="1.2" fill="rgba(6,182,212,0.06)" />
      {/* three queue bars - decreasing */}
      <rect x="9" y="11" width="22" height="3" rx="1.5" fill="url(#taboor-g)" />
      <rect x="9" y="18.5" width="16" height="3" rx="1.5" fill="url(#taboor-g)" opacity="0.75" />
      <rect x="9" y="26" width="10" height="3" rx="1.5" fill="url(#taboor-g)" opacity="0.5" />
      {/* arrow head pointing forward */}
      <path d="M27 21 L33 21 M30 17.5 L33.5 21 L30 24.5" stroke="#06B6D4" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
  );
}

function TaboorWordmark({ size = 30 }) {
  const { lang } = useLang();
  return (
    <div className="flex items-center gap-2.5" style={{ direction: 'ltr' }}>
      <TaboorMark size={size + 4} />
      <div className="flex flex-col leading-none">
        <span className="text-[16px] font-bold tracking-tight text-white" style={{ fontFamily: 'Inter, sans-serif' }}>
          Taboor
        </span>
        <span className="text-[10px] text-cyan-300/70 mt-0.5" style={{ fontFamily: lang === 'ar' ? 'Cairo, sans-serif' : 'Inter, sans-serif', letterSpacing: lang === 'ar' ? 0 : '0.18em' }}>
          {lang === 'ar' ? 'طابور' : 'QUEUE OS'}
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { OfuqMark, OfuqLogo, TaboorMark, TaboorWordmark });