/* CUBO — Hero: ellipse orbit with TRUE depth.
   The orbit is split across two SVGs:
   - The TOP half is drawn BEHIND the cube (z-index 1)
   - The BOTTOM half is drawn IN FRONT of the cube (z-index 3)
   This gives the classic Saturn-ring depth illusion: orbital markers
   disappear behind the cube as they sweep across the top, and reappear
   in front as they cross the bottom. */
function CuboMark() {
  return (
    <img
      className="cubo-mark"
      src="assets/cubo-isotype-light.png"
      alt="CUBO"
      width="44"
      height="44" style={{ height: "60px", width: "44px", objectFit: "cover" }} />);


}

function HeroCube() {
  // Two concentric ellipses on the same plane (same tilt, different radii).
  const orbits = [
    {
      rx: 235, ry: 72, tilt: -8, dur: 32, sweepDur: 12, op: 0.34, sweepOp: 0.95, stroke: 1.0, sweepW: 1.8,
      markers: [
        { r: 4.4, op: 1.0,  delay: 0 },
        { r: 2.8, op: 0.65, delay: -6.4 },
        { r: 3.6, op: 0.85, delay: -12.8 },
        { r: 2.2, op: 0.55, delay: -19.2 },
        { r: 3.0, op: 0.8,  delay: -25.6 },
      ],
    },
    {
      rx: 288, ry: 88, tilt: -8, dur: 44, sweepDur: 16, op: 0.26, sweepOp: 0.7, stroke: 0.8, sweepW: 1.3,
      markers: [
        { r: 3.4, op: 0.85, delay: 0 },
        { r: 2.0, op: 0.55, delay: -11 },
        { r: 2.6, op: 0.7,  delay: -22 },
        { r: 1.8, op: 0.5,  delay: -33 },
      ],
    },
  ];

  // Render orbit line + comet sweep + markers as a unit, parameterized.
  const buildOrbit = (o, i) => {
    const path = `M ${o.rx},0 A ${o.rx},${o.ry} 0 1,1 ${-o.rx},0 A ${o.rx},${o.ry} 0 1,1 ${o.rx},0`;
    const h = ((o.rx - o.ry) ** 2) / ((o.rx + o.ry) ** 2);
    const C = Math.PI * (o.rx + o.ry) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)));
    const sweepLen = C * 0.09;
    return (
      <g key={i} transform={`rotate(${o.tilt})`}>
        {/* faint orbit line */}
        <ellipse cx="0" cy="0" rx={o.rx} ry={o.ry}
          fill="none" stroke="#a88a4f" strokeOpacity={o.op} strokeWidth={o.stroke} />
        {/* comet sweep */}
        <ellipse cx="0" cy="0" rx={o.rx} ry={o.ry}
          fill="none" stroke="#a88a4f" strokeOpacity={o.sweepOp} strokeWidth={o.sweepW}
          strokeLinecap="round"
          strokeDasharray={`${sweepLen} ${C}`}>
          <animate
            attributeName="stroke-dashoffset"
            from={C} to={0}
            dur={`${o.sweepDur}s`} repeatCount="indefinite" />
        </ellipse>
        {/* orbiting markers */}
        {o.markers.map((m, j) => (
          <circle key={j} r={m.r} fill="#a88a4f" fillOpacity={m.op}
            style={{ filter: 'drop-shadow(0 0 6px rgba(168, 138, 79, 0.45))' }}>
            <animateMotion
              dur={`${o.dur}s`}
              begin={`${m.delay}s`}
              repeatCount="indefinite"
              path={path}
              rotate="auto"
            />
          </circle>
        ))}
      </g>
    );
  };

  return (
    <div className="cube-stage iso-stage">
      {/* BACK LAYER — top half of orbit drawn behind the cube */}
      <svg className="iso-geo iso-geo-back" viewBox="-300 -300 600 600" aria-hidden="true">
        <defs>
          <radialGradient id="cubo-vignette" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#e7cb8f" stopOpacity="0.26" />
            <stop offset="55%" stopColor="#e7cb8f" stopOpacity="0.06" />
            <stop offset="100%" stopColor="#e7cb8f" stopOpacity="0" />
          </radialGradient>
          {/* Top half: above the cube horizon (y < 0) */}
          <clipPath id="orbit-clip-back">
            <rect x="-300" y="-300" width="600" height="300" />
          </clipPath>
        </defs>

        {/* Soft glow */}
        <circle cx="0" cy="0" r="170" fill="url(#cubo-vignette)" />

        <g clipPath="url(#orbit-clip-back)">
          {orbits.map(buildOrbit)}
        </g>
      </svg>

      {/* The cube isotype — sandwiched between back & front layers */}
      <img
        className="iso-cube"
        src="assets/cubo-isotype.png"
        alt="CUBO isotipo" />

      {/* FRONT LAYER — bottom half of orbit drawn over the cube */}
      <svg className="iso-geo iso-geo-front" viewBox="-300 -300 600 600" aria-hidden="true">
        <defs>
          <clipPath id="orbit-clip-front">
            <rect x="-300" y="0" width="600" height="300" />
          </clipPath>
        </defs>

        <g clipPath="url(#orbit-clip-front)">
          {orbits.map(buildOrbit)}
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { CuboMark, HeroCube });