/* Apps showcase — grid of all apps with category filter + stat header */

function AppsPage() {
  const apps = window.APPS;
  const [category, setCategory] = React.useState("all");

  const categories = React.useMemo(() => {
    const set = new Set(["all"]);
    apps.forEach((a) => set.add(a.category));
    return [...set];
  }, [apps]);

  const filtered = category === "all" ? apps : apps.filter((a) => a.category === category);

  // Aggregate stats for the hero
  const totals = React.useMemo(() => {
    const totalDownloads = apps.reduce((sum, a) => {
      const n = parseFloat((a.downloads || "0").replace(/[^\d.]/g, ""));
      if (!isFinite(n)) return sum;
      const unit = (a.downloads || "").toLowerCase();
      const mult = unit.includes("m") ? 1_000_000 : unit.includes("k") ? 1_000 : 1;
      return sum + n * mult;
    }, 0);
    const avgRating = (apps.reduce((s, a) => s + (a.rating || 0), 0) / apps.length).toFixed(1);
    const platforms = new Set(apps.flatMap((a) => a.platforms));
    return {
      count: apps.length,
      downloads: totalDownloads >= 1_000_000 ? `${(totalDownloads / 1_000_000).toFixed(1)}M+` : `${Math.round(totalDownloads / 1000)}k+`,
      rating: avgRating,
      platforms: platforms.size,
    };
  }, [apps]);

  // SEO
  React.useEffect(() => {
    document.title = "Apps — Innoveev";
    const desc = "Mobile, web, and AI products shipped by Innoveev across FinTech, HealthTech, EdTech, Mobility, Hospitality and IoT.";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name","description"); document.head.appendChild(m); }
    m.setAttribute("content", desc);
  }, []);

  return (
    <>
      <Nav />

      <header className="apps-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
          <span className="mesh__fade-bottom"></span>
        </div>
        <GravityStarsBackground
          starsCount={80}
          starsSize={1.5}
          starsOpacity={0.35}
          glowIntensity={16}
          movementSpeed={0.08}
          mouseInfluence={180}
          gravityStrength={0.025}
          brightenStrength={1.8}
          starColor="rgba(40, 32, 90, 0.55)"
        />
        <div className="container">
          <div className="apps-hero__head">
            <span className="eyebrow">Built by Innoveev</span>
            <h1 className="apps-hero__title">
              Apps people actually <em>open every day.</em>
            </h1>
            <p className="apps-hero__lede">
              The products our team designs, ships and maintains for partners
              across the region — from logistics and marketplaces to healthcare,
              hospitality and AI.
            </p>
          </div>

          <div className="apps-stats">
            <div className="apps-stat">
              <div className="apps-stat__val">{totals.downloads}</div>
              <div className="apps-stat__label">Combined installs</div>
            </div>
            <div className="apps-stat">
              <div className="apps-stat__val">{totals.rating}★</div>
              <div className="apps-stat__label">Avg store rating</div>
            </div>
            <div className="apps-stat">
              <div className="apps-stat__val">{totals.count}</div>
              <div className="apps-stat__label">Live products</div>
            </div>
            <div className="apps-stat">
              <div className="apps-stat__val">{totals.platforms}</div>
              <div className="apps-stat__label">Platforms shipped</div>
            </div>
          </div>
        </div>
      </header>

      <section className="section section--tight">
        <div className="container">
          <div className="apps-filters">
            {categories.map((c) => (
              <button
                key={c}
                className={`apps-filters__chip ${category === c ? "is-active" : ""}`}
                onClick={() => setCategory(c)}
                data-cursor={c === "all" ? "All apps" : c}
              >
                {c === "all" ? "All apps" : c}
                {c !== "all" && (
                  <span style={{ opacity: 0.5, marginLeft: 4 }}>
                    {apps.filter((a) => a.category === c).length}
                  </span>
                )}
              </button>
            ))}
          </div>

          <div className="apps-grid">
            {filtered.map((app) => (
              <AppPeekCard key={app.slug} app={app} />
            ))}
          </div>

          {/* Closing CTA */}
          <div className="faq-closing" style={{ marginTop: 88 }}>
            <h2 className="faq-closing__title">Got an app idea? <em>Let's build it.</em></h2>
            <p className="faq-closing__lede">
              Discovery sprint takes two weeks. You walk out with sketches, a build plan, and a fixed price — or you don't continue.
            </p>
            <div className="faq-closing__ctas">
              <a href="index.html#contact" className="btn btn--primary">
                Start a discovery <Arrow />
              </a>
              <a href="faq.html" className="btn btn--secondary">Read the FAQ</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <BuildMode />
      <KeyboardEggs />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AppsPage />);