// Nav and Hero with live dashboard mock

const ArrowR = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
);

const ChevronDown = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg>
);

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-left">
          <a className="nav-wordmark"><img src="assets/velodb-wordmark.svg" alt="VeloDB" /></a>
          <div className="nav-links">
            <a className="nav-link active">Solutions <ChevronDown /></a>
            <a className="nav-link">Products <ChevronDown /></a>
            <a className="nav-link">Docs</a>
            <a className="nav-link">Resources <ChevronDown /></a>
            <a className="nav-link">Pricing</a>
          </div>
        </div>
        <div className="nav-actions">
          <a className="nav-link">Cloud Login</a>
          <button className="btn btn-velo btn-md">Start Free <ArrowR /></button>
        </div>
      </div>
    </nav>
  );
}

/* ============================ Live Dashboard Mock ============================ */
function LiveDashboard() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 900);
    return () => clearInterval(id);
  }, []);

  // Deterministic-ish wandering data
  const eps = 8421 + Math.round(Math.sin(tick / 3) * 380) + (tick % 7) * 11;
  const p99 = (8.2 + Math.sin(tick / 5) * 1.4 + (tick % 3) * 0.05).toFixed(1);
  const qps = 22743 + Math.round(Math.cos(tick / 4) * 940);
  const conc = 412 + (tick % 11);

  // Build sparkline path
  const points = Array.from({ length: 40 }, (_, i) => {
    const x = (i / 39) * 100;
    const y = 50 + Math.sin((i + tick) / 3) * 14 + Math.cos((i + tick) / 7) * 10;
    return [x, y];
  });
  const linePath = "M " + points.map(p => p.join(",")).join(" L ");
  const areaPath = linePath + ` L 100,100 L 0,100 Z`;

  const rows = [
    { name: "orders_facts", qps: "12.4K", lat: "4.2", state: "ok" },
    { name: "campaign_attr", qps: "8.1K", lat: "7.8", state: "ok" },
    { name: "user_sessions", qps: "5.2K", lat: "11.3", state: "warn" },
    { name: "device_metrics", qps: "16.9K", lat: "3.1", state: "ok" },
  ];

  return (
    <div className="dashboard">
      <div className="dash-head">
        <div className="dash-title">Live cluster · us-west-2 · prod-01</div>
        <div className="dash-dot"><span/><span/><span/></div>
      </div>
      <div className="dash-kpis">
        <div className="dash-kpi">
          <div className="label">Events / sec</div>
          <div className="value">{eps.toLocaleString()}<span className="unit"></span></div>
          <div className="delta">▲ 12.4% · 24h</div>
        </div>
        <div className="dash-kpi">
          <div className="label">p99 query latency</div>
          <div className="value">{p99}<span className="unit">ms</span></div>
          <div className="delta">▼ 0.3ms · 1h</div>
        </div>
      </div>
      <div className="dash-chart">
        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
          <defs>
            <linearGradient id="dashFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#1AECFF" stopOpacity="0.45" />
              <stop offset="100%" stopColor="#0BA2FF" stopOpacity="0.0" />
            </linearGradient>
          </defs>
          <path d={areaPath} fill="url(#dashFill)" />
          <path d={linePath} stroke="#1AECFF" strokeWidth="0.8" fill="none" vectorEffect="non-scaling-stroke" />
          {/* gridlines */}
          {[20,40,60,80].map(y => (
            <line key={y} x1="0" y1={y} x2="100" y2={y} stroke="rgba(255,255,255,0.04)" strokeWidth="0.4" />
          ))}
        </svg>
      </div>
      <div className="dash-rows">
        {rows.map(r => (
          <div className="dash-row" key={r.name}>
            <span className="name">{r.name}</span>
            <span className="qps">{r.qps} qps</span>
            <span className={`badge ${r.state}`}>{r.state === "ok" ? "healthy" : "p99 high"}</span>
            <span className="ms">{r.lat}ms</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero() {
  const bullets = [
    "Create user-facing dashboards and applications with instant responsiveness",
    "Drive decisions with data that's seconds old, not hours stale",
    "Run SQL analytics effortlessly on your most diverse, high-cardinality datasets",
    "Ingest streaming or CDC data from MySQL, Postgres, and Kafka without middleware",
    "Use Grafana, Tableau, Superset, and more through a MySQL-compatible interface",
  ];

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg" />
      <div className="hero-grid" />
      <div className="wrap">
        <div className="hero-inner">
          <div>
            <div className="breadcrumb">
              <span>Solutions</span>
              <span className="sep">/</span>
              <span className="here">Real-Time Analytics</span>
            </div>
            <h1 className="hero-title">
              Real-Time<br/><span className="accent">Analytics</span>
            </h1>
            <p className="hero-lede">
              Fast ingest, sub-second queries, and high concurrency on petabyte-scale data.
            </p>
            <div className="hero-bullets">
              {bullets.map(b => <div key={b} className="hero-bullet">{b}</div>)}
            </div>
            <div className="hero-ctas">
              <button className="btn btn-velo btn-lg">Get Started Free</button>
              <button className="btn btn-ghost btn-lg">Book a Consultation</button>
            </div>
          </div>
          <div className="hero-art">
            <img src="assets/rt-hero.png" alt="VeloDB real-time analytics engine" />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, ArrowR });