// Data Warehouse solution page — content modules.
// Reuses Nav + ArrowR from nav-hero.jsx and shares the styles.css design system.
// All section components are DW-prefixed to avoid clobbering globals from the
// real-time page (so both pages can co-exist if we ever bundle them).

/* ============================ Hero ============================ */
function DWHero() {
  const bullets = [
    "Run sub-second analytics across internal tables and open lakehouse formats",
    "Query Iceberg, Hive, Paimon, and JDBC sources with a single SQL statement",
    "Handle structured tables, semi-structured JSON, and vector embeddings in one engine",
    "Connect Tableau, Grafana, Superset, and DBT through MySQL-compatible protocol",
  ];
  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">Data Warehouse</span>
            </div>
            <h1 className="hero-title">
              Data Warehousing<br/>on <span className="accent">VeloDB</span>
            </h1>
            <p className="hero-lede">
              Sub-second analytics on petabyte-scale data. Open formats. Unified workloads. No vendor lock-in.
            </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/dw-hero.png" alt="VeloDB data warehouse on lakehouse architecture" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Value Props ============================ */
function DWValueProps() {
  const items = [
    {
      t: "Query acceleration that makes your lakehouse feel like a native database.",
      b: "Async materialized views, multi-level caching, and a vectorized MPP engine turn Iceberg and Hive queries from minutes into sub-seconds.",
    },
    {
      t: "Open formats, open catalog, no vendor lock-in.",
      b: "Native Iceberg v3 read and write. Paimon and Hive support. Polaris and Unity catalog integration. Your data stays in your storage, in formats you control.",
    },
    {
      t: "Multimodal analytics from one SQL engine.",
      b: "Structured tables, semi-structured JSON, and unstructured text and vectors. VARIANT type, inverted indexes, and HNSW vector indexes replace what used to require six separate tools.",
    },
    {
      t: "One warehouse instead of six supporting services.",
      b: "Built-in metadata, caching, and async MV refresh replace external metastores, Redis, and ETL schedulers. Two node types, no ZooKeeper, ZSTD compression cuts storage 60% or more.",
    },
  ];
  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">Accelerate your<br/>lakehouse.<br/><span className="h2-gradient">Stop renting silos.</span></h2>
            <p className="vp-lede">Query acceleration, open data, and multimodal analytics from one SQL engine. This is what changes when the warehouse and the lake stop being separate problems.</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 DW_CASES = [
  {
    key: "lakehouse", label: "Lakehouse",
    company: "Xiaomi",
    scale: "Global consumer electronics leader",
    summary: (h) => <>Xiaomi built a {h("unified lakehouse on Doris and Paimon")}, cutting average query latency from 60 seconds to 10 seconds with 6x faster performance.</>,
    quote: "We replaced separate Presto, Druid, and Spark clusters with one Doris engine over Paimon storage. Aggregation queries dropped from 40 seconds to 8 seconds. Concurrent query capacity scaled from 5 to 80 sessions. We contributed snapshot-level incremental materialized views back to the Apache Doris project.",
    author: "Data Platform Team, Xiaomi",
    stats: [
      { n: "6x",     l: "Faster average query latency" },
      { n: "5x",     l: "Higher concurrency vs Presto" },
      { n: "40s→8s", l: "Aggregation query time" },
    ],
  },
  {
    key: "presto", label: "Presto / Trino migration",
    company: "SF Technology",
    scale: "Logistics & supply chain platform",
    summary: (h) => <>SF Technology replaced Presto with VeloDB and cut P95 latency from 60 seconds to under 20 across {h("one million daily queries")}, with a 96% cache hit rate.</>,
    quote: "Trino scanned every Parquet file from scratch on every query. With VeloDB, eight percent of our million daily Presto queries used to exceed 50 seconds. After migration, P95 dropped under 20 seconds and the data cache held a 96% hit rate. The lakehouse data layout did not change. Only the query engine did.",
    author: "Data Platform Team, SF Technology",
    stats: [
      { n: "3x",   l: "Faster on TPC-DS over Iceberg" },
      { n: "<20s", l: "P95 latency, from 60s" },
      { n: "96%",  l: "Data cache hit rate" },
    ],
  },
  {
    key: "snowflake", label: "Snowflake migration",
    company: "Planet",
    scale: "Global payment infrastructure",
    summary: (h) => <>Planet migrated analytics from Snowflake to VeloDB and reduced spend by {h("80% in total cost of ownership")} while keeping sub-second BI performance.</>,
    quote: "Payment data that took 5 to 10 minutes to become queryable on Snowflake now lands in 1 to 2 seconds. Multi-table JOINs across transaction, customer, and merchant dimensions return in 1.5 seconds, and 100 concurrent dashboard sessions stay under 1.2 seconds average. Total cost of ownership dropped 80% versus our previous Snowflake spend.",
    author: "Parth Soni, Senior Data Engineer, Planet",
    stats: [
      { n: "80%",  l: "TCO reduction vs Snowflake" },
      { n: "1.5s", l: "Multi-table JOIN response" },
      { n: "100",  l: "Concurrent dashboard sessions" },
    ],
  },
  {
    key: "unified", label: "Unified stack",
    company: "Tencent Music",
    scale: "800M+ monthly active users",
    summary: (h) => <>Tencent Music consolidated three analytical systems into VeloDB, serving {h("real-time and historical workloads")} from one engine across user behavior, ad attribution, and content recommendations.</>,
    quote: "We ran a real-time warehouse, an offline warehouse, and a serving layer. Each had its own ingest pipeline and its own schema drift. After consolidating on VeloDB, one engine serves all three workloads with materialized views for the BI patterns and direct base-table queries for ad-hoc analysis. Engineering time spent on pipeline reconciliation dropped to zero.",
    author: "Data Engineering Team, Tencent Music",
    stats: [
      { n: "3→1",  l: "Analytical systems consolidated" },
      { n: "100%", l: "Pipeline reconciliation eliminated" },
      { n: "PB+",  l: "Hot working set" },
    ],
  },
];

function DWIndustries() {
  const [active, setActive] = React.useState(0);
  const cur = DW_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 }}>Data teams run on VeloDB</h2>
        </div>

        <div className="ind-tabs">
          {DW_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 DWLogoStrip() {
  const names = ["Xiaomi", "Planet", "SF Technology", "Haidilao", "Tencent Music", "Meituan", "ByteDance", "Baidu", "NetEase", "Kwai", "JD.com", "Trip.com"];
  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 ============================ */
const DW_CHALLENGES = [
  {
    cat: "Query speed",
    title: "Your Iceberg queries finish in minutes. They should finish in seconds.",
    lines: [
      "Trino scans every Parquet file from scratch. No built-in cache, no precomputed views.",
      "SF Technology ran one million Presto queries a day. Eight percent took over 50 seconds. P95 sat at a full minute.",
    ],
    kicker: "The data is already in open formats. The query engine is what holds you back.",
    body: "SF Technology cut P95 from 60 seconds to under 20 with a 96% cache hit rate. Xiaomi dropped average latency from 60 seconds to 10 on their Paimon lakehouse. On TPC-DS 1TB over Iceberg, VeloDB completes all 99 queries in one-third the time Trino takes.",
  },
  {
    cat: "Multimodal",
    title: "Structured data has a warehouse. Everything else has a workaround.",
    lines: [
      "Free-text search? Export to Elasticsearch.",
      "Vector similarity? Stand up a Pinecone cluster.",
      "Nested JSON? Hope you like dynamic SQL.",
    ],
    kicker: "Each workaround is a copy, a sync pipeline, and a consistency window.",
    body: "VeloDB queries all three modalities natively inside one SQL engine. VARIANT stores JSON with automatic column extraction and inverted index support. BM25 scoring ranks text by relevance without Elasticsearch. HNSW vector indexes find nearest neighbors without a separate embedding database. One ingest path, one storage layer, one query that can filter structured columns, search text, and rank vectors in a single statement.",
  },
  {
    cat: "Total cost",
    title: "You pay for the warehouse. You also pay for everything around it.",
    lines: [
      "ZooKeeper for coordination. External metastore for catalog.",
      "Redis for caching. Airflow for materialized view refreshes.",
      "Each one has its own monitoring, scaling, and recovery.",
    ],
    kicker: "The warehouse is one line item. The architecture that keeps it running is six.",
    body: "VeloDB eliminates the surrounding infrastructure. Built-in metadata management replaces external metastores. Built-in caching replaces Redis. Async materialized views replace ETL schedulers. Two node types, no external coordination service, no ZooKeeper. ZSTD compression cuts storage over 60%. Fewer machines, fewer dependencies, fewer engineers allocated to keeping the analytics stack alive.",
  },
  {
    cat: "Lock-in",
    title: "The warehouse owns your data the moment you load it.",
    lines: [
      "Proprietary format. Proprietary catalog. Proprietary query language.",
      "Leaving means rewriting every pipeline, every dashboard, every dbt model.",
    ],
    kicker: "Your data should outlive your vendor decision.",
    body: "Apache Doris is fully open source under Apache 2.0. VeloDB reads and writes Iceberg v3 natively with time travel, partition evolution, and schema evolution. Paimon and Hive Metastore are first-class. Polaris and Unity catalog integration fits existing governance. Your data stays in your storage, in formats you control, with a SQL engine that does not own it.",
  },
];

function DWChallenges() {
  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 with<br/>lakehouse analytics at scale</h2>
        </div>
        <div className="chal-grid">
          {DW_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, { DWHero, DWValueProps, DWIndustries, DWLogoStrip, DWChallenges });