// Context Store / GenAI solution page — content modules.
// Reuses Nav, Footer, ArrowR from the shared bundle.

/* ============================ Hero ============================ */
function CSHero() {
  const bullets = [
    "Keep context fresh with streaming ingest and real-time CDC from transactional sources",
    "Store vectors, full-text, structured tables, and semi-structured JSON in one engine",
    "Scale to billions of vectors with progressive filtering and IVPQ compression",
    "Connect to AI applications through MCP Server, REST APIs, and standard SQL",
  ];
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg" />
      <div className="hero-grid" />
      <div className="wrap">
        <div className="hero-inner">
          <div>
            <div className="breadcrumb">
              <span>Solutions</span>
              <span className="sep">/</span>
              <span className="here">Context Store &amp; GenAI</span>
            </div>
            <h1 className="hero-title">
              Context Store<br/>on <span className="accent">VeloDB</span>
            </h1>
            <p className="hero-lede">
              Store vectors, full-text, structured data, and JSON in one database. Retrieve with hybrid search and fusion re-ranking. Serve fresh context to LLMs and agents in milliseconds.
            </p>
            <div className="hero-bullets">
              {bullets.map(b => <div key={b} className="hero-bullet">{b}</div>)}
            </div>
            <div className="hero-ctas">
              <button className="btn btn-velo btn-lg">Get Started Free</button>
              <button className="btn btn-ghost btn-lg">Book a Consultation</button>
            </div>
          </div>
          <div className="hero-art">
            <img src="assets/cs-hero.png" alt="VeloDB context store for generative AI" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Value Props ============================ */
function CSValueProps() {
  const items = [
    {
      t: "Real-time context, not stale snapshots.",
      b: "Streaming ingest and native CDC keep your knowledge base current as source documents, policies, and transactional records change. Your LLM retrieves what is true now, not what was true when the index was last rebuilt.",
    },
    {
      t: "Every context modality in one engine.",
      b: "Vectors, full-text, structured metadata, semi-structured JSON, and bitmap labels stored and queried together. No Pinecone for vectors plus Elasticsearch for text plus PostgreSQL for metadata. One SQL query crosses all modalities.",
    },
    {
      t: "Retrieval accuracy without runaway infrastructure cost.",
      b: "Progressive filtering applies SQL constraints first, BM25 keyword matching second, and vector search third. Expensive operations run on a small, pre-filtered subset. The result is higher relevance at a fraction of the compute.",
    },
  ];
  return (
    <section className="section-pad" data-screen-label="02 Why VeloDB">
      <div className="wrap">
        <div className="vp-2col">
          <div className="vp-left">
            <h2 className="vp-h2">Context that's<br/>fresh.<br/><span className="h2-gradient">Retrieval that's accurate.</span></h2>
            <p className="vp-lede">Three foundations of production-grade RAG and agentic AI. This is what changes when freshness, accuracy, and cost stop fighting each other.</p>
          </div>
          <div className="vp-cards">
            {items.map(i => (
              <div className="vp-card" key={i.t}>
                <div className="vp-title">{i.t}</div>
                <div className="vp-body">{i.b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Industries / Case studies ============================ */
const CS_CASES = [
  {
    key: "hybrid", label: "Hybrid Search",
    company: "ByteDance",
    scale: "Talent matching across global product portfolio",
    summary: (h) => <>ByteDance searches {h("1 billion vectors")} for talent matching with 94% relevance, up from 58% on pure vector search, at 400ms latency.</>,
    quote: "Per-segment BM25 caused ranking instability on every segment merge. Global statistics in Doris 4.0 with progressive filtering fixed it. Relevance jumped from 58% to 94%. Latency dropped from 2.8 seconds to 400 milliseconds. Storage shrank from 10TB on 20 servers to 500GB on a single server.",
    author: "Engineering Team, ByteDance",
    stats: [
      { n: "94%",  l: "Relevance, from 58%" },
      { n: "400ms", l: "Latency at billion scale" },
      { n: "384x", l: "Compression with IVPQ" },
    ],
  },
  {
    key: "multimodal", label: "Multimodal Platform",
    company: "Autonomous Driving Co.",
    scale: "Leading L4 autonomy platform",
    summary: (h) => <>Consolidated Hive, Zilliz, and Elasticsearch into one engine, querying {h("~1 trillion records")} across text, vectors, labels, and JSON.</>,
    quote: "Engineers used to hop between three consoles for every analysis task. Now text retrieval, vector similarity, bitmap label operations, and JSON metadata filtering all run in a single SQL statement. Query latency dropped from minutes to seconds across petabytes of driving data.",
    author: "Data Platform Team",
    stats: [
      { n: "~1T",   l: "Records queried in one engine" },
      { n: "4",     l: "Search modes in one SQL" },
      { n: "3 → 1", l: "Platforms consolidated" },
    ],
  },
  {
    key: "training", label: "AI Training",
    company: "AISpeech",
    scale: "Conversational AI training platform",
    summary: (h) => <>Manages {h("10 billion multimodal training samples")} across 500TB with millisecond version switching and 80% storage reduction.</>,
    quote: "Version-based partitioning gives us millisecond dataset switching with full data lineage for model reproducibility. Over 90% of our analysis workloads have migrated to Doris, replacing our previous Hive and Kylin stack.",
    author: "ML Platform Team, AISpeech",
    stats: [
      { n: "10B+", l: "Training samples managed" },
      { n: "500TB", l: "Multimodal dataset" },
      { n: "80%",  l: "Storage reduction" },
    ],
  },
];

function CSIndustries() {
  const [active, setActive] = React.useState(0);
  const cur = CS_CASES[active];
  const highlight = (text) => <span className="ind-accent">{text}</span>;
  return (
    <section className="section-pad-sm" data-screen-label="03 Industries">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 48, textAlign: "left", maxWidth: "100%" }}>
          <div className="eyebrow eyebrow-line">Trusted in production</div>
          <h2 style={{ marginTop: 16 }}>AI teams run on VeloDB</h2>
        </div>

        <div className="ind-tabs">
          {CS_CASES.map((i, idx) => (
            <button key={i.key}
                    className={`ind-tab ${idx === active ? "active" : ""}`}
                    onClick={() => setActive(idx)}>
              {i.label}
            </button>
          ))}
        </div>

        <div className="ind-panel" key={cur.key}>
          <p className="ind-summary">{cur.summary(highlight)}</p>

          <div className="ind-grid">
            <div className="ind-stats">
              {cur.stats.map(s => (
                <div className="ind-stat" key={s.l}>
                  <div className="ind-n">{s.n}</div>
                  <div className="ind-l">{s.l}</div>
                </div>
              ))}
            </div>
            <div className="ind-quote-col">
              <p className="ind-quote">&ldquo;{cur.quote}&rdquo;</p>
            </div>
          </div>

          <div className="ind-foot">
            <div className="ind-attrib">
              <div className="ind-author">{cur.author}</div>
              <div className="ind-scale">{cur.scale}</div>
            </div>
            <a className="btn-text">Read the full story <ArrowR /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Customer logo strip ============================ */
function CSLogoStrip() {
  const names = ["ByteDance", "AISpeech", "Xiaomi", "Meituan", "Baidu", "NetEase", "Kwai", "JD.com", "Trip.com", "Tencent"];
  const dup = [...names, ...names];
  return (
    <div className="wrap">
      <div className="logos">
        <div className="logos-track">
          {dup.map((n, i) => <span key={i} className="name">{n}</span>)}
        </div>
      </div>
    </div>
  );
}

/* ============================ Challenges (3 flip cards) ============================ */
const CS_CHALLENGES = [
  {
    cat: "Stale context",
    title: "72% of enterprise RAG underperforms in year one. Stale context is the leading cause.",
    lines: [
      "Support agent gets old docs. Full reindexing is expensive.",
      "Teams accept days or weeks of lag and call it good enough.",
    ],
    kicker: "The retrieval works. The context is just no longer true.",
    body: "CocoIndex incrementally transforms and embeds only changed documents. VeloDB ingests via streaming load and native CDC. Content becomes searchable in seconds, with no full-corpus rebuilds. Your knowledge base reflects the current state of the underlying data, not a snapshot from last Tuesday.",
  },
  {
    cat: "Context silos",
    title: "Your context is scattered across four systems. Your LLM needs all of it in one response.",
    lines: [
      "Docs in one store. Metadata in another. Events in a third.",
      "Embeddings in a fourth. Assembling requires four APIs and merging in app code.",
    ],
    kicker: "No single system holds the complete context.",
    body: "VeloDB stores all modalities (vectors, full-text, structured metadata, JSON, bitmap labels) in one engine. A single SQL query retrieves and ranks via Reciprocal Rank Fusion. No app-layer joins. No cross-system consistency gaps. Complete context returned in one round trip.",
  },
  {
    cat: "Accuracy vs cost",
    title: "Accurate retrieval at scale costs more than the LLM inference it feeds.",
    lines: [
      "Vector search scans the full index linearly.",
      "Teams choose between accuracy and budget. At production volumes, most teams choose cost.",
    ],
    kicker: "Accuracy and cost scale together. Until the engine breaks the curve.",
    body: "Progressive filtering applies SQL constraints first, BM25 keyword matching second, and vector search last on a pre-filtered subset. Expensive operations run on small candidate sets. IVPQ delivers 384x compression on vector storage. ByteDance reaches 94% relevance across 1 billion vectors at 400ms.",
  },
];

function CSChallenges() {
  const [flipped, setFlipped] = React.useState({});
  return (
    <section className="section-pad" data-screen-label="04 Challenges">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow eyebrow-line">Real-world tradeoffs</div>
          <h2>Challenges building<br/>production RAG and agents</h2>
        </div>
        <div className="chal-grid">
          {CS_CHALLENGES.map((c, i) => (
            <div key={i}
                 className={`chal-card ${flipped[i] ? "flipped" : ""}`}
                 onClick={() => setFlipped(f => ({ ...f, [i]: !f[i] }))}>
              <div className="chal-inner">
                <div className="chal-face chal-front">
                  <div>
                    <div className="chal-tag">
                      <span className="chal-idx">{String(i + 1).padStart(2, "0")}</span>
                      <span className="chal-sep">·</span>
                      <span>{c.cat}</span>
                    </div>
                    <div className="chal-title">{c.title}</div>
                    <div className="chal-lines">
                      {c.lines.map(l => <div className="chal-line" key={l}>{l}</div>)}
                      <div className="chal-line kicker">{c.kicker}</div>
                    </div>
                  </div>
                  <div className="chal-flip-hint">Tap to flip <ArrowR size={11} /></div>
                </div>
                <div className="chal-face chal-back">
                  <div>
                    <div className="chal-tag">How VeloDB solves it</div>
                    <div className="chal-title" style={{ fontSize: 22 }}>{c.title}</div>
                    <div className="chal-body">{c.body}</div>
                  </div>
                  <div className="chal-flip-hint" style={{ color: "var(--velo-cyan)" }}>← Flip back</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CSHero, CSValueProps, CSIndustries, CSLogoStrip, CSChallenges });