/* Grain — realistic glass magnifying glass.
   Translucent cool-glass lens + polished copper (brand) bezel + handle,
   specular highlights, soft colored shadow. The lens magnifies a fragment
   of "structure" (grid + wire node) — Grain sees the structure beneath. */

function Magnifier({ size = 300, glint = true, className = "", style }) {
  const uid = React.useId().replace(/:/g, "");
  const id = (n) => `mg-${n}-${uid}`;
  const C = 86, Ro = 60, Rg = 50;           // lens centre / rim outer / glass radius

  // magnified structure inside the lens (cool wire), scaled to imply magnification
  const grid = [];
  for (let i = -3; i <= 3; i++) {
    grid.push(<line key={"h" + i} x1={C - 60} y1={C + i * 18} x2={C + 60} y2={C + i * 18} />);
    grid.push(<line key={"v" + i} x1={C + i * 18} y1={C - 60} x2={C + i * 18} y2={C + 60} />);
  }

  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 220 220" fill="none"
      role="img" aria-label="Grain — magnifying structure">
      <defs>
        <radialGradient id={id("glass")} cx="36%" cy="30%" r="80%">
          <stop offset="0%" stopColor="rgba(228,253,251,0.46)" />
          <stop offset="34%" stopColor="rgba(116,224,220,0.22)" />
          <stop offset="68%" stopColor="rgba(22,158,168,0.22)" />
          <stop offset="100%" stopColor="rgba(10,78,102,0.48)" />
        </radialGradient>
        <linearGradient id={id("fresnel")} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(232,255,253,0.9)" />
          <stop offset="38%" stopColor="rgba(150,235,232,0.2)" />
          <stop offset="100%" stopColor="rgba(120,230,225,0)" />
        </linearGradient>
        <radialGradient id={id("inner")} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(0,0,0,0)" />
          <stop offset="74%" stopColor="rgba(0,0,0,0)" />
          <stop offset="93%" stopColor="rgba(4,32,42,0.40)" />
          <stop offset="100%" stopColor="rgba(4,28,38,0.0)" />
        </radialGradient>
        <linearGradient id={id("rim")} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#FFE2B8" />
          <stop offset="22%" stopColor="#F6AE62" />
          <stop offset="48%" stopColor="#E8893B" />
          <stop offset="76%" stopColor="#A85620" />
          <stop offset="100%" stopColor="#5E2D0C" />
        </linearGradient>
        <linearGradient id={id("rimhi")} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(255,240,220,0.95)" />
          <stop offset="45%" stopColor="rgba(255,200,140,0.15)" />
          <stop offset="100%" stopColor="rgba(120,60,20,0)" />
        </linearGradient>
        <linearGradient id={id("handle")} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#F8B968" />
          <stop offset="42%" stopColor="#E8893B" />
          <stop offset="100%" stopColor="#7A3E14" />
        </linearGradient>
        <linearGradient id={id("glint")} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="rgba(255,255,255,0)" />
          <stop offset="50%" stopColor="rgba(255,255,255,0.55)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </linearGradient>
        <clipPath id={id("clip")}><circle cx={C} cy={C} r={Rg} /></clipPath>
        <filter id={id("soft")} x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="3.4" /></filter>
        <filter id={id("shadow")} x="-60%" y="-60%" width="220%" height="220%">
          <feDropShadow dx="0" dy="14" stdDeviation="13" floodColor="rgba(0,0,0,0.55)" />
          <feDropShadow dx="0" dy="3" stdDeviation="10" floodColor="rgba(232,137,59,0.22)" />
        </filter>
      </defs>

      <g filter={`url(#${id("shadow")})`}>
        {/* handle (behind rim) */}
        <line x1="124" y1="124" x2="178" y2="178" stroke={`url(#${id("handle")})`} strokeWidth="26" strokeLinecap="round" />
        <line x1="121" y1="121" x2="172" y2="172" stroke="rgba(255,230,200,0.5)" strokeWidth="4" strokeLinecap="round" />
        <line x1="129" y1="129" x2="180" y2="180" stroke="rgba(70,32,8,0.55)" strokeWidth="4" strokeLinecap="round" />

        {/* glass + magnified structure */}
        <g clipPath={`url(#${id("clip")})`}>
          <circle cx={C} cy={C} r={Rg} fill={`url(#${id("glass")})`} />
          <g stroke="rgba(120,205,222,0.22)" strokeWidth="1">{grid}</g>
          {/* a wire node being magnified */}
          <circle cx={C + 8} cy={C - 4} r="13" stroke="rgba(150,220,235,0.5)" strokeWidth="1.4" fill="none" />
          <circle cx={C + 8} cy={C - 4} r="3.2" fill="rgba(232,137,59,0.9)" />
          <line x1={C + 8} y1={C - 4} x2={C + 34} y2={C - 22} stroke="rgba(150,220,235,0.4)" strokeWidth="1.2" />
          <line x1={C + 8} y1={C - 4} x2={C - 22} y2={C + 20} stroke="rgba(150,220,235,0.4)" strokeWidth="1.2" />
          <circle cx={C + 34} cy={C - 22} r="2.4" fill="rgba(150,220,235,0.7)" />
          <circle cx={C - 22} cy={C + 20} r="2.4" fill="rgba(150,220,235,0.7)" />
          {/* inner thickness shadow */}
          <circle cx={C} cy={C} r={Rg} fill={`url(#${id("inner")})`} />
          {/* Fresnel rim-light: glass edge catching light top-left */}
          <circle cx={C} cy={C} r={Rg - 1.5} fill="none" stroke={`url(#${id("fresnel")})`} strokeWidth="2.6" />
          {/* specular highlights */}
          <ellipse cx="64" cy="56" rx="31" ry="18" transform="rotate(-34 64 56)" fill="rgba(255,255,255,0.55)" filter={`url(#${id("soft")})`} />
          <ellipse cx="56" cy="50" rx="11" ry="5" transform="rotate(-34 56 50)" fill="rgba(255,255,255,0.95)" />
          {/* glint sweep */}
          {glint && <rect className="mg-glint" x="20" y="20" width="26" height="132" transform="rotate(24 86 86)" fill={`url(#${id("glint")})`} />}
        </g>

        {/* rim — polished copper bezel */}
        <circle cx={C} cy={C} r={Rg + 5.5} fill="none" stroke={`url(#${id("rim")})`} strokeWidth="9" />
        <circle cx={C} cy={C} r={Rg + 9.5} fill="none" stroke={`url(#${id("rimhi")})`} strokeWidth="1.6" />
        <circle cx={C} cy={C} r={Rg + 1} fill="none" stroke="rgba(50,24,6,0.55)" strokeWidth="1.4" />
      </g>
    </svg>
  );
}

Object.assign(window, { Magnifier });
