/* AnalysisPanel — illustrative "peek under the hood".
   A scripted, replayed reasoning stream. NOT interactive: no live input,
   clearly badged as a demonstration. Auto-plays when scrolled into view. */

const ANALYSIS_STEPS = [
{ t: 'Fetching circadiazen.com', d: 'reading the raw HTML an AI crawler receives' },
{ t: 'Only 1 of 14 content blocks is readable', d: 'price, reviews, science and story do not render' },
{ t: 'Found a “do-not-read” tag on the flagship product', d: 'the page is excluded from AI answers' },
{ t: 'Cross-referencing 80 buyer questions in Sleep & Recovery', d: 'the site answers 7 of them in plain language' },
{ t: 'Mapping the competitor citation graph', d: 'AI cites Momentous & Thorne where CircadiaZen is absent' },
{ t: 'Ranking fixes by impact, drafting plain-English actions', d: 'so the team knows the “so what” and exactly what to do' }];


function AnalysisPanel() {
  const [shown, setShown] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {started.current = true;run();}
      });
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const run = () => {
    let i = 0;
    const tick = () => {
      i += 1;setShown(i);
      if (i < ANALYSIS_STEPS.length) {setTimeout(tick, 900);} else
      {setTimeout(() => setDone(true), 700);}
    };
    setTimeout(tick, 500);
  };

  const replay = () => {setShown(0);setDone(false);started.current = true;run();};

  return (
    <div ref={ref} style={{
      background: 'linear-gradient(180deg, #0c1326 0%, #0a0f20 100%)',
      border: '1px solid var(--line-strong)', borderRadius: 'var(--r-2xl)', boxShadow: 'var(--sh-lg)', overflow: 'hidden'
    }}>
      {/* window bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '13px 18px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ color: 'var(--accent)' }}><Icon name="search" size={16} /></span>
          <span className="mono" style={{ fontSize: 12.5, color: 'var(--fg-muted)', letterSpacing: '0.04em' }}> </span>
        </div>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--warn)', border: '1px solid color-mix(in oklab, var(--warn) 40%, transparent)',
          background: 'var(--warn-bg)', padding: '4px 9px', borderRadius: 999 }}>Recorded demo</span>
      </div>

      {/* stream */}
      <div style={{ padding: 'clamp(16px,2.2vw,24px)', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 280 }}>
        {ANALYSIS_STEPS.map((s, i) => {
          const state = i < shown ? 'done' : i === shown ? 'active' : 'pending';
          if (state === 'pending') return null;
          const isLast = i === shown && !done && shown <= ANALYSIS_STEPS.length;
          const settled = i < shown - 1 || done && i === shown - 1 || shown > ANALYSIS_STEPS.length;
          const active = i === shown - 1 && !done;
          return (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 13, opacity: state === 'pending' ? 0 : 1,
              animation: 'crIn .4s var(--ease)' }}>
              <span style={{ marginTop: 2, color: active ? 'var(--accent)' : 'var(--good)' }}>
                {active ? <Icon name="spinner" size={16} /> : <Icon name="check" size={16} stroke={2.4} />}
              </span>
              <div>
                <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--fg)', lineHeight: 1.4 }}>{s.t}</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 3 }}>{s.d}</div>
              </div>
            </div>);

        })}
        {done &&
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 4, animation: 'crIn .4s var(--ease)' }}>
            <span style={{ color: 'var(--accent)' }}><Icon name="zap" size={16} /></span>
            <span style={{ fontSize: 14.5, color: 'var(--fg)' }}>
              <b style={{ color: 'var(--accent)', fontWeight: 600 }}>Report ready in 6.2s.</b> 5 priority fixes to make.
            </span>
            <button onClick={replay} style={{ marginLeft: 'auto', background: 'transparent', border: '1px solid var(--line-strong)',
            color: 'var(--fg-muted)', borderRadius: 'var(--r-md)', padding: '7px 13px', fontFamily: 'var(--font-mono)', fontSize: 12, cursor: 'pointer' }}>
              Replay
            </button>
          </div>
        }
      </div>

      {/* non-interactive footer — looks like a chat, explicitly isn't */}
      <div style={{ borderTop: '1px solid var(--line)', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10,
        background: 'rgba(0,0,0,0.2)' }}>
        <span style={{ color: 'var(--fg-subtle)' }}><Icon name="lock" size={15} /></span>
        <span className="mono" style={{ fontSize: 12, color: 'var(--fg-subtle)', flex: 1 }}>
          This is a recorded look under the hood — not a live chat.
        </span>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--line-strong)' }}></span>
      </div>
    </div>);

}

Object.assign(window, { AnalysisPanel });