// IndieVertical — public pages: Home, Browse, About, Contact, Sponsor.

function IvHome() {
  const { state } = useStore();
  const route = useRoute();
  const games = ivAllGames(state).filter((g) => g.projStatus !== "draft");
  const bySlug = (slug) => games.find((g) => g.slug === slug);
  const picks = ["saltwhistle", "hollow-root", "patchwork-knights", "skylark-express"].map(bySlug).filter(Boolean);
  const promoted = ["loop-courier", "bog-standard"].map(bySlug).filter(Boolean).slice(0, 3);
  const shown = new Set([...picks, ...promoted].map((g) => g.slug));
  const newest = games.filter((g) => !shown.has(g.slug)).slice(0, 3);
  const loggedDev = state.role === "dev";

  React.useEffect(() => {
    if (route.page === "developers") {
      const el = document.getElementById("iv-devstrip");
      if (el) window.scrollTo({ top: el.offsetTop - 56, behavior: "smooth" });
    }
  }, [route.page]);

  return (
    <div className="pp dir-marquee">
      <IvHeader />

      <section className="hero">
        <h1>Publishers are looking. Make it easy to find your game.</h1>
        <p className="sub">Make a free project page for your game in development. Everything a publisher wants to see, in one place, with you in control.</p>
        <div className="hero-cta">
          <a className="btn btn-primary" href={loggedDev ? "#/dashboard" : "#/signup"}>Make your game page</a>
          <a className="btn btn-secondary" href="#/browse">Browse games in development</a>
        </div>
      </section>

      {picks.length > 0 && (
        <section className="shelfwrap">
          <div className="shelf-head">
            <span className="shelf-title">Editor's Picks</span>
            <span className="shelf-flag cool">Curated</span>
          </div>
          <p className="shelf-sub" style={{ marginTop: 4 }}>Games our team noticed and wanted to highlight. Free to land here. We pick them ourselves.</p>
          <div className="shelf4">
            {picks.map((g) => <IvGameCard key={g.slug} g={g} variant="pick" />)}
          </div>
        </section>
      )}

      {promoted.length > 0 && (
        <section className="shelfwrap" style={{ paddingTop: 10 }}>
          <div className="promo-panel">
            <div className="shelf-head">
              <span className="shelf-title">Promoted</span>
              <span className="shelf-flag warm">Paid placement</span>
            </div>
            <p className="shelf-sub" style={{ marginTop: 4 }}>These developers paid for this spot. Their pages work the same as any other page.</p>
            <div className="promo-list">
              {promoted.map((g) => <IvGameRow key={g.slug} g={g} variant="promo" />)}
            </div>
            <a className="promo-note" href="#/sponsor">Promoted spots are $10/month, always labeled as paid →</a>
          </div>
        </section>
      )}

      {newest.length > 0 && (
        <section className="shelfwrap">
          <div className="shelf-head">
            <span className="shelf-title">Newest pages</span>
          </div>
          <div className="shelf3">
            {newest.map((g) => <IvGameCard key={g.slug} g={g} />)}
          </div>
          <a className="see-all" href="#/browse">See all games →</a>
        </section>
      )}

      <section className="devstrip" id="iv-devstrip">
        <div className="devstrip-inner">
          <h2>What you get with a page</h2>
          <p className="dev-intro">Your game is in development right now. Do not let publishers miss it because your info is scattered.</p>
          <div className="dev3">
            <div className="blk">
              <h3>Everything in one spot</h3>
              <p>One link covers your description, screenshots, deal details, and demo. No more "here is my Steam page, also check this doc."</p>
            </div>
            <div className="blk">
              <h3>You control what's private</h3>
              <p>Funding targets, contact details, deal terms. Choose what everyone sees and what only publisher accounts can see.</p>
            </div>
            <div className="blk">
              <h3>Be ready when scouts look</h3>
              <p>Publishers and scouts are hard to reach cold. A clean, current page is the link you send when you pitch — and the page they find as more developers join.</p>
            </div>
          </div>
          <a className="btn btn-primary" style={{ display: "inline-flex", padding: "0 26px", marginTop: 32 }} href={loggedDev ? "#/dashboard" : "#/signup"}>Make your game page</a>
        </div>
      </section>

      <IvFooter />
    </div>
  );
}

// ---------- browse ----------
const IV_SORTS = ["Newest first", "Recently updated", "A to Z"];

function IvBrowse() {
  const { state } = useStore();
  const [filters, setFilters] = React.useState({ ...IV_EMPTY_FILTERS });
  const [sort, setSort] = React.useState("Newest first");
  const all = ivAllGames(state);
  let results = ivApplyFilters(all, filters);
  if (sort === "A to Z") results = [...results].sort((a, b) => a.name.localeCompare(b.name));
  else if (sort === "Recently updated") results = [...results].sort((a, b) => new Date(b.updated) - new Date(a.updated));
  // Promoted games pin to the top, marked by the warm border.
  results = [...results.filter((g) => g.promoted), ...results.filter((g) => !g.promoted)];
  const active = ivCountFilters(filters);

  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="pagehead">
        <h1>Games looking for a publisher</h1>
        <p className="intro">Browse projects from indie developers who are open to deals and conversations.</p>
      </div>
      <div className="pagehead" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <IvFilterBar filters={filters} setFilters={setFilters} />
      </div>
      <div className="results-bar">
        <span className="cnt">
          <strong>{results.length} {results.length === 1 ? "game" : "games"}</strong>
          {" · "}{active === 0 ? "showing all" : active + (active === 1 ? " filter active" : " filters active")}
        </span>
        <span className="sort">
          Sort by <IvDrop label="Sort" value={sort} options={IV_SORTS} onChange={(v) => setSort(v || "Newest first")} allLabel="Newest first" />
        </span>
      </div>
      {results.length > 0 ? (
        <div className="blist">
          {results.map((g) => <IvGameRow key={g.slug} g={g} variant={g.promoted ? "promo" : undefined} flags />)}
        </div>
      ) : (
        <div style={{ padding: "30px 32px 26px" }}>
          <IvEmptyState
            heading="Nothing matching those filters right now"
            body="Try loosening the filters or come back soon. New games are added regularly."
            button="Clear all filters"
            onClick={() => setFilters({ ...IV_EMPTY_FILTERS })}
          />
        </div>
      )}
      {results.length < 4 && (
        <div className="lowdensity">
          <div className="ld-inner">We are still building up our library of games. If you know developers who should be here, send them this link.</div>
        </div>
      )}
      <div style={{ height: 28 }}></div>
      <IvFooter />
    </div>
  );
}

// ---------- static pages ----------
function IvAbout() {
  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="prose">
        <h1>About</h1>
        <p>I built this because I kept seeing the same problem. A developer has a great game in progress, and their info is scattered everywhere. There is a Steam page, an itch.io link, a Twitter thread, a Discord server, and maybe a Google Doc with deal details. A publisher has to dig through all of it just to understand what the game is.</p>
        <p>IndieVertical is one page for your game. You control what is public, what is only shown to publisher accounts, and what stays private. Publishers and scouts can browse without signing up. You only need an account to save a game or reach out to a developer.</p>
        <p>It is free to make a page. That is not a trial. There is no paid tier to get basic visibility.</p>
        <p>I want to be honest about what this is not. We do not broker deals. We do not promise anyone will find your game or sign it. We are not a publisher. We are a place where the information lives, cleanly, in one spot.</p>
        <p>If you are a developer building something and looking for the right partner, I hope this helps. If you are a scout or publisher looking for your next game, I hope it saves you time.</p>
      </div>
      <IvFooter />
    </div>
  );
}

function IvContact() {
  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="prose">
        <h1>Get in touch</h1>
        <p>We are a small team and we read everything. If you have a question, found a bug, or want to talk about sponsoring the platform, write to us at <span className="em">contact@indievertical.com</span>. For press or partnership questions, the same address works.</p>
      </div>
      <IvFooter />
    </div>
  );
}

function IvSponsor() {
  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="prose">
        <h1>Reach indie developers where they are working</h1>
        <p>IndieVertical is built for indie developers who are actively making games and looking for publishers or funding. That is a specific group: focused, working on something real, and making decisions about tools and services right now.</p>
        <p>If your company makes something developers use (an engine, audio middleware, a localization service, a QA tool, a publishing service), a sponsor spot puts you in front of them while they work. We keep sponsored placements clearly labeled. No tricks, no hidden placement.</p>
        <p>We are still early, and we would rather have a few honest partners than a page full of banner ads. If that sounds like a fit, write to us at <span className="em">sponsor@indievertical.com</span> and we can share what is available.</p>
      </div>
      <IvFooter />
    </div>
  );
}

Object.assign(window, { IvHome, IvBrowse, IvAbout, IvContact, IvSponsor });