// ValueProps, Industries, Logos, Challenges sections

/* ============================ Value Props ============================ */
function ValueProps() {
  const items = [
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
      t: "Act on what is happening, not what already happened.",
      b: "When inventory shifts, when a campaign spikes, when a fraud signal hits, your team sees it within seconds. The window between event and action collapses from hours to a heartbeat.",
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="6" rx="7" ry="2.5"/><path d="M5 6v7c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V6"/><path d="M5 13v5c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-5"/></svg>,
      t: "Retire the middleware. Keep the architecture diagram on one page.",
      b: "No Debezium fleet, no Flink jobs, no staging warehouse. CDC from MySQL, Postgres, and Kafka lands directly in the engine, with fewer moving parts, fewer late-night pages, and fewer vendors on the invoice.",
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3"/><path d="M5 21a7 7 0 0114 0"/></svg>,
      t: "Customer-facing analytics that stay snappy at any scale.",
      b: "Whether 100 analysts or 100,000 concurrent users hit the same dashboard, latency stays flat. Embedded analytics, customer portals, and live APIs feel instant because they are.",
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
      t: "Works with the tools your team already opens every morning.",
      b: "Tableau, Grafana, Superset, dbt, and Power BI all see VeloDB as MySQL. No new query language, no specialty drivers, no migration project. The team that built your stack keeps building.",
    },
  ];
  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">Real-time isn't a feature.<br/><span className="h2-gradient">It's how you win.</span></h2>
            <p className="vp-lede">Faster decisions. Fewer systems. Products your users love. This is what changes when freshness and speed 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 ============================ */
// Each summary carries one highlighted phrase (rendered in cyan) so the
// section's most quotable claim is the first thing the eye lands on.
const INDUSTRIES = [
  {
    key: "ad", label: "Advertising & Marketing",
    company: "Kwai",
    scale: "400M+ daily active users",
    summary: (h) => <>Kwai unified {h("trillion-scale")} ad analytics on a single engine, replacing ClickHouse and Elasticsearch.</>,
    quote: "We dropped slow query rate from 35% to under 5% and reduced point query latency from 250ms to 12ms. Real-time campaign attribution across 4,000 query templates and 700 fields now runs on one engine instead of three.",
    author: "Engineering Team, Kwai",
    stats: [
      { n: "90%",       l: "Latency reduction" },
      { n: "3M/s",      l: "Rows ingested per node" },
      { n: "trillions", l: "Rows in single tables" },
    ],
  },
  {
    key: "ec", label: "E-commerce",
    company: "JD.com",
    scale: "China's largest retailer by revenue",
    summary: (h) => <>JD.com ingests {h("10 billion rows")} daily for live order tracking and conversion analytics at 10,000 concurrent queries per second.</>,
    quote: "We run live A/B testing and conversion funnel dashboards across 30+ backend nodes at peak traffic. Doris handles our most demanding real-time analytics workloads without architectural compromise.",
    author: "Engineering Team, JD.com",
    stats: [
      { n: "10B+",   l: "Rows ingested daily" },
      { n: "10K",    l: "Concurrent QPS" },
      { n: "150ms",  l: "Average query latency" },
    ],
  },
  {
    key: "fin", label: "FinTech & Payments",
    company: "Planet",
    scale: "Global payment infrastructure",
    summary: (h) => <>Planet processes {h("3 billion payment events")} daily with sub-second query latency across 100 concurrent dashboards.</>,
    quote: "Payment data that took 5 to 10 minutes to become queryable on Snowflake now lands in 1 to 2 seconds. Our analysts run multi-table JOINs across transaction, customer, and merchant dimensions in 1.5 seconds, and 100 concurrent dashboard sessions stay under 1.2 seconds average.",
    author: "Parth Soni, Senior Data Engineer, Planet",
    stats: [
      { n: "3B",    l: "Payment events per day" },
      { n: "1.5s",  l: "Multi-table JOIN response" },
      { n: "300x",  l: "Faster data availability" },
    ],
  },
  {
    key: "web3", label: "Web3 & Blockchain",
    company: "Ave.ai",
    scale: "500K daily active users",
    summary: (h) => <>Ave.ai delivers real-time DeFi analytics across {h("190+ blockchains")} to 10 million users with sub-5-second end-to-end latency.</>,
    quote: "We evaluated HBase, Snowflake, ClickHouse, Hologres, GaussDB, and TiDB. VeloDB was the only engine that handled real-time transaction tagging, sniper detection, and whale tracking alongside complex analytical queries on 10TB+ of blockchain data.",
    author: "Engineering Team, Ave.ai",
    stats: [
      { n: "190+",  l: "Blockchains covered" },
      { n: "<5s",   l: "End-to-end query latency" },
      { n: "10M",   l: "Users served" },
    ],
  },
  {
    key: "iot", label: "IoT & Manufacturing",
    company: "BYD",
    scale: "World's largest EV manufacturer",
    summary: (h) => <>BYD queries {h("100TB+ of telemetry")} with 5-second data freshness and 10x faster filtering on non-key columns.</>,
    quote: "Data latency dropped from 3 minutes to 5 seconds. Non-primary-key filters across telemetry columns run 10x faster, and the VARIANT type reduced JSON storage to less than a third of its original size while keeping full query performance on semi-structured sensor payloads.",
    author: "Engineering Team, BYD",
    stats: [
      { n: "5s",    l: "Data freshness, from 3 minutes" },
      { n: "10x",   l: "Faster ad-hoc filtering" },
      { n: "<1/3",  l: "JSON storage footprint" },
    ],
  },
];

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

        <div className="ind-tabs">
          {INDUSTRIES.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 LogoStrip() {
  const names = ["Kwai", "JD.com", "Planet Ave.ai", "BYD", "ByteDance", "Xiaomi", "Meituan", "ZTO", "Trip.com", "Baidu", "NetEase", "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 ============================ */
const CHALLENGES = [
  {
    cat: "Freshness",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z"/></svg>,
    title: "Fresh data, OR fast analytics. Pick one.",
    lines: [
      "PostgreSQL: real-time updates, but analytics takes hours.",
      "Snowflake: fast analytics, but data is minutes stale.",
    ],
    kicker: "You shouldn't have to choose.",
    body: "VeloDB delivers both. Streaming ingest via Routine Load, native CDC, and Stream Load makes data queryable in 1 to 5 seconds with full columnar analytics performance. No tradeoff between freshness and speed.",
  },
  {
    cat: "Concurrency",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="7" cy="8" r="2.5"/><circle cx="17" cy="8" r="2.5"/><circle cx="12" cy="6" r="2.5"/><path d="M3 19a4 4 0 014-4h2M14 15h3a4 4 0 014 4M9 18a3 3 0 013-3h0a3 3 0 013 3"/></svg>,
    title: "Thousands of users break OLAP.",
    lines: [
      "100 analysts? Fine.  10,000 concurrent dashboard users?",
      "Traditional OLAP engines hit a concurrency ceiling.",
    ],
    kicker: "Built for throughput, not for products.",
    body: "VeloDB's Short-Circuit Plan bypasses the full query planner for point lookups, cutting CPU by 4x. Hybrid Row+Column Storage eliminates random I/O on wide tables. Row Cache and Prepared Statements keep the hottest paths in memory. Latency stays flat as concurrency scales.",
  },
  {
    cat: "Mutability",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 11-3.2-6.9L21 8M21 3v5h-5M3 12a9 9 0 003.2 6.9L3 16M3 21v-5h5"/></svg>,
    title: "Updates kill query performance.",
    lines: [
      "CDC streams in. Compaction queues grow.",
      "Queries slow down. Reads return stale versions.",
    ],
    kicker: "Merge-on-Read makes you pay at query time.",
    body: "Merge-on-Write resolves record versions at write time. Reads never touch stale data. Query performance stays 5 to 10x faster on frequently updated datasets compared to merge-on-read engines.",
  },
  {
    cat: "Joins",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="2.5"/><circle cx="5" cy="18" r="2.5"/><circle cx="19" cy="18" r="2.5"/><path d="M11 7L6 16M13 7l5 9M7 18h10"/></svg>,
    title: "Joins need denormalization.",
    lines: [
      "Pre-flatten every table. Maintain stale copies.",
      "Storage bloats. Pipelines multiply.",
    ],
    kicker: "All because your engine can't join at speed.",
    body: "VeloDB's cost-based optimizer with statistics-driven join reorder scans 10x fewer rows. Broadcast, Shuffle, Bucket Shuffle, and Colocate join strategies are chosen automatically. No denormalization needed.",
  },
];

function Challenges() {
  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 real-time<br/>analytics at scale</h2>
        </div>
        <div className="chal-grid">
          {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, { ValueProps, Industries, LogoStrip, Challenges });