// Data Warehouse architecture — 5-col engine board + 3-item accordion

const DW_ENGINE_COLS = [
  {
    title: "Data Sources",
    items: [
      { t: "Iceberg Tables",       s: "v1 / v2 / v3" },
      { t: "Hive Tables",          s: "Metastore catalog" },
      { t: "Paimon Tables",        s: "Streaming lakehouse" },
      { t: "MySQL / PostgreSQL",   s: "JDBC federation" },
      { t: "S3 / HDFS",            s: "Direct file access" },
    ],
  },
  {
    title: "Lakehouse Layer",
    items: [
      { t: "Multi-Catalog Federation", s: "Iceberg, Hive, Paimon, JDBC" },
      { t: "Native Format Readers",    s: "Parquet, ORC" },
      { t: "Predicate Pushdown",       s: "Skip irrelevant row groups" },
      { t: "Data Cache",               s: "96% hit rate in production" },
    ],
  },
  {
    title: "Internal Tables & Transforms", accent: true,
    items: [
      { t: "Unique Key + Merge-on-Write", s: "Real-time upserts" },
      { t: "VARIANT (JSON)",              s: "Auto column extraction" },
      { t: "Vector Indexes",              s: "HNSW / IVPQ" },
      { t: "Inverted Indexes",            s: "BM25 full-text search" },
      { t: "Async Materialized Views",    s: "Flexible refresh" },
    ],
  },
  {
    title: "Query Engine",
    items: [
      { t: "MPP + Vectorized",      s: "Pipeline parallelism" },
      { t: "Cost-Based Optimizer",  s: "Auto MV rewrite" },
      { t: "Runtime Filters",       s: "Reduce data transfer" },
      { t: "Join Strategies",       s: "Broadcast · Shuffle · Colocate" },
    ],
  },
  {
    title: "Serve",
    items: [
      { t: "Dashboards",         s: "Grafana, Superset, Tableau" },
      { t: "BI Tools",           s: "MySQL-compatible protocol" },
      { t: "Embedded Analytics", s: "Customer-facing apps" },
      { t: "APIs",               s: "REST / JDBC / ODBC" },
      { t: "DBT Integration",    s: "Transform & model" },
    ],
  },
];

function DWEngineCol({ 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 DWEngineBoard() {
  return (
    <div className="eng-board">
      <div className="eng-board-head">VeloDB lakehouse analytics engine</div>
      <div className="eng-cols">
        {DW_ENGINE_COLS.map(c => <DWEngineCol key={c.title} col={c} />)}
      </div>
    </div>
  );
}

const DW_ACCORDION = [
  {
    n: "01", title: "Query acceleration",
    body: [
      "VeloDB accelerates lakehouse queries without moving data out of open formats. The vectorized MPP engine with pipeline execution processes Iceberg, Hive, and Paimon tables through native format readers that push predicates directly into Parquet and ORC files, skipping irrelevant row groups before data reaches the query engine.",
      "Async materialized views precompute common aggregations, rollups, and pre-joined models. The optimizer transparently rewrites queries to use materialized results when available, without changes to application SQL. Multi-level caching (page cache, partition cache, query result cache) delivers a 96% hit rate in production deployments like SF Technology. On TPC-DS 1TB with Iceberg, Doris completes 99 queries in one-third the time of Trino.",
    ],
  },
  {
    n: "02", title: "Open lakehouse integration",
    body: [
      "Your data stays in your storage, in open formats you control. VeloDB reads and writes Iceberg v3 tables natively, including time travel, partition evolution, and schema evolution. Paimon catalog support enables streaming lakehouse architectures. Hive Metastore integration provides backward compatibility with existing data lake investments.",
      "Multi-catalog federation lets you query across Iceberg, Hive, Paimon, MySQL, PostgreSQL, and other JDBC sources in a single SQL statement. Polaris and Unity catalog compatibility means VeloDB fits into your existing catalog governance without migration. Apache Doris is fully open source under Apache 2.0 with no vendor lock-in at the engine, storage, or catalog level.",
    ],
  },
  {
    n: "03", title: "Multimodal data in one engine",
    body: [
      "Data warehouses no longer contain only structured tables. JSON payloads, text logs, vector embeddings, and labeled metadata all land in the same platform. VeloDB handles all three modalities without requiring separate engines.",
      "VARIANT stores any JSON structure with automatic column extraction, indexing, and ZSTD compression to less than one-third of raw size with 10x faster filtering on non-key columns. Inverted indexes with BM25 scoring replace Elasticsearch for log and text analytics. HNSW and IVPQ vector indexes support similarity search inside SQL, enabling hybrid queries that combine structured filters, keyword matching, and vector similarity in a single statement.",
    ],
  },
];

function DWAccordion() {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="accordion">
      {DW_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 DWArchitecture() {
  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 lakehouse analytics</h2>
          <p className="arch-2026-lede">
            Whether you're accelerating queries over Iceberg tables, building dimensional models with materialized views, or querying structured, semi-structured, and vector data from one SQL interface, VeloDB handles it on one engine.
          </p>
        </div>

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

/* ============================ Resources ============================ */
const DW_RESOURCES = [
  { tag: "Customer story", cls: "customer",    t: "Xiaomi: Unified lakehouse with Doris and Paimon" },
  { tag: "Customer story", cls: "customer",    t: "SF Technology: Presto to Doris, 3x faster queries" },
  { tag: "Customer story", cls: "customer",    t: "Planet: From Snowflake, 80% cost savings" },
  { tag: "Technical",      cls: "technical",   t: "Async materialized views for query acceleration" },
  { tag: "Technical",      cls: "technical",   t: "Multi-catalog federation: Iceberg, Hive, and Paimon" },
  { tag: "Guide",          cls: "guide",       t: "Build a lakehouse with PostgreSQL, Iceberg, and Doris" },
  { tag: "Benchmark",      cls: "benchmark",   t: "TPC-DS: Doris vs Trino vs Presto on Iceberg" },
  { tag: "Technical",      cls: "technical",   t: "VARIANT type for semi-structured data" },
];

function DWResources() {
  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 lakehouse analytics stack.</p>
        </div>
        <div className="res-grid">
          {DW_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 DWFinalCTA() {
  return (
    <section style={{ padding: "0 0 120px" }} data-screen-label="08 Final CTA">
      <div className="wrap">
        <div className="final-cta">
          <h2>Stop renting silos.<br/>Run analytics on your data.</h2>
          <p>Spin up a VeloDB Cloud cluster in under 60 seconds and run your first sub-second query across Iceberg, Hive, or Paimon.</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, { DWArchitecture, DWResources, DWFinalCTA });