// Use cases + dashboard shared data and components.

const USE_CASES = {
  'podcast-clipping': {
    title: 'Podcast clip engine',
    h1: 'Build a podcast clip engine in 4 endpoints',
    seo: 'Generate short-form podcast clips automatically with MomentIQ. Detect laughter, snap to silence, score thumbnails — all from one API key.',
    problem: 'You have hours of podcast and stream archives. Your team manually scrubs to find the moments worth clipping. It takes longer than the show itself.',
    chain: ['audio/detect-laughter','audio/detect-silence','timeline/suggest-ranges','video/clip-window','video/thumbnail-score'],
    out: '12 short-form clips per hour of source · cover frames included',
    pricingExample: '60 min source ≈ $4.18',
  },
  'ai-meeting-memory': {
    title: 'AI meeting memory',
    h1: 'AI meeting memory with speaker tags and topic chunks',
    seo: 'Turn meeting recordings into searchable, speaker-tagged minutes with MomentIQ. Diarization, semantic chunks, timeline merge.',
    problem: 'Your team records every meeting but nobody can find what was said. Transcripts are walls of text — no speakers, no topics, no jumps.',
    chain: ['audio/detect-speakers','audio/semantic-chunks','video/text-frames','timeline/merge'],
    out: 'Speaker-tagged, topic-aware meeting minutes ready for RAG ingest',
    pricingExample: '4 hr archive ≈ $33.60',
  },
  'lecture-study-tools': {
    title: 'Lecture study tools',
    h1: 'Slide-aligned lecture notes from any video',
    seo: 'Build lecture study tools with MomentIQ. Extract slide-aligned notes, chapter cuts, and topic chunks from video.',
    problem: 'Students rewatch hour-long lectures to find one concept. Your study app needs slides, notes, and jump-points — not raw transcripts.',
    chain: ['video/text-frames','video/detect-cuts','audio/semantic-chunks','timeline/merge'],
    out: 'Slide images + OCR text + topic-aligned chapters with jumpable timestamps',
    pricingExample: '90 min lecture ≈ $9.63',
  },
  'field-documentation': {
    title: 'Field documentation',
    h1: 'Auto-generate field documentation from on-site video',
    seo: 'Turn on-site walkthrough video into clean photo sets and chapters with MomentIQ. Best frames, dedupe, semantic chunks.',
    problem: 'Field teams record site walkthroughs that nobody watches. You need clean photo sets and chaptered notes for inspection records.',
    chain: ['video/best-frames','video/dedupe-frames','audio/semantic-chunks','timeline/merge'],
    out: 'Deduped photo set + chaptered audio notes ready for inspection record',
    pricingExample: '20 min walkthrough ≈ $1.70',
  },
};

const ALL_USE_CASES = [
  { id:'podcast-clipping',     name:'Podcast clipping',     short:'Find the funny, sharp, and clippable moments. Render shorts.',     chain: USE_CASES['podcast-clipping'].chain,     detail: true },
  { id:'ai-meeting-memory',    name:'AI meeting memory',    short:'Speaker-tagged, topic-aware meeting minutes for RAG.',           chain: USE_CASES['ai-meeting-memory'].chain,    detail: true },
  { id:'lecture-study-tools',  name:'Lecture study tools',  short:'Slide-aligned notes and chapter jumps from a recorded lecture.', chain: USE_CASES['lecture-study-tools'].chain,  detail: true },
  { id:'field-documentation',  name:'Field documentation',  short:'Clean photo sets and chaptered notes from site walkthroughs.',   chain: USE_CASES['field-documentation'].chain,  detail: true },
  { id:'creator-thumbnails',   name:'Creator thumbnails',   short:'Pick the most click-worthy thumbnail from any upload.',          chain: ['video/best-frames','video/thumbnail-score','video/dedupe-frames'] },
  { id:'ai-summarizers',       name:'AI video summarizers', short:'Feed a topic-chunked timeline straight into your LLM.',          chain: ['audio/semantic-chunks','video/text-frames','timeline/merge'] },
  { id:'media-search',         name:'Media search engines', short:'Index every moment by signal kind. Search across hours.',        chain: ['audio/detect-speakers','audio/semantic-chunks','timeline/merge','timeline/find-nearest'] },
  { id:'call-analysis',        name:'Call analysis',        short:'Speaker share, energy peaks, natural cut points for QA.',        chain: ['audio/detect-speakers','audio/detect-energy','audio/suggest-cut-points'] },
];

// Endpoint chain visual
const ChainViz = ({ chain = [], terminal }) => (
  <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0 }}>
    {chain.map((s, i) => (
      <React.Fragment key={s}>
        <a href={`docs-${s.replace('/','-')}.html`} style={{ textDecoration: 'none' }}>
          <div style={{ padding: '8px 12px', borderRadius: 8, border: `1px solid ${wf.line}`, background: wf.cardAlt, minWidth: 130 }}>
            <div style={{ fontFamily: wf.mono, fontSize: 11.5, color: wf.ink }}>{s}</div>
            <div style={{ fontFamily: wf.sans, fontSize: 10.5, color: wf.ink3, marginTop: 2 }}>step {i + 1}</div>
          </div>
        </a>
        {i < chain.length - 1 && <svg width="22" height="14" viewBox="0 0 22 14" style={{ margin: '0 4px' }}><path d="M1 7 H17 M14 3 L18 7 L14 11" fill="none" stroke={wf.ink3} strokeWidth="1.4" strokeLinecap="round"/></svg>}
      </React.Fragment>
    ))}
    {terminal && (
      <>
        <svg width="28" height="14" viewBox="0 0 28 14" style={{ margin: '0 6px' }}><path d="M1 7 H22 M19 3 L24 7 L19 11" fill="none" stroke="var(--accent)" strokeWidth="1.6" strokeLinecap="round"/></svg>
        <div style={{ padding: '8px 14px', borderRadius: 8, background: 'var(--accent-soft)', border: '1px solid var(--accent)' }}>
          <div style={{ fontFamily: wf.sans, fontSize: 13.5, fontWeight: 600 }}>{terminal}</div>
        </div>
      </>
    )}
  </div>
);

// Use case detail page (templated)
const UseCasePage = ({ id }) => {
  const c = USE_CASES[id];
  if (!c) return <div style={{ padding: 40 }}>Unknown use case: {id}</div>;
  return (
    <Page current="Use cases">
      <Breadcrumbs items={[{ l:'Use cases', href:'use-cases.html' }, { l: c.title }]} />
      <PageHero
        kicker={`use case · ${c.title.toLowerCase()}`}
        title={c.h1}
        sub={c.seo}
        right={<a href="index.html" style={{ textDecoration: 'none' }}><Btn primary size={14}>Try in Moment Lab</Btn></a>}
      />
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 28px 56px' }}>
        <H2 id="problem">The problem</H2>
        <P>{c.problem}</P>

        <H2 id="workflow">The workflow</H2>
        <P>One key. {c.chain.length} POSTs. The output of each step feeds the next.</P>
        <div style={{ background: wf.card, border: `1px solid ${wf.line}`, borderRadius: 12, padding: 18, marginBottom: 18 }}>
          <ChainViz chain={c.chain} terminal={c.out} />
        </div>

        <H2 id="request">Sample request flow</H2>
        <CodeTabs filename={`${id}.flow.sh`} tabs={[
          { lang: 'cURL', lines: [
            `# 1. detect anchor moments`,
            `curl https://api.momentiq.dev${'/v1/' + c.chain[0]} \\`,
            `  -H "Authorization: Bearer $MIQ_KEY" \\`,
            `  -d '{ "media_url": "https://cdn.../source.mp4" }'`,
            ``,
            `# 2-${c.chain.length}. chain through the rest`,
            ...c.chain.slice(1).map((s,i)=> `# step ${i+2}  ${s}`),
            ``,
            `# → ${c.out}`,
          ]},
        ]} />

        <H2 id="response">Sample response shape</H2>
        <CodeTabs filename="terminal-output.json" tabs={[
          { lang: 'JSON', lines: JSON.stringify({
              source_seconds: 3600,
              steps_run: c.chain.length,
              output: c.out,
              cost_usd_estimate: c.pricingExample,
              ranges: [
                { start: 850.1, end: 882.6, reason: 'anchor_event' },
                { start: 1402.4, end: 1438.0, reason: 'anchor_event' },
              ],
            }, null, 2).split('\n') },
        ]} />

        <H2 id="pricing">Pricing example</H2>
        <div style={{ background: wf.card, border: `1px solid ${wf.line}`, borderRadius: 12, padding: 18, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: wf.mono, fontSize: 11, letterSpacing: 1, color: wf.ink3, textTransform: 'uppercase' }}>typical run</div>
            <div style={{ fontFamily: wf.sans, fontSize: 28, fontWeight: 600, marginTop: 4 }}>{c.pricingExample}</div>
            <div style={{ fontFamily: wf.sans, fontSize: 13, color: wf.ink3, marginTop: 4 }}>Usage-only. No subscription. Hard caps on the dashboard.</div>
          </div>
          <a href="pricing.html" style={{ textDecoration: 'none' }}><Btn size={14}>See full pricing →</Btn></a>
        </div>

        <H2 id="endpoints">Endpoints used</H2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {c.chain.map(s => {
            const ep = ENDPOINTS[s];
            return ep ? <EndpointCard key={s} method={ep.method} path={ep.path} desc={ep.short} price={ep.price} href={`docs-${s.replace('/','-')}.html`} /> : null;
          })}
        </div>

        <div style={{ marginTop: 36, padding: 22, background: wf.dark, color: wf.card, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: wf.sans, fontSize: 18, fontWeight: 600 }}>Build this flow with an AI agent</div>
            <div style={{ fontFamily: wf.sans, fontSize: 13, color: wf.darkInk2, marginTop: 4 }}>Paste the endpoint chain into Claude, Cursor, Replit, or Lovable with a scoped key.</div>
          </div>
          <a href="docs-ai-agents.html" style={{ textDecoration: 'none' }}><Btn primary size={14}>AI agent setup</Btn></a>
        </div>
      </div>
    </Page>
  );
};

window.USE_CASES = USE_CASES;
window.ALL_USE_CASES = ALL_USE_CASES;
window.ChainViz = ChainViz;
window.UseCasePage = UseCasePage;