// Swachh page — quick reference + download for the desktop app.
// Version, size and url come from latest.json, which `npm run build` writes into
// the swachh dist/ folder. Upload it to R2 with the .dmg and this page follows.
const SWACHH_MANIFEST_URL = 'https://downloads.sidtickle.com/downloads/latest.json';

const { useState: useStateS, useEffect: useEffectS } = React;

function Swachh() {
  const [build, setBuild] = useStateS(null);
  const [failed, setFailed] = useStateS(false);

  useEffectS(() => {
    fetch(SWACHH_MANIFEST_URL, { cache: 'no-store' })
      .then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(setBuild)
      .catch(() => setFailed(true));
  }, []);

  return (
    <main className="swachh">
      <a className="back-link" onClick={(e) => { e.preventDefault(); navigate('/'); }} href="/">
        <Icon name="arrow-left" size={12} /> all projects
      </a>

      <header className="swachh-head">
        <div className="swachh-head-top">
          <p className="eyebrow">— app</p>
          <a
            className="swachh-github"
            href="https://github.com/siddtickle/swachh"
            target="_blank"
            rel="noopener"
            aria-label="view swachh on GitHub"
            title="view on GitHub"
          >
            <Icon name="github" size={16} />
          </a>
        </div>
        <h1>swachh</h1>
        <p className="desc">
          स्वच्छ — "clean." a desktop app for browsing, tagging, culling and
          AI-analyzing footage across any project folder. built for editors
          who live in Finder.
        </p>
      </header>

      <div className="swachh-body">
        <div className="swachh-download">
          <span className="swachh-platform-badge">apple silicon only · macOS 11+</span>

          {build ? (
            <>
              <div className="swachh-install">
                <div className="gc-section-label">install · no security warning</div>
                <code className="swachh-cmd">
                  {`curl -L -o ~/Downloads/swachh.dmg ${build.url} && open ~/Downloads/swachh.dmg`}
                </code>
                <p className="swachh-note">
                  paste that into Terminal, then drag swachh to Applications.
                  fetching it this way skips the quarantine flag macOS puts on
                  browser downloads, so the app just opens.
                </p>
              </div>

              <div className="swachh-install">
                <div className="gc-section-label">or download the disk image</div>
                <a className="swachh-cta" href={build.url}>
                  <span className="swachh-cta-main">download for mac</span>
                  <span className="swachh-cta-sub">v{build.version} · {build.arch} · {build.sizeMB}MB</span>
                </a>
                <p className="swachh-note">
                  this build isn't notarized, so macOS will refuse it and may say
                  it's "damaged" — it isn't. after dragging it to Applications, run:
                </p>
                <code className="swachh-cmd">xattr -cr /Applications/swachh.app</code>
              </div>
            </>
          ) : failed ? (
            <p className="swachh-note">
              couldn't reach the download just now — try a refresh, or grab it from{' '}
              <a href="https://github.com/siddtickle/swachh" target="_blank" rel="noopener">github</a>.
            </p>
          ) : (
            <div className="swachh-cta is-loading" aria-busy="true">
              <span className="swachh-cta-main">loading latest build…</span>
            </div>
          )}

          <p className="swachh-note">intel macs aren't supported.</p>
        </div>

        <div className="swachh-section">
          <div className="gc-section-label">what it does</div>
          <ul className="gc-list">
            <li className="gc-item">
              <span className="gc-item-name">browse & organize</span>
              <span className="gc-item-note">any footage folder, grouped by day, camera or subfolder</span>
            </li>
            <li className="gc-item">
              <span className="gc-item-name">tag, star, cull</span>
              <span className="gc-item-note">mark keepers and clear the rest, right from the grid</span>
            </li>
            <li className="gc-item">
              <span className="gc-item-name">AI scene analysis</span>
              <span className="gc-item-note">claude vision tags subjects, setting, mood & activity</span>
            </li>
            <li className="gc-item">
              <span className="gc-item-name">thumbnails & metadata</span>
              <span className="gc-item-note">ffmpeg is bundled in — nothing else to install</span>
            </li>
            <li className="gc-item">
              <span className="gc-item-name">your data, your folder</span>
              <span className="gc-item-note">everything lives in a hidden .organizer/ folder next to your footage</span>
            </li>
          </ul>
        </div>

        <div className="swachh-section">
          <div className="gc-section-label">requirements</div>
          <ul className="gc-list">
            <li className="gc-item">
              <span className="gc-item-name">chip</span>
              <span className="gc-item-note">apple silicon (M1 or later)</span>
            </li>
            <li className="gc-item">
              <span className="gc-item-name">os</span>
              <span className="gc-item-note">macOS 11 big sur or later</span>
            </li>
          </ul>
        </div>
      </div>

      <p className="gear-foot">
        no ai key, no problem — analysis is optional and only runs if you add
        your own anthropic api key in settings. everything else works offline.
      </p>
    </main>
  );
}

window.Swachh = Swachh;