// SQSEO auth 3D showcase — longtail query → AI engines → cited #1.
// Pure-CSS 14s loop (keyframes in /app/auth-showcase.css); this file is only
// the markup + the real engine logo marks (simple-icons 24x24 path data,
// inlined so the page stays self-contained). Registers window.LTQAuthShowcase.
(function () {
  const T = window.AUTH_T;

  function OpenAILogo({ size = 16, color = "currentColor" }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
      </svg>
    );
  }

  function PerplexityLogo({ size = 16, color = "#1FB8CD" }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
        <path d="M22.3977 7.0896h-2.3106V.0676l-7.5094 6.3542V.1577h-1.1554v6.1966L4.4904 0v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318 6.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676 4.8691 4.4634H5.6458V2.6262zM2.7576 16.332V8.245h7.8476l-6.1149 6.1147v1.9723H2.7576zm2.8882 5.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764 5.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766 5.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948 8.245h7.8478v8.087z" />
      </svg>
    );
  }

  function GeminiLogo({ size = 16, gradientId = "sqa-gem-grad" }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
        <defs>
          <linearGradient id={gradientId} x1="0" y1="24" x2="24" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#4796E3" />
            <stop offset="0.52" stopColor="#9177C7" />
            <stop offset="1" stopColor="#D3A7F6" />
          </linearGradient>
        </defs>
        <path
          fill={"url(#" + gradientId + ")"}
          d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81"
        />
      </svg>
    );
  }

  function ClaudeLogo({ size = 16, color = "#D97757" }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
        <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
      </svg>
    );
  }

  const ENGINES = [
    { name: "ChatGPT", cls: "e1", Logo: OpenAILogo },
    { name: "Perplexity", cls: "e2", Logo: PerplexityLogo },
    { name: "Gemini", cls: "e3", Logo: GeminiLogo },
    { name: "Claude", cls: "e4", Logo: ClaudeLogo },
  ];

  function PlusGlyph() {
    return (
      <svg className="sqa-plus" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
        <path d="M12 5v14M5 12h14" />
      </svg>
    );
  }

  function SendGlyph() {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M12 19V6M5.5 12.5 12 6l6.5 6.5" />
      </svg>
    );
  }

  // T with a hard fallback: a stale cached auth-i18n.js must never surface raw keys.
  const tt = (key, fb) => { const v = T(key); return v === key ? fb : v; };

  function AuthShowcase3D() {
    const query = tt("sqa_query", "best trail running shoes for flat feet");
    return (
      <div className="sqa" aria-hidden="true">
        <div className="sqa-orb o1" />
        <div className="sqa-orb o2" />
        <div className="sqa-orb o3" />

        <div className="sqa-stage">
          <div className="sqa-floor" />

          <div className="sqa-search">
            <PlusGlyph />
            <span className="sqa-ph">{tt("sqa_ph", "Ask anything")}</span>
            <span className="sqa-query" style={{ "--qw": query.length + "ch" }}>{query}</span>
            <span className="sqa-caret-gate"><span className="sqa-caret" /></span>
            <span className="sqa-send"><SendGlyph /></span>
            <span className="sqa-ring" />
          </div>

          {ENGINES.map((e) => (
            <div key={e.name} className={"sqa-engine " + e.cls} title={e.name}>
              <span className="sqa-engine-logo"><e.Logo size={30} /></span>
              <span className="sqa-think"><i /><i /><i /></span>
            </div>
          ))}

          {["d1", "d2", "d3", "d4"].map((c) => (
            <span key={c} className={"sqa-dot " + c} />
          ))}
          {["r1", "r2", "r3", "r4"].map((c) => (
            <span key={c} className={"sqa-ret " + c} />
          ))}

          <div className="sqa-answer">
            <div className="sqa-answer-head">
              <span className="sqa-ai-logos">
                <OpenAILogo size={10} />
                <PerplexityLogo size={10} />
                <GeminiLogo size={10} gradientId="sqa-gem-grad-sm" />
                <ClaudeLogo size={10} />
              </span>
              <span>{tt("sqa_ai_answer", "AI answer")}</span>
            </div>
            <div className="sqa-line l1" />
            <div className="sqa-line l2" />
            <div className="sqa-line l3" />
            <div className="sqa-src-label">{tt("sqa_top_cited", "Top cited sources")}</div>
            <div className="sqa-src">
              <div className="sqa-ranks"><span>1</span><span>2</span><span>3</span></div>
              <div className="sqa-rows">
                <div className="sqa-row m1 down">
                  <div className="sqa-row-in p1"><i className="sqa-fav" />competitor-a.com</div>
                </div>
                <div className="sqa-row m2 down">
                  <div className="sqa-row-in p2"><i className="sqa-fav" />competitor-b.com</div>
                </div>
                <div className="sqa-row m3 up">
                  <div className="sqa-row-in p3 you">
                    <i className="sqa-fav fy" />yourbrand.com
                    <span className="sqa-cited">{tt("sqa_cited", "Cited \u2713")}</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="sqa-pill">{tt("sqa_puts_you", "SQSEO puts you here")}</div>
          </div>
        </div>
      </div>
    );
  }

  window.LTQAuthShowcase = AuthShowcase3D;
})();