/* NOVO — Icons & Logo marks */

// ============================================================
// Logo icons — all three directions
// ============================================================

function LogoBubbleRing({ size = 40, stroke = 1.25, color = "currentColor" }) {
  const r = size / 2 - stroke;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" aria-hidden="true">
      <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} />
      <circle cx={size/2} cy={size/2} r={r * 0.62} stroke={color} strokeWidth={stroke * 0.75} opacity="0.55" />
      <circle cx={size/2} cy={size/2} r={r * 0.24} fill={color} />
    </svg>
  );
}

function LogoRisingArc({ size = 40, stroke = 1.5, color = "currentColor" }) {
  const pad = stroke;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" aria-hidden="true">
      {/* Rising arc — asymmetric lift */}
      <path
        d={`M ${pad} ${size - pad} Q ${size/2} ${pad * -0.5}, ${size - pad} ${size * 0.45}`}
        stroke={color}
        strokeWidth={stroke}
        strokeLinecap="round"
      />
      <circle cx={size - pad} cy={size * 0.45} r={stroke * 1.3} fill={color} />
    </svg>
  );
}

function LogoMonogramA({ size = 40, stroke = 1.5, color = "currentColor" }) {
  const pad = size * 0.18;
  const apex = size * 0.14;
  const baseL = pad;
  const baseR = size - pad;
  const cx = size / 2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" aria-hidden="true">
      {/* Left leg */}
      <line x1={baseL} y1={size - pad} x2={cx} y2={apex} stroke={color} strokeWidth={stroke} strokeLinecap="square" />
      {/* Right leg */}
      <line x1={baseR} y1={size - pad} x2={cx} y2={apex} stroke={color} strokeWidth={stroke} strokeLinecap="square" />
      {/* Subtle arc crossbar suggesting carbonation */}
      <path
        d={`M ${size * 0.30} ${size * 0.62} Q ${cx} ${size * 0.48}, ${size * 0.70} ${size * 0.62}`}
        stroke={color}
        strokeWidth={stroke * 0.75}
        strokeLinecap="round"
        opacity="0.7"
      />
    </svg>
  );
}

function LogoByVariant({ variant = "A", size = 40, stroke, color }) {
  if (variant === "A") return <LogoBubbleRing size={size} stroke={stroke} color={color} />;
  if (variant === "B") return <LogoRisingArc size={size} stroke={stroke} color={color} />;
  return <LogoMonogramA size={size} stroke={stroke} color={color} />;
}

// ============================================================
// UI icons
// ============================================================

function IconArrow({ size = 16, rotation = 0 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={{ transform: `rotate(${rotation}deg)`, transition: "transform .2s" }}>
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconPlus({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
    </svg>
  );
}

function IconClose({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
    </svg>
  );
}

function IconCopy({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <rect x="3.5" y="3.5" width="8" height="8" stroke="currentColor" strokeWidth="1" />
      <path d="M2 10V2h8" stroke="currentColor" strokeWidth="1" />
    </svg>
  );
}

function IconDownload({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M7 1v9M3 7l4 4 4-4M2 13h10" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconBubble({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1" />
      <circle cx="7" cy="7" r="2" fill="currentColor" />
    </svg>
  );
}

// ============================================================
// Official NOVO wordmark (image-based) — the canonical logo
// ============================================================

function NovoLogo({ width = 180, color = "black", style = {} }) {
  // color: "black" | "white"
  const src = color === "white" ? "images/novo-logo-white.png" : "images/novo-logo-black.png";
  return (
    <img
      src={src}
      alt="NOVO"
      style={{ width, height: "auto", display: "block", ...style }}
    />
  );
}

// ============================================================
// ONE. product wordmark — always uppercase + period, Inter Tight
// ============================================================

function OneMark({ size = 16, color = "currentColor", weight = 500, style = {} }) {
  return (
    <span
      style={{
        fontFamily: '"Inter Tight", system-ui, sans-serif',
        fontWeight: weight,
        fontSize: size,
        letterSpacing: "0.04em",
        color,
        textTransform: "uppercase",
        lineHeight: 1,
        display: "inline-block",
        ...style,
      }}
    >
      ONE<span style={{ letterSpacing: 0 }}>.</span>
    </span>
  );
}

Object.assign(window, {
  LogoBubbleRing, LogoRisingArc, LogoMonogramA, LogoByVariant,
  NovoLogo, OneMark,
  IconArrow, IconPlus, IconClose, IconCopy, IconDownload, IconBubble,
});