// ============================================
// Hero visual — brand cube + hex motifs
// ============================================
const { useEffect, useRef, useState } = React;

// ---- Hero brand cube: real logo, subtle float + parallax ----
function BrandCube({ scrollY = 0, mouseX = 0, mouseY = 0 }) {
  const motion = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion')) || 1;

  // Subtle float + mouse parallax
  const tx = mouseX * 30 * motion;
  const ty = mouseY * 20 * motion;
  const rz = scrollY * 0.02 * motion; // very subtle rotation on scroll
  const scale = 1 - Math.min(0.15, scrollY * 0.0003 * motion);

  return (
    <div className="cube-stage" aria-hidden="true">
      {/* Hexagon glow halo behind cube */}
      <div className="cube-halo"></div>

      {/* Hexagon ring outlines */}
      <svg className="hex-ring hex-ring-1" viewBox="0 0 200 200" fill="none">
        <polygon points="100,8 174,50 174,150 100,192 26,150 26,50" stroke="currentColor" strokeWidth="0.5" />
      </svg>
      <svg className="hex-ring hex-ring-2" viewBox="0 0 200 200" fill="none">
        <polygon points="100,8 174,50 174,150 100,192 26,150 26,50" stroke="currentColor" strokeWidth="0.5" />
      </svg>
      <svg className="hex-ring hex-ring-3" viewBox="0 0 200 200" fill="none">
        <polygon points="100,8 174,50 174,150 100,192 26,150 26,50" stroke="currentColor" strokeWidth="0.5" />
      </svg>

      {/* Brand cube image floating */}
      <div
        className="cube-img-wrap"
        style={{
          transform: `translate3d(${tx}px, ${ty}px, 0) rotate(${rz}deg) scale(${scale})`,
        }}
      >
        <img src="assets/cube-blue.png" alt="Grupo Luna" />
      </div>

      {/* Glassy floating chips with brand fragments */}
      <div className="chip chip-1 glass">
        <span className="dot"></span>
        <span>Experiencia</span>
      </div>
      <div className="chip chip-2 glass">
        <span className="dot"></span>
        <span>30+ años</span>
      </div>
      <div className="chip chip-3 glass">
        <span className="dot"></span>
        <span>+50 proyectos</span>
      </div>
    </div>
  );
}

// ---- Ambient hexagons floating in hero background ----
function AmbientCubes({ scrollY = 0 }) {
  const motion = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion')) || 1;
  const items = [
    { left: '4%',  top: '12%', size: 120, opacity: 0.18, d: 0.4 },
    { left: '88%', top: '18%', size: 70,  opacity: 0.22, d: 0.6 },
    { left: '92%', top: '72%', size: 140, opacity: 0.12, d: 0.3 },
    { left: '6%',  top: '76%', size: 90,  opacity: 0.16, d: 0.5 },
    { left: '46%', top: '6%',  size: 50,  opacity: 0.25, d: 0.7 },
    { left: '78%', top: '52%', size: 38,  opacity: 0.28, d: 0.55 },
  ];

  return (
    <div className="ambient-hexes" aria-hidden="true">
      {items.map((c, i) => {
        const drift = -scrollY * c.d * 0.15 * motion;
        return (
          <svg
            key={i}
            className="ambient-hex"
            viewBox="0 0 100 100"
            style={{
              left: c.left,
              top: c.top,
              width: c.size,
              height: c.size,
              opacity: c.opacity,
              transform: `translateY(${drift}px)`,
              willChange: 'transform',
            }}
          >
            <polygon
              points="50,4 87,25 87,75 50,96 13,75 13,25"
              fill="none"
              stroke="#017db0"
              strokeWidth="0.8"
            />
            {/* Inner Y lines mimicking the isometric cube edges */}
            <line x1="50" y1="4"  x2="50" y2="50" stroke="#017db0" strokeWidth="0.5" />
            <line x1="13" y1="25" x2="50" y2="50" stroke="#017db0" strokeWidth="0.5" />
            <line x1="87" y1="25" x2="50" y2="50" stroke="#017db0" strokeWidth="0.5" />
          </svg>
        );
      })}
    </div>
  );
}

Object.assign(window, { BrandCube, AmbientCubes });