// Context Store architecture — 5-col engine board + 3-item accordion

const CS_ENGINE_COLS = [
  {
    title: "Context Sources",
    items: [
      { t: "Documents",      s: "Confluence, PDF, S3 buckets" },
      { t: "Transactional",  s: "MySQL, Postgres via CDC" },
      { t: "Event streams",  s: "Kafka, Pulsar" },
      { t: "External APIs",  s: "SaaS, webhooks" },
    ],
  },
  {
    title: "Ingest & Embed",
    items: [
      { t: "CocoIndex",        s: "Incremental transform, chunk, embed" },
      { t: "Routine Load",     s: "Continuous from Kafka" },
      { t: "Native CDC",       s: "Doris 4.1 Streaming Jobs" },
      { t: "Stream Load",      s: "HTTP push from services" },
    ],
  },
  {
    title: "Store & Index", accent: true,
    items: [
      { t: "HNSW + IVPQ Vectors", s: "Billion-scale, 384x compression" },
      { t: "Inverted Index + BM25", s: "Global statistics for stable ranking" },
      { t: "VARIANT (JSON)",      s: "Semi-structured metadata" },
      { t: "Bitmap Labels",       s: "Fast set operations" },
      { t: "Merge-on-Write",      s: "Latest version query-ready" },
    ],
  },
  {
    title: "Retrieve & Rank",
    items: [
      { t: "Progressive Filtering",   s: "SQL, BM25, vectors in order" },
      { t: "Reciprocal Rank Fusion",  s: "Combine signals from all modalities" },
      { t: "Pre-filter Predicates",   s: "Shrink candidate set first" },
      { t: "Single SQL Query",        s: "All modalities, one round trip" },
    ],
  },
  {
    title: "Serve to AI",
    items: [
      { t: "MCP Server",   s: "Model Context Protocol for agents" },
      { t: "REST API",     s: "HTTP retrieval for app code" },
      { t: "Standard SQL", s: "MySQL-compatible wire protocol" },
      { t: "Streaming Results", s: "Token-by-token candidate delivery" },
    ],
  },
];

function CSEngineCol({ col }) {
  return (
    <div className={`eng-col ${col.accent ? "accent" : ""}`}>
      <div className="eng-title">{col.title}</div>
      <div className="eng-items">
        {col.items.map(it => (
          <div className="eng-item" key={it.t}>
            <div className="eng-item-t">{it.t}</div>
            <div className="eng-item-s">{it.s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CSEngineBoard() {
  return (
    <div className="eng-board">
      <div className="eng-board-head">VeloDB context store</div>
      <div className="eng-cols">
        {CS_ENGINE_COLS.map(c => <CSEngineCol key={c.title} col={c} />)}
      </div>
      <div className="eng-foot">
        <span className="eng-foot-stat"><b>65ms</b> on 28.7M records</span>
        <span className="eng-foot-sep" />
        <span className="eng-foot-stat"><b>~400ms</b> at billion scale</span>
        <span className="eng-foot-sep" />
        <span className="eng-foot-stat"><b>94%</b> relevance with progressive filtering</span>
      </div>
    </div>
  );
}

const CS_ACCORDION = [
  {
    n: "01", title: "Real-time context freshness",
    body: [
      "Production RAG fails when the context is stale. VeloDB combines an incremental embedding pipeline with native CDC so the knowledge base reflects source-of-truth data as it changes.",
      "CocoIndex transforms, chunks, and embeds only the documents that changed since the last run, avoiding full-corpus rebuilds. Doris 4.1 Streaming Jobs read directly from upstream databases over MySQL and PostgreSQL CDC. Routine Load consumes Kafka with exactly-once semantics. Merge-on-Write makes the latest version query-ready without merging old versions at read time. Content becomes searchable in seconds, not days.",
    ],
  },
  {
    n: "02", title: "Hybrid search and progressive filtering",
    body: [
      "Pure vector search is expensive and imprecise. VeloDB combines SQL, BM25, and vectors in a single query, applying the cheapest filters first so expensive vector scans run on a small candidate set.",
      "Progressive filtering applies SQL constraints first (user, region, time window), BM25 keyword matching second (relevant terms), and vector search third on the pre-filtered subset. Reciprocal Rank Fusion combines signals across modalities into a single ranked result. Global BM25 statistics (introduced in Doris 4.0) fix the per-segment ranking instability that breaks recall after every merge. ByteDance moved from 58% to 94% relevance on a billion-vector index at 400ms latency.",
    ],
  },
  {
    n: "03", title: "Multimodal context in one engine",
    body: [
      "Production context is multimodal. Documents have full-text. Records have structured metadata. Events have JSON payloads. Embeddings have vectors. Tags have label sets. Storing each in a separate system means four APIs, four consistency models, and an app-layer join on every query.",
      "VeloDB stores HNSW and IVPQ vectors, inverted indexes with BM25 scoring, VARIANT JSON, structured columns, and bitmap labels in one engine. One SQL query fuses all signals and returns ranked results. The architecture replaces a typical Pinecone plus Elasticsearch plus PostgreSQL stack with a single system that handles all of it.",
    ],
  },
];

function CSAccordion() {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="accordion">
      {CS_ACCORDION.map((a, i) => {
        const isOpen = i === open;
        return (
          <div key={a.n} className={`acc-item ${isOpen ? "open" : ""}`}>
            <button className="acc-head" onClick={() => setOpen(isOpen ? -1 : i)}>
              <span className="acc-num">{a.n}</span>
              <span className="acc-title">{a.title}</span>
              <span className="acc-toggle">{isOpen ? "\u2212" : "+"}</span>
            </button>
            {isOpen && (
              <div className="acc-body">
                {a.body.map((p, j) => (
                  <React.Fragment key={j}>
                    {j > 0 && <div className="acc-rule" />}
                    <p className="acc-para">{p}</p>
                  </React.Fragment>
                ))}
                <a className="btn-text acc-cta">Read the deep dive <ArrowR /></a>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function CSArchitecture() {
  return (
    <section className="section-pad" data-screen-label="05 Architecture">
      <div className="wrap">
        <div className="arch-2026-head">
          <div className="eyebrow">Architecture overview</div>
          <h2 className="arch-2026-title">VeloDB for generative AI</h2>
          <p className="arch-2026-lede">
            Ingest documents, transactional records, and event streams. Embed and chunk incrementally. Store vectors, text, structured metadata, JSON, and labels in one engine. Retrieve and rank via progressive filtering. Serve fresh context to LLMs and agents.
          </p>
        </div>

        <div className="arch-2026-board">
          <CSEngineBoard />
          <div className="arch-side"><CSAccordion /></div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Resources ============================ */
const CS_RESOURCES = [
  { tag: "Customer story", cls: "customer",    t: "ByteDance: Billion-Scale Vector Search with Doris 4.0" },
  { tag: "Technical",      cls: "technical",   t: "Apache Doris 4.0: Native Hybrid Search for AI Workloads" },
  { tag: "Technical",      cls: "technical",   t: "Apache Doris 4.1: Unified Storage and Retrieval for AI" },
  { tag: "Guide",          cls: "guide",       t: "Vector Search Quickstart: HNSW Indexes and IVPQ Compression" },
  { tag: "Integration",    cls: "integration", t: "CocoIndex and VeloDB: Build a RAG Pipeline in Minutes" },
  { tag: "Technical",      cls: "technical",   t: "Progressive Filtering: SQL, BM25, and Vectors in One Query" },
  { tag: "Customer story", cls: "customer",    t: "Multimodal Search on a Single Analytics Engine" },
  { tag: "Guide",          cls: "guide",       t: "Context Engineering with VeloDB and MCP Server" },
];

function CSResources() {
  return (
    <section className="section-pad" data-screen-label="07 Resources">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow eyebrow-line">Further reading</div>
          <h2>Deep dives and<br/>customer stories</h2>
          <p>Technical blogs, integration guides, benchmarks, and real-world case studies for every part of the context store and GenAI stack.</p>
        </div>
        <div className="res-grid">
          {CS_RESOURCES.map((r, i) => (
            <a key={i} className="res-card">
              <div>
                <div className={`res-tag ${r.cls}`}>{r.tag}</div>
                <div className="res-title">{r.t}</div>
              </div>
              <div className="res-cta">Read <ArrowR size={11} /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ Final CTA ============================ */
function CSFinalCTA() {
  return (
    <section style={{ padding: "0 0 120px" }} data-screen-label="08 Final CTA">
      <div className="wrap">
        <div className="final-cta">
          <h2>Stop juggling four systems.<br/>Run your context on one.</h2>
          <p>Spin up VeloDB Cloud in under 60 seconds and run hybrid search across vectors, text, structured data, and JSON in a single SQL query.</p>
          <div className="ctas">
            <button className="btn btn-primary btn-lg">Start Free Cloud Trial</button>
            <button className="btn btn-ghost btn-lg">Book a Consultation</button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CSArchitecture, CSResources, CSFinalCTA });