// v5 — /about entry.
// Ordered who -> what -> how: the six lenses, then the disciplines, then the
// flywheel and the AI section. Engagements live on /contact.
// Section ids (#method, #about) are preserved so old deep links keep working.

// The ASCII field mount (src/v5-ascii.jsx). Resolved at render so a page
// that loads this file without it renders nothing there instead of throwing.
const V5AboutAsciiMount = (props) => (typeof window.V5AsciiField === "function" ? React.createElement(window.V5AsciiField, props) : null);
// The header's own architecture, in the order the page runs it: who, what, how.
const V5_ABOUT_HEADER_WORDS = ["WHO", "WHAT", "HOW"];
const V5_ABOUT_HEADER_AVOID = [
{ sel: ".v5-practice-header-title", role: "head" },
".v5-practice-header-lede p"];

const V5AboutHeader = () => {
  return (
    <section id="top" className="v5-practice-header zn-ascii-host">
      {/* Ambient ASCII field, right of the H1. Same device as the homepage
          hero, different payload; see src/zn-ascii-engine.js */}
      <V5AboutAsciiMount name="about-header" words={V5_ABOUT_HEADER_WORDS} cycleMs={3200} anchor="right" opacity={0.55} avoid={V5_ABOUT_HEADER_AVOID} />
      <div className="v4-container">
        <h1 className="v5-practice-header-title" data-cursor="The long version">
          <WordReveal text="The practice," stagger={55} />
          {" "}
          <span className="emph"><WordReveal text="in full." stagger={55} startDelay={300} /></span>
        </h1>
        <div className="v5-practice-header-lede">
          <FadeIn delay={280}>
            <p>Who I am, what I do, and how the work works.</p>
          </FadeIn>
        </div>
      </div>
    </section>);

};

const V5AboutApp = () => {
  // Same in-page anchor handling as the homepage.
  useEffect(() => {
    const handler = (ev) => {
      const link = ev.target.closest("a[href^='#']");
      if (!link) return;
      const href = link.getAttribute("href");
      if (href === "#" || href.length < 2) return;
      const el = document.querySelector(href);
      if (!el) return;
      ev.preventDefault();
      window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);

  // Deep links (/about#method) land before React has mounted the section, so
  // resolve the hash once the sections exist.
  useEffect(() => {
    const hash = window.location.hash;
    if (!hash || hash.length < 2) return;
    const jump = () => {
      const el = document.querySelector(hash);
      if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "auto" });
    };
    const t1 = setTimeout(jump, 60);
    const t2 = setTimeout(jump, 500);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <div className="v4-page v5-page v5-practice-page">
      <ScrollProgress />
      <CursorCompanion />
      <V5Nav />


      {/* === WHO I AM === the six lenses */}
      <V5Facet />

      {/* === WHAT I DO === the disciplines */}
      <section id="disciplines" className="v5-method v5-disciplines-section" data-screen-label="What I do">
        <div className="v4-container">
          <V5Disciplines />
        </div>
      </section>

      {/* === HOW THE WORK WORKS === the four principles */}
      <V5Principles />
      <V5Teaching showLede={false} />

      {/* === HOW, CONTINUED === the instrument the method runs on */}
      <div id="fluency">
        <V5AIFluency />
      </div>

      {/* === COLOPHON === type, stack, engine, built */}

      {/* The field again, above the footer: AVAILABLE, pointer-reactive only */}
      <V5FootField />
      <V5Footer />
    </div>);

};

Object.assign(window, { V5AboutApp, V5AboutHeader, V5_ABOUT_HEADER_WORDS });

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