// Common helpers for WAVEPIX hero animation
// Brand tokens, gradients, decorative wave SVGs, dot grids.

const WP = {
  navy900: '#0B1B3F',
  navy800: '#102150',
  navy700: '#152B66',
  navy600: '#1A3780',
  blue700: '#0855A0',
  blue600: '#0A66B8',
  blue500: '#1E84D8',
  blue400: '#4CA4E6',
  blue300: '#8FC5F0',
  blue200: '#C5E0F5',
  blue100: '#E6F1FB',
  cyan500: '#00A8D9',
  cyan400: '#3BC1E4',
  orange500: '#FF7A29',
  orange400: '#FF9556',
  ink900: '#0E1525',
  ink700: '#2B3452',
  ink500: '#5F6B8A',
  ink400: '#8490AD',
  ink200: '#D3D9E3',
  ink100: '#E5EAF2',
  ink50: '#F5F7FB',
  white: '#FFFFFF',
  gradHero: 'linear-gradient(135deg, #0B1B3F 0%, #0A66B8 100%)',
  gradHeroDeep: 'radial-gradient(120% 140% at 10% 10%, #1A3780 0%, #0B1B3F 55%, #07122B 100%)',
  font: "'Pretendard Variable', 'Funnel Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
  fontDisplay: "'Mona Sans', 'Pretendard Variable', system-ui, sans-serif",
  fontMono: "'JetBrains Mono', ui-monospace, monospace",
};

// Soft animated wave background (SVG). `phase` 0..1 shifts horizontally.
function WaveBackdrop({ phase = 0, opacity = 0.5, color = WP.blue400 }) {
  const dx = phase * 1920;
  return (
    <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{
      position: 'absolute', inset: 0, opacity, pointerEvents: 'none',
    }}>
      <defs>
        <linearGradient id="waveGradTop" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={color} stopOpacity="0"/>
          <stop offset="50%" stopColor={color} stopOpacity="0.7"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <g transform={`translate(${-dx} 0)`}>
        <path d="M-200 540 Q 280 460, 760 540 T 1720 540 T 2680 540 T 3640 540" stroke="url(#waveGradTop)" strokeWidth="1.5" fill="none"/>
        <path d="M-200 600 Q 280 520, 760 600 T 1720 600 T 2680 600 T 3640 600" stroke="url(#waveGradTop)" strokeWidth="1" fill="none" opacity="0.7"/>
        <path d="M-200 480 Q 280 400, 760 480 T 1720 480 T 2680 480 T 3640 480" stroke="url(#waveGradTop)" strokeWidth="1" fill="none" opacity="0.5"/>
      </g>
      <g transform={`translate(${dx * 0.6} 0)`} opacity="0.6">
        <path d="M-200 720 Q 320 640, 840 720 T 1880 720 T 2920 720" stroke="url(#waveGradTop)" strokeWidth="1.2" fill="none"/>
        <path d="M-200 780 Q 320 700, 840 780 T 1880 780 T 2920 780" stroke="url(#waveGradTop)" strokeWidth="0.8" fill="none" opacity="0.6"/>
      </g>
    </svg>
  );
}

// Subtle dot grid for hero backgrounds.
function DotGrid({ opacity = 0.18, color = '#FFFFFF', spacing = 32 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `radial-gradient(${color} 1px, transparent 1px)`,
      backgroundSize: `${spacing}px ${spacing}px`,
      opacity, pointerEvents: 'none',
    }}/>
  );
}

// Single signature wave line (used as transition motif, brand DNA).
function SignatureWave({ x = 0, y = 0, width = 1920, height = 200, progress = 1, color = WP.cyan500, strokeWidth = 2 }) {
  // progress 0..1 — line draws on
  const pathLen = 4000;
  const dashOffset = pathLen * (1 - progress);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{
      position: 'absolute', left: x, top: y, pointerEvents: 'none', overflow: 'visible',
    }}>
      <defs>
        <linearGradient id="sigwave" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={color} stopOpacity="0"/>
          <stop offset="20%" stopColor={color} stopOpacity="1"/>
          <stop offset="80%" stopColor={color} stopOpacity="1"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path
        d={`M0 ${height/2} C ${width*0.2} ${height*0.1}, ${width*0.35} ${height*0.9}, ${width*0.5} ${height/2} S ${width*0.8} ${height*0.1}, ${width} ${height/2}`}
        stroke="url(#sigwave)"
        strokeWidth={strokeWidth}
        fill="none"
        strokeDasharray={pathLen}
        strokeDashoffset={dashOffset}
        strokeLinecap="round"
      />
    </svg>
  );
}

// Vignette wash
function Vignette({ opacity = 0.4 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(7,18,43,0.7) 100%)',
      opacity, pointerEvents: 'none',
    }}/>
  );
}

Object.assign(window, { WP, WaveBackdrop, DotGrid, SignatureWave, Vignette });