// MomentIQ Home — V1: dark-hero playground, light content below.
// Stripe/Vercel/AssemblyAI vibe. IBM Plex Sans + JetBrains Mono.

const v1Pad = 'calc(48px * var(--dens, 1))';
const v1PadY = 'calc(72px * var(--dens, 1))';

// -- Hero --------------------------------------------------------------------

const V1Hero = () => (
  <div style={{
    background: wf.dark, color: wf.card, padding: `40px ${v1Pad} 64px`,
    backgroundImage: `radial-gradient(900px 360px at 80% -10%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 60%),
                      linear-gradient(180deg, #0b0d10 0%, #0d1014 100%)`,
    borderBottom: `1px solid ${wf.darkLine}`,
  }}>
    {/* tagline + headline */}
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 10px', borderRadius: 999,
        border: `1px solid ${wf.darkLine}`, background: '#11151a',
        fontFamily: wf.mono, fontSize: 11, color: wf.darkInk2, marginBottom: 22,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} />
        <span>One platform · /v1/video · /v1/audio · /v1/timeline</span>
      </div>

      <h1 style={{
        fontFamily: wf.sans, fontSize: 56, lineHeight: 1.06, fontWeight: 600,
        letterSpacing: -1.2, margin: 0, maxWidth: 1100,
      }}>
        AI-ready video and audio APIs<br />
        for finding the <span style={{ color: 'var(--accent)' }}>moments that matter.</span>
      </h1>
      <p style={{
        fontFamily: wf.sans, fontSize: 17, lineHeight: 1.55, color: wf.darkInk2,
        margin: '20px 0 0', maxWidth: 760,
      }}>
        Extract frames, detect laughter, find speakers, locate silence, score thumbnails, cut clips, and build smarter AI media workflows — with one API key.
      </p>

      <div style={{ display: 'flex', gap: 10, marginTop: 26 }}>
        <Btn primary size={15}>▶  Try the Playground</Btn>
        <Btn ghost dark size={15}>View Docs →</Btn>
        <span style={{ alignSelf: 'center', marginLeft: 12, fontFamily: wf.mono, fontSize: 11.5, color: wf.darkInk3 }}>
          $20 free credits · no card required
        </span>
      </div>

      {/* Playground console */}
      <div style={{ marginTop: 40 }}>
        <Playground initialId="audio/detect-laughter" defaultMinutes={42} />
      </div>

      {/* trust strip */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16, marginTop: 28,
        fontFamily: wf.mono, fontSize: 11, color: wf.darkInk3, flexWrap: 'wrap',
      }}>
        <span style={{ color: wf.darkInk2 }}>Authorization: Bearer miq_live_••••</span>
        <span style={{ flex: 1, height: 1, background: wf.darkLine, minWidth: 40 }} />
        <span>same key · all endpoints</span>
        <span style={{ width: 4, height: 4, borderRadius: 999, background: wf.darkLine }} />
        <span>price preview before run</span>
        <span style={{ width: 4, height: 4, borderRadius: 999, background: wf.darkLine }} />
        <span>hard monthly caps</span>
        <span style={{ width: 4, height: 4, borderRadius: 999, background: wf.darkLine }} />
        <span>usage dashboard</span>
      </div>
    </div>
  </div>
);

// dark variant of Field
const PgField = ({ label, value, mono = false, dark = false, hint, style }) => (
  <div style={{ ...style }}>
    {label && <div style={{ fontFamily: wf.sans, fontSize: 11.5, fontWeight: 500, color: dark ? wf.darkInk3 : wf.ink3, marginBottom: 6 }}>{label}</div>}
    <div style={{
      padding: '7px 10px', minHeight: 32, borderRadius: 7,
      border: `1px solid ${dark ? wf.darkLine : wf.line}`, background: dark ? '#0e1115' : wf.card,
      fontFamily: mono ? wf.mono : wf.sans, fontSize: mono ? 12 : 13,
      color: dark ? wf.card : wf.ink,
    }}>{value}</div>
  </div>
);

// -- API groups -------------------------------------------------------------

const V1ApiGroups = () => {
  const groups = Object.values(GROUPS).map(g => ({
    id: g.id, title: g.name, kicker: g.pathPrefix, desc: g.desc,
    items: endpointIdsByGroup(g.id).map(id => {
      const ep = ENDPOINTS[id];
      const price = g.id === 'timeline' ? 'low / req' : `$${priceFor(id).toFixed(2)}/min`;
      return [ep.path, ep.short.replace(/\.$/, '').toLowerCase(), price];
    }),
  }));

  return (
    <div style={{ background: wf.bg, padding: `${v1PadY} ${v1Pad}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          kicker="three groups · one key"
          title="Modular endpoints, mix freely."
          sub="Each call returns clean JSON ready to feed your model. Chain them through /v1/timeline/* for full media intelligence — same Authorization header for everything."
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18 }}>
          {groups.map(g => (
            <div key={g.id} style={{
              background: wf.card, border: `1px solid ${wf.line}`, borderRadius: 12,
              padding: 22, display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
                <h3 style={{ fontFamily: wf.sans, fontSize: 20, fontWeight: 600, margin: 0, letterSpacing: -0.2 }}>{g.title}</h3>
                <span style={{ fontFamily: wf.mono, fontSize: 11, color: 'var(--accent)' }}>{g.kicker}</span>
              </div>
              <p style={{ fontFamily: wf.sans, fontSize: 13.5, color: wf.ink3, margin: '0 0 14px', lineHeight: 1.55 }}>{g.desc}</p>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {g.items.map(([ep, desc, price], i) => (
                  <div key={ep} style={{
                    display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, alignItems: 'center',
                    padding: '10px 0',
                    borderTop: i ? `1px solid ${wf.line2}` : 'none',
                  }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontFamily: wf.mono, fontSize: 12, color: wf.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ep}</div>
                      <div style={{ fontFamily: wf.sans, fontSize: 12, color: wf.ink3, marginTop: 2 }}>{desc}</div>
                    </div>
                    <span style={{ fontFamily: wf.mono, fontSize: 11, color: wf.ink2, whiteSpace: 'nowrap' }}>{price}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 16, display: 'flex', gap: 8 }}>
                <Btn size={13}>Try in Playground</Btn>
                <span style={{ fontFamily: wf.sans, fontSize: 13, color: 'var(--accent)', alignSelf: 'center' }}>View docs →</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// -- Timeline viz: horizontal track lanes -----------------------------------

const V1TimelineViz = () => {
  const lanes = [
    { name: 'video frames',   kind: 'frames' },
    { name: 'cuts',           kind: 'ticks',  marks: [0.12, 0.34, 0.51, 0.68, 0.82] },
    { name: 'silence',        kind: 'bars',   ranges: [[0.05,0.08],[0.22,0.27],[0.44,0.46],[0.62,0.66],[0.79,0.83]] },
    { name: 'laughter',       kind: 'dots',   marks: [0.31, 0.55, 0.74] },
    { name: 'speakers',       kind: 'speak' },
    { name: 'energy',         kind: 'wave' },
    { name: 'suggested clips',kind: 'range',  ranges: [[0.28,0.40],[0.55,0.70]] },
  ];

  return (
    <div style={{ background: wf.card, borderTop: `1px solid ${wf.line}`, borderBottom: `1px solid ${wf.line}`, padding: `${v1PadY} ${v1Pad}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          kicker="merged timeline"
          title="Many signals → one timeline → smart cuts."
          sub="Detect laughter, find silence before it, score the nearby frame, cut the clip. /v1/timeline/* is where MomentIQ feels like a system instead of random tools."
        />

        <div style={{ background: wf.cardAlt, border: `1px solid ${wf.line}`, borderRadius: 12, padding: 22 }}>
          {/* time ruler */}
          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 16, alignItems: 'center', marginBottom: 6 }}>
            <span />
            <div style={{ position: 'relative', height: 18 }}>
              {[0, 0.25, 0.5, 0.75, 1].map(p => (
                <div key={p} style={{
                  position: 'absolute', left: `${p * 100}%`, transform: 'translateX(-50%)',
                  fontFamily: wf.mono, fontSize: 10, color: wf.ink3,
                }}>
                  {Math.floor(p * 48)}:{String(Math.floor(p * 48 * 60) % 60).padStart(2, '0')}
                </div>
              ))}
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 1, background: wf.line }} />
            </div>
          </div>

          {lanes.map((ln, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 16, alignItems: 'center', padding: '10px 0', borderTop: i ? `1px solid ${wf.line2}` : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: ln.kind === 'range' ? 'var(--accent)' : wf.ink4 }} />
                <span style={{ fontFamily: wf.sans, fontSize: 12.5, color: wf.ink2 }}>{ln.name}</span>
              </div>
              <div style={{ position: 'relative', height: 28, background: wf.bg, borderRadius: 4, border: `1px solid ${wf.line2}`, overflow: 'hidden' }}>
                {ln.kind === 'frames' && (
                  <div style={{ position: 'absolute', inset: 2, display: 'grid', gridTemplateColumns: 'repeat(14, 1fr)', gap: 2 }}>
                    {Array.from({ length: 14 }).map((_, k) => (
                      <ImgPlace key={k} w="100%" h={22} rounded={2} />
                    ))}
                  </div>
                )}
                {ln.kind === 'ticks' && ln.marks.map((m, k) => (
                  <div key={k} style={{ position: 'absolute', left: `${m * 100}%`, top: 4, bottom: 4, width: 2, background: wf.ink, transform: 'translateX(-1px)' }} />
                ))}
                {ln.kind === 'bars' && ln.ranges.map(([a, b], k) => (
                  <div key={k} style={{ position: 'absolute', left: `${a * 100}%`, width: `${(b - a) * 100}%`, top: 7, bottom: 7, background: '#dde0e4', borderRadius: 2 }} />
                ))}
                {ln.kind === 'dots' && ln.marks.map((m, k) => (
                  <div key={k} style={{ position: 'absolute', left: `${m * 100}%`, top: '50%', transform: 'translate(-50%,-50%)', width: 14, height: 14, borderRadius: 999, background: 'var(--accent)', boxShadow: '0 0 0 3px var(--accent-soft)' }} />
                ))}
                {ln.kind === 'speak' && (
                  <div style={{ position: 'absolute', inset: 4, display: 'flex', gap: 2 }}>
                    {[[0.18, 'A'], [0.16, 'B'], [0.10, 'A'], [0.22, 'C'], [0.14, 'A'], [0.20, 'B']].map(([w, s], k) => {
                      const c = s === 'A' ? '#dde0e4' : s === 'B' ? '#cdd1d6' : 'var(--accent-soft)';
                      const tx = s === 'C' ? 'var(--accent)' : wf.ink2;
                      return (
                        <div key={k} style={{ flex: w, fontSize: 10, color: tx, display: 'grid', placeItems: 'center', background: c, borderRadius: 2, fontFamily: wf.mono }}>
                          spk {s}
                        </div>
                      );
                    })}
                  </div>
                )}
                {ln.kind === 'wave' && (
                  <svg width="100%" height="28" viewBox="0 0 600 28" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
                    <path d="M0 14 Q 30 4 60 16 T 120 13 T 180 6 T 240 18 T 300 8 T 360 20 T 420 10 T 480 16 T 540 8 T 600 14"
                      fill="none" stroke={wf.ink3} strokeWidth="1.4" />
                  </svg>
                )}
                {ln.kind === 'range' && ln.ranges.map(([a, b], k) => (
                  <div key={k} style={{
                    position: 'absolute', left: `${a * 100}%`, width: `${(b - a) * 100}%`, top: 4, bottom: 4,
                    background: 'var(--accent-soft)', border: `1.5px solid var(--accent)`, borderRadius: 4,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: wf.mono, fontSize: 10.5, color: 'var(--accent)', fontWeight: 500,
                  }}>clip {k + 1}</div>
                ))}
              </div>
            </div>
          ))}

          <div style={{ marginTop: 16, paddingTop: 14, borderTop: `1px solid ${wf.line2}`, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, fontFamily: wf.sans, fontSize: 13, color: wf.ink2 }}>
            <Endpoint accent>POST /v1/timeline/merge</Endpoint>
            <span>+</span>
            <Endpoint accent>POST /v1/timeline/suggest-ranges</Endpoint>
            <span style={{ color: wf.ink3 }}>→ 2 podcast clips ready to render.</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// -- Use cases --------------------------------------------------------------

const V1UseCases = () => {
  const cases = [
    { name: 'Podcast clip engine',  out: 'short clips + cover frames',
      chain: ['detect-laughter','detect-silence','suggest-ranges','clip-window','thumbnail-score'] },
    { name: 'AI meeting memory',    out: 'searchable, speaker-tagged minutes',
      chain: ['detect-speakers','semantic-chunks','text-frames','timeline/merge'] },
    { name: 'Lecture study tool',   out: 'slide-aligned notes',
      chain: ['text-frames','detect-cuts','semantic-chunks','timeline/merge'] },
    { name: 'Field doc engine',     out: 'clean photo set + chapters',
      chain: ['best-frames','best-frame-near','dedupe-frames','semantic-chunks'] },
    { name: 'Creator thumbnails',   out: 'top thumbnails, deduped',
      chain: ['best-frames','thumbnail-score','dedupe-frames'] },
    { name: 'Call analysis',        out: 'speaker stats + cut points',
      chain: ['detect-speakers','detect-energy','semantic-chunks','suggest-cut-points'] },
  ];
  return (
    <div style={{ background: wf.bg, padding: `${v1PadY} ${v1Pad}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          kicker="endpoint chains"
          title="Real apps people are building."
          sub="Every recipe is one Authorization header and a few POSTs. Click any card to copy the chain into your project."
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
          {cases.map(c => (
            <div key={c.name} style={{
              background: wf.card, border: `1px solid ${wf.line}`, borderRadius: 12, padding: 18,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
                <div style={{ fontFamily: wf.sans, fontSize: 15, fontWeight: 600 }}>{c.name}</div>
                <span style={{ fontFamily: wf.mono, fontSize: 11, color: wf.ink3 }}>recipe →</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6 }}>
                {c.chain.map((ep, i) => (
                  <React.Fragment key={ep}>
                    <Endpoint accent={i === 0} size={11}>{ep}</Endpoint>
                    {i < c.chain.length - 1 && (
                      <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 5 H10 M7 2 L11 5 L7 8" fill="none" stroke={wf.ink4} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    )}
                  </React.Fragment>
                ))}
              </div>
              <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${wf.line2}`, fontFamily: wf.sans, fontSize: 12, color: wf.ink3 }}>
                → <span style={{ color: wf.ink }}>{c.out}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// -- Pricing strip + CTA ----------------------------------------------------

const V1Bottom = () => (
  <>
    <div style={{ background: wf.card, borderTop: `1px solid ${wf.line}`, padding: `${v1PadY} ${v1Pad}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead kicker="usage-only" title="Pay for what you process. Nothing more." sub="No subscriptions. No seats. Estimated price before each run, hard caps to keep bills predictable." />
        <div style={{
          border: `1px solid ${wf.line}`, borderRadius: 12, overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr',
        }}>
          {[
            ['Video analysis',  'best frames · cuts · text frames',          '$0.01–0.05', '/ video min'],
            ['Audio analysis',  'silence · laughter · speakers',             '$0.01–0.05', '/ audio min'],
            ['Media actions',   'clip · isolate speech',                     '$0.02–0.08', '/ processed min'],
            ['Timeline utils',  'merge · nearest · suggest ranges',          'fixed · low','/ request'],
          ].map(([cat, ex, price, unit], i) => (
            <div key={cat} style={{
              padding: 22, background: wf.cardAlt,
              borderRight: i < 3 ? `1px solid ${wf.line}` : 'none',
            }}>
              <div style={{ fontFamily: wf.sans, fontSize: 13.5, color: wf.ink2, fontWeight: 500 }}>{cat}</div>
              <div style={{ fontFamily: wf.sans, fontSize: 12, color: wf.ink3, marginTop: 4, minHeight: 32, lineHeight: 1.45 }}>{ex}</div>
              <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: wf.sans, fontSize: 22, fontWeight: 600, letterSpacing: -0.4 }}>{price}</span>
                <span style={{ fontFamily: wf.mono, fontSize: 11, color: wf.ink3 }}>{unit}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18, marginTop: 18, fontFamily: wf.sans, fontSize: 13, color: wf.ink2 }}>
          {['Free trial credits','Price preview before run','Hard monthly caps','Usage dashboard','No monthly minimum'].map(f => (
            <span key={f} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2.5 6.5 L5 9 L9.5 3.5" fill="none" stroke="var(--accent)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
              {f}
            </span>
          ))}
        </div>
      </div>
    </div>

    {/* CTA */}
    <div style={{ background: wf.dark, color: wf.card, padding: `${v1PadY} ${v1Pad}`, borderTop: `1px solid ${wf.darkLine}` }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36, alignItems: 'center',
      }}>
        <div>
          <h2 style={{ fontFamily: wf.sans, fontSize: 40, fontWeight: 600, lineHeight: 1.1, letterSpacing: -0.8, margin: 0 }}>
            Plug it into your AI app today.
          </h2>
          <p style={{ fontFamily: wf.sans, fontSize: 16, color: wf.darkInk2, margin: '12px 0 22px', maxWidth: 520, lineHeight: 1.55 }}>
            One key. /v1/video/* · /v1/audio/* · /v1/timeline/* — same Authorization header for everything you build.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <Btn primary size={15}>▶  Try the Playground</Btn>
            <Btn ghost dark size={15}>Read the Docs →</Btn>
          </div>
        </div>
        <CodeBlock
          filename="quickstart.sh"
          lang="cURL"
          lines={[
            '# install · 0 deps',
            'export MIQ_KEY=miq_live_…',
            '',
            '# any endpoint, same key',
            'curl https://api.momentiq.dev/v1/audio/detect-laughter \\',
            '  -H "Authorization: Bearer $MIQ_KEY" \\',
            '  -H "Content-Type: application/json" \\',
            '  -d \'{ "media_url": "https://cdn.../ep-42.mp4" }\'',
            '',
            '# → JSON moments. ship it.',
          ]}
        />
      </div>
    </div>
  </>
);

const HomeV1 = () => (
  <div data-screen-label="V1 Home" style={{
    width: '100%', minHeight: '100%', background: wf.bg,
    fontFamily: wf.sans, color: wf.ink,
  }}>
    <div style={{ background: wf.dark }}>
      <NavBar dark kind="simple" />
    </div>
    <V1Hero />
    <V1ApiGroups />
    <V1TimelineViz />
    <V1UseCases />
    <V1Bottom />
  </div>
);

window.HomeV1 = HomeV1;