// pages.jsx — Status, Changelog, Discord, About (sub-pages)
const { useState: useStateP, useEffect: useEffectP } = React;

/* ---------------- Shared sub-page header ---------------- */
const PAGE_LINKS = [["AI Chatbot", "ai-chatbot"], ["KCIP Fix", "kcip"], ["About", "about"], ["Changelog", "changelog"], ["Status", "status"], ["Support", "discord"]];

function PageHeader({ route, onNav }) {
  const [scrolled, setScrolled] = useStateP(false);
  const [menuOpen, setMenuOpen] = useStateP(false);
  useEffectP(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", fn, { passive: true }); fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <div style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50, display: "flex", flexDirection: "column", alignItems: "center", padding: scrolled ? "12px 16px" : "20px 16px", transition: "padding .3s" }}>
      <div className="glass" style={{ width: "100%", maxWidth: "var(--maxw)", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px 10px 18px", borderRadius: 999, boxShadow: scrolled ? "var(--shadow-2)" : "var(--shadow-1)", transition: "box-shadow .3s" }}>
        <Logo size={26} onClick={() => onNav("landing")} />
        <nav style={{ display: "flex", gap: 4, position: "absolute", left: "50%", transform: "translateX(-50%)" }} className="nav-links">
          {SITE_LINKS.map(([label, target]) => {
            const on = siteNavActive(target, route);
            return (
              <button key={target} onClick={siteNavGo(target, route, onNav)} style={{
                padding: "8px 14px", borderRadius: 999, fontSize: 14, fontWeight: on ? 560 : 500, border: "none", cursor: "pointer",
                color: on ? "var(--ink)" : "var(--ink-2)", background: on ? "var(--glass-fill)" : "transparent", transition: "color .2s, background .2s",
              }}
                onMouseEnter={e => { if (!on) { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.background = "var(--glass-fill)"; } }}
                onMouseLeave={e => { if (!on) { e.currentTarget.style.color = "var(--ink-2)"; e.currentTarget.style.background = "transparent"; } }}>
                {label}
              </button>
            );
          })}
        </nav>
        <div className="nav-actions-desktop" style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <button className="btn btn-ghost btn-sm" onClick={() => onNav("login")} style={{ borderRadius: 999 }}>Log in</button>
          <button className="btn btn-primary btn-sm" onClick={() => onNav("signup")}>Get KVB <Icon name="arrow" size={15} /></button>
        </div>
        <button className="nav-burger" aria-label="Menu" onClick={() => setMenuOpen(o => !o)} style={{
          display: "none", width: 40, height: 40, borderRadius: 999, border: "1px solid var(--glass-border)",
          background: "var(--glass-fill)", color: "var(--ink)", cursor: "pointer", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 4,
        }}>
          <span style={{ width: 16, height: 2, background: "currentColor", borderRadius: 2, transition: "transform .25s", transform: menuOpen ? "translateY(3px) rotate(45deg)" : "none" }} />
          <span style={{ width: 16, height: 2, background: "currentColor", borderRadius: 2, transition: "transform .25s", transform: menuOpen ? "translateY(-3px) rotate(-45deg)" : "none" }} />
        </button>
      </div>

      <div className="nav-mobile-menu" style={{
        display: "none", width: "100%", maxWidth: "var(--maxw)", marginTop: 8,
        maxHeight: menuOpen ? 360 : 0, opacity: menuOpen ? 1 : 0, overflow: "hidden",
        transition: "max-height .3s cubic-bezier(.2,.7,.3,1), opacity .25s",
      }}>
        <div className="glass" style={{ borderRadius: "var(--radius)", padding: 12, boxShadow: "var(--shadow-2)" }}>
          <div className="stack" style={{ gap: 2 }}>
            {SITE_LINKS.map(([label, target]) => (
              <button key={target} onClick={siteNavGo(target, route, onNav, () => setMenuOpen(false))} style={{ textAlign: "left", padding: "12px 14px", borderRadius: 12, fontSize: 15, fontWeight: siteNavActive(target, route) ? 600 : 500, border: "none", cursor: "pointer", background: siteNavActive(target, route) ? "var(--glass-fill)" : "transparent", color: "var(--ink)" }}>{label}</button>
            ))}
          </div>
          <hr className="divider" style={{ margin: "10px 0" }} />
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-ghost" onClick={() => { setMenuOpen(false); onNav("login"); }} style={{ flex: 1, justifyContent: "center" }}>Log in</button>
            <button className="btn btn-primary" onClick={() => { setMenuOpen(false); onNav("signup"); }} style={{ flex: 1, justifyContent: "center" }}>Get KVB</button>
          </div>
        </div>
      </div>

      <style>{`@media (max-width: 860px){
        .nav-links{ display:none !important; }
        .nav-actions-desktop{ display:none !important; }
        .nav-burger{ display:flex !important; }
        .nav-mobile-menu{ display:block !important; }
      }`}</style>
    </div>
  );
}

function PageShell({ route, onNav, children }) {
  return (
    <React.Fragment>
      <PageHeader route={route} onNav={onNav} />
      <div style={{ position: "relative", zIndex: 1, paddingTop: 132 }}>{children}</div>
      <Footer onNav={onNav} />
    </React.Fragment>
  );
}

function PageHero({ eyebrow, title, sub, children }) {
  return (
    <section className="section" style={{ padding: "20px 0 8px" }}>
      <div className="wrap">
        <Reveal>
          {eyebrow && <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>{eyebrow}</div>}
          <h1 className="h-display" style={{ fontSize: "clamp(40px,6vw,76px)", margin: "16px 0 0", maxWidth: 760 }}>{title}</h1>
          {sub && <p className="body-lg" style={{ maxWidth: 560, marginTop: 18 }}>{sub}</p>}
          {children}
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   STATUS PAGE
   ============================================================ */
// Everything on this page comes from /app/api/status.php — the live per-service probes plus the
// incidents and monitoring coverage that status-monitor.php records every 5 minutes. Nothing is
// hardcoded. The previous version shipped a fixed service list, three invented incidents, a
// literal "99.98%" and uptime bars drawn from a seeded RNG, so it reported "All systems
// operational" straight through a multi-day outage.
const STATUS_API = "/app/api/status.php";
const STATUS_META = {
  operational: { label: "Operational", cls: "ok" },
  degraded: { label: "Degraded performance", cls: "warn" },
  outage: { label: "Outage", cls: "bad" },
};

function statusTone(v) {
  if (v === "outage") return "oklch(0.65 0.20 25)";
  if (v === "degraded") return "oklch(0.82 0.15 75)";
  if (v === "nodata") return "var(--ink-2)";
  return "color-mix(in oklch, var(--accent) 70%, transparent)";
}

function fmtDuration(secs) {
  if (secs == null) return "";
  const s = Math.max(0, secs | 0);
  if (s < 60) return s + "s";
  if (s < 3600) return Math.round(s / 60) + "m";
  if (s < 86400) return (s / 3600).toFixed(1).replace(/\.0$/, "") + "h";
  return (s / 86400).toFixed(1).replace(/\.0$/, "") + "d";
}

function fmtWhen(iso) {
  if (!iso) return "";
  const d = new Date(String(iso).replace(" ", "T"));
  if (isNaN(d)) return String(iso);
  return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
}

// One bar per day. A day the monitor never ran renders as "no data" instead of green — claiming
// uptime for a window nobody measured is exactly the lie this page used to tell.
function UptimeBars({ marks, days }) {
  const ticks = Array.isArray(marks) ? marks : [];
  if (!ticks.length) {
    return <div className="cap" style={{ fontSize: 12, opacity: 0.7 }}>No history recorded yet</div>;
  }
  return (
    <div style={{ display: "flex", gap: 2, alignItems: "flex-end", height: 30 }}>
      {ticks.map((v, i) => (
        <div key={i} title={(days && days[i] ? days[i] + " — " : "") + (v === "nodata" ? "not monitored" : v)} style={{
          flex: 1, height: "100%", borderRadius: 2, minWidth: 2,
          background: statusTone(v),
          opacity: v === "nodata" ? 0.18 : 0.45 + (i / ticks.length) * 0.55,
        }} />
      ))}
    </div>
  );
}

function StatusPage({ onNav }) {
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const [age, setAge] = React.useState(0);

  React.useEffect(() => {
    let alive = true;
    let fetchedAt = 0;
    const load = () => {
      fetch(STATUS_API, { cache: "no-store" })
        .then(r => { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
        .then(j => { if (!alive) return; setData(j); setErr(null); fetchedAt = Date.now(); setAge(0); })
        .catch(e => { if (alive) setErr(String(e && e.message || e)); });
    };
    load();
    const poll = setInterval(load, 60000);                       // the page claims 60s; make it true
    const ticker = setInterval(() => {
      if (fetchedAt) setAge(Math.round((Date.now() - fetchedAt) / 1000));
    }, 1000);
    return () => { alive = false; clearInterval(poll); clearInterval(ticker); };
  }, []);

  const services = (data && data.services) || [];
  const incidents = (data && data.incidents) || [];
  const allOk = !!(data && data.all_ok);
  const headline = !data
    ? (err ? "Status unavailable" : "Checking services…")
    : (allOk ? "All systems operational" : `${data.operational} of ${data.total} systems operational`);
  const headTone = !data ? "var(--ink-2)" : (allOk ? null : statusTone(services.some(s => s.status === "outage") ? "outage" : "degraded"));

  return (
    <PageShell route="status" onNav={onNav}>
      <section className="section" style={{ padding: "20px 0 8px" }}>
        <div className="wrap">
          <Reveal>
            <div className="eyebrow">System status</div>
            <div className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(24px,3vw,36px)", marginTop: 18, display: "flex", alignItems: "center", gap: 20, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 130% at 0% 0%, var(--accent-glow), transparent 60%)", opacity: 0.4 }} />
              <div style={{ width: 56, height: 56, borderRadius: 16, flexShrink: 0, display: "grid", placeItems: "center", background: headTone ? `linear-gradient(160deg, ${headTone}, ${headTone})` : "linear-gradient(160deg, var(--accent), var(--accent-deep))", color: "var(--accent-ink)", boxShadow: headTone ? "none" : "0 0 30px var(--accent-glow)", position: "relative" }}>
                <Icon name={!data ? "gauge" : (allOk ? "check" : "flag")} size={28} stroke={2.6} />
              </div>
              <div style={{ position: "relative", flex: 1 }}>
                <h1 className="h1" style={{ fontSize: "clamp(26px,3vw,38px)" }}>{headline}</h1>
                <p className="cap" style={{ marginTop: 6 }}>
                  {err && !data
                    ? `Could not reach the status service (${err})`
                    : data
                      ? `Updated ${age < 5 ? "just now" : age + "s ago"} · auto-refreshes every 60s`
                      : "Contacting the status service…"}
                </p>
              </div>
              <div style={{ textAlign: "right" }} className="status-upt">
                <div style={{ fontSize: 34, fontWeight: 720, letterSpacing: "-0.03em", color: "var(--accent)" }}>
                  {data && data.uptime_overall != null ? data.uptime_overall.toFixed(2) + "%" : "—"}
                </div>
                <div className="cap">
                  {data && data.measured_days
                    ? `uptime · ${data.measured_days} day${data.measured_days === 1 ? "" : "s"} measured`
                    : "uptime · not yet measured"}
                </div>
              </div>
            </div>
          </Reveal>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14, marginTop: 14 }} className="rg3">
            {[
              ["Avg response", data && data.avg_response != null ? data.avg_response + "ms" : "—", "gauge"],
              ["Active sessions", data && data.active_sessions != null ? data.active_sessions.toLocaleString() : "—", "signal"],
              ["Incidents (30d)", data ? String(incidents.length) : "—", "flag"],
            ].map(([l, v, ic]) => (
              <Reveal key={l} className="glass" style={{ borderRadius: "var(--radius-sm)", padding: 20 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                  <span className="cap">{l}</span><span style={{ color: "var(--accent)" }}><Icon name={ic} size={17} /></span>
                </div>
                <div style={{ fontSize: 27, fontWeight: 680, letterSpacing: "-0.03em" }}>{v}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ padding: "30px 0" }}>
        <div className="wrap">
          <Reveal className="glass" style={{ borderRadius: "var(--radius)", padding: "10px clamp(14px,2vw,24px)" }}>
            {!services.length && (
              <div className="cap" style={{ padding: "22px 4px" }}>
                {err ? "Service list unavailable — the status feed could not be reached." : "Loading services…"}
              </div>
            )}
            {services.map((svc, i) => {
              const meta = STATUS_META[svc.status] || STATUS_META.operational;
              return (
                <div key={svc.key} style={{ display: "grid", gridTemplateColumns: "1.4fr 2fr auto", alignItems: "center", gap: 20, padding: "18px 4px", borderBottom: i < services.length - 1 ? "1px solid var(--glass-border-soft)" : "none" }} className="status-row">
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span style={{ color: "var(--ink-2)" }}><Icon name={svc.icon} size={18} /></span>
                    <span style={{ fontWeight: 540, fontSize: 15 }}>{svc.key}</span>
                  </div>
                  <div className="status-bars"><UptimeBars marks={svc.marks} days={data && data.history_days} /></div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: "flex-end" }}>
                    <span className="cap" style={{ fontVariantNumeric: "tabular-nums" }}>
                      {svc.uptime != null ? svc.uptime.toFixed(2) + "%" : "—"}
                    </span>
                    <span className={"status " + meta.cls}><span className="sd" /> {meta.label}</span>
                  </div>
                </div>
              );
            })}
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ padding: "10px 0 40px" }}>
        <div className="wrap">
          <Reveal><h2 className="h2" style={{ marginBottom: 22 }}>Incident history</h2></Reveal>
          <div className="stack" style={{ gap: 12 }}>
            {data && !incidents.length && (
              <Reveal className="glass" style={{ borderRadius: "var(--radius-sm)", padding: "20px 24px" }}>
                <p className="body" style={{ fontSize: 14, margin: 0 }}>
                  No incidents recorded in the last 30 days.
                  {data.measured_since ? ` Automated monitoring has been recording since ${data.measured_since}.` : ""}
                </p>
              </Reveal>
            )}
            {incidents.map((inc, i) => {
              const ongoing = !inc.resolved_at;
              const sev = inc.severity === "outage" ? "Outage" : "Degraded performance";
              return (
                <Reveal key={i} delay={i * 0.05} className="glass" style={{ borderRadius: "var(--radius-sm)", padding: "20px 24px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
                    <div style={{ flex: 1, minWidth: 240 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8, flexWrap: "wrap" }}>
                        <span className={"status " + (ongoing ? (inc.severity === "outage" ? "bad" : "warn") : "ok")}>
                          <span className="sd" /> {ongoing ? "Investigating" : "Resolved"}
                        </span>
                        <span className="h3" style={{ fontSize: 16, fontWeight: 560 }}>{inc.service} — {sev.toLowerCase()}</span>
                      </div>
                      <p className="body" style={{ fontSize: 14, margin: 0 }}>
                        {ongoing
                          ? `Detected by automated monitoring; ongoing for ${fmtDuration(inc.duration_secs)}.`
                          : `Detected by automated monitoring. Lasted ${fmtDuration(inc.duration_secs)}, resolved ${fmtWhen(inc.resolved_at)}.`}
                      </p>
                    </div>
                    <span className="cap" style={{ flexShrink: 0 }}>{fmtWhen(inc.started_at)}</span>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

/* ============================================================
   CHANGELOG PAGE
   ============================================================ */
const TAG_STYLE = {
  New: { bg: "color-mix(in oklch, var(--accent) 16%, transparent)", fg: "var(--accent)", bd: "color-mix(in oklch, var(--accent) 34%, transparent)" },
  Improved: { bg: "color-mix(in oklch, oklch(0.7 0.13 250) 18%, transparent)", fg: "oklch(0.8 0.12 250)", bd: "color-mix(in oklch, oklch(0.7 0.13 250) 36%, transparent)" },
  Fixed: { bg: "color-mix(in oklch, oklch(0.8 0.14 75) 16%, transparent)", fg: "oklch(0.84 0.14 75)", bd: "color-mix(in oklch, oklch(0.8 0.14 75) 34%, transparent)" },
};
function Tag({ kind }) {
  const s = TAG_STYLE[kind] || TAG_STYLE.New;
  return <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: "0.02em", padding: "3px 9px", borderRadius: 999, background: s.bg, color: s.fg, border: `1px solid ${s.bd}` }}>{kind}</span>;
}

const RELEASES = [
  { v: "2.0.0", date: "June 6, 2026", title: "KVB 2.0 — the rebuild", featured: true,
    items: [["New", "Brand-new dashboard with live charts for every bot"], ["New", "AI Chatbot, Poll Bot & Clip Viewbot added to the toolkit"], ["New", "Auto-Start Slots — bots launch the moment you go live"], ["Improved", "Server-sided engine now sustains 5,000 concurrent viewers"], ["Improved", "Connect times cut by ~20% with the new routing layer"]] },
  { v: "1.9.0", date: "May 18, 2026", title: "Smarter chat & routing",
    items: [["New", "Personality presets for the Chat Bot (Hype, Casual, Support)"], ["Improved", "Region routing for viewers (NA / EU / Asia)"], ["Fixed", "Rare disconnect when switching channels mid-session"]] },
  { v: "1.8.0", date: "April 29, 2026", title: "Follow Bot overhaul",
    items: [["New", "Natural drip pacing so growth never looks artificial"], ["New", "Follower milestone tracking"], ["Fixed", "Credits occasionally double-counting on annual plans"]] },
  { v: "1.7.0", date: "April 2, 2026", title: "Performance pass",
    items: [["Improved", "0% local CPU usage — fully server-sided delivery"], ["Improved", "Dashboard loads ~2× faster"], ["Fixed", "Dark-mode contrast issues on the billing page"]] },
];

function ChangelogPage({ onNav }) {
  return (
    <PageShell route="changelog" onNav={onNav}>
      <PageHero eyebrow={<><Icon name="book" size={14} /> Changelog</>} title="What's new in KVB"
        sub="Every improvement we ship, in one place. We update KVB every week to stay ahead of the curve." />
      <section className="section" style={{ padding: "44px 0 30px" }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <div style={{ position: "relative" }}>
            <div style={{ position: "absolute", left: 7, top: 8, bottom: 8, width: 2, background: "var(--glass-border)" }} className="cl-line" />
            <div className="stack" style={{ gap: 26 }}>
              {RELEASES.map((rel, i) => (
                <Reveal key={rel.v} delay={Math.min(i * 0.05, 0.2)} style={{ position: "relative", paddingLeft: 36 }} className="cl-row">
                  <div style={{ position: "absolute", left: 0, top: 6, width: 16, height: 16, borderRadius: "50%", background: rel.featured ? "var(--accent)" : "var(--bg-1)", border: `2px solid ${rel.featured ? "var(--accent)" : "var(--glass-border)"}`, boxShadow: rel.featured ? "0 0 16px var(--accent-glow)" : "none" }} />
                  <div className={rel.featured ? "glass-strong" : "glass"} style={{ borderRadius: "var(--radius)", padding: "24px 26px", boxShadow: rel.featured ? "var(--shadow-2), 0 0 50px -22px var(--accent-glow)" : undefined }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
                      <span style={{ fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em" }}>v{rel.v}</span>
                      {rel.featured && <Tag kind="New" />}
                      <span className="cap" style={{ marginLeft: "auto" }}>{rel.date}</span>
                    </div>
                    <h3 className="h3" style={{ fontSize: 18, marginBottom: 16 }}>{rel.title}</h3>
                    <div className="stack" style={{ gap: 11 }}>
                      {rel.items.map(([k, txt], j) => (
                        <div key={j} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                          <span style={{ flexShrink: 0, marginTop: 1 }}><Tag kind={k} /></span>
                          <span className="body" style={{ fontSize: 14.5, color: "var(--ink-2)" }}>{txt}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>
    </PageShell>
  );
}

/* ============================================================
   DISCORD PAGE
   ============================================================ */
const DISCORD_PERKS = [
  ["headset", "24/7 live support", "Get help from our team and community any hour of the day — most questions answered in minutes."],
  ["trophy", "Giveaways & drops", "Free credits, plan upgrades and viewer boosts dropped regularly for active members."],
  ["zap", "Early access", "Be first to try new bots and features before they hit everyone else."],
  ["star", "Holiday discounts", "Exclusive promo codes around Christmas, Halloween and every major holiday."],
  ["users", "Creator network", "Connect with thousands of streamers growing their channels with KVB."],
  ["bolt", "Status & updates", "Instant notifications for new releases, maintenance and incident updates."],
];
const DISCORD_CHANNELS = [
  ["announcements", "New drops & release notes"],
  ["support", "Get help fast"],
  ["giveaways", "Free credits & boosts"],
  ["general", "Hang with the community"],
];

function DiscordPage({ onNav }) {
  return (
    <PageShell route="discord" onNav={onNav}>
      <section className="section" style={{ padding: "20px 0 10px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 40, alignItems: "center" }} className="disc-grid">
            <Reveal>
              <div className="chip" style={{ marginBottom: 20 }}><span className="dot" /> 18,400+ members · 2,140 online</div>
              <h1 className="h-display" style={{ fontSize: "clamp(40px,6vw,74px)" }}>Join the <span className="accent-text">KVB</span> community</h1>
              <p className="body-lg" style={{ maxWidth: 480, marginTop: 18 }}>
                Support, giveaways, early access and thousands of streamers leveling up together. The fastest way to get help — and free stuff.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}><Icon name="message" size={17} /> Join the Discord</button>
                <button className="btn btn-ghost btn-lg" onClick={() => onNav("about")}>About KVB</button>
              </div>
              <div style={{ display: "flex", gap: 28, marginTop: 34 }}>
                {[["18.4K", "Members"], ["2,140", "Online now"], ["24/7", "Support"]].map(([v, l]) => (
                  <div key={l}>
                    <div style={{ fontSize: 26, fontWeight: 720, letterSpacing: "-0.03em", color: "var(--accent)" }}>{v}</div>
                    <div className="cap">{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal delay={0.12}>
              <div className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: 18, boxShadow: "var(--shadow-float), 0 0 70px -30px var(--accent-glow)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "6px 8px 16px", borderBottom: "1px solid var(--glass-border-soft)" }}>
                  <div style={{ width: 42, height: 42, borderRadius: 12, background: "linear-gradient(150deg, var(--accent), var(--accent-deep))", display: "grid", placeItems: "center", color: "var(--accent-ink)" }}><Icon name="signal" size={22} stroke={2.4} /></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 640, fontSize: 15 }}>KVB Official</div>
                    <div className="cap" style={{ display: "flex", alignItems: "center", gap: 6 }}><span className="dot" /> 2,140 online</div>
                  </div>
                </div>
                <div className="stack" style={{ gap: 6, marginTop: 14 }}>
                  {DISCORD_CHANNELS.map(([c, d]) => (
                    <div key={c} className="tile" style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 12px", borderRadius: 11, border: "1px solid var(--glass-border-soft)", background: "color-mix(in oklch, white 3%, transparent)", cursor: "pointer" }}>
                      <span style={{ color: "var(--accent)", fontWeight: 700, fontSize: 16 }}>#</span>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 540 }}>{c}</div>
                        <div className="cap" style={{ fontSize: 11.5 }}>{d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section" style={{ padding: "60px 0 30px" }}>
        <div className="wrap">
          <Reveal style={{ textAlign: "center", maxWidth: 600, margin: "0 auto 40px" }}>
            <div className="eyebrow">Why join</div>
            <h2 className="h1" style={{ fontSize: "clamp(30px,4vw,46px)", marginTop: 14 }}>More than a support channel.</h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }} className="feat-grid">
            {DISCORD_PERKS.map(([ic, t, d], i) => (
              <Reveal key={t} delay={(i % 3) * 0.05} className="glass tile" style={{ borderRadius: "var(--radius)", padding: 26 }}>
                <div style={{ width: 46, height: 46, borderRadius: 13, display: "grid", placeItems: "center", color: "var(--accent)", background: "color-mix(in oklch, var(--accent) 12%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 30%, transparent)", marginBottom: 16 }}><Icon name={ic} size={22} /></div>
                <h3 className="h3" style={{ marginBottom: 8 }}>{t}</h3>
                <p className="body" style={{ fontSize: 14 }}>{d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ padding: "20px 0 30px" }}>
        <div className="wrap">
          <Reveal className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(40px,6vw,72px)", textAlign: "center", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 120% at 50% 0%, var(--accent-glow), transparent 60%)", opacity: 0.45 }} />
            <div style={{ position: "relative" }}>
              <h2 className="h-display" style={{ fontSize: "clamp(32px,4.6vw,56px)", marginBottom: 14 }}>Your community is waiting.</h2>
              <p className="body-lg" style={{ maxWidth: 460, margin: "0 auto 28px" }}>Free to join. Jump in, say hi, and grab your first giveaway.</p>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}><Icon name="message" size={17} /> Join the Discord</button>
            </div>
          </Reveal>
        </div>
      </section>
    </PageShell>
  );
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
const ABOUT_VALUES = [
  ["zap", "Speed over everything", "Viewers in seconds, weekly updates, support that replies in minutes. We move at the pace creators do."],
  ["shield", "Built to stay invisible", "Anti-fingerprint routing and AES-256 from day one. Your growth should never look — or feel — artificial."],
  ["heart", "Creator-first pricing", "Plans designed so everyone can afford to grow, from first-time streamers to full-time pros."],
  ["gauge", "Zero compromise", "0% local CPU, 99.98% uptime, 5,000 concurrent. Premium performance, no asterisks."],
];

function AboutPage({ onNav }) {
  return (
    <PageShell route="about" onNav={onNav}>
      <PageHero eyebrow={<><Icon name="signal" size={14} /> About KVB</>}
        title={<>We help creators <span className="accent-text">fill the room.</span></>}
        sub="KVB started with one frustration: growing a stream is brutally hard, and the tools that promised to help were slow, sketchy, and overpriced. So we built the opposite." />

      <section className="section" style={{ padding: "44px 0 20px" }}>
        <div className="wrap">
          <Reveal className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(28px,4vw,48px)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 30 }} className="rg4">
              {[["50M+", "Viewers delivered"], ["40K+", "Creators served"], ["99.98%", "Engine uptime"], ["60+", "Countries"]].map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontSize: "clamp(30px,4vw,46px)", fontWeight: 720, letterSpacing: "-0.04em", color: "var(--accent)" }}>{v}</div>
                  <div className="cap" style={{ marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ padding: "44px 0" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }} className="disc-grid">
            <Reveal className="glass" style={{ borderRadius: "var(--radius)", padding: "clamp(26px,3vw,40px)" }}>
              <div className="eyebrow">Our mission</div>
              <h2 className="h2" style={{ margin: "14px 0 14px" }}>Make growth effortless.</h2>
              <p className="body-lg" style={{ fontSize: 16 }}>
                Every creator deserves a fighting chance at being seen. KVB gives you the momentum to get discovered — real-time viewers, smart chat, and a toolkit that runs itself — so you can focus on what you do best: streaming.
              </p>
            </Reveal>
            <Reveal delay={0.08} className="glass" style={{ borderRadius: "var(--radius)", padding: "clamp(26px,3vw,40px)" }}>
              <div className="eyebrow">The story</div>
              <h2 className="h2" style={{ margin: "14px 0 14px" }}>From a frustration to a platform.</h2>
              <p className="body-lg" style={{ fontSize: 16 }}>
                We were streamers ourselves, tired of tools that lagged our PCs and risked our channels. KVB is what we wished existed: server-sided, undetectable, affordable, and genuinely fast. Today it's trusted by tens of thousands of creators worldwide.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section" style={{ padding: "10px 0 40px" }}>
        <div className="wrap">
          <Reveal style={{ textAlign: "center", maxWidth: 600, margin: "0 auto 40px" }}>
            <div className="eyebrow">What we stand for</div>
            <h2 className="h1" style={{ fontSize: "clamp(30px,4vw,46px)", marginTop: 14 }}>Principles we ship by.</h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="disc-grid">
            {ABOUT_VALUES.map(([ic, t, d], i) => (
              <Reveal key={t} delay={(i % 2) * 0.06} className="glass tile" style={{ borderRadius: "var(--radius)", padding: 28, display: "flex", gap: 18 }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, flexShrink: 0, display: "grid", placeItems: "center", color: "var(--accent)", background: "color-mix(in oklch, var(--accent) 12%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 30%, transparent)" }}><Icon name={ic} size={22} /></div>
                <div>
                  <h3 className="h3" style={{ marginBottom: 7 }}>{t}</h3>
                  <p className="body" style={{ fontSize: 14.5 }}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ padding: "10px 0 30px" }}>
        <div className="wrap">
          <Reveal className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(40px,6vw,72px)", textAlign: "center", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 120% at 50% 0%, var(--accent-glow), transparent 60%)", opacity: 0.45 }} />
            <div style={{ position: "relative" }}>
              <h2 className="h-display" style={{ fontSize: "clamp(32px,4.6vw,56px)", marginBottom: 14 }}>Ready to grow with us?</h2>
              <p className="body-lg" style={{ maxWidth: 460, margin: "0 auto 28px" }}>Start free — no card required. Be live with viewers in under a minute.</p>
              <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get KVB free <Icon name="arrow" size={17} /></button>
                <button className="btn btn-ghost btn-lg" onClick={() => onNav("discord")}>Open support chat</button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </PageShell>
  );
}

Object.assign(window, { StatusPage, ChangelogPage, DiscordPage, AboutPage });