// HeroOrb — もやもやとした流体的な球体アニメーション(シンプル版)。
// 元のミニマルな表現を踏襲しつつ、色味をアクア(水)寄りの青に調整。
// variant: 'soft' = 同心円リング込み / 'minimal' = リング控えめ。
// background='light'|'dark' で発色を切替。

function HeroOrb({
  size = 520,
  variant = 'soft',
  accent,                  // 互換のため残すが内部では palette を優先
  background = 'light',
}) {
  const id = React.useId().replace(/:/g, '');
  const isDark = background === 'dark';
  // アクアブルー寄りのトーン
  const PAL = isDark ? {
    base:   '#7bb6ff',     // ベース(青)
    deep:   '#2a6cd0',     // 深い青
    glow:   '#bfe2ff',     // 内側のハイライト
    rim:    '#a8c4ff',     // リング
  } : {
    base:   '#2a7fd6',
    deep:   '#1a4a9c',
    glow:   '#7bd0ff',
    rim:    '#3a92e6',
  };

  return (
    <div style={{
      position: 'relative', width: size, height: size,
      pointerEvents: 'none', userSelect: 'none',
    }}>
      <style>{`
        @keyframes orb-float-${id} {
          0%,100% { transform: translate(0,0) scale(1); }
          33%     { transform: translate(2%, -3%) scale(1.04); }
          66%     { transform: translate(-2%, 2%) scale(0.97); }
        }
        @keyframes orb-rot-${id} { to { transform: rotate(360deg); } }
        @keyframes orb-ring-${id} {
          0%   { stroke-dashoffset: 0; opacity: .55; }
          100% { stroke-dashoffset: -520; opacity: .55; }
        }
        @keyframes orb-pulse-${id} {
          0%,100% { opacity: .9; }
          50%     { opacity: .55; }
        }
        .orb-${id}-blob1 { animation: orb-float-${id} 14s ease-in-out infinite; transform-origin: center; }
        .orb-${id}-blob2 { animation: orb-float-${id} 17s ease-in-out infinite reverse; transform-origin: center; }
        .orb-${id}-rot   { animation: orb-rot-${id} 80s linear infinite; transform-origin: 50% 50%; }
        .orb-${id}-rotr  { animation: orb-rot-${id} 120s linear infinite reverse; transform-origin: 50% 50%; }
        .orb-${id}-ring  { animation: orb-ring-${id} 24s linear infinite; }
        .orb-${id}-core  { animation: orb-pulse-${id} 6s ease-in-out infinite; }
      `}</style>
      <svg viewBox="0 0 600 600" width={size} height={size} style={{ display: 'block' }}>
        <defs>
          {/* 大きな流体ブロブ(深い青→淡い青) */}
          <radialGradient id={`g1-${id}`} cx="0.4" cy="0.35" r="0.7">
            <stop offset="0%"   stopColor={PAL.glow} stopOpacity="0.18" />
            <stop offset="55%"  stopColor={PAL.base} stopOpacity="0.55" />
            <stop offset="100%" stopColor={PAL.deep} stopOpacity="0.85" />
          </radialGradient>
          {/* もう一つのブロブ */}
          <radialGradient id={`g2-${id}`} cx="0.65" cy="0.7" r="0.6">
            <stop offset="0%"   stopColor={PAL.base} stopOpacity="0.0" />
            <stop offset="100%" stopColor={PAL.deep} stopOpacity="0.4" />
          </radialGradient>
          <filter id={`blur-${id}`}><feGaussianBlur stdDeviation="22" /></filter>
          <filter id={`blur2-${id}`}><feGaussianBlur stdDeviation="6" /></filter>
        </defs>

        {/* 外周の薄い同心円(soft のみ) */}
        {variant !== 'minimal' && (
          <g opacity="0.55">
            {[260, 220, 180, 140].map((r, i) => (
              <circle key={r} cx="300" cy="300" r={r}
                fill="none" stroke={PAL.rim}
                strokeOpacity={0.08 + i * 0.025}
                strokeWidth={i === 0 ? 0.6 : 0.4} />
            ))}
          </g>
        )}

        {/* 回転する破線リング */}
        <g className={`orb-${id}-rot`}>
          <circle cx="300" cy="300" r="248"
            fill="none" stroke={PAL.rim} strokeOpacity="0.32"
            strokeWidth="0.7" strokeDasharray="2 8"
            className={`orb-${id}-ring`} />
        </g>
        <g className={`orb-${id}-rotr`}>
          <circle cx="300" cy="300" r="200"
            fill="none" stroke={PAL.rim} strokeOpacity="0.20"
            strokeWidth="0.5" strokeDasharray="1 14" />
        </g>

        {/* 流体ブロブ(もやもや) */}
        <g filter={`url(#blur-${id})`}>
          <ellipse className={`orb-${id}-blob1`}
            cx="300" cy="300" rx="170" ry="180" fill={`url(#g1-${id})`} />
          <ellipse className={`orb-${id}-blob2`}
            cx="300" cy="300" rx="160" ry="150" fill={`url(#g2-${id})`} />
        </g>

        {/* コア */}
        <circle className={`orb-${id}-core`}
          cx="300" cy="300" r="140"
          fill={PAL.base} fillOpacity="0.06"
          stroke={PAL.rim} strokeOpacity="0.45" strokeWidth="0.6" />

        {/* ハイライト */}
        <ellipse cx="245" cy="240" rx="44" ry="28"
          fill="#ffffff" fillOpacity="0.5"
          filter={`url(#blur2-${id})`} />
      </svg>
    </div>
  );
}

window.HeroOrb = HeroOrb;