/**
 * llmindex.io — platform logo (inline SVG mark + wordmark)
 * Author:  Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * License: Proprietary — © Simon-Pierre Boucher, all rights reserved
 */
import type { ReactElement } from 'react';

export function LogoMark({ size = 28 }: { size?: number }): ReactElement {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true" className="shrink-0">
      <defs>
        <linearGradient id="lg-mark" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0" stopColor="#10b981" />
          <stop offset="1" stopColor="#22d3ee" />
        </linearGradient>
      </defs>
      <rect width="64" height="64" rx="14" fill="#09090b" stroke="#27272a" strokeWidth="2" />
      <rect x="11" y="37" width="9" height="16" rx="2.5" fill="#3f3f46" />
      <rect x="24" y="29" width="9" height="24" rx="2.5" fill="#71717a" />
      <rect x="37" y="19" width="9" height="34" rx="2.5" fill="url(#lg-mark)" />
      <path d="M13 29 L47 12" stroke="url(#lg-mark)" strokeWidth="3.5" strokeLinecap="round" />
      <circle cx="49" cy="11" r="4.5" fill="#22d3ee" />
    </svg>
  );
}

export function Logo(): ReactElement {
  return (
    <span className="flex items-center gap-2.5">
      <LogoMark />
      <span className="text-lg font-bold tracking-tight text-zinc-900">
        LLM<span className="bg-gradient-to-r from-emerald-600 to-cyan-500 bg-clip-text text-transparent">Index</span>
      </span>
    </span>
  );
}