// 60seconds.io brand mark
// Dark tile · rotated inner frame ring · coral arc · indicator dot · "60" wordmark
// Lockup: mark + "60seconds.io" wordmark with .io in coral.

function Logo({ size = 22, wordmark = true, href = "#top", simplified = false }) {
  // Tile size is proportional to wordmark cap height (~1.45x looks right)
  const tile = Math.round(size * 1.6);
  const clipId = `bm-clip-${size}-${simplified ? "simple" : "full"}`;
  return (
    <a href={href} className="brand-logo" aria-label="60seconds.io — home">
      <span className="brand-tile" style={{ width: tile, height: tile }}>
        <svg viewBox="0 0 256 256" width={tile} height={tile} aria-hidden="true">
          <defs>
            <clipPath id={clipId}>
              <rect width="256" height="256" rx="52"/>
            </clipPath>
          </defs>
          <g clipPath={`url(#${clipId})`}>
            <rect width="256" height="256" fill="#161513"/>
            {!simplified && (
              <g transform="rotate(-20 128 128)">
                <rect x="24" y="24" width="208" height="208" rx="36"
                      fill="none" stroke="rgba(255,253,248,0.18)" strokeWidth="3"/>
                <path d="M 60 24 L 196 24 A 36 36 0 0 1 232 60"
                      fill="none" stroke="var(--orange)" strokeWidth="3" strokeLinecap="round"/>
              </g>
            )}
            <circle cx="220" cy="36" r="9" fill="var(--orange)"/>
          </g>
          <text x="128" y="138"
                textAnchor="middle" dominantBaseline="central"
                fontFamily="Inter Tight, Inter, sans-serif"
                fontWeight="800"
                fontSize="150"
                letterSpacing="-8"
                fill="#FFFDF8">60</text>
        </svg>
      </span>
      {wordmark && (
        <span className="brand-word" style={{ fontSize: size }}>
          60seconds<span className="brand-tld">.io</span>
        </span>
      )}
      <style>{`
        .brand-logo {
          display: inline-flex; align-items: center; gap: 10px;
          color: var(--text);
          font-family: var(--font-display);
          font-weight: 700;
          letter-spacing: -0.035em;
          line-height: 1;
          text-decoration: none;
        }
        .brand-tile {
          display: inline-grid; place-items: center;
          border-radius: 22%;
          overflow: hidden;
          box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5);
          flex: 0 0 auto;
        }
        .brand-tile svg { display: block; }
        .brand-word {
          font-feature-settings: "ss01";
        }
        .brand-tld { color: var(--orange); }
      `}</style>
    </a>
  );
}

window.Logo = Logo;