// Variant 1 — Convergence
// 분리된 3개 워크스페이스 카드(Web/Security/Marketing)가 wave와 함께
// 중앙으로 모여 WAVEPIX 로고로 통합. 마지막 정적 슬로건.

function ServiceCard({ title, korTitle, subtitle, icon, color, accent, lines, miniContent }) {
  return (
    <div style={{
      width: 480, height: 320,
      background: WP.white,
      borderRadius: 20,
      boxShadow: '0 20px 60px rgba(11,27,63,0.22), 0 1px 2px rgba(11,27,63,0.06)',
      padding: 32,
      display: 'flex', flexDirection: 'column',
      gap: 18,
      border: `1px solid ${WP.ink100}`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 6,
        background: accent,
      }}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: color, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: WP.white,
        }}>
          {icon}
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: WP.ink400, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{title}</div>
          <div style={{ fontSize: 26, fontWeight: 800, color: WP.ink900, letterSpacing: '-0.02em', marginTop: 2 }}>{korTitle}</div>
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {miniContent}
      </div>
    </div>
  );
}

function MiniLog({ items, color }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: WP.fontMono, fontSize: 14, color: WP.ink700 }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: color, flexShrink: 0 }}/>
          <span style={{ color: WP.ink500 }}>{it.t}</span>
          <span>{it.m}</span>
        </div>
      ))}
    </div>
  );
}

function MiniLine({ color }) {
  return (
    <svg width="380" height="80" viewBox="0 0 380 80">
      <path d="M0 56 L54 44 L108 50 L162 30 L216 36 L270 18 L325 24 L380 10" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M0 56 L54 44 L108 50 L162 30 L216 36 L270 18 L325 24 L380 10 L380 80 L0 80 Z" fill={color} opacity="0.14"/>
    </svg>
  );
}

function Variant1() {
  const time = useTime();
  const T = time;

  // Phase windows
  // 0.0–1.0  intro fade
  // 1.0–5.5  3 cards drift apart, scrolling content (separated)
  // 5.5–8.5  cards converge to center
  // 8.5–11.5 logo emerges, slogan
  // 11.5–15  hold logo + outgoing wave (loop bridge)

  // Card positions: starts spread out (wide), converges to center stack
  const sepStart = 1.0;
  const sepEnd = 5.5;
  const convStart = 5.5;
  const convEnd = 8.2;

  // separation progress: 0..1 over [sepStart, sepEnd]
  const sep = clamp((T - sepStart) / (sepEnd - sepStart), 0, 1);
  const sepEased = Easing.easeOutCubic(sep);

  // convergence: 0..1 over [convStart, convEnd]
  const conv = clamp((T - convStart) / (convEnd - convStart), 0, 1);
  const convE = Easing.easeInOutCubic(conv);

  // Combined offset: each card has a separated x and a converged center
  // At sep=1 conv=0 → spread; at conv=1 → all at center, scaled down + faded
  const cards = [
    {
      title: 'WEB', korTitle: '홈페이지 관리',
      color: WP.blue600, accent: `linear-gradient(90deg, ${WP.blue600}, ${WP.cyan500})`,
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></svg>,
      baseX: 200, targetX: 780,
      baseY: 380, targetY: 400,
      miniContent: (
        <>
          <div style={{ display: 'flex', gap: 8, marginBottom: 4 }}>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F57' }}/>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: '#FEBC2E' }}/>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: '#28C840' }}/>
          </div>
          <div style={{ height: 12, background: WP.ink100, borderRadius: 3, width: '90%' }}/>
          <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
            <div style={{ width: 70, height: 50, background: WP.blue100, borderRadius: 6 }}/>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 7 }}>
              <div style={{ height: 9, background: WP.ink100, borderRadius: 3, width: '70%' }}/>
              <div style={{ height: 9, background: WP.ink100, borderRadius: 3, width: '50%' }}/>
              <div style={{ height: 9, background: WP.ink100, borderRadius: 3, width: '60%' }}/>
            </div>
          </div>
        </>
      ),
    },
    {
      title: 'SECURITY', korTitle: 'AI 보안 관제',
      color: WP.navy700, accent: `linear-gradient(90deg, ${WP.navy700}, ${WP.blue500})`,
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>,
      baseX: 780, targetX: 780,
      baseY: 380, targetY: 400,
      miniContent: (
        <MiniLog color={WP.success || '#12B981'} items={[
          { t: '14:02:11', m: 'OK · 정상 트래픽' },
          { t: '14:02:14', m: 'BLOCK · SQLi 시도' },
          { t: '14:02:18', m: 'OK · 인증 성공' },
          { t: '14:02:22', m: 'SCAN · 취약점 0건' },
        ]}/>
      ),
    },
    {
      title: 'MARKETING', korTitle: '마케팅 AI',
      color: WP.orange500, accent: `linear-gradient(90deg, ${WP.orange500}, ${WP.orange400})`,
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11l18-7v16l-18-7v-2z"/><path d="M11 14v6a2 2 0 002 2h0a2 2 0 002-2v-3"/></svg>,
      baseX: 1360, targetX: 780,
      baseY: 380, targetY: 400,
      miniContent: (
        <>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 14, color: WP.ink400, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700 }}>이번 주 노출</div>
            <div style={{ fontSize: 18, color: '#12B981', fontWeight: 800, fontFamily: WP.fontMono }}>+38%</div>
          </div>
          <MiniLine color={WP.orange500}/>
        </>
      ),
    },
  ];

  // Spread amounts (px). At sep=1: spread fully. As conv ramps, all → center.
  // Use additive: separated_position * (1 - conv) + target * conv
  // But we also want a "settling" feel: cards begin already in roughly final spread

  // Logo phase
  const logoStart = 8.0;
  const logoEnd = 11.5;
  const logoP = clamp((T - logoStart) / (logoEnd - logoStart), 0, 1);
  const logoE = Easing.easeOutCubic(logoP);

  // Slogan phase
  const sloganStart = 9.5;
  const sloganP = clamp((T - sloganStart) / 1.5, 0, 1);
  const sloganE = Easing.easeOutCubic(sloganP);

  // Hold/loop fade (last 1.5s fade signature wave again to bridge)
  const outroStart = 13.5;
  const outroP = clamp((T - outroStart) / 1.5, 0, 1);

  // Background: starts soft white, after convergence transitions to navy gradient
  const bgT = clamp((T - convStart - 0.6) / 2.0, 0, 1);
  const bgE = Easing.easeInOutCubic(bgT);

  // Wave intensity ramps up at convergence
  const waveAmp = clamp((T - 4.5) / 2.5, 0, 1) * (1 - clamp((T - 12.5) / 1.5, 0, 0.7));

  return (
    <div style={{ position: 'absolute', inset: 0, fontFamily: WP.font, overflow: 'hidden' }}>
      {/* Light background base */}
      <div style={{
        position: 'absolute', inset: 0,
        background: WP.ink50,
      }}/>
      {/* Navy gradient overlay (fades in at convergence) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: WP.gradHeroDeep,
        opacity: bgE,
      }}/>
      {/* Dot grid (more visible on dark) */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5 + bgE * 0.5,
      }}>
        <DotGrid opacity={0.06 + bgE * 0.12} color={bgE > 0.5 ? WP.white : WP.ink900} spacing={40}/>
      </div>

      {/* Wave layer behind cards */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.3 + waveAmp * 0.4 }}>
        <WaveBackdrop phase={(T * 0.04) % 1} opacity={0.4 + bgE * 0.4} color={bgE > 0.5 ? WP.cyan500 : WP.blue400}/>
      </div>

      {/* Convergence flash - signature wave sweeps across at conv moment */}
      {T > 5.3 && T < 7.5 && (
        <div style={{ opacity: Math.sin(clamp((T - 5.3) / 2.2, 0, 1) * Math.PI) * 0.9 }}>
          <SignatureWave x={0} y={440} width={1920} height={220} progress={clamp((T - 5.3) / 1.6, 0, 1)} color={WP.cyan500} strokeWidth={3}/>
          <SignatureWave x={0} y={460} width={1920} height={220} progress={clamp((T - 5.5) / 1.6, 0, 1)} color={WP.blue400} strokeWidth={2}/>
        </div>
      )}

      {/* Top label fade out */}
      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0,
        textAlign: 'center',
        opacity: clamp(1 - (T - 4.5) / 1.0, 0, 1) * clamp(T / 1.0, 0, 1),
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '12px 26px',
          background: 'rgba(10, 102, 184, 0.08)',
          border: `1px solid ${WP.blue200}`,
          borderRadius: 999,
          color: WP.blue700,
          fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em',
        }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: WP.cyan500 }}/>
          분리된 디지털 업무
        </div>
        <div style={{
          marginTop: 28,
          fontSize: 84, fontWeight: 800, color: WP.ink900,
          letterSpacing: '-0.04em', lineHeight: 1.15,
        }}>
          홈페이지 · 보안 · 마케팅
        </div>
      </div>

      {/* Cards */}
      {cards.map((card, i) => {
        // separated position
        const sepX = card.baseX + (card.targetX === 780 && i !== 1 ? 0 : 0);
        // We define spread offset
        const spreadOffsets = [-560, 0, 560];
        const xSpread = 960 + spreadOffsets[i] * sepEased;
        const ySpread = 460 + Math.sin(T * 0.5 + i) * 4 * sepEased;

        // converged final
        const finalX = 960;
        const finalY = 460;

        // mix
        const x = xSpread * (1 - convE) + finalX * convE;
        const y = ySpread * (1 - convE) + finalY * convE;

        // scale & opacity during convergence: shrink & fade as they merge
        const scale = 1 * (1 - convE * 0.6);
        const opacity = sep * (1 - logoE);

        // entry stagger
        const stagger = i * 0.18;
        const entry = clamp((T - sepStart - stagger) / 0.6, 0, 1);
        const entryE = Easing.easeOutCubic(entry);
        const entryY = (1 - entryE) * 30;
        const entryOp = entry;

        return (
          <div key={i} style={{
            position: 'absolute',
            left: x, top: y + entryY,
            transform: `translate(-50%, 0) scale(${scale})`,
            transformOrigin: 'center top',
            opacity: opacity * entryOp,
            zIndex: 10 + i,
            filter: `blur(${convE * 4}px)`,
          }}>
            <ServiceCard {...card}/>
          </div>
        );
      })}

      {/* Convergence pulse (radial flash at center) */}
      {T > 6.8 && T < 9.0 && (
        <div style={{
          position: 'absolute',
          left: 960, top: 540,
          transform: 'translate(-50%, -50%)',
          width: 1200, height: 1200,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${WP.cyan500}55 0%, ${WP.blue600}22 30%, transparent 60%)`,
          opacity: Math.sin(clamp((T - 6.8) / 2.2, 0, 1) * Math.PI) * 0.9,
          pointerEvents: 'none',
        }}/>
      )}

      {/* WAVEPIX logo + slogan */}
      <div style={{
        position: 'absolute',
        left: 960, top: 420,
        transform: `translate(-50%, -50%) translateY(${(1 - logoE) * 24}px)`,
        opacity: logoE,
        textAlign: 'center',
      }}>
        <img src="assets/logo-wavepix-white.png" alt="WAVEPIX"
          style={{
            height: 168,
            filter: `drop-shadow(0 8px 32px rgba(0, 168, 217, ${0.4 * logoE}))`,
          }}/>
      </div>

      {/* Slogan */}
      <div style={{
        position: 'absolute',
        left: 960, top: 600,
        transform: `translate(-50%, 0) translateY(${(1 - sloganE) * 16}px)`,
        opacity: sloganE * (1 - outroP * 0.0),
        textAlign: 'center',
        width: 1700,
      }}>
        <div style={{
          fontSize: 72, fontWeight: 800, color: WP.white,
          letterSpacing: '-0.04em', lineHeight: 1.2,
        }}>
          AI로 중심을 잡고, <span style={{ color: WP.cyan400 }}>한발 앞서갑니다.</span>
        </div>
        <div style={{
          marginTop: 32,
          fontSize: 26, color: 'rgba(255,255,255,0.75)',
          letterSpacing: '-0.01em', fontWeight: 500,
        }}>
          홈페이지 관리 · AI 보안 관제 · 마케팅 AI — 하나의 파트너로
        </div>
      </div>

      {/* Sub-marker dot row */}
      <div style={{
        position: 'absolute',
        left: 960, top: 880,
        transform: 'translate(-50%, 0)',
        display: 'flex', gap: 48,
        opacity: clamp((T - 10.5) / 1.0, 0, 1),
      }}>
        {[
          { c: WP.blue400, l: 'WEB' },
          { c: WP.cyan500, l: 'SECURITY' },
          { c: WP.orange500, l: 'MARKETING' },
        ].map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: it.c }}/>
            <div style={{ fontSize: 16, fontWeight: 700, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.16em', fontFamily: WP.fontMono }}>
              {it.l}
            </div>
          </div>
        ))}
      </div>

      {/* Loop bridge — outgoing signature wave matching intro */}
      {T > 13.0 && (
        <div style={{ opacity: clamp((T - 13.0) / 1.5, 0, 1) }}>
          <SignatureWave x={0} y={440} width={1920} height={220} progress={1} color={WP.cyan500} strokeWidth={2}/>
        </div>
      )}
    </div>
  );
}

window.Variant1 = Variant1;