// sections.jsx — Features, Performance, Pricing, FAQ for KVB 2.0
const { useState: useStateS } = React;

/* =================== BENTO FEATURE GRID =================== */
const BENTO = [
  { span: 3, img: "assets/feature-1.png", imgPos: "bottom", title: "Easy To Use UI",
    desc: "Our new UI includes a Viewbot, AI Chatbot, Chatbot, Followbot, Clip Viewbot, Pollbot & more!",
    imgStyle: { width: "78%", marginBottom: -2 } },
  { span: 2, img: "assets/feature-2.png", imgPos: "top", title: "AES-256 Encryption",
    desc: "We use state of the art AES-256 Encryption so the dashboard stays secure.",
    imgStyle: { width: "74%", marginTop: 18 } },
  { span: 2, img: "assets/feature-3.png", imgPos: "bottom", title: "Cheap Pricing",
    desc: "Our view bot's paid plans are designed to be affordable, so everyone can enjoy KVB!",
    imgStyle: { width: "100%", height: "100%", objectFit: "contain", objectPosition: "center bottom" } },
  { span: 2, img: "assets/feature-4.png", imgPos: "bottom", title: "24/7 Support",
    desc: "We provide 24/7 support through our live support chat for all customers.",
    imgStyle: { width: "70%", marginBottom: 10 } },
  { span: 2, img: "assets/feature-5.png", imgPos: "bottom", title: "Zero Resource Usage",
    desc: "KVB is server-sided; just add your stream to auto-start and go live!",
    imgStyle: { width: "100%", height: "100%", objectFit: "contain", objectPosition: "center bottom" } },
  { span: 3, img: "assets/feature-6.png", imgPos: "top", title: "Anti-Fingerprint",
    desc: "Our anti-bot detection method makes it impossible for Kick to fingerprint your connections!",
    imgStyle: { width: "70%", marginTop: 6 } },
];

/* resolves an asset path to an inlined blob URL when bundled standalone,
   otherwise returns the path as-is for normal serving */
function assetURL(p) { return (typeof window !== "undefined" && window.__resources && window.__resources[p]) || p; }

function BentoCard({ data }) {
  const [h, setH] = useStateS(false);
  const { img, imgPos, title, desc, span, imgStyle } = data;
  const text = (
    <div style={{ padding: imgPos === "bottom" ? "28px 28px 0" : "0 28px 28px" }}>
      <h3 className="h2" style={{ fontSize: 23, marginBottom: 10 }}>{title}</h3>
      <p className="body" style={{ fontSize: 14, maxWidth: 360 }}>{desc}</p>
    </div>
  );
  const image = (
    <div style={{ flex: 1, display: "flex", alignItems: imgPos === "bottom" ? "flex-end" : "flex-start", justifyContent: "center", minHeight: 0, overflow: "hidden" }}>
      <img src={assetURL(img)} alt={title} style={{ maxWidth: "100%", height: "auto", objectFit: "contain", display: "block", ...imgStyle }} />
    </div>
  );
  return (
    <div className="glass bento-card" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        gridColumn: `span ${span}`, minHeight: 326, display: "flex", flexDirection: "column", overflow: "hidden", padding: 0,
        borderColor: h ? "var(--glass-hi)" : "var(--glass-border)", transition: "border-color .3s, transform .3s",
        transform: h ? "translateY(-4px)" : "none",
      }}>
      {imgPos === "bottom" ? <>{text}{image}</> : <>{image}{text}</>}
    </div>
  );
}

function Bento() {
  return (
    <section id="features" className="section" style={{ padding: "90px 0" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 48px" }}>
          <div className="eyebrow">Everything in one place</div>
          <h2 className="h1" style={{ margin: "16px 0 14px" }}>A control room for your <span className="accent-text">audience</span>.</h2>
          <p className="body-lg">More features than anything else on the market — engineered to be invisible, instant, and effortless.</p>
        </Reveal>
        <div className="bento-grid" style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gridAutoRows: "326px", gap: 18 }}>
          {BENTO.map((d, i) => (
            <Reveal key={i} delay={(i % 3) * 0.05} style={{ gridColumn: `span ${d.span}`, display: "flex" }}>
              <div style={{ width: "100%", display: "flex" }}><BentoCard data={d} /></div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .bento-grid > * > div { width: 100%; }
        .bento-grid .bento-card { width: 100%; }
        @media (max-width: 1000px){
          .bento-grid{ grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 320px !important; }
          .bento-grid > *{ grid-column: span 1 !important; }
          .bento-grid .bento-card{ grid-column: span 1 !important; }
        }
        @media (max-width: 560px){
          .bento-grid{ grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* =================== FEATURES (icon grid · legacy, unused) =================== */
const FEATURES = [
  { icon: "bolt",   title: "Sub-30s delivery",    body: "Connect 1,000+ viewers to any stream in under 35 seconds — usually just a few." },
  { icon: "signal", title: "5,000 concurrent",     body: "Our new server-sided engine sustains 5,000+ concurrent viewers with zero strain." },
  { icon: "shield", title: "Undetectable",         body: "Anti-fingerprint routing makes it impossible for the platform to flag your connections." },
  { icon: "cpu",    title: "0% CPU footprint",     body: "Runs entirely off your machine's resources — your PC never slows down while live." },
  { icon: "lock",   title: "AES-256 encrypted",    body: "Every session and key is locked behind state-of-the-art AES-256 encryption." },
  { icon: "grid",   title: "All-in-one toolkit",   body: "Viewer bot, follow bot and human-like chat bots — every tool you need in one clean dashboard." },
];

function Features() {
  return (
    <section id="features" className="section" style={{ padding: "90px 0" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 54px" }}>
          <div className="eyebrow">Everything in one place</div>
          <h2 className="h1" style={{ margin: "16px 0 14px" }}>A control room for your <span className="accent-text">audience</span>.</h2>
          <p className="body-lg">More features than anything else on the market — engineered to be invisible, instant, and effortless.</p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="feat-grid">
          {FEATURES.map((f, i) => (
            <Reveal key={f.title} delay={(i % 3) * 0.06}>
              <FeatureCard {...f} />
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .feat-grid{ grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px){ .feat-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function FeatureCard({ icon, title, body }) {
  const [h, setH] = useStateS(false);
  return (
    <div className="glass" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        padding: 26, height: "100%", position: "relative", overflow: "hidden",
        transform: h ? "translateY(-4px)" : "none", transition: "transform .3s, border-color .3s",
        borderColor: h ? "var(--glass-hi)" : "var(--glass-border)",
      }}>
      <div style={{
        width: 48, height: 48, borderRadius: 14, display: "grid", placeItems: "center",
        background: "linear-gradient(160deg, color-mix(in oklch, var(--accent) 30%, transparent), color-mix(in oklch, var(--accent) 6%, transparent))",
        border: "1px solid color-mix(in oklch, var(--accent) 35%, transparent)",
        color: "var(--accent)", marginBottom: 18,
        boxShadow: h ? "0 0 26px var(--accent-glow)" : "none", transition: "box-shadow .3s",
      }}>
        <Icon name={icon} size={24} stroke={1.9} />
      </div>
      <h3 className="h3" style={{ marginBottom: 8 }}>{title}</h3>
      <p className="body" style={{ fontSize: 14.5 }}>{body}</p>
    </div>
  );
}

/* =================== PERFORMANCE =================== */
function Performance() {
  const [live, setLive] = useStateS(0);
  const Viz = window.ViewerViz;
  return (
    <section id="perf" className="section" style={{ padding: "70px 0" }}>
      <div className="wrap">
        <Reveal className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(30px,4vw,56px)", overflow: "hidden", position: "relative" }}>
          {/* faint dot-grid texture */}
          <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(color-mix(in oklch, white 6%, transparent) 1px, transparent 1px)", backgroundSize: "22px 22px", opacity: 0.5, pointerEvents: "none", maskImage: "linear-gradient(120deg, black, transparent 70%)", WebkitMaskImage: "linear-gradient(120deg, black, transparent 70%)" }} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 48, alignItems: "center", position: "relative" }} className="perf-grid">
            <div>
              <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><span className="dot" /> Built for scale</div>
              <h2 className="h1" style={{ margin: "16px 0 16px" }}>Light-speed by design.</h2>
              <p className="body-lg" style={{ marginBottom: 32, maxWidth: 440 }}>
                A rebuilt server-sided core means more viewers, faster connects, and a footprint so small you'll forget it's running.
              </p>
              <div style={{ display: "flex", gap: 0, borderTop: "1px solid var(--glass-border-soft)", paddingTop: 26 }}>
                {[["signal", "5,000+", "Concurrent viewers"], ["bolt", "35s", "To full delivery"], ["cpu", "0%", "CPU on your PC"]].map(([ic, val, lbl], i) => (
                  <div key={lbl} style={{ flex: 1, paddingLeft: i ? 22 : 0, borderLeft: i ? "1px solid var(--glass-border-soft)" : "none" }}>
                    <span style={{ color: "var(--accent)", display: "inline-flex", marginBottom: 10 }}><Icon name={ic} size={18} /></span>
                    <div style={{ fontSize: "clamp(26px,3vw,38px)", fontWeight: 720, letterSpacing: "-0.04em", color: "var(--accent)", lineHeight: 1 }}>{val}</div>
                    <div className="cap" style={{ marginTop: 7 }}>{lbl}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* telemetry panel */}
            <div className="glass" style={{ borderRadius: "var(--radius)", padding: 22, background: "color-mix(in oklch, black 32%, transparent)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 4 }}>
                <div>
                  <div className="cap" style={{ letterSpacing: "0.08em" }}>LIVE VIEWERS</div>
                  <div style={{ fontSize: 40, fontWeight: 720, letterSpacing: "-0.035em", color: "var(--accent)", fontVariantNumeric: "tabular-nums", lineHeight: 1.1 }}>
                    {live.toLocaleString()}
                  </div>
                </div>
                <div className="status ok" style={{ padding: "6px 12px" }}><span className="sd live-dot" /> Delivering</div>
              </div>
              {Viz ? <Viz running target={1850} onValue={setLive} height={168} /> : <div style={{ height: 168 }} />}
              <div style={{ display: "flex", gap: 8, marginTop: 18, flexWrap: "wrap" }}>
                {[["globe", "Global routing"], ["gauge", "41ms latency"], ["cpu", "12 edge nodes"]].map(([ic, t]) => (
                  <div key={t} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "7px 12px", borderRadius: 999, background: "color-mix(in oklch, white 4%, transparent)", border: "1px solid var(--glass-border-soft)", fontSize: 12, color: "var(--ink-2)" }}>
                    <span style={{ color: "var(--accent)" }}><Icon name={ic} size={13} /></span>{t}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 820px){ .perf-grid{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* =================== PRICING =================== */
const KICK_VIEWS = [
  { name: "Free", price: "$0", per: "2 hrs", blurb: "Test key features safely with limited views, AI chat, fast servers, and strong anti-bot protection.",
    feats: ["Improved UI", "Limited View Botting (10 Viewers)", "AI Chatbot (50 Limit)", "Server-Sided Performance", "Anti-Finger Printing", "Anti-Bot Detection"] },
  { name: "Starter", price: "$10", per: "month", blurb: "Great for steady growth with basic views, expanded AI chat, premium support, and top security.",
    feats: ["Improved UI", "Basic View Botting (100 Viewers)", "AI Chatbot (650 Limit)", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection"] },
  { name: "Basic Plan", price: "$20", per: "month", blurb: "Perfect for bigger needs with higher view limits, more AI chats, premium help, and top security.",
    feats: ["Improved UI", "Basic View Botting (200 Viewers)", "AI Chatbot (1,500 Limit)", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection"] },
  { name: "Standard Plan", price: "$50", per: "month", blurb: "Ideal for serious growth with higher views, big AI limits, premium support, and top security.",
    feats: ["Improved UI", "Basic View Botting (500 Viewers)", "AI Chatbot (3,750 Limit)", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection"] },
  { name: "Pro Plan", price: "$100", per: "month", highlight: true, blurb: "Top-tier power with max views, huge AI limits, beta access, premium help, and top security.",
    feats: ["Improved UI", "Pro View Botting (1,500 Viewers)", "AI Chatbot (7,500 Limit)", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection", "Beta Access"] },
];
const KICK_AIO = [
  { name: "Starter", price: "$40", per: "month", blurb: "A solid start with credits for chat, polls, views, and followers, plus premium support, updates, and top security.",
    feats: ["100 Chatbot credits", "3,000 AI Chatbot credits", "100 Pollbot credits", "200 Followerbot credits", "100 Viewbot credits", "200 Clip viewbot credits", "Improved UI", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection", "Beta Access"] },
  { name: "Basic Plan", price: "$120", per: "month", blurb: "Great for growing channels with more credits for chat, polls, views, and clips, plus premium support and top security.",
    feats: ["300 Chatbot credits", "9,000 AI Chatbot credits", "300 Pollbot credits", "300 Followerbot credits", "300 Viewbot credits", "600 Clip viewbot credits", "Improved UI", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection", "Beta Access"] },
  { name: "Standard Plan", price: "$200", per: "month", blurb: "Perfect for serious growth with high credits for chat, polls, views, and clips, plus premium support and top security.",
    feats: ["500 Chatbot credits", "16,000 AI Chatbot credits", "500 Pollbot credits", "500 Followerbot credits", "500 Viewbot credits", "1,000 Clip viewbot credits", "Improved UI", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection", "Beta Access"] },
  { name: "Pro Plan", price: "$440", per: "month", highlight: true, blurb: "Ultimate power with max credits for chat, polls, views, and clips, plus beta access, premium support, and top security.",
    feats: ["1,000 Chatbot credits", "30,000 AI Chatbot credits", "1,000 Pollbot credits", "1,000 Followerbot credits", "1,500 Viewbot credits", "2,000 Clip viewbot credits", "Improved UI", "Server-Sided Performance", "Premium Support", "Weekly Updates", "Anti-Finger Printing", "Anti-Bot Detection", "Beta Access"] },
];

function Pricing({ onPick }) {
  const [product, setProduct] = useStateS("views");
  const plans = product === "views" ? KICK_VIEWS : KICK_AIO;
  return (
    <section id="pricing" className="section" style={{ padding: "90px 0" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 40px" }}>
          <div className="eyebrow">Pricing</div>
          <h2 className="h1" style={{ margin: "16px 0 14px" }}>Affordable, by design.</h2>
          <p className="body-lg">Pick the engine that fits — pure viewers, or the full all-in-one toolkit.</p>
          <div className="glass" style={{ display: "inline-flex", padding: 5, borderRadius: 999, marginTop: 24, gap: 4 }}>
            {[["Kick Views", "views"], ["Kick AIO", "aio"]].map(([l, val]) => (
              <button key={val} onClick={() => setProduct(val)} className="btn btn-sm" style={{
                background: product === val ? "var(--accent)" : "transparent",
                color: product === val ? "var(--accent-ink)" : "var(--ink-2)",
                fontWeight: product === val ? 640 : 500, border: "none", borderRadius: 999, padding: "9px 20px",
              }}>{l}</button>
            ))}
          </div>
        </Reveal>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 16, alignItems: "stretch" }} className="price-grid">
          {plans.map((p, i) => (
            <Reveal key={product + p.name} delay={i * 0.05} style={{ flex: "1 1 256px", maxWidth: 300, display: "flex" }}>
              <PlanCard plan={p} onPick={onPick} />
            </Reveal>
          ))}
        </div>
        <Reveal style={{ textAlign: "center", marginTop: 28 }}>
          <p className="cap">We accept Stripe &amp; Crypto · Holiday discounts in our support chat.</p>
        </Reveal>
      </div>
    </section>
  );
}

function PlanCard({ plan, onPick }) {
  const [h, setH] = useStateS(false);
  return (
    <div className={plan.highlight ? "glass-strong" : "glass"} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        padding: 26, width: "100%", display: "flex", flexDirection: "column", position: "relative",
        borderColor: plan.highlight ? "color-mix(in oklch, var(--accent) 55%, transparent)" : (h ? "var(--glass-hi)" : "var(--glass-border)"),
        transform: h ? "translateY(-5px)" : "none", transition: "transform .3s, border-color .3s",
        boxShadow: plan.highlight ? "var(--shadow-2), 0 0 50px -18px var(--accent-glow)" : undefined,
      }}>
      {plan.highlight && (
        <div className="chip" style={{ position: "absolute", top: -13, left: "50%", transform: "translateX(-50%)", background: "var(--accent)", color: "var(--accent-ink)", border: "none", fontWeight: 640, fontSize: 12, whiteSpace: "nowrap" }}>
          Most popular
        </div>
      )}
      <div className="h3" style={{ fontWeight: 600 }}>{plan.name}</div>
      <p className="body" style={{ fontSize: 13, minHeight: 56, marginTop: 8 }}>{plan.blurb}</p>
      <div style={{ display: "flex", alignItems: "baseline", gap: 5, margin: "6px 0 16px" }}>
        <span style={{ fontSize: 44, fontWeight: 720, letterSpacing: "-0.04em" }}>{plan.price}</span>
        <span className="cap">/ {plan.per}</span>
      </div>
      <button className={plan.highlight ? "btn btn-primary" : "btn btn-ghost"} onClick={() => onPick(plan.name)} style={{ width: "100%", justifyContent: "center", marginBottom: 22 }}>
        Get Started <Icon name="arrow" size={15} />
      </button>
      <div className="stack" style={{ gap: 11 }}>
        {plan.feats.map(f => (
          <div key={f} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <span style={{ color: "var(--accent)", flexShrink: 0, marginTop: 1 }}><Icon name="check" size={16} stroke={2.4} /></span>
            <span className="body" style={{ fontSize: 13, color: "var(--ink-2)" }}>{f}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =================== WHAT WE EXPECT =================== */
const EXPECT = [
  { icon: "users", title: "5,000+ Viewers",
    body: "Never worry about detection again — we monitor Kick daily to ensure all our bots are constantly up-to-date!" },
  { icon: "video", title: "Instant Viewers",
    body: "KVB can connect more than 1,500 viewers to your stream in less than 35 seconds, often just a few seconds." },
  { icon: "code", title: "Ai Chatbot",
    body: "Check out our leading AI Chatbot! It listens, engages with your chat, and gets regular updates!" },
];

function ExpectItem({ data, active }) {
  const { icon, title, body } = data;
  return (
    <div className={active ? "glass" : ""} style={{
      position: "relative", display: "flex", gap: 18, padding: 22, borderRadius: 18,
      borderColor: active ? "color-mix(in oklch, var(--accent) 30%, transparent)" : "transparent",
      background: active ? undefined : "transparent",
      boxShadow: active ? "0 0 50px -26px var(--accent-glow)" : "none",
    }}>
      <div style={{ position: "relative", zIndex: 1, flexShrink: 0 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 14, display: "grid", placeItems: "center",
          background: active
            ? "linear-gradient(160deg, var(--accent), var(--accent-deep))"
            : "color-mix(in oklch, white 5%, transparent)",
          border: active ? "none" : "1px solid var(--glass-border)",
          color: active ? "var(--accent-ink)" : "var(--accent)",
          boxShadow: active ? "0 0 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4)" : "none",
        }}>
          <Icon name={icon} size={23} stroke={2} />
        </div>
      </div>
      <div style={{ paddingTop: 2 }}>
        <h3 className="h3" style={{ fontSize: 19, marginBottom: 7 }}>{title}</h3>
        <p className="body" style={{ fontSize: 14, maxWidth: 380 }}>{body}</p>
      </div>
    </div>
  );
}

function ExpectPill() {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14 }}>
      <span style={{ height: 1, width: 90, background: "linear-gradient(90deg, transparent, var(--accent))" }} />
      <span className="glass" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 18px", borderRadius: 999, fontSize: 13.5, fontWeight: 560, color: "var(--ink)", whiteSpace: "nowrap" }}>
        What We Expect <Icon name="spark" size={14} style={{ color: "var(--accent)" }} />
      </span>
      <span style={{ height: 1, width: 90, background: "linear-gradient(90deg, var(--accent), transparent)" }} />
    </div>
  );
}

function DashboardMock() {
  const stats = [["Connecting", "var(--accent)"], ["Viewing", "var(--accent)"], ["Errors", "oklch(0.82 0.15 75)"], ["Dead", "oklch(0.7 0.2 25)"]];
  return (
    <div className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(18px,2.4vw,28px)", position: "relative", overflow: "hidden", boxShadow: "var(--shadow-2), 0 0 80px -34px var(--accent-glow)" }}>
      {/* main app window */}
      <div className="glass" style={{ borderRadius: 18, padding: "18px 20px", position: "relative", background: "color-mix(in oklch, black 30%, transparent)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
          <div style={{ display: "flex", gap: 7 }}>
            {[true, false, false].map((on, i) => <span key={i} style={{ width: 11, height: 11, borderRadius: "50%", background: on ? "var(--accent)" : "var(--glass-border)", boxShadow: on ? "0 0 10px var(--accent-glow)" : "none" }} />)}
          </div>
          <Logo size={18} />
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <span style={{ width: 26, height: 26, borderRadius: "50%", background: "var(--glass-border)", display: "grid", placeItems: "center", color: "var(--ink-3)" }}><Icon name="users" size={14} /></span>
          <span style={{ color: "var(--ink-3)" }}>|</span>
          <span style={{ color: "var(--accent)" }}><Icon name="arrow" size={16} /></span>
        </div>

        <div className="cap" style={{ color: "var(--ink-2)", fontWeight: 600, marginBottom: 12 }}>Dashboard</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 9, marginBottom: 20 }}>
          {Array.from({ length: 5 }).map((_, i) => <div key={i} style={{ height: 36, borderRadius: 10, background: "var(--glass-border)" }} />)}
        </div>

        <div className="cap" style={{ marginBottom: 8 }}>Username</div>
        <div className="glass" style={{ borderRadius: 11, padding: "13px 16px", marginBottom: 18, fontSize: 14, color: "var(--ink-2)" }}>John William</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <div className="glass" style={{ borderRadius: 14, padding: 16 }}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 14 }}>View Status</div>
            <div className="stack" style={{ gap: 11 }}>
              {stats.map(([l, c]) => (
                <div key={l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{l}</span>
                  <span style={{ fontSize: 13, fontWeight: 640, color: c, fontVariantNumeric: "tabular-nums" }}>0</span>
                </div>
              ))}
            </div>
          </div>
          <div className="glass" style={{ borderRadius: 14, padding: 16, display: "flex", flexDirection: "column" }}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 7 }}>Contact Us</div>
            <p style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.5, margin: "0 0 16px" }}>If you need any help feel free to contact.</p>
            <button className="btn btn-sm" style={{ marginTop: "auto", justifyContent: "center", background: "color-mix(in oklch, black 35%, transparent)", border: "1px solid var(--glass-border)", color: "var(--ink)", fontSize: 13 }}>
              <Icon name="headset" size={14} style={{ color: "var(--accent)" }} /> Contact Us
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Expect() {
  return (
    <section id="expect" className="section" style={{ padding: "90px 0" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center", marginBottom: 60 }}>
          <ExpectPill />
          <h2 className="h1" style={{ margin: "22px 0 12px" }}>Fast, Reliable &amp; Easy</h2>
          <p className="body-lg" style={{ fontWeight: 560, color: "var(--ink-2)" }}>Server-sided <span style={{ color: "var(--ink-3)" }}>|</span> No Proxies Required</p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 48, alignItems: "center" }} className="expect-grid">
          <div className="stack" style={{ gap: 14 }}>
            {EXPECT.map((d, i) => (
              <Reveal key={d.title} delay={i * 0.08}><ExpectItem data={d} active={i === 0} /></Reveal>
            ))}
          </div>
          <Reveal delay={0.12}><DashboardMock /></Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .expect-grid{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* =================== FAQ =================== */
const FAQS = [
  { q: "Is there a real risk of detection?", a: "With anything like this there's always a chance — but our anti-fingerprint routing makes connections virtually impossible to flag. Keep it natural and people simply don't notice." },
  { q: "What support do I get?", a: "Every paying customer gets Premium 24/7 on-call support. Free users still get basic support — we never leave you stranded." },
  { q: "Do you offer refunds?", a: "Yes. If you hit any issue with the program or anything else, reach out in our support chat and we'll make it right." },
  { q: "Are there discounts?", a: "We run discounts around national holidays like Christmas and Halloween. Join our support chat to stay on top of updates and deals." },
  { q: "Will it slow down my PC?", a: "No. KVB uses 0% of your CPU while running thanks to our server-sided engine — your machine stays fast while you're live." },
  { q: "Why KVB over everything else?", a: "Best-in-class on both price and performance. We ship updates every week to stay ahead of the curve, so you always have the edge." },
];

function FAQ() {
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq" className="section" style={{ padding: "90px 0" }}>
      <div className="wrap" style={{ maxWidth: 860 }}>
        <Reveal style={{ textAlign: "center", marginBottom: 44 }}>
          <div className="eyebrow">Questions</div>
          <h2 className="h1" style={{ margin: "16px 0 0" }}>Good to know.</h2>
        </Reveal>
        <div className="stack" style={{ gap: 12 }}>
          {FAQS.map((f, i) => (
            <Reveal key={i} delay={i * 0.04}>
              <div className="glass" style={{ borderRadius: "var(--radius-sm)", overflow: "hidden", borderColor: open === i ? "var(--glass-hi)" : "var(--glass-border)" }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                  padding: "20px 24px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left", color: "var(--ink)",
                }}>
                  <span className="h3" style={{ fontSize: 17, fontWeight: 560 }}>{f.q}</span>
                  <span style={{ color: "var(--accent)", transform: open === i ? "rotate(45deg)" : "none", transition: "transform .3s", flexShrink: 0, fontSize: 24, fontWeight: 300, lineHeight: 1 }}>+</span>
                </button>
                <div style={{ maxHeight: open === i ? 200 : 0, overflow: "hidden", transition: "max-height .4s cubic-bezier(.2,.7,.3,1)" }}>
                  <p className="body" style={{ padding: "0 24px 22px", fontSize: 15, margin: 0 }}>{f.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Bento, Expect, Features, Performance, Pricing, FAQ, KICK_VIEWS, KICK_AIO });