// 60Seconds logo — orange chip mark + Inter Tight wordmark
// Mark: orange squircle with "60" in heavy white. Cursor bar nods to the AI/terminal vibe.

function Logo({ size = 22, wordmark = true, href = "#top" }) {
  const chip = size + 4;
  return (
    <a href={href} className="brand-logo" aria-label="60Seconds — home">
      <span className="brand-chip" style={{ width: chip, height: chip }}>
        <svg viewBox="0 0 40 40" width={chip} height={chip} aria-hidden="true">
          <rect x="0" y="0" width="40" height="40" rx="10" fill="var(--orange)"/>
          {/* heavy 60 */}
          <text
            x="20" y="28"
            textAnchor="middle"
            fontFamily="Inter Tight, Helvetica, sans-serif"
            fontSize="22"
            fontWeight="900"
            letterSpacing="-1.4"
            fill="#fff"
          >60</text>
          {/* small cursor bar bottom-right — terminal/agent affordance */}
          <rect x="29" y="29" width="2" height="6" rx="1" fill="#fff" opacity="0.85">
            <animate attributeName="opacity" values="0.85;0.1;0.85" dur="1.1s" repeatCount="indefinite"/>
          </rect>
        </svg>
      </span>
      {wordmark && (
        <span className="brand-word" style={{ fontSize: size }}>
          60<span className="brand-word-tail">Seconds</span>
        </span>
      )}
      <style>{`
        .brand-logo {
          display: inline-flex; align-items: center; gap: 10px;
          color: var(--text);
          font-family: var(--font-display);
          font-weight: 800;
          letter-spacing: -0.035em;
          line-height: 1;
        }
        .brand-chip {
          display: inline-grid; place-items: center;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 8px 22px -10px var(--orange-glow);
        }
        .brand-word {
          font-feature-settings: "ss01";
        }
        .brand-word-tail { font-weight: 700; letter-spacing: -0.03em; }
      `}</style>
    </a>
  );
}

window.Logo = Logo;