{
  "id": "hero-orbital-iamanos",
  "title": "Hero Orbital IAmanos",
  "category": "hero",
  "complexity": "medium",
  "recommendedStack": ["motion-react", "tailwind"],
  "controls": [
    {
      "key": "speed",
      "type": "range",
      "min": 0.1,
      "max": 3,
      "defaultValue": 1
    },
    {
      "key": "glow",
      "type": "boolean",
      "defaultValue": true
    }
  ],
  "performanceProfile": "safe-with-lazy-loading"
}

"use client";

import { motion, useReducedMotion } from "motion/react";

type Props = {
  speed?: number;
  glow?: boolean;
};

export function HeroOrbital({
  speed = 1,
  glow = true,
}: Props) {
  const reduced = useReducedMotion();

  if (reduced) {
    return (
      <div className="relative flex items-center
        justify-center rounded-3xl bg-surface p-12">
        {/* Fallback estático con fade-in */}
        <h1>Arquitectura de Movimiento</h1>
      </div>
    );
  }

  return (
    <div className="relative overflow-hidden">
      <motion.div
        animate={{ rotate: 360 }}
        transition={{
          duration: 40 / speed,
          repeat: Infinity,
          ease: "linear",
        }}
        className="absolute inset-0 rounded-full
          border border-brand-cyan/10"
      />
      {/* Nodos orbitales... */}
    </div>
  );
}