// Architecture — simplified 5-card engine + side accordion.

/* ---------- Engine card data ---------- */
const ENGINE_COLS = [
  {
    n: "01", title: "Data Sources",
    items: [
      { t: "OLTP Databases",   s: "Postgres \u00b7 MySQL" },
      { t: "Event Streams",    s: "Kafka \u00b7 CDC" },
      { t: "Lakehouse Files",  s: "Iceberg \u00b7 S3" },
    ],
  },
  {
    n: "02", title: "Ingestion",
    items: [
      { t: "Routine Load", s: "Continuous from Kafka" },
      { t: "Stream Load",  s: "HTTP streaming ingest" },
      { t: "Native CDC",   s: "Doris 4.1 integrated pipeline" },
      { t: "Flink CDC",    s: "Optional transform before ingest" },
    ],
  },
  {
    n: "03", title: "Update & Materialize", accent: true,
    items: [
      { t: "Unique Key Tables", s: "Fast primary-key upserts" },
      { t: "Merge-on-Write",    s: "Incremental row-level changes" },
      { t: "Materialized Views",s: "Precomputed query acceleration" },
    ],
  },
  {
    n: "04", title: "Analyze & Join",
    items: [
      { t: "Real-time SQL",         s: "Sub-second responses" },
      { t: "Multi-table Joins",     s: "Low-latency joins" },
      { t: "Cost-Based Optimizer",  s: "Statistics-driven planning" },
    ],
  },
  {
    n: "05", title: "Serve",
    items: [
      { t: "BI Tools",          s: "Dashboards & reports" },
      { t: "APIs",              s: "REST & GraphQL" },
      { t: "Apps",              s: "Embedded analytics" },
    ],
  },
];

function EngineCol({ 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 EngineBoard() {
  return (
    <div className="eng-board">
      <div className="eng-board-head">VeloDB real-time analytics engine</div>
      <div className="eng-cols">
        {ENGINE_COLS.map(c => <EngineCol key={c.n} col={c} />)}
      </div>
    </div>
  );
}

/* ---------- Accordion ---------- */
const ACCORDION = [
  {
    n: "01",
    title: "Real-time ingestion",
    body: [
      "Land Kafka, MySQL CDC, PostgreSQL CDC, and application writes directly into the engine in seconds. Routine Load, Stream Load, and Doris 4.1 native CDC make data queryable without staging layers or external pipelines.",
      "Operational changes from transactional systems become queryable in real time, without building a Debezium plus Kafka plus Flink pipeline for every source.",
    ],
  },
  {
    n: "02",
    title: "Real-time updates & materialized transformation",
    body: [
      "Keep mutable data fresh without rebuilding entire tables. VeloDB applies incremental updates on unique-key models, preserving low-latency ingestion while maintaining queryable consistency.",
      "Materialized transformations continuously reshape incoming data into analytics-ready forms, so downstream queries stay fast, predictable, and simple for product teams to serve.",
    ],
  },
  {
    n: "03",
    title: "Real-time analytics & joins",
    body: [
      "MPP SQL with cost-based optimization, runtime filters, and four join strategies. Modern real-time analytics is rarely single-table, and the engine plans joins across fresh facts and latest dimensions per query.",
      "The same engine serves production workloads. Prepared statements, short-circuit point queries, and row cache support 30K QPS per node at sub-10ms p99.",
    ],
  },
];

function Accordion() {
  const [open, setOpen] = React.useState(1);
  return (
    <div className="accordion">
      {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>
  );
}

/* ---------- Section ---------- */
function Architecture() {
  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 real-time analytics</h2>
          <p className="arch-2026-lede">
            Ingest fresh events and CDC changes, keep mutable records current, transform data with materialized views, and run live SQL joins from one unified engine.
          </p>
        </div>

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

Object.assign(window, { Architecture });