// PulseIcon — parametric monoline "Pulse" mark.
// Open outer ring + vertical stem (extends past ring) + right-bulging "p" bowl.
// All geometry derives from R so variants stay on-system.

function _polar(cx, cy, r, deg) {
  const a = (deg * Math.PI) / 180;
  return [cx + r * Math.cos(a), cy - r * Math.sin(a)];
}

// Almost-full ring with a small gap centred at `gapAt` (math degrees), gap = 2*gapHalf wide.
function _ringPath(cx, cy, r, gapAt, gapHalf) {
  const start = gapAt + gapHalf;
  const end = gapAt - gapHalf + 360;
  const [x0, y0] = _polar(cx, cy, r, start);
  const [x1, y1] = _polar(cx, cy, r, end);
  return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 1 0 ${x1.toFixed(2)} ${y1.toFixed(2)}`;
}

// Bowl of the p: a circle of radius r clipped by the stem (chord at x=cx).
// off = 0  -> exact semicircle (flat D on the stem)
// off > 0  -> centre pushed right of the stem, so the right portion is the
//             MAJOR arc: a fuller "driekwart rondje" that overhangs the stem.
function _bowlPath(cx, cy, r, off) {
  const o = off || 0;
  const h = Math.sqrt(Math.max(r * r - o * o, 0)); // half chord height
  const large = o > 0 ? 1 : 0;
  const topY = (cy - h).toFixed(2);
  const botY = (cy + h).toFixed(2);
  return `M ${cx} ${topY} A ${r} ${r} 0 ${large} 1 ${cx} ${botY}`;
}

// Bowl as an arc centred on the stem. The semicircle (180°, right half) is the
// baseline; `leftExt` (fraction of a full circle) extends it clockwise past the
// bottom, wrapping onto the LEFT side. 0.25 -> 270° three-quarter circle.
// `bendAll` (degrees) pivots the WHOLE added segment inward about the hinge
// where it meets the semicircle (a bend at the base, not just the tip).
// `tipBend` (degrees) additionally curls just the open terminal inward.
function _bowlArc(cx, cy, r, leftExt, tipBend, bendAll) {
  const half = `M ${cx} ${(cy - r).toFixed(2)} A ${r} ${r} 0 0 1 ${cx} ${(cy + r).toFixed(2)}`;
  const delta = (leftExt || 0) * 360; // added sweep, degrees
  if (!delta) return half;
  const Jx = cx, Jy = cy + r;                       // hinge = bottom of semicircle
  const endA = ((90 + delta) * Math.PI) / 180;      // unrotated added end (screen)
  const Ex = cx + r * Math.cos(endA), Ey = cy + r * Math.sin(endA);
  const beta = (bendAll || 0) * Math.PI / 180;       // pivot whole added arc inward
  const dx = Ex - Jx, dy = Ey - Jy;
  const ex = Jx + dx * Math.cos(beta) - dy * Math.sin(beta);
  const ey = Jy + dx * Math.sin(beta) + dy * Math.cos(beta);
  const large = delta > 180 ? 1 : 0;
  let d = `${half} A ${r} ${r} 0 ${large} 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`;
  const b = (tipBend || 0) * Math.PI / 180;
  if (b) {
    const L = 13;
    let Tx = -Math.sin(endA), Ty = Math.cos(endA);   // clockwise travel dir at end
    const Tx2 = Tx * Math.cos(beta) - Ty * Math.sin(beta); // rotated with the arc
    const Ty2 = Tx * Math.sin(beta) + Ty * Math.cos(beta);
    const Dx = Tx2 * Math.cos(b) - Ty2 * Math.sin(b);
    const Dy = Tx2 * Math.sin(b) + Ty2 * Math.cos(b);
    const fx = ex + L * Dx, fy = ey + L * Dy;
    const c1x = ex + L * 0.42 * Tx2, c1y = ey + L * 0.42 * Ty2;
    const c2x = fx - L * 0.42 * Dx, c2y = fy - L * 0.42 * Dy;
    d += ` C ${c1x.toFixed(2)} ${c1y.toFixed(2)} ${c2x.toFixed(2)} ${c2y.toFixed(2)} ${fx.toFixed(2)} ${fy.toFixed(2)}`;
  }
  return d;
}

function PulseIcon({
  R = 70,
  sw = 3.1,
  bowlR = 30,
  bowlOff = 0,           // push bowl centre right of stem for a fuller arc
  leftExt = 0,           // extend the semicircle clockwise onto the left (0.25 = 270°)
  tipBend = 0,           // curl the open terminal inward, in degrees
  bendAll = 0,           // pivot the whole added segment inward at its hinge, in degrees
  bowlCy = 140,          // vertical centre of the bowl
  cx = 100,
  cy = 140,
  extTop = 30,           // stem reach above the ring
  extBot = 36,           // stem reach below the ring
  gapAt = 222,           // gap position (lower-left)
  gapHalf = 15,
  color = "#A4875F",
  style,
}) {
  const pad = sw + 2;
  const top = cy - R - extTop - pad;
  const bottom = cy + R + extBot + pad;
  const left = cx - R - pad;
  const right = Math.max(cx + R, cx + bowlOff + bowlR) + pad;
  const vb = `${left} ${top} ${right - left} ${bottom - top}`;

  return (
    <svg viewBox={vb} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
      <g
        stroke={color}
        strokeWidth={sw}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d={_ringPath(cx, cy, R, gapAt, gapHalf)} />
        <line x1={cx} y1={cy - R - extTop} x2={cx} y2={cy + R + extBot} />
        <path d={leftExt ? _bowlArc(cx, bowlCy, bowlR, leftExt, tipBend, bendAll) : _bowlPath(cx, bowlCy, bowlR, bowlOff)} />
      </g>
    </svg>
  );
}

window.PulseIcon = PulseIcon;