// Logotype — SVG fill with Platinum 08 gradient. Unique gradient id per instance.
let __plat08Counter = 0;
function Logotype({ height = 48, dark = false }) {
  const id = React.useMemo(() => `plat08_${++__plat08Counter}`, []);
  if (dark) {
    return (
      <svg viewBox="0 0 360 96" style={{ height, width: "auto", display: "block" }} xmlns="http://www.w3.org/2000/svg">
        <text x="180" y="82" textAnchor="middle" fontFamily="'Montserrat',sans-serif" fontWeight="200" fontSize="90" fill="#1a1a1f" letterSpacing="-3">Ondion</text>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 360 96" style={{ height, width: "auto", display: "block" }} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id={id} gradientUnits="userSpaceOnUse" x1="0" y1="20" x2="360" y2="80">
          <stop offset="0%"   stopColor="#ffffff"/>
          <stop offset="20%"  stopColor="#d8dde8"/>
          <stop offset="40%"  stopColor="#ffffff"/>
          <stop offset="60%"  stopColor="#b8c0d0"/>
          <stop offset="80%"  stopColor="#ffffff"/>
          <stop offset="100%" stopColor="#e0e5f0"/>
        </linearGradient>
      </defs>
      <text x="180" y="82" textAnchor="middle" fontFamily="'Montserrat',sans-serif" fontWeight="200" fontSize="90" fill={`url(#${id})`} letterSpacing="-3">Ondion</text>
    </svg>
  );
}

window.Logotype = Logotype;