// home.jsx — Discover/Homepage screen

const { useState: useStateH, useMemo: useMemoH } = React;

function HomeScreen({ onOpen, onInstall, onNav, onOpenSearch, query, setQuery, installedSet, savedSet }) {
  const trending = TRENDING_IDS.map(id => SKILLS_BY_ID[id]);
  const featured = FEATURED_IDS.map(id => SKILLS_BY_ID[id]);
  const quickFilters = ["Verified", "Popular", "New", "Claude Code", "Research", "Coding"];
  const [activeQuick, setActiveQuick] = useStateH(null);

  return (
    <div className="col">
      {/* HERO */}
      <section style={{ padding: "56px 0 44px", borderBottom: "1px solid var(--line)" }}>
        <div className="page col gap-5" style={{ maxWidth: 980 }}>
          <div className="row gap-2">
            <span className="eyebrow" style={{ color: "var(--iris-700)" }}>IrisGo Skill Marketplace</span>
            <span className="eyebrow text-4">·</span>
            <span className="eyebrow text-4">v1.4 · 1,284 skills</span>
          </div>
          <h1 className="h1" style={{ margin: 0, maxWidth: 820 }}>
            Your AI partner — now with skills it can actually&nbsp;use.
          </h1>
          <div className="body" style={{ color: "var(--ink-2)", maxWidth: 640, fontSize: 16 }}>
            A capability layer for agents that see, act, and move faster. Search by task, output, or environment — every skill is versioned, permissioned, and reviewable before install.
          </div>

          {/* Hero search */}
          <div className="row gap-3" style={{ marginTop: 8 }}>
            <div onClick={onOpenSearch} className="row gap-3" style={{
              flex: 1, height: 54, padding: "0 18px",
              border: "1px solid var(--line-strong)", borderRadius: 12,
              background: "var(--bg)", boxShadow: "var(--sh-1)",
              cursor: "text",
            }}>
              <I.Search size={18} style={{ color: "var(--ink-3)" }} />
              <input
                value={query} onChange={(e) => setQuery(e.target.value)}
                onClick={(e) => e.stopPropagation()}
                placeholder="Review a PR and suggest fixes…"
                style={{ flex: 1, border: "none", outline: "none", background: "transparent",
                  font: "400 16px/1 var(--font-sans)", color: "var(--ink)" }}
              />
              <kbd style={{ font: "500 11px/1 var(--font-mono)", color: "var(--ink-3)", border: "1px solid var(--line)", padding: "4px 8px", borderRadius: 4 }}>⌘K</kbd>
            </div>
            <button className="btn btn-lg btn-primary" onClick={() => onNav("browse")}>
              Browse all <I.Arrow size={14} />
            </button>
          </div>

          {/* Quick filter chips */}
          <div className="row gap-2 wrap">
            <span className="meta" style={{ color: "var(--ink-3)", marginRight: 4 }}>Try:</span>
            {quickFilters.map(f => (
              <button key={f} className={`chip ${activeQuick === f ? "active" : ""}`}
                onClick={() => { setActiveQuick(f); setQuery(f); onNav("browse", { q: f }); }}>
                {f}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CURATED COLLECTIONS */}
      <section style={{ padding: "44px 0" }}>
        <div className="page col gap-5">
          <SectionHead
            title="Curated collections"
            subtitle="Hand-picked sets to skip the cold-start."
            action={<a className="see-all" href="#" onClick={(e) => { e.preventDefault(); onNav("browse"); }}>See all collections <I.ChevR size={12} /></a>}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }}>
            {COLLECTIONS.map(c => (
              <button key={c.id} className="card hoverable unstyled"
                onClick={() => onNav("collection", { id: c.id })}
                style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
                <div style={{
                  height: 110,
                  background: `linear-gradient(135deg, ${c.tone[0]}, ${c.tone[1]})`,
                  position: "relative",
                }}>
                  {/* abstract pattern */}
                  <svg viewBox="0 0 100 60" preserveAspectRatio="none"
                       style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.22 }}>
                    <defs>
                      <pattern id={`p-${c.id}`} width="8" height="8" patternUnits="userSpaceOnUse">
                        <circle cx="2" cy="2" r="1" fill="#fff" />
                      </pattern>
                    </defs>
                    <rect width="100" height="60" fill={`url(#p-${c.id})`} />
                  </svg>
                  <span style={{
                    position: "absolute", top: 12, left: 14, right: 14,
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    color: "rgba(255,255,255,0.92)", font: "500 11px/1 var(--font-sans)", letterSpacing: "0.04em", textTransform: "uppercase",
                  }}>
                    <span>{c.audience}</span>
                    <span>{c.count} skills</span>
                  </span>
                </div>
                <div className="col gap-2" style={{ padding: 16 }}>
                  <div style={{ font: "600 16px/1.25 var(--font-display)" }}>{c.title}</div>
                  <div className="body-sm text-2">{c.desc}</div>
                  <div className="meta" style={{ marginTop: 4 }}>Curated by {c.curator}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* TRENDING */}
      <section style={{ padding: "12px 0 44px" }}>
        <div className="page col gap-5">
          <SectionHead
            title="Trending now"
            subtitle="Ranked by install velocity, activation, and freshness — not raw downloads."
            action={
              <div className="row gap-2">
                <span className="meta">Updated 12m ago</span>
                <a className="see-all" href="#" onClick={(e) => { e.preventDefault(); onNav("browse"); }}>View all <I.ChevR size={12} /></a>
              </div>
            }
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
            {trending.map(s => (
              <SkillCard key={s.id} skill={s} onOpen={onOpen} onInstall={onInstall} installed={installedSet.has(s.id)} />
            ))}
          </div>
        </div>
      </section>

      {/* USE-CASE ROWS */}
      <section style={{ padding: "12px 0 44px", background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="page col gap-7" style={{ paddingTop: 44, paddingBottom: 44 }}>
          <SectionHead
            title="Browse by use case"
            subtitle="Five lanes that cover ~80% of agent tasks."
          />
          {Object.entries(USE_CASE_ROWS).map(([cat, ids]) => (
            <div key={cat} className="col gap-3">
              <div className="row between" style={{ alignItems: "baseline" }}>
                <div className="row gap-3" style={{ alignItems: "baseline" }}>
                  <h3 className="h4" style={{ margin: 0 }}>{cat}</h3>
                  <span className="meta">{ids.length} skills</span>
                </div>
                <a className="see-all" href="#" onClick={(e) => { e.preventDefault(); onNav("browse", { cat }); }}>
                  View all in {cat} <I.ChevR size={12} />
                </a>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
                {ids.map(id => SKILLS_BY_ID[id]).filter(Boolean).map(s => (
                  <SkillCard key={s.id} skill={s} onOpen={onOpen} onInstall={onInstall} installed={installedSet.has(s.id)} dense />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* TRUST STRIP */}
      <section style={{ padding: "44px 0" }}>
        <div className="page col gap-5">
          <SectionHead
            title="How IrisGo handles trust"
            subtitle="Short, scarce, well-defined. Every badge has a policy you can read."
            action={<a className="see-all" href="#" onClick={(e) => e.preventDefault()}>Read trust policy <I.ChevR size={12} /></a>}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 14 }}>
            {[
              { i: "Verified", icon: "Verified", t: "Verified authors", d: "Identity confirmed via domain or org. Roughly 1 in 5 authors qualify." },
              { i: "ShieldCheck", icon: "ShieldCheck", t: "Security reviewed", d: "Static + behavioral review covering permissions, network calls, and command execution." },
              { i: "Users", icon: "Users", t: "Team-approved", d: "An admin in your workspace explicitly approved this skill, with date and scope." },
              { i: "Clock", icon: "Clock", t: "Versioned installs", d: "Pin a version. Auto-update by minor or stay locked. Rollback in one click." },
              { i: "Lock", icon: "Lock", t: "Transparent permissions", d: "Every permission shown before install. No silent expansion across versions." },
            ].map(item => {
              const G = I[item.icon];
              return (
                <div key={item.t} className="card" style={{ padding: 18 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: "var(--iris-50)", color: "var(--iris-700)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    marginBottom: 14,
                  }}>
                    <G size={16} />
                  </div>
                  <div style={{ font: "600 14px/1.3 var(--font-display)", marginBottom: 6 }}>{item.t}</div>
                  <div className="body-sm text-2">{item.d}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* FOR TEAMS */}
      <section style={{ padding: "0 0 44px" }}>
        <div className="page">
          <div style={{
            background: "linear-gradient(135deg, #071C19, #10413B 60%, #185A4D)",
            color: "#fff", borderRadius: 16, padding: "36px 40px",
            display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 40,
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ position: "absolute", right: -40, top: -40, opacity: 0.18, pointerEvents: "none" }}>
              <IrisMark variant="lime" size={320} />
            </div>
            <div className="col gap-4">
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>For teams</span>
              <h2 className="h2" style={{ margin: 0, color: "#fff" }}>Run a private registry for your workspace.</h2>
              <div className="body" style={{ color: "rgba(255,255,255,0.8)", maxWidth: 460 }}>
                Publish internal skills, gate access by workspace, approve what your org can install, and track adoption — without leaving IrisGo.
              </div>
              <div className="row gap-2">
                <button className="btn btn-lg" style={{ background: "var(--lime)", color: "var(--green)", borderColor: "var(--lime)" }}
                  onClick={() => onNav("teams")}>
                  Explore Teams <I.Arrow size={14} />
                </button>
                <button className="btn btn-lg btn-ghost" style={{ color: "rgba(255,255,255,0.85)" }}>Talk to sales</button>
              </div>
            </div>
            <div className="col gap-3">
              {[
                ["Publish private skills", "Bring internal tooling to your team without exposing it publicly."],
                ["Control access by workspace", "Per-workspace visibility and per-skill scoping."],
                ["Approve before install", "Admins approve, members install — with audit trail."],
                ["Track adoption and updates", "See what's used, what's stale, what needs review."],
              ].map(([t, d]) => (
                <div key={t} className="row gap-3" style={{ alignItems: "flex-start", padding: "8px 0", borderTop: "1px solid rgba(255,255,255,0.12)" }}>
                  <I.Check size={14} style={{ color: "rgba(255,255,255,0.9)", marginTop: 4, flex: "0 0 auto" }} />
                  <div className="col" style={{ minWidth: 0 }}>
                    <div style={{ font: "600 14px/1.3 var(--font-display)", color: "#fff" }}>{t}</div>
                    <div style={{ color: "rgba(255,255,255,0.7)", font: "400 13px/1.5 var(--font-sans)" }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: "32px 0 56px", borderTop: "1px solid var(--line)", background: "var(--bg-soft)" }}>
        <div className="page row between gap-6 wrap">
          <div className="col gap-2">
            <a className="brand"><span className="brand-mark"><IrisMark variant="green" size={26} /></span> IrisGo</a>
            <div className="meta">A capability layer for agents.</div>
          </div>
          <div className="row gap-7 wrap" style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-2)" }}>
            {["Documentation", "Publishing guide", "Trust policy", "API", "Status", "Terms", "Privacy"].map(l => (
              <a key={l} href="#" style={{ textDecoration: "none", color: "inherit" }}>{l}</a>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}

window.HomeScreen = HomeScreen;