/* Final CTA — Hub2.png cosmic background */
function CTA() {
  const tweaks = window.useHubTweaks();
  return (
    <section id="cta-final" style={{
      position: 'relative',
      padding: '140px 0 100px',
      overflow: 'hidden',
      background: '#0A0E1A',
    }}>
      {/* Background image */}
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'url(assets/hub2-hero.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        zIndex: 0,
        transform: 'scale(1.05)',
      }} />
      {/* Dark overlay — darker for better text readability */}
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'linear-gradient(180deg, rgba(10,14,26,0.85) 0%, rgba(0,0,0,0.80) 50%, rgba(10,14,26,0.92) 100%)',
        zIndex: 1,
      }} />

      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none' }}>
        <Starfield density={Math.round((tweaks.starDensity || 60) * 0.5)} gold={5} />
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <Reveal>
            <span className="badge-pill">
              <span className="dot" />
              ◆ CLOSED β · 先着10社限定
            </span>
          </Reveal>
          <Reveal delay={100}>
            <h2 className="serif" style={{
              fontSize: 'clamp(36px, 6vw, 72px)',
              fontWeight: 700,
              lineHeight: 1.25,
              letterSpacing: '0.04em',
              margin: '32px 0 0',
              color: '#FFFFFF',
              textShadow: '0 4px 32px rgba(0,0,0,0.6)',
              textWrap: 'balance',
            }}>
              魔法を、<br />
              <span style={{
                color: 'var(--gold)',
                textShadow: '0 0 60px rgba(245,200,66,0.7), 0 0 24px rgba(245,200,66,0.9), 0 4px 32px rgba(0,0,0,0.5)',
              }}>あなたの手の中に。</span>
            </h2>
          </Reveal>

          <Reveal delay={200}>
            <p style={{
              fontSize: 16,
              color: '#E8EAF2',
              maxWidth: 580,
              margin: '32px auto 0',
              lineHeight: 1.9,
              letterSpacing: '0.04em',
              textShadow: '0 2px 12px rgba(0,0,0,0.5)',
            }}>
              あなたのデータを、<span style={{ color: 'var(--gold)' }}>日本で守る。</span><br />
              先着10社のクローズドβ枠が、いま開いています。
            </p>
          </Reveal>

          <Reveal delay={300}>
            <div style={{ display: 'flex', gap: 16, marginTop: 48, flexWrap: 'wrap', justifyContent: 'center' }}>
              <a href="#" className="btn btn-gold" style={{ padding: '18px 36px', fontSize: 16 }}>
                クローズドβに登録する
                <Glyph.Arrow width="18" height="18" />
              </a>
              <a href="#" className="btn btn-ghost" style={{ padding: '18px 32px', fontSize: 15, background: 'rgba(10,14,26,0.4)', backdropFilter: 'blur(8px)' }}>
                お問い合わせ
              </a>
            </div>
          </Reveal>

          <Reveal delay={400}>
            <div style={{
              marginTop: 48,
              padding: '14px 24px',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 12,
              background: 'rgba(245,200,66,0.1)',
              border: '1px solid rgba(245,200,66,0.3)',
              borderRadius: 999,
              backdropFilter: 'blur(12px)',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 12,
              color: 'var(--gold)',
              letterSpacing: '0.1em',
            }}>
              <span style={{ fontSize: 14 }}>◆</span>
              hub2.co.jp 取得済み
              <span style={{ color: 'rgba(255,255,255,0.4)' }}>·</span>
              <span style={{ color: '#C9CFE3' }}>公式ドメインで安心</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.CTA = CTA;