// Motomelli wordmark — uses the official brand PNG (white on transparent).
// Pass `height` (px) to size; width auto-calcs from the 1500×500 (3:1) source.

const MotomelliWordmark = ({ height = 36, className = "", alt = "Motomelli" }) => {
  const width = Math.round(height * 7.358); // 1420 / 193 ≈ 7.358 (cropped to glyph bounds)
  return (
    <img
      src="assets/motomelli-wordmark.png?v=2"
      alt={alt}
      width={width}
      height={height}
      className={className}
      style={{ display: "block", width, height, objectFit: "contain" }}
    />
  );
};

// Shared viewport hook — used by Hero, Sections, and Compare. Lives here
// because Wordmark.jsx is the only module loaded by every HTML entry point.
const useMobile = (bp = 640) => {
  const [m, setM] = React.useState(() => window.innerWidth <= bp);
  React.useEffect(() => {
    const fn = () => setM(window.innerWidth <= bp);
    window.addEventListener("resize", fn, { passive: true });
    return () => window.removeEventListener("resize", fn);
  }, [bp]);
  return m;
};

Object.assign(window, { MotomelliWordmark, useMobile });