// Section 6 — "Built for 2 to 200,000" — commercial, not engineering

function BuiltForScale() {
  return (
    <section id="architecture" style={{ padding: "140px 60px", borderTop: "1px solid rgb(255 255 255 / 0.06)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 60% 50% at 50% 50%, oklch(0.54 0.23 27 / 0.08), transparent 60%)" }} />
      <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
        <div className="eyebrow" style={{ marginBottom: 20, textAlign: "center" }}>How it scales</div>
        <h2 style={{ fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: 0, marginBottom: 24, textAlign: "center", textWrap: "balance" }}>
          Built for <span style={{ color: "var(--color-primary)" }}>2</span> to <span style={{ color: "var(--color-primary)" }}>200,000</span>.
        </h2>
        <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 720, margin: "0 auto 72px", textAlign: "center", textWrap: "pretty" }}>
          A Tuesday-night niche stream and a Saturday-night festival run on exactly the same platform. No enterprise tier, no scaling cliff, no emergency call to a sales rep when the audience shows up.
        </p>

        <ScaleBar />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 96 }}>
          {[
            { n: "01", t: "Sub-50ms everywhere", d: "Your viewers get the stream from a local point of presence, not a distant origin server. A viewer in Seoul and a viewer in São Paulo have the same experience." },
            { n: "02", t: "Real-time that actually stays real-time", d: "Chat, viewer counts, moderation — the pieces that break first on most platforms — are engineered to stay responsive from 50 viewers to 200,000." },
            { n: "03", t: "One price model, no cliff", d: "Per-viewer-hour that tracks your usage. No 'talk to sales' tier. No 30-day contract renegotiation the week before your event." },
          ].map(p => (
            <div key={p.n}>
              <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-primary)", marginBottom: 12 }}>{p.n}</div>
              <div style={{ fontSize: 20, fontWeight: 600, color: "var(--fg-1)", marginBottom: 10, letterSpacing: "-0.015em" }}>{p.t}</div>
              <div style={{ fontSize: 15, color: "var(--fg-2)", lineHeight: 1.55, textWrap: "pretty" }}>{p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ScaleBar() {
  const marks = [
    { v: 2, label: "2", desc: "Private rehearsal" },
    { v: 200, label: "200", desc: "Small community" },
    { v: 2000, label: "2K", desc: "Club night" },
    { v: 20000, label: "20K", desc: "Mid-tier festival" },
    { v: 200000, label: "200K", desc: "Main-stage headliner" },
  ];
  return (
    <div className="scale-bar" style={{ padding: "48px 24px", borderRadius: 20, background: "rgb(255 255 255 / 0.02)", border: "1px solid rgb(255 255 255 / 0.08)" }}>
      <div className="scale-scroll">
      <div className="scale-track" style={{ position: "relative", height: 70, padding: "0 40px" }}>
        <div style={{ position: "absolute", left: 40, right: 40, top: 24, height: 3, borderRadius: 999,
          background: "linear-gradient(to right, rgb(255 255 255 / 0.1), var(--color-primary))" }} />
        {marks.map((m, i) => {
          const pct = (i / (marks.length - 1)) * 100;
          return (
            <div key={m.v} style={{ position: "absolute", left: `calc(40px + (100% - 80px) * ${pct / 100})`, top: 0, transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
              <div style={{ width: 14, height: 14, borderRadius: 99, background: "var(--color-primary)", border: "3px solid oklch(0.13 0.01 260)", boxShadow: "0 0 20px rgb(217 36 42 / 0.4)" }} />
              <div style={{ marginTop: 8, fontSize: 20, fontWeight: 700, color: "var(--fg-1)", letterSpacing: "-0.02em" }}>{m.label}</div>
              <div style={{ fontSize: 11, color: "var(--fg-3)", whiteSpace: "nowrap" }}>{m.desc}</div>
            </div>
          );
        })}
      </div>
      </div>
      <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid rgb(255 255 255 / 0.06)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>
        <span>CONCURRENT VIEWERS</span>
        <span>LOAD-TESTED · HANDLED · SAME INFRASTRUCTURE</span>
      </div>
    </div>
  );
}

window.BuiltForScale = BuiltForScale;