// S2 — So we became the analyst.
// The hard part of the engagement wasn't the data or the tooling — it was
// the judgment a senior Basis analyst carries in their head. We embedded
// with them and encoded three things into the agent: how a finding is
// measured, what "good" means, and how the story gets told. Each card
// anchors to a real artifact in the codebase.

const { useState: exUse, useEffect: exEff } = React;
const { pitchC, pitchMono } = window;

const CARDS = [
  {
    tier: '01',
    accent: pitchC.sea,
    tint: pitchC.seaBg,
    label: 'Methodology',
    title: 'How a finding is measured',
    blurb: 'The statistical discipline behind every number — so the agent reads the survey the way the analyst does.',
    rows: [
      'Significance tested at 95% vs prior period',
      'Top-2-box agreement on 7-point scales',
      'Funnel: awareness → consideration → purchase',
      'Weighted bases, never raw counts',
    ],
    anchor: 'pipeline/chat/research_reflector.py',
  },
  {
    tier: '02',
    accent: pitchC.orange,
    tint: '#fff1ec',
    hero: true,
    label: 'The bar',
    title: "What \u201cgood\u201d means",
    blurb: "Basis's own acceptance rubric, encoded as a gate. The agent grades its own deck before anyone sees it.",
    stat: [
      { v: '27', k: 'criteria' },
      { v: '5', k: 'insta-fails' },
      { v: '\u226552/81', k: 'to pass' },
    ],
    rows: [
      'Basis Scorecard v3 — the firm\u2019s evaluator',
      'Headline clarity, valence, stat-sig coding',
      'No insta-fail criterion may trip',
    ],
    anchor: 'web/server/studio/scorecard_rubric.json',
  },
  {
    tier: '03',
    accent: pitchC.purple,
    tint: '#f3eef7',
    label: 'Deck craft',
    title: 'How the story is told',
    blurb: 'The house style and narrative instincts, learned from what Basis actually ships to its clients.',
    rows: [
      'Census of 117 real tracker charts',
      'Per-client playbooks (Habitat, Sainsbury\u2019s)',
      'Senior-analyst review checks, codified',
    ],
    anchor: 'pipeline/studio/exemplar_doctrine.py',
  },
];

const DOMAINS = ['Market research', 'CPG', 'Nielsen', 'P&L', 'Brand trackers'];

function SlideExpertise() {
  const [stage, setStage] = exUse(0);
  exEff(() => {
    const ts = [
      setTimeout(() => setStage(1), 150),
      setTimeout(() => setStage(2), 380),
      setTimeout(() => setStage(3), 560),
      setTimeout(() => setStage(4), 720),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div style={{
      flex: 1, minHeight: 0,
      display: 'flex', flexDirection: 'column', gap: 18, marginTop: 20,
    }}>
      {/* What we bring — a decade of NLQ across market-research data (firm track record) */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
        padding: '14px 20px', borderRadius: 14,
        background: 'linear-gradient(135deg, rgba(255,102,58,0.05) 0%, rgba(0,0,153,0.05) 100%)',
        border: '1px solid rgba(0,0,153,0.10)',
        opacity: stage >= 1 ? 1 : 0, transform: stage >= 1 ? 'translateY(0)' : 'translateY(-8px)',
        transition: 'opacity 420ms ease, transform 420ms ease', flexShrink: 0,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span style={{ fontSize: 30, fontWeight: 700, color: pitchC.ink, letterSpacing: -0.02, lineHeight: 1 }}>10+ yrs</span>
          <span style={{ fontSize: 17, color: pitchC.muted, fontWeight: 500 }}>building natural-language analytics</span>
        </div>
        <span style={{ width: 1, height: 26, background: pitchC.hair }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: pitchMono, fontSize: 11.5, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: pitchC.muted2 }}>Fluent in</span>
          {DOMAINS.map((d) => (
            <span key={d} style={{
              fontFamily: pitchMono, fontSize: 13, fontWeight: 600, color: pitchC.navy,
              padding: '4px 11px', borderRadius: 999, background: '#fff', border: `1px solid ${pitchC.hair}`,
            }}>{d}</span>
          ))}
        </div>
      </div>

      {/* What we encoded — the client-specific judgment (code-anchored) */}
      <div style={{
        flex: 1, minHeight: 0,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
      }}>
        {CARDS.map((c, i) => (
          <ExpertiseCard key={c.tier} c={c} visible={stage >= i + 2} delay={i * 60} />
        ))}
      </div>
    </div>
  );
}

function ExpertiseCard({ c, visible, delay }) {
  return (
    <div style={{
      position: 'relative',
      background: '#fff',
      border: `1px solid ${c.hero ? c.accent + '55' : pitchC.hair}`,
      borderRadius: 18,
      padding: '22px 26px 20px',
      display: 'flex', flexDirection: 'column', gap: 13,
      overflow: 'hidden',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(14px)',
      transition: `opacity 460ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 460ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
      boxShadow: c.hero
        ? `0 10px 30px ${c.accent}1f, 0 1px 0 rgba(0,0,0,0.03)`
        : '0 1px 0 rgba(0,0,0,0.02)',
    }}>
      {/* Top strip */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 0, height: c.hero ? 5 : 4,
        background: c.accent,
      }} />

      {/* Eyebrow */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: pitchMono, fontSize: 14, fontWeight: 700,
        letterSpacing: 1.8, textTransform: 'uppercase', color: c.accent,
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 30, height: 30, borderRadius: 9,
          background: c.tint, color: c.accent, fontSize: 14, fontWeight: 700,
        }}>{c.tier}</span>
        {c.label}
      </div>

      {/* Title */}
      <div style={{
        fontSize: 26, lineHeight: 1.08, fontWeight: 500,
        letterSpacing: -0.015, color: pitchC.ink,
      }}>{c.title}</div>

      {/* Blurb */}
      <div style={{ fontSize: 16.5, lineHeight: 1.4, color: pitchC.muted }}>
        {c.blurb}
      </div>

      {/* Stat band (hero only) */}
      {c.stat && (
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 10,
          padding: '14px 0',
          borderTop: `1px solid ${pitchC.hair}`,
          borderBottom: `1px solid ${pitchC.hair}`,
        }}>
          {c.stat.map((s) => (
            <div key={s.k} style={{ textAlign: 'center' }}>
              <div style={{
                fontFamily: pitchMono, fontSize: 26, fontWeight: 700,
                color: c.accent, letterSpacing: -0.01, lineHeight: 1,
              }}>{s.v}</div>
              <div style={{
                fontFamily: pitchMono, fontSize: 12, fontWeight: 600,
                letterSpacing: 0.6, textTransform: 'uppercase',
                color: pitchC.muted2, marginTop: 6,
              }}>{s.k}</div>
            </div>
          ))}
        </div>
      )}

      {/* Encoded rows */}
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 10,
        marginTop: c.stat ? 0 : 4,
      }}>
        {c.rows.map((r) => (
          <div key={r} style={{
            display: 'flex', alignItems: 'flex-start', gap: 11,
            fontSize: 15.5, lineHeight: 1.3, color: pitchC.ink, fontWeight: 500,
          }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 19, height: 19, borderRadius: '50%', flexShrink: 0, marginTop: 1,
              background: c.tint, color: c.accent,
            }}>
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke={c.accent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5l3 3 7-7"/></svg>
            </span>
            <span>{r}</span>
          </div>
        ))}
      </div>

      {/* Encoded-in footer */}
      <div style={{
        marginTop: 'auto', paddingTop: 16,
        display: 'flex', alignItems: 'center', gap: 9,
        fontFamily: pitchMono, fontSize: 13, color: pitchC.muted2,
        borderTop: `1px solid ${pitchC.hair}`,
      }}>
        <span style={{ color: c.accent, fontWeight: 700 }}>&lt;/&gt;</span>
        <span style={{ color: pitchC.muted2 }}>encoded in</span>
        <span style={{ color: pitchC.muted, letterSpacing: -0.01 }}>{c.anchor}</span>
      </div>
    </div>
  );
}

window.SlideExpertise = SlideExpertise;