// spndly — selected work: two anonymized engagement summaries

// industry-representative artwork (card band + article cover)
function CsMotif({ k }) {
  if (k === 'health') {
    return (
      <svg className="cs-motif-svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="m-ekg" width="70" height="120" patternUnits="userSpaceOnUse">
            <path d="M0 60 H26 L31 60 L37 30 L44 88 L49 60 H70" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#m-ekg)" />
      </svg>
    );
  }
  return (
    <svg className="cs-motif-svg" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="m-shield" width="60" height="66" patternUnits="userSpaceOnUse" patternTransform="translate(10 14)">
          <path d="M16 4 L29 9 V24 C29 33 23 39 16 42 C9 39 3 33 3 24 V9 Z" fill="none" stroke="currentColor" strokeWidth="1.5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#m-shield)" />
    </svg>
  );
}

function CsIcon({ k }) {
  if (k === 'health') {
    return (
      <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round">
        <path d="M12 5 V19 M5 12 H19" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 L19 5.5 V11 C19 15.6 16 19.2 12 21 C8 19.2 5 15.6 5 11 V5.5 Z" />
      <path d="M9 11.6 l2.1 2.1 L15.2 9.4" />
    </svg>
  );
}

function LockIcon() {
  return (
    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="14" height="9" rx="2" />
      <path d="M8 11 V7.5 a4 4 0 0 1 8 0 V11" />
    </svg>
  );
}

// Two public-facing work samples. Keep these broad: the private implementation details are useful
// for credibility, but the site should avoid client attribution, exact metrics, and NDA-sensitive
// workflow specifics unless there is written approval.
const FLAGSHIPS = [
  {
    v: { key: 'health', tag: 'clinical ops', color: '#0d9488', soft: '#ecfbf8', noun: 'workflow' },
    s: {
      id: 'fb_health',
      build: 'Clinical documentation assistant',
      client: 'a small healthcare workflow',
      clientMeta: 'anonymized · details withheld',
      peek: 'review', peekLbl: 'kept with the provider',
      posture: ['provider-controlled', 'read-only posture', 'admin relief'],
      principle: 'AI surfaces the work; the accountable human stays in control.',
      read: '3 min read',
      article: {
        title: 'Helping a clinical team catch what the note already supports',
        deck: 'A clinical team had important admin and revenue work happening from memory, under time pressure. We built an assistant that turns completed documentation into review-ready suggestions.',
        body: [
          { t: 'p', dropcap: true, text: 'In small clinical operations, admin work often competes with patient care. Documentation, billing review, scheduling, and follow-up all ask for attention from the same overloaded team.' },
          { t: 'p', text: 'The engagement was built around a clear line: automation could gather context and suggest next steps, but it could not replace provider judgment or take action on its own.' },
          { t: 'h', text: 'What we automated' },
          { t: 'p', text: 'We created a lightweight workflow that reads completed documentation, identifies review items, and presents the supporting context in the tools the team already uses.' },
          { t: 'h', text: 'Where humans stayed in control' },
          { t: 'p', text: 'The provider remains the final authority. The system does not diagnose, treat, modify the chart, submit claims, or take clinical action.' },
          { t: 'stats', items: [{ n: 'review', l: 'stays human' }, { n: 'less', l: 'manual checking' }, { n: 'clear', l: 'supporting context' }] },
          { t: 'h', text: 'Outcome pattern' },
          { t: 'p', text: 'The team gets a second set of eyes on repetitive documentation work without creating another system to babysit.' },
        ],
      },
    },
  },
  {
    v: { key: 'insurance', tag: 'insurance ops', color: '#4f46e5', soft: '#eef0fe', noun: 'workflow' },
    s: {
      id: 'fb_insurance',
      build: 'Expert-report workflow automation',
      client: 'a property-claims documentation platform',
      clientMeta: 'anonymized · details withheld',
      peek: 'faster', peekLbl: 'case preparation',
      posture: ['evidence gathering', 'expert review', 'source-backed reports'],
      principle: 'AI accelerates the file; the accountable expert signs the final report.',
      read: '4 min read',
      article: {
        title: 'Turning a weeks-long expert-report workflow into a guided review pipeline',
        deck: 'A property-claims workflow depended on slow, expensive expert reports. We built an automation system that organizes evidence, prepares review, and turns the file into a cleaner path to expert sign-off.',
        body: [
          { t: 'p', dropcap: true, text: 'Some operational bottlenecks are expensive because the work is genuinely complex. In this engagement, a claim file had to become a defensible expert report assembled from documents, photos, measurements, review notes, and supporting references.' },
          { t: 'p', text: 'The old workflow put too much aggregation work on expert reviewers. Files took longer to prepare, were harder to hand off, and were difficult to scale consistently.' },
          { t: 'h', text: 'What we automated' },
          { t: 'p', text: 'We built a workflow that ingests the case file, organizes supporting evidence, prepares the expert review path, and turns approved case data into a report draft.' },
          { t: 'h', text: 'Where humans stayed in control' },
          { t: 'p', text: 'The expert still reviews the file, evaluates the evidence, and signs the final report. Automation handles preparation and assembly, not professional judgment.' },
          { t: 'stats', items: [{ n: 'faster', l: 'case preparation' }, { n: 'less', l: 'manual assembly' }, { n: 'clearer', l: 'review trail' }] },
          { t: 'h', text: 'Outcome pattern' },
          { t: 'p', text: 'The business gets a more scalable operating workflow while preserving the human accountability required for high-stakes documentation.' },
        ],
      },
    },
  },
];

function CsArticle({ v, s, onClose }) {
  const [progress, setProgress] = React.useState(0);
  const a = s.article;

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [onClose]);

  const onScroll = (e) => {
    const el = e.currentTarget;
    const max = el.scrollHeight - el.clientHeight;
    setProgress(max > 0 ? Math.min(100, (el.scrollTop / max) * 100) : 0);
  };

  return (
    <div className="cs-reader" style={{ '--ind': v.color, '--ind-soft': v.soft }} onScroll={onScroll}>
      <div className="cs-topbar">
        <div className="cs-progress" style={{ width: progress + '%' }} />
        <div className="cs-topbar-inner container">
          <span className="cs-topbar-badge"><CsIcon k={v.key} /> {v.tag} · selected work</span>
          <button className="cs-close" onClick={onClose} aria-label="close">close ✕</button>
        </div>
      </div>

      <article className="cs-article">
        <div className="cs-art-kicker"><CsIcon k={v.key} /> {v.tag} · selected work</div>
        <h1 className="cs-art-title">{a.title}</h1>
        <p className="cs-art-deck">{a.deck}</p>

        <div className="cs-byline">
          <span className="cs-avatar lg cs-avatar-icon"><CsIcon k={v.key} /></span>
          <div className="cs-byline-meta">
            <div className="nm">{s.build}</div>
            <div className="rl">{s.client} <span className="dot">·</span> {s.read}</div>
          </div>
          <span className="cs-nda-tag"><LockIcon /> anonymized</span>
        </div>

        <div className="cs-cover"><CsMotif k={v.key} /></div>

        <div className="cs-prose">
          {a.body.map((b, i) => {
            if (b.t === 'h') return <h2 key={i} className="cs-h2">{b.text}</h2>;
            if (b.t === 'quote') return (
              <blockquote key={i} className="cs-bq">
                <p>“{b.text}”</p>
                {b.who && <cite>{b.who}</cite>}
              </blockquote>
            );
            if (b.t === 'stats') return (
              <div key={i} className="cs-statline">
                {b.items.map((st, j) => (
                  <div className="cs-statcell" key={j}><span className="n">{st.n}</span><span className="l">{st.l}</span></div>
                ))}
              </div>
            );
            return <p key={i} className={'cs-pp' + (b.dropcap ? ' dropcap' : '')}>{b.text}</p>;
          })}
        </div>

        <div className="cs-art-end">
          <div className="cs-author">
            <span className="cs-avatar lg cs-avatar-icon"><CsIcon k={v.key} /></span>
            <div>
              <div className="nm">{s.build} <span className="dim">· {v.tag}</span></div>
              <div className="rl">{s.client} — {s.clientMeta}</div>
            </div>
          </div>
          <a href="#book" className="btn btn-accent" onClick={onClose}>talk to us about your {v.noun} →</a>
          <div className="cs-illus">{v.key === 'health'
            ? 'Details are intentionally limited. This summary describes the workflow pattern and guardrails, not private client information or medical advice.'
            : 'Details are intentionally limited. Client identity, exact metrics, and implementation specifics are withheld unless written approval is granted.'}</div>
        </div>
      </article>
    </div>
  );
}

function CaseStudies() {
  const [open, setOpen] = React.useState(null);

  const active = FLAGSHIPS.find(f => f.s.id === open);

  return (
    <section className="section" id="cases" data-screen-label="05 selected work">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head-left">
            <div className="label-eye">Selected work</div>
            <h2 className="h2">High-stakes workflows,<br />made operational.</h2>
            <p className="lead">Two anonymized examples of the work we build: messy intake, evidence-heavy review, controlled automation, and humans accountable for final decisions.</p>
          </div>
          <div className="sec-head-aside">
            <span className="k">Examples:</span> 2<br />
            <span className="k">Pattern:</span> document-heavy operations<br />
            <span className="k">Posture:</span> review-first automation
          </div>
        </div>

        <div className="verticals">
          {FLAGSHIPS.map(({ v, s }, i) => (
            <button className="vc" key={s.id} style={{ '--ind': v.color, '--ind-soft': v.soft }} onClick={() => setOpen(s.id)}>
              <div className="vc-top">
                <span className="vc-overline">
                  <span className="vc-index">{String(i + 1).padStart(2, '0')}</span>
                  <span className="vc-cat">{v.key === 'health' ? 'Healthcare' : 'Insurance'}</span>
                </span>
                <span className="vc-read">{s.read}</span>
              </div>

              <h3 className="vc-name">{s.build}</h3>
              <div className="vc-client">{s.client}</div>

              <p className="vc-quote">“{s.principle}”</p>

              <div className="vc-tags">
                {s.posture.map(p => <span className="vc-tag" key={p}>{p}</span>)}
              </div>

              <div className="vc-foot">
                <span className="vc-nda"><LockIcon /> Anonymized engagement</span>
                <span className="vc-cta">Read summary<span className="arr"> →</span></span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {active && <CsArticle v={active.v} s={active.s} onClose={() => setOpen(null)} />}
    </section>
  );
}

Object.assign(window, { CaseStudies });