// S — No ETL. The agent maps your data itself.
// We don't hand-build a pipeline per client. The profiler reads the raw
// upload, profiles every column with SQL, reconciles the spec's question
// codes to the actual columns, derives breakout dimensions, and writes a
// queryable catalog — then research runs natural-language → SQL → DuckDB.
// Left: what you hand over. Right: the agent discovering it, autonomously.

const { useState: dscUse, useEffect: dscEff } = React;
const { pitchC, pitchMono } = window;

const STEPS = [
  { t: 'read upload', d: 'source_data.parquet + spec workbook' },
  { t: 'profile every column', d: 'SQL · COUNT / MIN / MAX / TRY_CAST' },
  { t: 'reconcile spec ↔ source', d: 'question codes matched to real columns' },
  { t: 'group + derive dimensions', d: 'breakouts inferred from question blueprints' },
  { t: 'build_execution_catalog()', d: '→ execution_catalog.json' },
];

function SlideDiscovery() {
  const [n, setN] = dscUse(0);
  dscEff(() => {
    const ts = [];
    for (let i = 1; i <= STEPS.length + 1; i++) {
      ts.push(setTimeout(() => setN(i), 350 + i * 620));
    }
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div style={{
      flex: 1, minHeight: 0,
      display: 'grid',
      gridTemplateColumns: '0.78fr 1.22fr',
      gap: 28,
      marginTop: 24,
    }}>
      {/* LEFT — what you provide */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, justifyContent: 'center' }}>
        <div style={{
          fontFamily: pitchMono, fontSize: 14, fontWeight: 700,
          letterSpacing: 1.8, textTransform: 'uppercase', color: pitchC.muted2,
        }}>You hand over</div>

        <FileChip icon="csv"  name="survey export" sub="raw rows · whatever columns exist" />
        <FileChip icon="book" name="spec workbook" sub="question codes & labels" />

        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '14px 18px',
          borderRadius: 13,
          border: `1px dashed ${pitchC.hair2}`,
          background: pitchC.bgSoft,
          marginTop: 4,
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
            background: pitchC.emberBg, color: pitchC.ember,
          }}>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke={pitchC.ember} strokeWidth="2.2" strokeLinecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
          </span>
          <span style={{ fontSize: 16, color: pitchC.muted, lineHeight: 1.3 }}>
            <span style={{ textDecoration: 'line-through', color: pitchC.muted2 }}>hand-built ETL</span> · no warehouse modeling, no per-client pipeline
          </span>
        </div>
      </div>

      {/* RIGHT — the agent discovering it */}
      <div style={{
        background: '#fff',
        border: `1px solid ${pitchC.hair}`,
        borderRadius: 16,
        padding: '22px 26px 20px',
        display: 'flex', flexDirection: 'column',
        minHeight: 0, overflow: 'hidden',
        boxShadow: '0 2px 0 rgba(0,0,0,0.02)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          paddingBottom: 14, marginBottom: 6,
          borderBottom: `1px solid ${pitchC.hair}`,
        }}>
          <span style={{ display: 'flex', gap: 6 }}>
            {[pitchC.orange, pitchC.amber, pitchC.moss].map(c => (
              <span key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c, opacity: 0.85 }} />
            ))}
          </span>
          <span style={{
            fontFamily: pitchMono, fontSize: 13, fontWeight: 600,
            letterSpacing: 0.4, color: pitchC.muted, marginLeft: 6,
          }}>beacon · agentic discovery</span>
          <span style={{ marginLeft: 'auto', fontFamily: pitchMono, fontSize: 12.5, fontWeight: 600, color: n > STEPS.length ? pitchC.moss : pitchC.sea }}>
            {n > STEPS.length ? 'catalog ready' : 'discovering…'}
          </span>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 13 }}>
          {STEPS.map((s, i) => {
            const done = n > i + 1 || (n === i + 1);
            const active = n === i + 1;
            const shown = n >= i + 1;
            return (
              <div key={s.t} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                opacity: shown ? 1 : 0.3,
                transform: shown ? 'translateX(0)' : 'translateX(-10px)',
                transition: 'opacity 320ms ease, transform 320ms ease',
              }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
                  background: done && !active ? pitchC.mossBg : pitchC.bgSoft,
                }}>
                  {done && !active ? (
                    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke={pitchC.moss} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5l3 3 7-7"/></svg>
                  ) : (
                    <span style={{
                      width: 8, height: 8, borderRadius: '50%', background: active ? pitchC.sea : pitchC.hair2,
                      animation: active ? 'pulse-dot 0.9s ease-in-out infinite' : 'none',
                    }} />
                  )}
                </span>
                <span style={{
                  fontFamily: pitchMono, fontSize: 17, fontWeight: 600, color: pitchC.ink,
                  letterSpacing: -0.01,
                }}>{s.t}</span>
                <span style={{
                  fontFamily: pitchMono, fontSize: 14, color: pitchC.muted2, letterSpacing: -0.01,
                }}>{s.d}</span>
              </div>
            );
          })}

          {/* ready line */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            marginTop: 8, padding: '14px 16px',
            borderRadius: 11,
            background: pitchC.mossBg,
            border: `1px solid ${pitchC.moss}33`,
            opacity: n > STEPS.length ? 1 : 0.25,
            transform: n > STEPS.length ? 'translateY(0)' : 'translateY(6px)',
            transition: 'opacity 380ms ease, transform 380ms ease',
          }}>
            <span style={{ color: pitchC.moss, fontFamily: pitchMono, fontWeight: 700 }}>→</span>
            <span style={{ fontFamily: pitchMono, fontSize: 16.5, color: '#16603f', fontWeight: 600 }}>
              ask in natural language → SQL → DuckDB
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function FileChip({ icon, name, sub }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '16px 18px',
      background: '#fff',
      border: `1px solid ${pitchC.hair}`,
      borderRadius: 13,
    }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
        background: pitchC.seaBg, color: pitchC.sea,
      }}>
        {icon === 'csv' ? (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={pitchC.sea} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M7 3h8l4 4v14H7z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h6M9 13v4"/></svg>
        ) : (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={pitchC.sea} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 4h11a3 3 0 013 3v13H8a3 3 0 01-3-3z"/><path d="M5 17a3 3 0 013-3h11"/></svg>
        )}
      </span>
      <div>
        <div style={{ fontSize: 19, fontWeight: 600, color: pitchC.ink, letterSpacing: -0.01 }}>{name}</div>
        <div style={{ fontFamily: pitchMono, fontSize: 13.5, color: pitchC.muted2, marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
}

window.SlideDiscovery = SlideDiscovery;