HokmPlay/site/components/Logo.tsx

/**
 * Brand mark — the app's card-fan icon (mirrors public/icon.svg): three gold-edged
 * playing cards fanned out, a spade on the face card. Scales cleanly from the nav
 * (≈34px) to the hero (≈160px). `glow` adds a soft gold halo for hero use.
 */
export function Logo({ size = 36, glow = false }: { size?: number; glow?: boolean }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 512 512"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
      style={glow ? { filter: "drop-shadow(0 10px 36px rgba(212,175,55,0.35))" } : undefined}
    >
      <defs>
        <radialGradient id="frbg" cx="50%" cy="36%" r="78%">
          <stop offset="0" stopColor="#16284f" />
          <stop offset="0.62" stopColor="#0a142e" />
          <stop offset="1" stopColor="#060c1f" />
        </radialGradient>
        <linearGradient id="frgold" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#f6e4a0" />
          <stop offset="0.5" stopColor="#d4af37" />
          <stop offset="1" stopColor="#b8860b" />
        </linearGradient>
        <linearGradient id="frface" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#fffdf7" />
          <stop offset="1" stopColor="#f1e6cd" />
        </linearGradient>
        <linearGradient id="frnavy" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1d356a" />
          <stop offset="1" stopColor="#0a142e" />
        </linearGradient>
      </defs>

      <rect width="512" height="512" rx="116" fill="url(#frbg)" />
      <circle cx="256" cy="196" r="185" fill="#2dd4bf" opacity="0.07" />
      <rect x="30" y="30" width="452" height="452" rx="100" fill="none" stroke="url(#frgold)" strokeWidth="6" opacity="0.6" />

      <g transform="rotate(-25 256 396)">
        <rect x="182" y="180" width="148" height="210" rx="16" fill="url(#frnavy)" stroke="url(#frgold)" strokeWidth="4" />
        <rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" opacity="0.45" />
        <path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75" />
      </g>
      <g transform="rotate(25 256 396)">
        <rect x="182" y="180" width="148" height="210" rx="16" fill="url(#frnavy)" stroke="url(#frgold)" strokeWidth="4" />
        <rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" opacity="0.45" />
        <path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75" />
      </g>

      <g transform="translate(0 -24)">
        <rect x="181" y="178" width="150" height="212" rx="16" fill="url(#frface)" stroke="url(#frgold)" strokeWidth="5" />
        <rect x="193" y="190" width="126" height="188" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" />
        <g transform="translate(256 268) scale(1.45)">
          <path
            d="M0,-44 C0,-44 -42,-6 -42,16 C-42,30 -31,40 -18,40 C-11,40 -5,37 0,32 C-2,44 -10,52 -20,55 L20,55 C10,52 2,44 0,32 C5,37 11,40 18,40 C31,40 42,30 42,16 C42,-6 0,-44 0,-44 Z"
            fill="url(#frgold)"
            stroke="#7a5a00"
            strokeWidth="1.5"
          />
        </g>
      </g>
    </svg>
  );
}