/* Jelico — paneled landing (v2) */
const { useState, useEffect } = React;
const J = window.JELICO;

function Ico({ n, s = 18 }) {
  const p = { width: s, height: s, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true };
  if (n === "apple") return (<svg {...p}><path d="M16.4 12.6c0-2 1.6-3 1.7-3.05-.93-1.36-2.38-1.55-2.9-1.57-1.23-.12-2.4.72-3.02.72-.62 0-1.58-.7-2.6-.68-1.34.02-2.57.78-3.26 1.97-1.39 2.42-.36 6 1 7.96.66.96 1.45 2.03 2.48 1.99.99-.04 1.37-.64 2.57-.64 1.2 0 1.54.64 2.6.62 1.07-.02 1.75-.97 2.4-1.94.76-1.11 1.07-2.19 1.09-2.24-.02-.01-2.09-.8-2.11-3.17zM14.5 6.4c.55-.66.92-1.59.82-2.51-.79.03-1.74.52-2.31 1.18-.51.59-.96 1.53-.84 2.43.88.07 1.78-.45 2.33-1.1z"/></svg>);
  if (n === "windows") return (<svg {...p}><path d="M3 5.6 10.4 4.6V11.4H3V5.6zM10.4 12.6V19.4L3 18.4V12.6H10.4zM11.6 4.45 21 3.2V11.4H11.6V4.45zM21 12.6V20.8L11.6 19.55V12.6H21z"/></svg>);
  if (n === "linux") return (<svg {...p}><path d="M12 2.6c-2.3 0-3.4 2-3.3 3.9.06 1.2.1 2.2-.5 3.4-.7 1.3-2.3 3.2-2.3 5.1 0 .9.4 1.4.4 1.4s-.5.3-.5.9c0 .7.7.9 1.6 1.1.8.2 1.6.7 2.3 1.1.6.3 1.2.2 1.6-.1.5-.4.6-.4 1.1 0 .4.3 1 .4 1.6.1.7-.4 1.5-.9 2.3-1.1.9-.2 1.6-.4 1.6-1.1 0-.6-.5-.9-.5-.9s.4-.5.4-1.4c0-1.9-1.6-3.8-2.3-5.1-.6-1.2-.56-2.2-.5-3.4C15.4 4.6 14.3 2.6 12 2.6zm-1.4 4c.4 0 .7.4.7.9s-.3.9-.7.9-.7-.4-.7-.9.3-.9.7-.9zm2.8 0c.4 0 .7.4.7.9s-.3.9-.7.9-.7-.4-.7-.9.3-.9.7-.9zM12 9.4c.8 0 1.7.5 1.7.9 0 .3-.9.8-1.7.8s-1.7-.5-1.7-.8c0-.4.9-.9 1.7-.9z"/></svg>);
  if (n === "github") return (<svg {...p}><path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49 0-.24-.01-.87-.01-1.71-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.36 1.12 2.94.85.09-.66.35-1.12.63-1.38-2.22-.26-4.55-1.14-4.55-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05a9.3 9.3 0 0 1 5 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.81-4.57 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .27.18.59.69.49A10.02 10.02 0 0 0 22 12.25C22 6.58 17.52 2 12 2z"/></svg>);
  return null;
}

function Cross({ pos }) { return <span className={"x " + pos} />; }

function getForcedOS() {
  const q = new URLSearchParams(location.search).get("os");
  return ["mac", "windows", "linux", "mobile", "unknown"].includes(q) ? q : null;
}
function isMobileDevice() {
  const ua = navigator.userAgent || "";
  return /Android|iPhone|iPod|Mobile/i.test(ua) ||
    (window.matchMedia("(pointer:coarse)").matches && Math.min(screen.width, screen.height) < 820);
}

function Download({ osTweak = "auto", archTweak = "auto" }) {
  const queryForced = getForcedOS();
  const forced = osTweak !== "auto" ? osTweak : queryForced;
  const mobile = forced ? forced === "mobile" : isMobileDevice();
  const baseOS = forced && forced !== "mobile" ? forced : J.detectOS();
  const isMac = baseOS === "mac";

  const [autoArch, setAutoArch] = useState("arm");
  useEffect(() => {
    if (isMac && archTweak === "auto" && !forced) {
      J.refineMacArch().then((alt) => { if (alt) setAutoArch("intel"); });
    }
  }, [isMac, archTweak, forced]);
  const arch = archTweak === "intel" ? "intel" : archTweak === "apple silicon" ? "arm" : autoArch;

  if (mobile) {
    return (
      <div className="dl mobile-note">
        <div className="mn-title">Jelico is a desktop app</div>
        <p className="mn-body">Open this page on a macOS, Windows, or Linux computer to download and install.</p>
        <div className="dl-meta">v{J.VERSION} · <a href={J.links.releases} target="_blank" rel="noopener">view all releases</a></div>
      </div>
    );
  }

  const info = J.primaryDownload(baseOS);
  const osLabel = info.os === "unknown" ? null : info.osLabel;
  let href = info.primary.url;
  let platform;
  if (isMac) {
    const cur = J.macBuilds[arch];
    href = cur.url;
    platform = cur.label;
  } else {
    platform = info.os === "unknown" ? "macOS · Windows · Linux" : info.primary.label;
  }

  return (
    <div className="dl">
      <a className="dlb" href={href} download>
        <span className="layer l1"><Ico n={info.glyph} s={18} /> Download{osLabel ? " for " + osLabel : ""}</span>
        <span className="layer l2">Handoff your tasks today →</span>
      </a>
      <div className="dl-meta">{platform} <span className="divider">|</span> <a href={J.links.releases} target="_blank" rel="noopener">see all platforms</a></div>
    </div>
  );
}

const SHOTS = [
  { src: "assets/jelico-shot-welcome.png", cap: "a calm place to start" },
  { src: "assets/jelico-shot-explore.png", cap: "exploring a codebase, tool by tool" },
  { src: "assets/jelico-session.png", cap: "working through a task on your desktop" },
];

function Carousel() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((p) => (p + 1) % SHOTS.length), 7000);
    return () => clearInterval(id);
  }, []);
  return (
    <>
      <div className="shot carousel">
        {SHOTS.map((s, idx) => (
          <img key={s.src} src={s.src} className={idx === i ? "on" : ""} alt="Jelico desktop app" />
        ))}
      </div>
      <div className="dots">
        {SHOTS.map((_, idx) => (
          <button key={idx} className={"dot" + (idx === i ? " on" : "")} onClick={() => setI(idx)} aria-label={"Slide " + (idx + 1)} />
        ))}
      </div>
      <p className="cap">{SHOTS[i].cap}</p>
    </>
  );
}

const POINTS = [
  { n: "01", k: "Runs on your machine", d: "Your files and conversations stay local. Nothing leaves unless you choose a cloud model." },
  { n: "02", k: "Remembers how you work", d: "A memory and a soul that quietly learn your style, so it feels more like you over time." },
  { n: "03", k: "Works with any model", d: "Claude, GPT, Gemini, or a model on your laptop. Your pick, swap any time." },
];

const FCELLS = [
  { l: "SOURCE", v: <a className="v" href={J.links.repo} target="_blank" rel="noopener">github ↗</a> },
  { l: "RELEASES", v: <a className="v" href={J.links.releases} target="_blank" rel="noopener">v0.40.0 ↗</a> },
  { l: "LICENSE", v: <span className="v">GPL-3.0</span> },
  { l: "SAY IT", v: <span className="v">jel-ih-koh</span> },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "previewOS": "auto",
  "macArch": "auto"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Restore a visitor's saved theme once on mount (production has no host to restore tweaks).
  useEffect(() => {
    try { const saved = localStorage.getItem("jelico-theme"); if (saved && saved !== t.theme) setTweak("theme", saved); } catch (e) {}
  }, []);
  useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    try { localStorage.setItem("jelico-theme", t.theme); } catch (e) {}
  }, [t.theme]);
  const toggle = () => setTweak("theme", t.theme === "dark" ? "light" : "dark");

  return (
    <>
    <div className="frame">
      <header className="panel ph">
        <img className="wm" src="assets/jelico-wordmark.png" alt="Jelico" />
        <div className="ph-r">
          <a className="ghl" href={J.links.repo} target="_blank" rel="noopener"><Ico n="github" s={15} /> github</a>
          <button onClick={toggle}>{t.theme === "dark" ? "light" : "dark"}</button>
        </div>
      </header>

      <section className="panel hero">
        <p className="eyebrow">A desktop ADE (agent development environment) that gets work done</p>
        <h1>give it a task. go do something else.</h1>
        <p className="sub">Jelico <span className="pronounce">(JEL-uh-koh)</span> is a desktop agent that quietly gets the work done — on your own machine, the way you like it.</p>
        <Download osTweak={t.previewOS} archTweak={t.macArch} />
      </section>

      <section className="panel shotpanel">
        <div className="glow" />
        <Carousel />
      </section>

      <section className="panel points">
        {POINTS.map((p) => (
          <div className="pcell" key={p.k}>
            <h3><b></b>{p.k}</h3>
            <p>{p.d}</p>
          </div>
        ))}
      </section>

      <section className="panel close">
        <h2>give it a task. <em>go.</em></h2>
        <Download osTweak={t.previewOS} archTweak={t.macArch} />
      </section>

      <footer className="panel foot">
        <img className="wm wm-mono" src="assets/jelico-wordmark.png" alt="Jelico" />
        <div className="foot-info">
          <a className="ghl" href={J.links.repo} target="_blank" rel="noopener"><Ico n="github" s={14} /> github</a>
          <a href={J.links.license} target="_blank" rel="noopener">GPL-3.0</a>
        </div>
      </footer>
    </div>

    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]} onChange={(v) => setTweak("theme", v)} />
      <TweakSection label="Preview platform" />
      <TweakSelect label="Detected OS" value={t.previewOS} options={["auto", "mac", "windows", "linux", "mobile"]} onChange={(v) => setTweak("previewOS", v)} />
      <TweakSelect label="Mac build" value={t.macArch} options={["auto", "apple silicon", "intel"]} onChange={(v) => setTweak("macArch", v)} />
    </TweaksPanel>
    </>
  );
}

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