function Wordmark({inverse = false, size = 40}) {
  const turf = inverse ? "#9FC7AE" : "#1F5A3A";
  const slate = inverse ? "#B7C1CA" : "#4C5A66";
  const primary = inverse ? "#FFFFFF" : "#0B0E12";
  const secondary = inverse ? "rgba(255,255,255,0.62)" : "#4C5A66";
  const iconFill = inverse ? "transparent" : "#FFFFFF";

  return (
    <span style={{display: "inline-flex", alignItems: "center", gap: 14, lineHeight: 1}}>
      <span style={{display: "inline-flex", gap: 6}}>
        {/* Turf mark */}
        <svg viewBox="0 0 100 116" width={size * 0.86} height={size} style={{display: "block"}}>
          <rect x="1.5" y="1.5" width="97" height="113" rx="2" fill={iconFill} stroke={turf} strokeWidth="3"/>
          <g fill={turf}>
            <path d="M20 92 C 22 70, 18 50, 24 32 C 26 50, 30 72, 28 92 Z"/>
            <path d="M42 96 C 46 66, 40 40, 48 20 C 50 44, 54 72, 52 96 Z"/>
            <path d="M64 94 C 68 70, 62 48, 70 28 C 72 52, 76 74, 72 94 Z"/>
          </g>
          <line x1="6" y1="100" x2="94" y2="100" stroke={turf} strokeWidth="3" strokeLinecap="round"/>
        </svg>
        {/* Paver mark */}
        <svg viewBox="0 0 100 116" width={size * 0.86} height={size} style={{display: "block"}}>
          <rect x="1.5" y="1.5" width="97" height="113" rx="2" fill={iconFill} stroke={slate} strokeWidth="3"/>
          <g fill="none" stroke={slate} strokeWidth="3" strokeLinecap="round">
            <rect x="14" y="14" width="32" height="14"/>
            <rect x="54" y="14" width="14" height="32"/>
            <rect x="74" y="14" width="14" height="32"/>
            <rect x="14" y="36" width="14" height="32"/>
            <rect x="36" y="36" width="14" height="32"/>
            <rect x="54" y="54" width="32" height="14"/>
            <rect x="14" y="76" width="32" height="14"/>
            <rect x="54" y="76" width="14" height="24"/>
            <rect x="74" y="76" width="14" height="24"/>
          </g>
        </svg>
      </span>
      <span style={{display: "flex", flexDirection: "column", gap: 2}}>
        <span style={{
          fontFamily: "var(--font-sans)",
          fontSize: Math.max(7, size * 0.12),
          fontWeight: 600,
          letterSpacing: "0.16em",
          color: secondary,
          lineHeight: 1,
          textTransform: "uppercase",
          marginBottom: 2,
        }}>Mauricio Vizcaino's</span>
        <span style={{
          fontFamily: "var(--font-display)",
          fontSize: size * 0.58,
          fontWeight: 800,
          letterSpacing: "-0.015em",
          color: primary,
          lineHeight: 1,
          textTransform: "uppercase",
        }}>Lawns &amp; Pavers</span>
        <span style={{
          fontFamily: "var(--font-sans)",
          fontSize: Math.max(8, size * 0.16),
          fontWeight: 600,
          letterSpacing: "0.22em",
          color: secondary,
          lineHeight: 1,
          textTransform: "uppercase",
          marginTop: 1,
        }}>Professional hardscaping services</span>
      </span>
    </span>
  );
}
window.Wordmark = Wordmark;