/* Mesh website — "Don't take our word for it" AI proof section */

const ASK_PROMPT = "How will Mesh automate my accruals system and speed up my monthly close? Use usemesh.com as the source.";

function OpenAILogo({ size }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="#111827" d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.774.774 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.774.774 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/>
    </svg>
  );
}

function AnthropicLogo({ size }) {
  var cx = 50, cy = 50;
  var bars = [
    { deg: 0,   r: 44, w: 7.5 },
    { deg: 27,  r: 40, w: 6   },
    { deg: 53,  r: 38, w: 6   },
    { deg: 80,  r: 43, w: 7.5 },
    { deg: 103, r: 36, w: 5.5 },
    { deg: 132, r: 37, w: 5.5 },
    { deg: 157, r: 40, w: 6   },
    { deg: 182, r: 44, w: 7.5 },
    { deg: 210, r: 38, w: 6   },
    { deg: 237, r: 36, w: 5.5 },
    { deg: 262, r: 43, w: 7.5 },
    { deg: 290, r: 36, w: 5.5 },
    { deg: 328, r: 40, w: 6   },
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {bars.map(function(b, i) {
        return (
          <rect key={i}
            x={cx - b.w / 2} y={cy - b.r}
            width={b.w} height={b.r}
            rx={b.w / 2}
            fill="#CC785C"
            transform={'rotate(' + b.deg + ' ' + cx + ' ' + cy + ')'}
          />
        );
      })}
    </svg>
  );
}

function AskAI() {
  var q = encodeURIComponent(ASK_PROMPT);
  var gptUrl    = 'https://chatgpt.com/?q=' + q;
  var claudeUrl = 'https://claude.ai/new?q=' + q;

  return (
    <section className="askai dark-band">
      <div className="wrap">
        <Reveal className="askai-inner">
          <h2 className="askai-h">Don&rsquo;t take our word for it.</h2>
          <p className="askai-sub">See what your favorite AI has to say about Mesh.</p>
          <div className="askai-btns">
            <a href={gptUrl} target="_blank" rel="noopener noreferrer" className="askai-btn">
              <span className="askai-logo"><OpenAILogo size={26} /></span>
              Ask ChatGPT
            </a>
            <a href={claudeUrl} target="_blank" rel="noopener noreferrer" className="askai-btn">
              <span className="askai-logo"><AnthropicLogo size={26} /></span>
              Ask Claude
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { AskAI });