// screen-onboarding.jsx
// Luxury editorial onboarding — interactive shader background,
// mouse light + click ripples, dark gold palette.

const { useState: useOB, useEffect: useOBEffect, useRef: useOBRef } = React;

(function injectObCSS() {
  if (document.getElementById('ob-css')) return;
  const s = document.createElement('style');
  s.id = 'ob-css';
  s.textContent = `
    @keyframes ob-up   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
    @keyframes ob-in   { from{opacity:0} to{opacity:1} }
    @keyframes ob-line { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    .ob-ta::placeholder {
      color: rgba(232,228,218,0.22);
      font-family: 'Inter Tight', sans-serif;
      font-style: italic;
    }
    .ob-ta:focus { outline: none; }
    .ob-btn:hover { background: rgba(255,255,255,0.055) !important; }
  `;
  document.head.appendChild(s);
}());

// ─────────────────────────────────────────────────────────────
// Shader background — canvas 2D.
// • 3 slow-drifting ambient light blobs
// • Mouse follow: warm gold halo
// • Click: 3-ring ripple burst + sparks
// • 40 floating dust particles
function ShaderBg({ w, h }) {
  const ref = useOBRef(null);

  useOBEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    // ── State ──
    const st = {
      mouse: { x: w * 0.5, y: h * 0.28, tx: w * 0.5, ty: h * 0.28 },
      ripples: [],
      sparks: [],
      frame: 0,
      // Ambient blobs: position, velocity, radius, RGBA
      blobs: [
        { x: w * 0.2, y: h * 0.25, vx: 0.18, vy: 0.10, r: 280, c: [235, 238, 248] },
        { x: w * 0.8, y: h * 0.65, vx:-0.14, vy: 0.12, r: 220, c: [220, 228, 242] },
        { x: w * 0.5, y: h * 0.90, vx: 0.08, vy:-0.16, r: 190, c: [245, 245, 252] },
      ],
      // Dust particles
      dust: Array.from({ length: 42 }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.22,
        vy: (Math.random() - 0.5) * 0.22,
        r: Math.random() * 1.2 + 0.3,
        o: Math.random() * 0.35 + 0.05,
      })),
    };

    let raf;

    const draw = () => {
      const { mouse, ripples, sparks, blobs, dust } = st;
      st.frame++;
      const f = st.frame;

      // Lerp mouse for smooth follow
      mouse.x += (mouse.tx - mouse.x) * 0.06;
      mouse.y += (mouse.ty - mouse.y) * 0.06;

      // ── Background ──
      ctx.fillStyle = '#07070a';
      ctx.fillRect(0, 0, w, h);

      // ── Ambient blobs ──
      blobs.forEach(b => {
        b.x += b.vx + Math.sin(f * 0.0018 + b.r) * 0.12;
        b.y += b.vy + Math.cos(f * 0.0022 + b.r) * 0.10;
        if (b.x < -b.r)  b.x = w + b.r;
        if (b.x > w + b.r) b.x = -b.r;
        if (b.y < -b.r)  b.y = h + b.r;
        if (b.y > h + b.r) b.y = -b.r;

        const g = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.r);
        const [r, gr, bl] = b.c;
        g.addColorStop(0,   `rgba(${r},${gr},${bl},0.11)`);
        g.addColorStop(0.45,`rgba(${r},${gr},${bl},0.045)`);
        g.addColorStop(1,   'rgba(0,0,0,0)');
        ctx.fillStyle = g;
        ctx.fillRect(0, 0, w, h);
      });

      // ── Mouse halo — white ──
      const mg = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 180);
      mg.addColorStop(0,    'rgba(240,242,248,0.14)');
      mg.addColorStop(0.35, 'rgba(220,228,242,0.05)');
      mg.addColorStop(1,    'rgba(0,0,0,0)');
      ctx.fillStyle = mg;
      ctx.fillRect(0, 0, w, h);

      // Bright white core
      const mc = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 26);
      mc.addColorStop(0,   'rgba(255,255,255,0.28)');
      mc.addColorStop(0.5, 'rgba(235,238,248,0.08)');
      mc.addColorStop(1,   'rgba(0,0,0,0)');
      ctx.fillStyle = mc;
      ctx.fillRect(0, 0, w, h);

      // ── Click ripples — white tone ──
      for (let i = ripples.length - 1; i >= 0; i--) {
        const rp = ripples[i];
        rp.rings.forEach(ring => {
          ring.r  += ring.speed;
          ring.op -= ring.decay;
        });
        rp.rings = rp.rings.filter(ring => ring.op > 0);
        if (rp.rings.length === 0) { ripples.splice(i, 1); continue; }

        rp.rings.forEach(ring => {
          ctx.beginPath();
          ctx.arc(rp.x, rp.y, ring.r, 0, Math.PI * 2);
          ctx.strokeStyle = `rgba(255,255,255,${ring.op * 0.7})`;
          ctx.lineWidth = ring.w;
          ctx.stroke();
        });
      }

      // ── Sparks — soft white ──
      for (let i = sparks.length - 1; i >= 0; i--) {
        const sp = sparks[i];
        sp.x  += sp.vx;
        sp.y  += sp.vy;
        sp.vy += 0.04;
        sp.op -= 0.022;
        if (sp.op <= 0) { sparks.splice(i, 1); continue; }
        ctx.beginPath();
        ctx.arc(sp.x, sp.y, sp.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(235,235,230,${sp.op * 0.75})`;
        ctx.fill();
      }

      // ── Dust — cool white ──
      ctx.save();
      dust.forEach(d => {
        d.x += d.vx;
        d.y += d.vy;
        if (d.x < 0) d.x = w; if (d.x > w) d.x = 0;
        if (d.y < 0) d.y = h; if (d.y > h) d.y = 0;
        ctx.beginPath();
        ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(220,230,255,${d.o * 0.7})`;
        ctx.fill();
      });
      ctx.restore();

      // ── Top vignette ──
      const vig = ctx.createLinearGradient(0, 0, 0, h);
      vig.addColorStop(0,   'rgba(4,4,6,0.55)');
      vig.addColorStop(0.3, 'rgba(0,0,0,0)');
      vig.addColorStop(0.7, 'rgba(0,0,0,0)');
      vig.addColorStop(1,   'rgba(4,4,6,0.75)');
      ctx.fillStyle = vig;
      ctx.fillRect(0, 0, w, h);

      raf = requestAnimationFrame(draw);
    };

    draw();

    // Events
    const getXY = (e) => {
      const rect = canvas.getBoundingClientRect();
      const scaleX = w / rect.width, scaleY = h / rect.height;
      const src = e.touches ? e.touches[0] : e;
      return [(src.clientX - rect.left) * scaleX, (src.clientY - rect.top) * scaleY];
    };

    const onMove = e => {
      const [x, y] = getXY(e);
      st.mouse.tx = x; st.mouse.ty = y;
    };

    const onClick = e => {
      const [x, y] = getXY(e);
      // 3 rings at different speeds
      st.ripples.push({ x, y, rings: [
        { r: 4, speed: 4.5, op: 0.75, decay: 0.018, w: 1.2 },
        { r: 2, speed: 2.8, op: 0.55, decay: 0.014, w: 0.8 },
        { r: 0, speed: 1.6, op: 0.38, decay: 0.010, w: 0.5 },
      ]});
      // Burst sparks
      const count = 10 + Math.floor(Math.random() * 8);
      for (let i = 0; i < count; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 3 + 1;
        st.sparks.push({
          x, y,
          vx: Math.cos(angle) * speed,
          vy: Math.sin(angle) * speed - 1.5,
          r: Math.random() * 1.8 + 0.4,
          op: Math.random() * 0.6 + 0.3,
        });
      }
    };

    canvas.addEventListener('mousemove', onMove);
    canvas.addEventListener('click', onClick);
    canvas.addEventListener('touchmove', e => { e.preventDefault(); onMove(e); }, { passive: false });
    canvas.addEventListener('touchstart', e => onClick(e));

    return () => {
      cancelAnimationFrame(raf);
      canvas.removeEventListener('mousemove', onMove);
      canvas.removeEventListener('click', onClick);
    };
  }, [w, h]);

  return (
    <canvas ref={ref} width={w} height={h} style={{
      position: 'absolute', inset: 0,
      width: '100%', height: '100%',
    }} />
  );
}

// ─────────────────────────────────────────────────────────────
// Button with left→right fill sweep on activate + hover
function BtnFill({ can, onComplete, gold, anim, label = '開始見證' }) {
  const [hover, setHover] = useOB(false);
  const filled = can && hover;
  return (
    <button
      onClick={onComplete}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: '100%', padding: '15px 22px',
        border: `0.5px solid rgba(237,233,225,${can ? 0.22 : 0.08})`,
        borderRadius: 3,
        background: 'transparent',
        cursor: can ? 'pointer' : 'default',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative', overflow: 'hidden',
        transition: 'border-color .35s',
        ...anim('0s', 'ob-up', '0.6s'),
      }}
    >
      {/* Fill layer — forceful white sweep left → right */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(255,255,255,0.14)',
        transformOrigin: 'left center',
        transform: filled ? 'scaleX(1)' : 'scaleX(0)',
        transition: 'transform 0.38s cubic-bezier(.16,1,.3,1)',
        pointerEvents: 'none',
      }} />
      {/* Second layer — brighter leading edge */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0,
        width: filled ? '100%' : '0%',
        background: 'linear-gradient(90deg, transparent 80%, rgba(255,255,255,0.18))',
        transition: 'width 0.38s cubic-bezier(.16,1,.3,1)',
        pointerEvents: 'none',
      }} />
      <span style={{
        fontFamily: W.mono, fontSize: 10.5, fontWeight: 500,
        letterSpacing: '0.26em', textTransform: 'uppercase',
        color: can ? '#ede9e1' : 'rgba(237,233,225,0.22)',
        position: 'relative', zIndex: 1,
      }}>
        {label}
      </span>
      <svg width="18" height="10" viewBox="0 0 18 10" fill="none"
        style={{
          color: can ? gold : 'rgba(237,233,225,0.12)',
          transition: 'filter .25s',
          filter: filled ? 'brightness(1.4)' : 'none',
          position: 'relative', zIndex: 1,
        }}>
        <line x1="0" y1="5" x2="15" y2="5" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
        <path d="M11 1.5l4 3.5-4 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
function ScreenOnboarding({ onComplete }) {
  const [value, setValue] = useOB('');
  const [phase, setPhase] = useOB(0);
  const [dim, setDim] = useOB({ w: 390, h: 844 });
  const wrapRef = useOBRef(null);
  const can = value.trim().length > 0;

  // Measure container
  useOBEffect(() => {
    if (!wrapRef.current) return;
    const { offsetWidth: w, offsetHeight: h } = wrapRef.current;
    if (w > 0 && h > 0) setDim({ w, h });
  }, []);

  useOBEffect(() => {
    const ts = [
      [1,  120], [2, 340], [3, 540],
      [4,  720], [5, 900], [6, 1100], [7, 1280],
    ];
    const timers = ts.map(([p, d]) => setTimeout(() => setPhase(p), d));
    return () => timers.forEach(clearTimeout);
  }, []);

  // ── Auto-demo: typewriter then advance ──
  const DEMO_TEXT = '我是 Alex Chen，\n我要去荷蘭的地理科技公司 TomTom 工作';
  useOBEffect(() => {
    if (phase < 5) return;
    let i = 0;
    const startTimer = setTimeout(() => {
      const typer = setInterval(() => {
        i++;
        setValue(DEMO_TEXT.slice(0, i));
        if (i >= DEMO_TEXT.length) {
          clearInterval(typer);
          setTimeout(() => onComplete(DEMO_TEXT), 3500);
        }
      }, 100);
      return () => clearInterval(typer);
    }, 2000);
    return () => clearTimeout(startTimer);
  }, [phase >= 5]);

  const a = (delay, name = 'ob-up', dur = '0.72s') => ({
    opacity: 0,
    animation: `${name} ${dur} cubic-bezier(.16,1,.3,1) ${delay} forwards`,
  });

  const GOLD = W.accentHi;

  return (
    <div ref={wrapRef} style={{
      width: '100%', height: '100%',
      background: '#07070a',
      color: '#ede9e1',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
      fontFamily: W.mono,
    }}>
      {/* Shader canvas layer */}
      <ShaderBg w={dim.w} h={dim.h} />

      {/* Status bar */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <WStatusBar time="10:00" />
      </div>

      {/* Content — bottom-anchored */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        justifyContent: 'flex-end',
        padding: '0 32px 56px 32px',
        position: 'relative', zIndex: 2,
      }}>

        {/* Eyebrow — outline stroke text */}
        {phase >= 1 && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            marginBottom: 28, ...a('0s', 'ob-in', '0.5s'),
          }}>
            <div style={{
              width: 3, height: 3, borderRadius: 9999,
              background: 'rgba(255,255,255,0.4)', flexShrink: 0,
            }} />
            <span style={{
              fontFamily: W.display,
              fontSize: 9.5, letterSpacing: '0.38em',
              color: 'transparent',
              WebkitTextStroke: '0.6px rgba(237,233,225,0.35)',
              textTransform: 'uppercase',
            }}>
              WITNESS · IDENTITY LEDGER
            </span>
          </div>
        )}

        {/* Q line 1 */}
        {phase >= 2 && (
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontSize: 48, fontWeight: 500,
            lineHeight: 1.05, letterSpacing: '0.005em', color: 'rgba(237,233,225,0.88)',
            marginBottom: 4, ...a('0s'),
          }}>
            你想建立
          </div>
        )}

        {/* Q line 2 — white, no gold */}
        {phase >= 3 && (
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontSize: 48, fontWeight: 500,
            lineHeight: 1.05, letterSpacing: '0.005em', color: '#ffffff',
            marginBottom: 28, ...a('0s'),
          }}>
            什麼樣的人生
          </div>
        )}

        {/* Hairline */}
        {phase >= 3 && (
          <div style={{
            height: '0.3px', marginBottom: 24,
            background: 'linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.03) 75%, transparent 100%)',
            transformOrigin: 'left',
            ...a('0.06s', 'ob-line', '0.7s'),
          }} />
        )}

        {/* Subtitle */}
        {phase >= 4 && (
          <div style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 16, fontStyle: 'italic',
            lineHeight: 1.85, letterSpacing: '0.015em',
            color: 'rgba(237,233,225,0.45)', marginBottom: 34,
            ...a('0s', 'ob-up', '0.65s'),
          }}>
            Witness 將透過你的行為與時間，<br />
            協助你觀察自己是否正在靠近它。
          </div>
        )}

        {/* Input */}
        {phase >= 5 && (
          <div style={{ position: 'relative', marginBottom: 26, ...a('0s', 'ob-up', '0.62s') }}>
            <textarea
              className="ob-ta"
              value={value}
              onChange={e => setValue(e.target.value)}
              placeholder="例如：我想在六個月內，成為一個每天誠實投入學習的人。"
              rows={3}
              autoFocus
              style={{
                width: '100%', boxSizing: 'border-box',
                background: 'rgba(255,255,255,0.025)',
                border: 'none',
                borderBottom: `0.5px solid rgba(237,233,225,${can ? 0.28 : 0.1})`,
                padding: '2px 0 14px',
                fontFamily: W.display, fontSize: 14, fontWeight: 400,
                color: '#ede9e1', lineHeight: 1.72, letterSpacing: '-0.005em',
                resize: 'none', caretColor: GOLD,
                transition: 'border-color .3s',
              }}
            />
            <div style={{
              position: 'absolute', bottom: 0, left: 0,
              height: '0.5px',
              width: can ? '100%' : '0%',
              background: `linear-gradient(90deg, ${GOLD}, transparent 80%)`,
              transition: 'width 0.5s cubic-bezier(.16,1,.3,1)',
              pointerEvents: 'none',
            }} />
          </div>
        )}

        {/* CTA */}
        {phase >= 6 && (
          <BtnFill can={can} onComplete={() => can && onComplete(value.trim())} gold={GOLD} anim={a} />
        )}
      </div>

      {/* Footer mark */}
      {phase >= 7 && (
        <div style={{
          position: 'absolute', bottom: 14, right: 32, zIndex: 3,
          fontFamily: W.mono, fontSize: 7.5,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(237,233,225,0.07)',
          ...a('0s', 'ob-in', '1s'),
        }}>
          TIME CONFIRMS ALL
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AI Daily Summary screen — onboarding visual language, 今日見證 content
function ScreenAISummary({ onComplete }) {
  const [phase, setPhase] = useOB(0);
  const [dim, setDim] = useOB({ w: 390, h: 844 });
  const wrapRef = useOBRef(null);

  useOBEffect(() => {
    if (!wrapRef.current) return;
    const { offsetWidth: w, offsetHeight: h } = wrapRef.current;
    if (w > 0 && h > 0) setDim({ w, h });
  }, []);

  useOBEffect(() => {
    const ts = [
      [1, 100], [2, 280], [3, 460],
      [4, 620], [5, 800], [6, 980], [7, 1140],
    ];
    const timers = ts.map(([p, d]) => setTimeout(() => setPhase(p), d));
    return () => timers.forEach(clearTimeout);
  }, []);

  const a = (delay, name = 'ob-up', dur = '0.72s') => ({
    opacity: 0,
    animation: `${name} ${dur} cubic-bezier(.16,1,.3,1) ${delay} forwards`,
  });

  const GOLD = W.accentHi;

  return (
    <div ref={wrapRef} style={{
      width: '100%', height: '100%',
      background: '#07070a',
      color: '#ede9e1',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
      fontFamily: W.mono,
    }}>
      <ShaderBg w={dim.w} h={dim.h} />

      {/* Status bar */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <WStatusBar time="09:00" />
      </div>

      {/* Content — bottom-anchored, scrollable */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        justifyContent: 'flex-end',
        padding: '0 32px 52px 32px',
        position: 'relative', zIndex: 2,
        overflowY: 'auto',
      }}>

        {/* Eyebrow */}
        {phase >= 1 && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            marginBottom: 20, ...a('0s', 'ob-in', '0.5s'),
          }}>
            <div style={{
              width: 3, height: 3, borderRadius: 9999,
              background: 'rgba(255,255,255,0.4)', flexShrink: 0,
            }} />
            <span style={{
              fontFamily: W.display,
              fontSize: 9.5, letterSpacing: '0.38em',
              color: 'transparent',
              WebkitTextStroke: '0.6px rgba(237,233,225,0.35)',
              textTransform: 'uppercase',
            }}>
              WITNESS · DAILY INTELLIGENCE
            </span>
          </div>
        )}

        {/* Date chip */}
        {phase >= 1 && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            marginBottom: 22, ...a('0s', 'ob-in', '0.55s'),
          }}>
            <span style={{
              fontFamily: W.mono, fontSize: 11,
              letterSpacing: '0.18em', color: GOLD, opacity: 0.75,
            }}>
              5月24日 · 早上 09:00
            </span>
          </div>
        )}

        {/* Title line 1 */}
        {phase >= 2 && (
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontSize: 52, fontWeight: 500,
            lineHeight: 1.0, letterSpacing: '0.01em', color: 'rgba(237,233,225,0.88)',
            marginBottom: 2, ...a('0s'),
          }}>
            今日
          </div>
        )}

        {/* Title line 2 */}
        {phase >= 3 && (
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontSize: 52, fontWeight: 500,
            lineHeight: 1.0, letterSpacing: '0.01em', color: '#ffffff',
            marginBottom: 24, ...a('0s'),
          }}>
            見證
          </div>
        )}

        {/* Hairline */}
        {phase >= 3 && (
          <div style={{
            height: '0.3px', marginBottom: 22,
            background: `linear-gradient(90deg, ${GOLD} 0%, rgba(196,166,98,0.2) 50%, transparent 100%)`,
            transformOrigin: 'left',
            ...a('0.06s', 'ob-line', '0.7s'),
          }} />
        )}

        {/* Summary text */}
        {phase >= 4 && (
          <div style={{ ...a('0s', 'ob-up', '0.65s') }}>
            {/* Lead sentence */}
            <div style={{
              fontFamily: W.display,
              fontSize: 17, fontWeight: 600,
              lineHeight: 1.55, letterSpacing: '-0.01em',
              color: 'rgba(237,233,225,0.92)',
              marginBottom: 16,
            }}>
              昨天你完成了 6 件事。
            </div>

            {/* Body paragraphs */}
            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 15.5, fontStyle: 'italic',
              lineHeight: 1.9, letterSpacing: '0.012em',
              color: 'rgba(237,233,225,0.52)',
              marginBottom: 14,
            }}>
              IELTS 的陷阱你拆解了，拼字的漏洞你正視了。正職的預警系統你一塊一塊砌上去。
            </div>

            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 15.5, fontStyle: 'italic',
              lineHeight: 1.9, letterSpacing: '0.012em',
              color: 'rgba(237,233,225,0.52)',
              marginBottom: 14,
            }}>
              只有一件事沒做完——Section 3 的弱點整理還放在那裡。
            </div>

            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 15.5, fontStyle: 'italic',
              lineHeight: 1.9, letterSpacing: '0.012em',
              color: 'rgba(237,233,225,0.45)',
              marginBottom: 30,
            }}>
              今天的你，是一個持續在建造的人。<br />
              那個沒完成的，今天還在等你。
            </div>
          </div>
        )}

        {/* CTA */}
        {phase >= 6 && (
          <BtnFill can={true} onComplete={onComplete} gold={GOLD} anim={a} label="繼續前行" />
        )}
      </div>

      {/* Footer mark */}
      {phase >= 7 && (
        <div style={{
          position: 'absolute', bottom: 14, right: 32, zIndex: 3,
          fontFamily: W.mono, fontSize: 7.5,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(237,233,225,0.07)',
          ...a('0s', 'ob-in', '1s'),
        }}>
          TIME CONFIRMS ALL
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenOnboarding, ScreenAISummary });