/* Hero — Hub2.png cosmic background */
function Hero() {
  const tweaks = window.useHubTweaks();
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const ref = React.useRef(null);

  const onMove = (e) => {
    const r = ref.current?.getBoundingClientRect();
    if (!r) return;
    const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
    const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
    setMouse({ x, y });
  };

  return (
    <section id="top" ref={ref} onMouseMove={onMove} style={{
      position: 'relative',
      minHeight: '100vh',
      paddingTop: 120,
      paddingBottom: 80,
      overflow: 'hidden',
      background: 'radial-gradient(ellipse 80% 60% at 50% 30%, #14193a 0%, #0A0E1A 60%)',
    }}>
      <Starfield density={tweaks.starDensity || 120} gold={Math.max(4, Math.round((tweaks.starDensity || 120) / 12))} />

      {/* Glow orbs */}
      <div className="glow-orb" style={{
        width: 600, height: 600,
        top: '10%', left: '50%',
        transform: `translate(-50%, ${mouse.y * 10}px)`,
        background: 'radial-gradient(circle, rgba(245,200,66,0.4) 0%, transparent 70%)',
      }} />
      <div className="glow-orb" style={{
        width: 400, height: 400,
        bottom: '-10%', left: '10%',
        background: 'radial-gradient(circle, oklch(0.5 0.18 280 / 0.5) 0%, transparent 70%)',
      }} />

      {/* Portal rings — aligned with the main h1 "Hub2。" center */}
      <div style={{
        position: 'absolute',
        top: 'calc(228px + 0.525 * clamp(72px, 12vw, 176px))',
        left: '82%',
        transform: `translate(-50%, -50%) translate(${mouse.x * -15}px, ${mouse.y * -15}px)`,
        zIndex: 1,
        pointerEvents: 'none',
      }} className="hero-portal">
        {[680, 540, 420, 320, 240, 180].map((size, i) => (
          <div key={i} className="portal-ring" style={{
            width: size, height: size,
            top: -size/2, left: -size/2,
            position: 'absolute',
            borderColor: `rgba(245, 200, 66, ${0.05 + i * 0.025})`,
            animation: `${i % 2 === 0 ? 'rotate-slow' : 'rotate-reverse'} ${30 + i * 8}s linear infinite`,
          }}>
            {i === 2 && <div style={{ position: 'absolute', top: -2, left: '50%', width: 4, height: 4, background: 'var(--gold)', borderRadius: '50%', boxShadow: '0 0 12px var(--gold)' }} />}
            {i === 4 && <div style={{ position: 'absolute', top: '50%', right: -2, width: 4, height: 4, background: 'white', borderRadius: '50%', boxShadow: '0 0 8px white' }} />}
          </div>
        ))}
        {/* Core glow */}
        <div style={{
          position: 'absolute',
          width: 120, height: 120,
          top: -60, left: -60,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(245,200,66,0.5) 0%, rgba(245,200,66,0.1) 40%, transparent 70%)',
          filter: 'blur(8px)',
          animation: 'pulse-gold 3s ease-in-out infinite',
        }} />
        {/* Gold diamond */}
        <div style={{
          position: 'absolute',
          width: 40, height: 40,
          top: -20, left: -20,
          transform: 'rotate(45deg)',
          background: 'var(--grad-gold)',
          boxShadow: '0 0 40px rgba(245,200,66,0.8)',
        }} />
      </div>

      {/* Content */}
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', maxWidth: 920, margin: '0 auto' }}>
          <Reveal>
            <span className="badge-pill">
              <span className="dot" />
              ◆ CLOSED β 受付中 — 先着10社限定
            </span>
          </Reveal>

          <Reveal delay={100}>
            <div className={tweaks.headlineMode === 'sans' ? '' : 'serif'} style={{
              fontFamily: tweaks.headlineMode === 'sans' ? "'Noto Sans JP', sans-serif" : "'Noto Serif JP', serif",
              fontSize: 'clamp(22px, 2.8vw, 36px)',
              fontWeight: 500,
              lineHeight: 1.4,
              letterSpacing: '0.14em',
              color: '#FFFFFF',
              margin: '40px 0 12px',
            }}>
              魔法のポケット
            </div>
          </Reveal>

          <Reveal delay={200}>
            <h1 className={tweaks.headlineMode === 'sans' ? '' : 'serif'} style={{
              fontFamily: tweaks.headlineMode === 'sans' ? "'Noto Sans JP', sans-serif" : "'Noto Serif JP', serif",
              fontSize: 'clamp(72px, 12vw, 176px)',
              fontWeight: 700,
              lineHeight: 1.0,
              letterSpacing: '0.04em',
              margin: 0,
              color: 'var(--gold)',
              textShadow: '0 0 32px rgba(245,200,66,0.4), 0 0 64px rgba(245,200,66,0.25), 0 0 12px rgba(245,200,66,0.45)',
              textWrap: 'balance',
              position: 'relative',
            }}>
              <span style={{ display: 'inline-block', position: 'relative' }}>
                Hub2
                <span style={{
                  position: 'absolute',
                  bottom: '-0.06em',
                  left: '5%', right: '5%',
                  height: 4,
                  background: 'var(--grad-gold)',
                  borderRadius: 4,
                  boxShadow: '0 0 20px rgba(245,200,66,0.9)',
                  opacity: 0.7,
                }} />
              </span>。
            </h1>
          </Reveal>

          <Reveal delay={300}>
            <p style={{
              fontSize: 'clamp(15px, 1.6vw, 19px)',
              color: 'var(--ink-2)',
              maxWidth: 720,
              margin: '40px auto 0',
              lineHeight: 1.9,
              letterSpacing: '0.04em',
            }}>
              写真・動画・書類・商品データ ── <span style={{ color: 'var(--ink)' }}>あなたの大切なデータを、1つの安全な場所へ。</span><br />
              ECプラットフォーム間のデータ移管にも完全対応。<br />
              <span className="mono" style={{ fontSize: 13, color: 'var(--gold)', letterSpacing: '0.1em' }}>
                ── 電子帳簿法準拠の Japanese Cloud ──
              </span>
            </p>
          </Reveal>

          <Reveal delay={400}>
            <div style={{ display: 'flex', gap: 16, marginTop: 48, flexWrap: 'wrap', justifyContent: 'center' }}>
              <a href="#cta-final" className="btn btn-gold">
                クローズドβに登録する
                <Glyph.Arrow width="16" height="16" />
              </a>
              <a href="#features" className="btn btn-ghost">
                資料を見る
              </a>
            </div>
          </Reveal>

          <Reveal delay={550}>
            <div style={{
              marginTop: 80,
              display: 'flex',
              gap: '12px 28px',
              alignItems: 'center',
              flexWrap: 'wrap',
              justifyContent: 'center',
              fontFamily: 'Noto Sans JP, sans-serif',
              fontSize: 12,
              color: 'var(--ink-3)',
              letterSpacing: '0.08em',
              padding: '0 16px',
            }}>
              <span style={{ whiteSpace: 'nowrap' }}><span style={{ color: 'var(--gold)' }}>◆</span> hub2.co.jp 取得済み</span>
              <span style={{ width: 4, height: 4, background: 'var(--ink-4)', borderRadius: '50%' }} />
              <span style={{ whiteSpace: 'nowrap' }}><span style={{ color: 'var(--gold)' }}>◆</span> 電子帳簿法対応</span>
              <span style={{ width: 4, height: 4, background: 'var(--ink-4)', borderRadius: '50%' }} />
              <span style={{ whiteSpace: 'nowrap' }}><span style={{ color: 'var(--gold)' }}>◆</span> 6プラットフォーム連携</span>
            </div>
          </Reveal>
        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;