// Unified Stack — deep-dive sections (alternating), social proof, final CTA.

/* ---------- Outcome box (pg style) ---------- */
function USOutcome({ title, stats, light }) {
  return (
    <div className={`pg-outcome ${light ? "light" : ""}`}>
      <div className="pg-outcome-head">{title}</div>
      <div className="pg-outcome-stats">
        {stats.map((s, i) => (
          <div key={i} className="pg-outcome-stat">
            <div className="pg-outcome-n">{s.n}</div>
            <div className="pg-outcome-l">{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Diagrams ---------- */
function USDiagramHSAP() {
  return (
    <svg viewBox="0 0 560 380" fill="none" preserveAspectRatio="xMidYMid meet" className="pg-diagram light">
      <text x="20" y="28" fontSize="11" fill="var(--velo-blue)" fontFamily="ui-monospace,monospace" letterSpacing="0.12em">ONE SQL QUERY · THREE SIGNALS</text>
      {/* query box */}
      <g transform="translate(170, 44)">
        <rect width="220" height="48" rx="8" fill="#eaf4ff" stroke="var(--velo-blue)" strokeWidth="1.4"/>
        <text x="110" y="20" textAnchor="middle" fontSize="10" fill="var(--velo-blue)" fontFamily="ui-monospace,monospace" letterSpacing="0.10em">SELECT ... WHERE ...</text>
        <text x="110" y="36" textAnchor="middle" fontSize="10" fill="#4a5572" fontFamily="ui-monospace,monospace">MATCH() · L2_DISTANCE() · GROUP BY</text>
      </g>
      {/* three engines */}
      {[
        { x: 20,  l: "Inverted Index", s: "full-text", icon: "search" },
        { x: 210, l: "Vector Index",   s: "similarity", icon: "vector" },
        { x: 400, l: "Columnar Store", s: "aggregation", icon: "bars" },
      ].map((e, i) => (
        <g key={e.l} transform={`translate(${e.x}, 150)`}>
          <path d={`M ${280 - e.x} -58 L 70 -6`} stroke="var(--velo-blue)" strokeWidth="1" strokeDasharray="3 3"/>
          <rect width="140" height="80" rx="8" fill="#fff" stroke="var(--velo-blue)" strokeWidth="1.2"/>
          <text x="70" y="34" textAnchor="middle" fontSize="12" fontWeight="600" fill="#0a60b5" fontFamily="Inter">{e.l}</text>
          <text x="70" y="54" textAnchor="middle" fontSize="9" fill="#6a7283" fontFamily="ui-monospace,monospace">{e.s}</text>
        </g>
      ))}
      {/* same storage bar */}
      <g transform="translate(20, 270)">
        <rect width="520" height="44" rx="8" fill="rgba(11,162,255,0.08)" stroke="var(--velo-blue)" strokeWidth="1.2"/>
        <text x="260" y="20" textAnchor="middle" fontSize="11" fontWeight="600" fill="#0a60b5" fontFamily="Inter">Same columnar storage · same row · same point in time</text>
        <text x="260" y="36" textAnchor="middle" fontSize="9" fill="#4a5572" fontFamily="ui-monospace,monospace">nothing to reconcile</text>
      </g>
    </svg>
  );
}

function USDiagramMultiModal() {
  const rows = [
    { t: "Structured columns", s: "numeric · dimensional", c: "var(--velo-cyan)" },
    { t: "JSON / VARIANT", s: "semi-structured payloads", c: "var(--velo-cyan)" },
    { t: "Inverted index", s: "full-text · observability", c: "var(--velo-cyan)" },
    { t: "Dense vector index", s: "embeddings · retrieval", c: "var(--velo-cyan)" },
  ];
  return (
    <svg viewBox="0 0 560 380" fill="none" preserveAspectRatio="xMidYMid meet" className="pg-diagram">
      <text x="20" y="28" fontSize="11" fill="var(--velo-cyan)" fontFamily="ui-monospace,monospace" letterSpacing="0.12em">ONE CREATE TABLE · ONE STREAM</text>
      {/* event */}
      <g transform="translate(20, 50)">
        <rect width="150" height="110" rx="8" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.20)"/>
        <text x="14" y="24" fontSize="11" fontWeight="600" fill="#fff" fontFamily="Inter">product_event</text>
        <line x1="14" y1="32" x2="136" y2="32" stroke="rgba(255,255,255,0.12)"/>
        {["price: 249", "meta: { json }", "desc: \"text\"", "embed: [vec]"].map((t, i) => (
          <text key={t} x="14" y={50 + i * 18} fontSize="9.5" fill="rgba(255,255,255,0.65)" fontFamily="ui-monospace,monospace">{t}</text>
        ))}
      </g>
      {/* arrow */}
      <path d="M 170 105 L 210 105" stroke="var(--velo-cyan)" strokeWidth="1.5"/>
      <path d="M 206 101 L 210 105 L 206 109" stroke="var(--velo-cyan)" strokeWidth="1.5" fill="none"/>
      {/* 4 modality rows in one table */}
      <g transform="translate(220, 44)">
        <rect width="320" height="180" rx="10" fill="rgba(11,162,255,0.06)" stroke="rgba(11,162,255,0.45)"/>
        <text x="160" y="26" textAnchor="middle" fontSize="10" fill="var(--velo-cyan)" fontFamily="ui-monospace,monospace" letterSpacing="0.12em">ONE TABLE · NATIVE TYPES</text>
        {rows.map((r, i) => (
          <g key={r.t} transform={`translate(16, ${42 + i * 34})`}>
            <rect width="288" height="28" rx="6" fill="rgba(255,255,255,0.04)" stroke="rgba(26,236,255,0.25)"/>
            <circle cx="14" cy="14" r="3" fill={r.c}/>
            <text x="28" y="13" fontSize="11" fontWeight="600" fill="#fff" fontFamily="Inter">{r.t}</text>
            <text x="28" y="24" fontSize="8.5" fill="rgba(255,255,255,0.55)" fontFamily="ui-monospace,monospace">{r.s}</text>
          </g>
        ))}
      </g>
      <text x="20" y="270" fontSize="10" fill="rgba(255,255,255,0.55)" fontFamily="ui-monospace,monospace">Query everything through standard SQL · same dialect your BI tool uses</text>
    </svg>
  );
}

function USDiagramCompute() {
  return (
    <svg viewBox="0 0 560 380" fill="none" preserveAspectRatio="xMidYMid meet" className="pg-diagram light">
      <text x="20" y="28" fontSize="11" fill="var(--velo-blue)" fontFamily="ui-monospace,monospace" letterSpacing="0.12em">SHARED STORAGE · ISOLATED COMPUTE</text>
      {/* real-time compute group */}
      <g transform="translate(20, 46)">
        <rect width="250" height="96" rx="10" fill="#eaf4ff" stroke="var(--velo-blue)" strokeWidth="1.3"/>
        <text x="16" y="26" fontSize="12" fontWeight="600" fill="#0a60b5" fontFamily="Inter">Real-time compute group</text>
        <text x="16" y="44" fontSize="9" fill="#4a5572" fontFamily="ui-monospace,monospace">Kafka ingest · sub-second dashboards</text>
        <g transform="translate(16, 56)">
          {[0,1,2].map(i => <rect key={i} x={i*54} y="0" width="46" height="26" rx="4" fill="rgba(11,162,255,0.12)" stroke="var(--velo-blue)"/>)}
          <text x="69" y="17" textAnchor="middle" fontSize="8" fill="#0a60b5" fontFamily="ui-monospace,monospace">live nodes</text>
        </g>
      </g>
      {/* batch compute group */}
      <g transform="translate(290, 46)">
        <rect width="250" height="96" rx="10" fill="#f4f4f8" stroke="#9aa3b2" strokeWidth="1.3"/>
        <text x="16" y="26" fontSize="12" fontWeight="600" fill="#3a4256" fontFamily="Inter">Batch compute group</text>
        <text x="16" y="44" fontSize="9" fill="#6a7283" fontFamily="ui-monospace,monospace">nightly joins · ad hoc science</text>
        <g transform="translate(16, 56)">
          {[0,1,2].map(i => <rect key={i} x={i*54} y="0" width="46" height="26" rx="4" fill="rgba(0,0,0,0.05)" stroke="#9aa3b2"/>)}
          <text x="69" y="17" textAnchor="middle" fontSize="8" fill="#6a7283" fontFamily="ui-monospace,monospace">batch nodes</text>
        </g>
      </g>
      {/* arrows down to shared storage */}
      <path d="M 145 142 L 145 196" stroke="var(--velo-blue)" strokeWidth="1.2"/>
      <path d="M 415 142 L 415 196" stroke="#9aa3b2" strokeWidth="1.2"/>
      <text x="200" y="178" fontSize="9" fill="#6a7283" fontFamily="ui-monospace,monospace">share data · not resources</text>
      {/* shared storage */}
      <g transform="translate(20, 200)">
        <ellipse cx="260" cy="14" rx="260" ry="14" fill="#eaf4ff" stroke="var(--velo-blue)"/>
        <path d="M0 14 v60 a260 14 0 0 0 520 0 v-60" fill="#eaf4ff" stroke="var(--velo-blue)"/>
        <text x="260" y="52" textAnchor="middle" fontSize="12" fontWeight="600" fill="#0a60b5" fontFamily="Inter">Shared storage layer</text>
      </g>
      <text x="20" y="320" fontSize="10" fill="#4a5572" fontFamily="ui-monospace,monospace">Dashboards stay fast while a 12-hour backfill runs. No one gets paged.</text>
    </svg>
  );
}

/* ---------- Reusable deep-dive section ---------- */
function USDeepSection({ label, light, reverse, eyebrow, headline, paragraphs, bullets, closer, cta, outcome, diagram }) {
  const tick = light ? "var(--velo-blue)" : "var(--velo-cyan)";
  return (
    <section className={`pg-section pg-vp-section ${light ? "light" : "dark"} ${reverse ? "reverse" : ""}`} data-screen-label={label}>
      <div className="wrap">
        <div className="pg-2col">
          <div className="pg-2col-visual">
            <div className="pg-vp-visual-wrap">{diagram}</div>
          </div>
          <div className="pg-2col-text">
            <div className={`pg-pill-light ${light ? "" : "on-dark"}`}
                 style={light ? {} : { background: "rgba(26,236,255,0.10)", borderColor: "rgba(26,236,255,0.40)", color: "var(--velo-cyan)" }}>
              <span className="pg-pill-dot" style={light ? {} : { background: "var(--velo-cyan)" }} />{eyebrow}
            </div>
            <h2 className={`pg-section-title ${light ? "" : "on-dark"}`}>{headline}</h2>
            {paragraphs.map((p, i) => <p key={i} className={`pg-section-body ${light ? "" : "on-dark"}`}>{p}</p>)}
            {bullets && (
              <ul className="us-deep-bullets">
                {bullets.map((b, i) => (
                  <li className="us-deep-bullet" key={i}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={tick} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            )}
            {closer && <div className="us-deep-closer">{closer}</div>}
            {cta && <a className={`pg-vp-cta ${light ? "light" : ""}`}>{cta} <ArrowR /></a>}
            {outcome && <USOutcome {...outcome} light={light} />}
          </div>
        </div>
      </div>
    </section>
  );
}

function USDeepDives() {
  return (
    <React.Fragment>
      <USDeepSection
        label="05 HSAP" light={true} reverse={true}
        diagram={<USDiagramHSAP />}
        eyebrow="Hybrid Search & Analytical Processing"
        headline="Search and analytics belong in the same query, not the same Kafka topic."
        paragraphs={[
          "Traditional stacks split search and analytics across two systems. Elasticsearch handles text. Snowflake or ClickHouse handles aggregation. To answer a question that needs both, your team builds a pipeline to copy data between them, then writes glue code to merge results at the application layer.",
          "VeloDB collapses that pattern. Full-text search through a native inverted index. Vector similarity through dense vector indexes. Numerical aggregation through columnar storage. All three live in the same engine, and all three respond to one SQL query.",
          "The benefit is not just speed. It is correctness. When your search results and your analytics come from the same row of the same table at the same point in time, there is nothing to reconcile.",
        ]}
      />
      <USDeepSection
        label="06 Multi-modal" light={false} reverse={false}
        diagram={<USDiagramMultiModal />}
        eyebrow="Multi-Modal Data Management"
        headline="Structured, semi-structured, and unstructured. Same database. Same SQL."
        paragraphs={[
          "Modern applications mix data types. A single product event contains numerical fields, a JSON payload, a text description, and an embedding vector for retrieval. Most analytical databases handle the numbers well and treat everything else as a second-class citizen.",
          "VeloDB treats each modality natively: structured columns for numerical and dimensional fields, JSON and VARIANT types for semi-structured payloads, an inverted index on text columns for full-text search, and a dense vector index for embeddings used in retrieval and recommendation.",
          "You write one CREATE TABLE statement, ingest one stream, and query everything through standard SQL. Your analysts use the dialect they already know. Your agents use the same connection your BI tool uses.",
        ]}
      />
      <USDeepSection
        label="07 RT + Batch" light={true} reverse={true}
        diagram={<USDiagramCompute />}
        eyebrow="Real-Time and Batch in One Database"
        headline="Fast inserts. Heavy joins. Both, at the same time."
        paragraphs={[
          "Real-time and batch workloads have historically required separate engines. Real-time databases optimize for low-latency writes and point reads. Batch warehouses optimize for large scans and complex joins. Running both in one system usually means one workload pattern slows the other down.",
          "VeloDB separates compute by workload class. A real-time compute group ingests Kafka and serves your customer-facing dashboards under sub-second SLA. A batch compute group runs your nightly multi-table joins and ad hoc data science queries against the same storage. They share data. They do not share resources.",
        ]}
        bullets={[
          "Your operational dashboards stay fast while the data team runs a 12-hour backfill.",
          "Your AI agents query fresh data without waiting in the analyst queue.",
          "Your finance team runs month-end reports without paging the on-call engineer.",
        ]}
        closer={"One database. Multiple workload personalities. No more “which warehouse do I query for this?”"}
      />
    </React.Fragment>
  );
}

/* ---------- Deep-dive intro (Section 5 overview) ---------- */
function USDeepIntro() {
  return (
    <section className="us-deep-intro" data-screen-label="04 Architecture Intro">
      <div className="wrap">
        <div className="pg-pill-light" style={{ background: "rgba(26,236,255,0.10)", borderColor: "rgba(26,236,255,0.40)", color: "var(--velo-cyan)", margin: "0 auto 18px" }}>
          <span className="pg-pill-dot" style={{ background: "var(--velo-cyan)" }} />The architecture
        </div>
        <h2 className="pg-section-title on-dark" style={{ textAlign: "center" }}>One database. Multiple workload patterns. Zero context switching.</h2>
        <p className="us-deep-intro-body">Most "all-in-one" databases collapse under the weight of mixed workloads. A real-time write pipeline starves a heavy batch query. A search index falls behind during a backfill. VeloDB was designed for workload isolation from the start, so you can run every workload pattern your business needs without watching one starve the other.</p>
      </div>
    </section>
  );
}

/* ---------- Social proof ---------- */
function USSocialProof() {
  const logos = ["ByteDance", "NetEase", "Kwai", "Xanh SM", "TikTok", "Meituan", "360 Group"];
  const dup = [...logos, ...logos];
  const cases = [
    { tag: "Hybrid search", t: "ByteDance: billion-scale hybrid search on one engine.", b: "Replaced a multi-database retrieval architecture with Apache Doris 4.0. Retrieval relevance climbed from 58% to 94%. Memory footprint dropped 20x with IVPQ. One engine now serves vector, text, and SQL workloads at scale." },
    { tag: "Log consolidation", t: "NetEase: out of Elasticsearch, into one log platform.", b: "Migrated logs and time-series workloads off Elasticsearch and InfluxDB. Storage cost dropped by roughly two-thirds. Queries ran about 10x faster. Two systems became one." },
    { tag: "Real-time analytics", t: "Kwai: real-time analytics for short video at scale.", b: "Replaced a fragmented analytical stack with VeloDB to power user-facing analytics across hundreds of millions of daily users. Dashboards stayed sub-second as ingest grew." },
  ];
  const stats = [
    { n: "3 to 40x", l: "faster than ClickHouse on real-world joins and updates" },
    { n: "12 to 19x", l: "less storage than Elasticsearch for log workloads" },
    { n: "1/3 the cost", l: "of ClickHouse. 1/5 the cost of Snowflake." },
  ];
  return (
    <section className="pg-section light" data-screen-label="09 Social Proof">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <div className="pg-pill-light" style={{ margin: "0 auto 18px" }}><span className="pg-pill-dot" />Teams who already consolidated</div>
          <h2 className="pg-section-title" style={{ textAlign: "center" }}>From sprawl to single source of truth.</h2>
        </div>
        <div className="us-logos-light">
          <div className="logos-track">
            {dup.map((n, i) => <span key={i} className="us-logo-name">{n}</span>)}
          </div>
        </div>
        <div className="us-case-grid">
          {cases.map(c => (
            <div className="us-case-card light" key={c.t}>
              <div className="us-case-tag">{c.tag}</div>
              <div className="us-case-title light">{c.t}</div>
              <div className="us-case-body light">{c.b}</div>
            </div>
          ))}
        </div>
        <div className="us-stat-strip light">
          {stats.map(s => (
            <div className="us-stat-cell light" key={s.l}>
              <div className="us-stat-n">{s.n}</div>
              <div className="us-stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function USFinalCTA() {
  return (
    <section style={{ padding: "96px 0 110px" }} data-screen-label="10 Final CTA">
      <div className="wrap">
        <div className="final-cta">
          <div className="us-cta-eyebrow">Ready to consolidate?</div>
          <h2>Stop stitching databases together.<br/>Start querying.</h2>
          <p>Spin up a free VeloDB Cloud workspace in under five minutes. Load your data. Run the queries that used to need three systems.</p>
          <div className="ctas">
            <button className="btn btn-primary btn-lg">Start free trial</button>
            <button className="btn btn-ghost btn-lg">Talk to an engineer</button>
          </div>
          <p className="us-cta-sub">No credit card required. Free tier includes 200 GB of storage and 8 vCPU of compute.</p>
        </div>
        <div className="us-trust-strip">Built on Apache Doris · Apache 2.0 license · SOC 2 Type II · ISO 27001 · HIPAA-ready</div>
      </div>
    </section>
  );
}

Object.assign(window, { USDeepIntro, USDeepDives, USSocialProof, USFinalCTA });
