/* Manifesto — sticky pinned, words light up tightly bound to scroll */
const Manifesto = () => {
  const ref = React.useRef(null);
  const wordsRef = React.useRef([]);

  const text = "We work after hours because that's when ideas breathe. No roadmaps, no quarterly noise — just careful builds, shipped when they're ready. Each project is a complete thought.";
  const words = text.split(" ");

  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const el = ref.current;
        if (!el) return;
        const rect = el.getBoundingClientRect();
        const vh = window.innerHeight;
        // total scroll distance over which the reveal plays
        const total = rect.height - vh;
        if (total <= 0) return;
        // progress: 0 when sticky stage first sticks (rect.top hits 0),
        // 1 when section is about to exit (rect.top = -total)
        const progress = Math.max(0, Math.min(1, -rect.top / total));
        const eased = Math.min(1, progress / 0.85);
        const lit = Math.round(eased * words.length);
        wordsRef.current.forEach((node, i) => {
          if (!node) return;
          if (i < lit) node.classList.add("lit");
          else node.classList.remove("lit");
        });
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    onScroll();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section className="manifesto manifesto-pin" id="manifesto" ref={ref}>
      <div className="manifesto-stage">
        <div className="container">
          <div className="manifesto-wrap">
            <div className="manifesto-side">
              <div className="eyebrow">Manifesto</div>
              <div className="num">01</div>
            </div>
            <div className="manifesto-text">
              {words.map((w, i) => {
                const isItalic = /^(after|hours|breathe|complete\.?)$/i.test(w);
                return (
                  <React.Fragment key={i}>
                    <span
                      className="word"
                      ref={(el) => (wordsRef.current[i] = el)}
                    >
                      {isItalic ? <em>{w}</em> : w}
                    </span>{" "}
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* Projects index */
const PROJECTS = [
  {
    n: "01",
    name: "FiveM Scripts",
    nameEm: "Scripts",
    desc: "Server-side systems and tools for FiveM. The first complete project under After-Hours.",
    tags: "Live · 6 scripts",
    soon: false,
    href: "fivem.html",
  },
  {
    n: "02",
    name: "Untitled Tool",
    nameEm: "Tool",
    desc: "A small utility we keep coming back to. Quietly in development.",
    tags: "In progress",
    soon: true,
  },
  {
    n: "03",
    name: "Notebook",
    nameEm: "Notebook",
    desc: "Notes, experiments, and writing. Public when it's ready.",
    tags: "Q3 · 2026",
    soon: true,
  },
  {
    n: "04",
    name: "—",
    desc: "An idea waiting for the right night.",
    tags: "Reserved",
    soon: true,
  },
];

const Projects = () => {
  return (
    <section className="projects" id="projects">
      <div className="container">
        <Reveal className="projects-head">
          <h2 className="projects-title">
            The <em>index.</em>
          </h2>
          <div className="projects-meta">
            04 entries<br />
            01 live · 03 pending<br />
            updated 2026
          </div>
        </Reveal>

        <div>
          {PROJECTS.map((p) => (
            <a
              key={p.n}
              className={`project-row ${p.soon ? "coming-soon" : ""}`}
              href={p.href || "#"}
              onClick={(e) => { if (!p.href) e.preventDefault(); }}
            >
              <span className="num">{p.n}</span>
              <span className="name">
                {p.nameEm
                  ? <>{p.name.replace(p.nameEm, "")}<em>{p.nameEm}</em></>
                  : p.name}
              </span>
              <span className="desc">{p.desc}</span>
              <span className="tags">{p.tags}</span>
              <span className="arrow">{p.soon ? "·" : "↗"}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Manifesto, Projects });