// Deep dives, resources, final CTA, footer

const DEEP_DIVES = [
  {
    n: "01",
    t: "Real-time ingestion",
    h: "From source to queryable in seconds.",
    lead: "Multiple ingestion paths so events, CDC changes, files, and application data flow directly into the analytics engine, with no slow staging.",
    pills: ["Routine Load", "Stream Load", "Native CDC", "Streaming Job", "CDC Stream TVF", "Flink CDC"],
    paras: [
      "For streaming data, Routine Load continuously consumes Kafka topics and supports exactly-once semantics for CSV and JSON streams. For application-driven writes, Stream Load lets teams push data directly over HTTP from services, scripts, and automation jobs.",
      "With Doris 4.1, CDC becomes more native. Streaming Jobs can continuously read from upstream sources and write into Doris tables; TVF mode supports CDC Stream TVF, and multi-table CDC mode supports MySQL and PostgreSQL.",
      "That means teams can capture operational changes from transactional systems and make them available for real-time SQL analytics without a separate Debezium → Kafka → Flink-style pipeline for every use case.",
    ],
  },
  {
    n: "02",
    t: "Updates & materialized transformation",
    h: "A mutable warehouse built for the latest version.",
    lead: "Orders change status, profiles update, devices resend readings. VeloDB is built for this mutable reality.",
    pills: ["Unique Key model", "Merge-on-Write", "Sync MV", "Async MV", "Partition refresh", "ON COMMIT refresh"],
    paras: [
      "With Unique Key + Merge-on-Write, updates are resolved during write, not deferred to query time. Doris stores the latest result for each unique key, avoids read-time version merging, and keeps predicate pushdown available to the storage layer.",
      "Synchronous materialized views are automatically maintained as base-table data changes, ideal for high-freshness single-table acceleration. Asynchronous MVs support flexible refresh patterns: full, partition-incremental, manual, scheduled, and ON COMMIT.",
      "VeloDB ingests fresh data, keeps records current, and continuously shapes that data into optimized analytical views, all inside the same SQL engine.",
    ],
  },
  {
    n: "03",
    t: "Real-time analytics & joins",
    h: "Ask relational questions while the data is still fresh.",
    lead: "The MPP SQL engine distributes scans, joins, aggregations, and sorts with inter- and intra-node parallel execution.",
    pills: ["MPP", "Cost-Based Optimizer", "Runtime Filters", "Broadcast Join", "Shuffle Join", "Bucket Shuffle", "Colocate Join"],
    paras: [
      "Modern real-time analytics is rarely single-table. Teams need to join fresh fact streams with customer, account, product, device, transaction, campaign, and geography dimensions. VeloDB supports Broadcast, Shuffle, Bucket Shuffle, and Colocate join strategies, with the optimizer choosing based on cost.",
      "Teams don't have to pre-flatten every dataset into one giant table or wait for batch ETL before analysis. Ask relational questions about what happened, for which customers, in which segment, tied to which product or campaign, all while the data is still fresh.",
      "The same engine serves production workloads. Materialized views accelerate repeated patterns; prepared statements, short-circuit point queries, row store, and row cache support high-concurrency dashboards and APIs, delivering 30K QPS per node at sub-10ms p99.",
    ],
  },
];

function DeepDives() {
  const [active, setActive] = React.useState(0);
  const d = DEEP_DIVES[active];
  return (
    <section className="section-pad" data-screen-label="06 Deep dives">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 56, textAlign: "left", maxWidth: "100%" }}>
          <div className="eyebrow eyebrow-line">Capability deep dives</div>
          <h2 style={{ marginTop: 16 }}>How it works,<br/>under the hood.</h2>
        </div>
        <div className="dd-grid">
          <div className="dd-tabs">
            {DEEP_DIVES.map((dd, i) => (
              <button key={dd.n}
                      className={`dd-tab ${i === active ? "active" : ""}`}
                      onClick={() => setActive(i)}>
                <span className="n">{dd.n}</span>
                <span className="t">{dd.t}</span>
              </button>
            ))}
          </div>
          <div className="dd-content">
            <h3>{d.h}</h3>
            <p className="lead">{d.lead}</p>
            <div className="dd-pills">
              {d.pills.map(p => <span key={p} className="dd-pill">{p}</span>)}
            </div>
            {d.paras.map((p, i) => <p key={i}>{p}</p>)}
            <a className="btn-text dd-cta">Read the deep dive <ArrowR /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Resources ============================ */
const RESOURCES = [
  { tag: "Customer story", cls: "customer",    t: "BYD: from 3-minute lag to 5-second freshness across the fleet" },
  { tag: "Technical",      cls: "technical",   t: "High-concurrency point-query optimization in VeloDB" },
  { tag: "Technical",      cls: "technical",   t: "Merge-on-Write internals for real-time updates" },
  { tag: "Guide",          cls: "guide",       t: "Kafka streaming ingest with Routine Load" },
  { tag: "Customer story", cls: "customer",    t: "JD.com: 10B+ rows daily for e-commerce analytics" },
  { tag: "Technical",      cls: "technical",   t: "The VARIANT type for semi-structured data" },
  { tag: "Integration",    cls: "integration", t: "Flink CDC real-time pipeline integration" },
  { tag: "Benchmark",      cls: "benchmark",   t: "ClickBench + TPC-DS performance results" },
];

function Resources() {
  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, and real-world case studies for every part of the real-time analytics stack.</p>
        </div>
        <div className="res-grid">
          {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 FinalCTA() {
  return (
    <section style={{ padding: "0 0 120px" }} data-screen-label="08 Final CTA">
      <div className="wrap">
        <div className="final-cta">
          <h2>Stop choosing between<br/>fresh and fast.</h2>
          <p>Spin up a VeloDB Cloud cluster in under 60 seconds and run your first sub-second query on real-time data.</p>
          <div className="ctas">
            <button className="btn btn-primary btn-lg">Start Free Cloud Trial <ArrowR /></button>
            <button className="btn btn-ghost btn-lg">Book a Consultation</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Footer ============================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-inner">
          <div className="footer-brand">
            <img src="assets/velodb-wordmark.svg" alt="VeloDB" />
            <p>The real-time analytics & search database powered by Apache Doris.</p>
          </div>
          <div className="footer-col">
            <h4>Apache Doris</h4>
            <ul>
              <li><a>Doris Blog</a></li>
              <li><a>Website</a></li>
              <li><a>GitHub · 13K ★</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a>About VeloDB</a></li>
              <li><a>Contact Us</a></li>
              <li><a>Blog</a></li>
              <li><a>Events</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Resources</h4>
            <ul>
              <li><a>Documentation</a></li>
              <li><a>Partners</a></li>
              <li><a>Webinars</a></li>
              <li><a>Community Forum</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Solutions</h4>
            <ul>
              <li><a>Real-Time Analytics</a></li>
              <li><a>Customer-Facing</a></li>
              <li><a>Observability</a></li>
              <li><a>Generative AI</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 VeloDB Inc. · Legal · Privacy</span>
          <span>velodb.io</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { DeepDives, Resources, FinalCTA, Footer });