// Unified Stack landing page — Postgres-style layout: split hero with contact
// form, alternating dark/light sections, capability wheel, two-column sections
// with inline SVG diagrams + outcome boxes. Reuses pg-styles.css classes.

/* ============================ Contact form ============================ */
function USContactForm() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [company, setCompany] = React.useState("");
  const [size, setSize] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  if (sent) {
    return (
      <div className="pg-form pg-form-sent">
        <div className="pg-form-check">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
        </div>
        <div className="pg-form-thanks">Thanks, we'll be in touch within 1 business day.</div>
      </div>
    );
  }
  return (
    <form className="pg-form" onSubmit={onSubmit}>
      <div className="pg-form-head">
        <div className="pg-form-eyebrow">Talk to an engineer</div>
        <div className="pg-form-title">Tell us about your stack.</div>
      </div>
      <div className="pg-form-row">
        <label><span>Name</span>
          <input type="text" required value={name} onChange={e => setName(e.target.value)} placeholder="Jamie Chen" /></label>
        <label><span>Work email</span>
          <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="jamie@company.com" /></label>
      </div>
      <div className="pg-form-row">
        <label><span>Company</span>
          <input type="text" value={company} onChange={e => setCompany(e.target.value)} placeholder="Acme, Inc." /></label>
        <label><span>Team size</span>
          <select value={size} onChange={e => setSize(e.target.value)}>
            <option value="">Select</option>
            <option>1–10</option><option>11–50</option><option>51–200</option>
            <option>201–1000</option><option>1000+</option>
          </select></label>
      </div>
      <label className="pg-form-msg"><span>How many databases are in your analytical stack?</span>
        <textarea value={msg} onChange={e => setMsg(e.target.value)} rows={3} placeholder="OLAP, search, vectors, lakehouse..." /></label>
      <button type="submit" className="btn btn-velo btn-lg">Start free trial <ArrowR /></button>
      <div className="pg-form-foot">No credit card required. We respond within 1 business day.</div>
    </form>
  );
}

/* ============================ Hero (split with form) ============================ */
function USHero() {
  return (
    <section className="pg-hero pg-hero-split" data-screen-label="01 Hero">
      <div className="hero-bg" />
      <div className="hero-grid" />
      <div className="wrap">
        <div className="pg-hero-split-inner">
          <div className="pg-hero-l">
            <div className="pg-eyebrow">
              <span className="pg-badge">Unified Engine</span>
              <span>Real-time OLAP · Full-text search · Vector retrieval · One database</span>
            </div>
            <h1 className="pg-hero-title">
              Analytics, search, and AI<br/>
              on one <span className="accent">open-source</span><br/>
              engine.
            </h1>
            <p className="pg-hero-bullet">
              <span className="pg-hero-bullet-dot" />
              VeloDB unifies SQL, full-text, and vector retrieval in a single database, so your analysts and your agents pull from the same fresh source of truth in one query.
            </p>
            <div className="pg-hero-cta" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-velo btn-lg">Start free trial <ArrowR /></button>
              <button className="btn btn-ghost btn-lg">Talk to an engineer</button>
            </div>
            <p className="pg-hero-sub" style={{ marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-on-dark-64)", letterSpacing: "0.04em" }}>
              Built on Apache Doris. Open source. Runs on your cloud or ours.
            </p>
          </div>
          <div className="pg-hero-r">
            <USContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ Problem (light, 2-col with sprawl diagram) ============================ */
function USSprawlDiagram() {
  const systems = [
    { l: "Postgres", s: "transactions" },
    { l: "OLAP engine", s: "dashboards" },
    { l: "Elasticsearch", s: "log search" },
    { l: "Vector DB", s: "AI context" },
    { l: "Lakehouse", s: "ad hoc" },
  ];
  return (
    <svg viewBox="0 0 560 420" fill="none" preserveAspectRatio="xMidYMid meet" className="pg-diagram light">
      <text x="20" y="28" fontSize="11" fill="#FF6B7E" fontFamily="ui-monospace,monospace" letterSpacing="0.12em">FIVE SYSTEMS · FIVE PIPELINES</text>
      {/* app box */}
      <g transform="translate(210, 50)">
        <rect width="140" height="40" rx="8" fill="#eaf4ff" stroke="var(--velo-blue)" strokeWidth="1.2"/>
        <text x="70" y="24" textAnchor="middle" fontSize="12" fontWeight="600" fill="#0a60b5" fontFamily="Inter">Your application</text>
      </g>
      {/* 5 systems with separate pipelines */}
      {systems.map((sys, i) => {
        const x = 10 + i * 110;
        return (
          <g key={sys.l} transform={`translate(${x}, 150)`}>
            {/* pipeline arrow from app down to each system (tangled) */}
            <path d={`M ${270 - x} -56 Q ${270 - x} -20 50 -8`} stroke="#9aa3b2" strokeWidth="1" strokeDasharray="3 3" fill="none"/>
            <rect width="100" height="64" rx="8" fill="#f4f4f8" stroke="#9aa3b2" strokeWidth="1.1"/>
            <text x="50" y="28" textAnchor="middle" fontSize="11" fontWeight="600" fill="#3a4256" fontFamily="Inter">{sys.l}</text>
            <text x="50" y="46" textAnchor="middle" fontSize="9" fill="#6a7283" fontFamily="ui-monospace,monospace">{sys.s}</text>
            {/* its own little ETL tag */}
            <rect x="28" y="74" width="44" height="16" rx="4" fill="#fdf0f1" stroke="rgba(255,80,100,0.40)"/>
            <text x="50" y="86" textAnchor="middle" fontSize="8" fill="#c8525f" fontFamily="ui-monospace,monospace">ETL</text>
          </g>
        );
      })}
      {/* reconciliation chaos note */}
      <g transform="translate(20, 300)">
        <text x="0" y="0" fontSize="11" fill="#FF6B7E" fontFamily="ui-monospace,monospace" letterSpacing="0.10em">MULTIPLE SOURCES OF TRUTH THAT ALMOST AGREE</text>
        {[
          "5 separate pipelines, 5 query languages",
          "5 sets of credentials, 5 on-call rotations",
          "Reconciliation tax paid by your best engineer",
        ].map((t, i) => (
          <g key={t} transform={`translate(0, ${22 + i * 22})`}>
            <circle cx="5" cy="6" r="4" fill="none" stroke="#FF6B7E" strokeWidth="1.3"/>
            <path d="M3 6 L7 6" stroke="#FF6B7E" strokeWidth="1.3"/>
            <text x="18" y="10" fontSize="11" fill="#4a5572" fontFamily="Inter">{t}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

const US_PAINS = [
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="4" cy="4" r="2"/><circle cx="4" cy="16" r="2"/><circle cx="16" cy="10" r="2"/>
        <path d="M4 6v8M6 4h6a2 2 0 0 1 2 2v2M6 16h6a2 2 0 0 0 2-2v-2"/>
      </svg>
    ),
    t: "Pipelines on top of pipelines.",
    b: "Every new system means new ETL, new schema drift, and another place where last night's batch did not finish in time.",
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 6h11l-3-3M17 14H6l3 3"/><path d="M14 6l3 0M3 14l3 0"/>
      </svg>
    ),
    t: "Reconciliation tax.",
    b: "When your dashboard, your search index, and your vector store disagree, somebody has to figure out which one is right. That somebody is usually your best engineer.",
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 16l4-5 3 3 7-8"/><path d="M14 6h3v3"/>
      </svg>
    ),
    t: "Cost that compounds.",
    b: "Each system has its own license, its own compute footprint, and its own on-call rotation. The bill is not the sum of the parts. It is the product.",
  },
];

function USProblem() {
  return (
    <section className="pg-section light" data-screen-label="02 Problem">
      <div className="wrap">
        <div className="pg-2col reverse">
          <div className="pg-2col-visual">
            <div className="pg-vp-visual-wrap"><USSprawlDiagram /></div>
          </div>
          <div className="pg-2col-text">
            <div className="pg-pill-light"><span className="pg-pill-dot" />The cost of a multi-database stack</div>
            <h2 className="pg-section-title">You did not set out to run a fleet of analytical databases. It happened.</h2>
            <p className="pg-section-body">It usually starts with one Postgres. Then dashboards need to be faster, so you add a real-time OLAP engine. Logs need search, so Elasticsearch shows up. AI agents need context, so a vector database joins the stack. Maybe a lakehouse engine for ad hoc queries lands on top.</p>
            <p className="pg-section-body">Now your team maintains a separate pipeline for each system, a separate query language for each, a separate set of credentials for each, and multiple sources of truth that almost agree.</p>
            <div className="us-stat-callout light">
              <div className="us-stat-big">46%</div>
              <div className="us-stat-desc">of enterprises cite managing analytical databases across hybrid and multi-cloud environments as their top data challenge.
                <span className="us-stat-src">Source: Gartner, 2025</span>
              </div>
            </div>
          </div>
        </div>
        <div className="us-pain-grid">
          {US_PAINS.map((p) => (
            <div className="us-pain-card" key={p.t}>
              <div className="us-pain-icon">{p.icon}</div>
              <div className="us-pain-title">{p.t}</div>
              <div className="us-pain-body">{p.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ Solution (dark, capability wheel) ============================ */
function USCapabilityWheel() {
  const nodes = [
    { angle: -90, label: "Real-Time OLAP", icon: "bars" },
    { angle: -18, label: "Full-Text Search", icon: "search" },
    { angle:  54, label: "Vector Retrieval", icon: "vector" },
    { angle: 126, label: "Lakehouse Query", icon: "lake" },
    { angle: 198, label: "One SQL Dialect", icon: "sql" },
  ];
  const cx = 280, cy = 250, R = 175;
  const IconFor = ({ name, x, y }) => {
    const props = { stroke: "var(--velo-cyan)", strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
    const t = `translate(${x - 10},${y - 10})`;
    if (name === "bars") return <g transform={t} {...props}><rect x="3" y="11" width="3" height="8"/><rect x="8.5" y="6" width="3" height="13"/><rect x="14" y="2" width="3" height="17"/></g>;
    if (name === "search") return <g transform={t} {...props}><circle cx="8" cy="8" r="6"/><path d="M13 13l5 5"/></g>;
    if (name === "vector") return <g transform={t} {...props}><circle cx="10" cy="10" r="3"/><circle cx="3" cy="4" r="1.6"/><circle cx="17" cy="4" r="1.6"/><circle cx="3" cy="16" r="1.6"/><circle cx="17" cy="16" r="1.6"/><path d="M5 5l3 3M15 5l-3 3M5 15l3-3M15 15l-3-3"/></g>;
    if (name === "lake") return <g transform={t} {...props}><ellipse cx="10" cy="4" rx="8" ry="2.5"/><path d="M2 4v12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V4"/></g>;
    if (name === "sql") return <g transform={t} {...props}><path d="M14 4l4 6-4 6M6 4L2 10l4 6"/></g>;
    return null;
  };
  return (
    <svg viewBox="0 0 560 500" fill="none" preserveAspectRatio="xMidYMid meet" className="pg-wheel">
      {nodes.map((n, i) => {
        const rad = (n.angle * Math.PI) / 180;
        const x = cx + Math.cos(rad) * R, y = cy + Math.sin(rad) * R;
        const hx = cx + Math.cos(rad) * 74, hy = cy + Math.sin(rad) * 74;
        return <line key={i} x1={hx} y1={hy} x2={x} y2={y} stroke="rgba(26,236,255,0.30)" strokeWidth="1"/>;
      })}
      <g transform={`translate(${cx}, ${cy})`}>
        <polygon points="0,-82 71,-41 71,41 0,82 -71,41 -71,-41" fill="rgba(11,162,255,0.08)" stroke="var(--velo-cyan)" strokeWidth="1.6"/>
        <text textAnchor="middle" y="-14" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--velo-cyan)" letterSpacing="0.14em">ONE ENGINE</text>
        <text textAnchor="middle" y="8" fontFamily="Inter, sans-serif" fontSize="14" fontWeight="700" fill="#fff">VeloDB</text>
        <text textAnchor="middle" y="28" fontFamily="ui-monospace,monospace" fontSize="9" fill="rgba(255,255,255,0.55)">Apache Doris</text>
      </g>
      {nodes.map((n, i) => {
        const rad = (n.angle * Math.PI) / 180;
        const x = cx + Math.cos(rad) * R, y = cy + Math.sin(rad) * R;
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="46" fill="#0a0d1f" stroke="var(--velo-cyan)" strokeWidth="1.3"/>
            <IconFor name={n.icon} x={x} y={y - 12}/>
            <text x={x} y={y + 16} textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="10" fontWeight="600" fill="#fff">
              {n.label.split(" ").map((w, j) => <tspan key={j} x={x} dy={j === 0 ? 0 : 11}>{w}</tspan>)}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

const US_CAPS = [
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="12" width="3.4" height="7"/><rect x="9.3" y="7" width="3.4" height="12"/><rect x="15.6" y="3" width="3.4" height="16"/>
      </svg>
    ),
    t: "Real-time OLAP at scale.",
    b: <>Sub-second query latency with thousands of concurrent users, complex joins, and <strong>25% or more of your data changing every hour</strong>. The workloads that break other systems are the workloads VeloDB was designed for.</>,
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="9" cy="9" r="6.5"/><path d="M14 14l5 5"/>
      </svg>
    ),
    t: "Full-text search, columnar speed.",
    b: <>Native inverted index for keyword search, sitting on the same columnar storage that powers your aggregations. Run a search and a GROUP BY in the same SQL statement.</>,
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="11" cy="11" r="3"/><circle cx="3.5" cy="4.5" r="1.8"/><circle cx="18.5" cy="4.5" r="1.8"/><circle cx="3.5" cy="17.5" r="1.8"/><circle cx="18.5" cy="17.5" r="1.8"/>
        <path d="M5 6l3.5 3.5M17 6l-3.5 3.5M5 16l3.5-3.5M17 16l-3.5-3.5"/>
      </svg>
    ),
    t: "Hybrid search for AI retrieval.",
    b: <>Dense vector similarity, BM25 keyword matching, and ANSI SQL filtering in one query. Pure vector search has known limits. Combining all three <strong>boosts RAG retrieval accuracy by 20% to 30%</strong>.</>,
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <ellipse cx="11" cy="5" rx="8" ry="2.6"/><path d="M3 5v12c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6V5"/><path d="M3 11c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6"/>
      </svg>
    ),
    t: "Lakehouse-ready.",
    b: <>Query <strong>Iceberg, Hudi, Paimon, and Delta Lake</strong> tables in place. Bring the analytics to the data instead of moving the data to the analytics.</>,
  },
];

function USSolution() {
  return (
    <section className="pg-section dark" data-screen-label="03 Solution">
      <div className="wrap">
        <div className="pg-2col">
          <div className="pg-2col-text">
            <div className="pg-pill-light" style={{ background: "rgba(26,236,255,0.10)", borderColor: "rgba(26,236,255,0.40)", color: "var(--velo-cyan)" }}>
              <span className="pg-pill-dot" style={{ background: "var(--velo-cyan)" }} />Why VeloDB
            </div>
            <h2 className="pg-section-title on-dark">One engine. Multiple workloads. No compromise.</h2>
            <p className="pg-section-body on-dark">VeloDB is the commercial distribution of Apache Doris, the open-source real-time OLAP database. We built it so a single deployment can do the work of a lakehouse query engine, a real-time analytical database, a search engine, and a vector store, in whatever combination your team actually needs.</p>
            <p className="pg-section-body on-dark">That is not a marketing claim. It is the architecture.</p>
          </div>
          <div className="pg-2col-visual">
            <div className="pg-vp-visual-wrap"><USCapabilityWheel /></div>
          </div>
        </div>
        <div className="us-cap-grid">
          {US_CAPS.map((c) => (
            <div className="us-cap-card" key={c.t}>
              <div className="us-cap-icon">{c.icon}</div>
              <div className="us-cap-title">{c.t}</div>
              <div className="us-cap-body">{c.b}</div>
            </div>
          ))}
        </div>
        <div className="us-solution-callout center">The result: one connection string, one access policy, one source of truth your dashboards and your agents both query.</div>
      </div>
    </section>
  );
}

Object.assign(window, { USHero, USProblem, USSolution });