/* Grain — brand mark (Dot Aperture, refined) + forming animation
   The G's counter holds an offset pupil dot — "a mark that sees structure."
   The whole G draws itself in (forms), then the pupil springs in. */

// ---- geometry (viewBox 0 0 64 64) ----
function _polar(cx, cy, r, deg) { const a = (deg * Math.PI) / 180; return [cx + r * Math.cos(a), cy - r * Math.sin(a)]; }
const _f = (n) => Math.round(n * 1000) / 1000;
function _arc(cx, cy, r, a0, a1) {
  const [x0, y0] = _polar(cx, cy, r, a0), [x1, y1] = _polar(cx, cy, r, a1);
  const d = ((a1 - a0) % 360 + 360) % 360, large = d > 180 ? 1 : 0;
  return `M ${_f(x0)} ${_f(y0)} A ${r} ${r} 0 ${large} 0 ${_f(x1)} ${_f(y1)}`;
}
// single continuous G path: open-right ring + jaw + bar
function _gPath(c = 32, R = 22, gap = 33, barX = 33) {
  const top = gap, bot = 360 - gap;
  const lowerX = _f(_polar(c, c, R, bot)[0]);
  return `${_arc(c, c, R, top, bot)} L ${lowerX} ${c} L ${barX} ${c}`;
}

const G_PATH = _gPath();
const G_LEN = 150;        // approx path length, for dash animation
const DOT = { x: 26.8, y: 27.2, r: 4.1 };

/* GrainMark — the logo.
   props: size, color, dotColor, interactive (form on hover),
   draw (form once on mount), hero (resting glow + guide rings) */
function GrainMark({ size = 22, color = "var(--grain)", dotColor, interactive = false, draw = false, hero = false, strokeScale = 1 }) {
  const sw = (hero ? 5 : 5.6) * strokeScale;
  const cls = ["gm", interactive && "gm-interactive", draw && "gm-draw", hero && "gm-hero"].filter(Boolean).join(" ");
  return (
    <svg className={cls} width={size} height={size} viewBox="0 0 64 64" fill="none"
      stroke={color} role="img" aria-label="Grain">
      {hero && (
        <g className="gm-guides" stroke={color} fill="none">
          <circle cx="32" cy="32" r="29.5" strokeWidth="0.6" opacity="0.16" />
          <circle cx="32" cy="32" r="14.5" strokeWidth="0.6" opacity="0.12" />
        </g>
      )}
      <path className="gm-g" d={G_PATH} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
        pathLength="1" style={{ strokeDasharray: 1 }} />
      <circle className="gm-dot" cx={DOT.x} cy={DOT.y} r={DOT.r} fill={dotColor || color} stroke="none" />
    </svg>
  );
}

/* Wordmark lockup */
function GrainLockup({ size = 22, fontSize = 19, color = "var(--grain)", textColor = "var(--text)", interactive = true }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.5 }}>
      <GrainMark size={size} color={color} interactive={interactive} />
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize, letterSpacing: "-0.035em", color: textColor, lineHeight: 1 }}>Grain</span>
    </span>
  );
}

Object.assign(window, { GrainMark, GrainLockup });