/**
 * 로그인 스플래시 — 중앙→우상단 대각선으로 흐릿한 캔들·호가 실루엣 + 메시 그라데이션
 */
import React from 'react';
import SplashChartBackground from './SplashChartBackground';
import SplashOrderbookBackground from './SplashOrderbookBackground';

const SplashGradientBackdrop: React.FC = () => (
  <div className="splash-backdrop" aria-hidden>
    <div className="splash-backdrop__base" />
    <div className="splash-backdrop__mesh" />

    <div className="splash-backdrop__orbs">
      <span className="splash-backdrop__orb splash-backdrop__orb--gold" />
      <span className="splash-backdrop__orb splash-backdrop__orb--teal" />
      <span className="splash-backdrop__orb splash-backdrop__orb--indigo" />
    </div>

    {/* 캔들 + 호가 — 화면 중앙에서 우측 상단으로 퍼지는 그라데이션 마스크 */}
    <div className="splash-backdrop__market-flow">
      <div className="splash-backdrop__flow-glow" />
      <div className="splash-backdrop__flow-inner">
        <div className="splash-backdrop__chart-layer">
          <SplashChartBackground />
        </div>
        <div className="splash-backdrop__orderbook-layer">
          <SplashOrderbookBackground />
        </div>
      </div>
    </div>

    <div className="splash-backdrop__grid" />
    <div className="splash-backdrop__grain" />
    <div className="splash-backdrop__vignette" />
    <div className="splash-backdrop__spotlight" />
  </div>
);

export default SplashGradientBackdrop;