// v5 — /contact entry.
// The engagements material that used to close /practice, plus the direct line:
// email, LinkedIn, where I am, and what 2026 looks like. Values are the same ones
// carried in the site footer (V5Footer, src/v5-engagements.jsx) — one source of truth.
// Section id (#engagements) is 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 V5ContactAsciiMount = (props) => (typeof window.V5AsciiField === "function" ? React.createElement(window.V5AsciiField, props) : null);
// The direct line, in four beats: a greeting, where, when, what to do.
const V5_CONTACT_HEADER_WORDS = ["HELLO", "BOULDER", "2026", "EMAIL ME"];
const V5_CONTACT_HEADER_AVOID = [
{ sel: ".v5-practice-header-title", role: "head" },
".v5-practice-header-lede p"];

const V5ContactHeader = () => {
  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 */}
      <V5ContactAsciiMount name="contact-header" words={V5_CONTACT_HEADER_WORDS} cycleMs={3200} anchor="right" opacity={0.55} avoid={V5_CONTACT_HEADER_AVOID} />
      <div className="v4-container">
        <h1 className="v5-practice-header-title" data-cursor="Start here">
          <WordReveal text="Let’s chat." stagger={55} />
        </h1>
        <div className="v5-practice-header-lede">
          <FadeIn delay={280}>
            <p>Tell me what you’re working on, where it’s stuck, and when you need it.</p>
          </FadeIn>
        </div>
      </div>
    </section>);

};

// DIRECT — the contact affordances the engagements section does not provide.
// Same values as the footer contact column; do not fork them.
const V5ContactDirect = () => {
  return (
    <section id="direct" className="v5-contact-direct" data-screen-label="Contact · Direct">
      <div className="v4-container">
        <div className="v5-contact-grid">
          <div className="v5-contact-item v5-contact-item-lead">
            <span className="v5-contact-key">Email</span>
            <Magnetic strength={8}>
              <a href="mailto:znerold@gmail.com" className="v5-contact-val" data-cursor="Open in your mail client" data-cursor-style="cta">znerold@gmail.com</a>
            </Magnetic>
          </div>

          <div className="v5-contact-item">
            <span className="v5-contact-key">LinkedIn</span>
            <Magnetic strength={8}>
              <a href="https://www.linkedin.com/in/znerold" target="_blank" rel="noopener" className="v5-contact-val" data-cursor="Open profile" data-cursor-style="cta">in/znerold</a>
            </Magnetic>
          </div>

          <div className="v5-contact-item">
            <span className="v5-contact-key">Located</span>
            <span className="v5-contact-val">Boulder, Colorado</span>
          </div>

          <div className="v5-contact-item">
            <span className="v5-contact-key">Status</span>
            <span className="v5-contact-val v5-contact-status">
              <span className="v5-contact-status-dot" aria-hidden="true"></span>
              Available · 2026
            </span>
          </div>
        </div>
      </div>
    </section>);

};

const V5ContactApp = () => {
  // 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 (/contact#engagements) land before React has mounted the section.
  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 v5-contact-page">
      <ScrollProgress />
      <CursorCompanion />
      <V5Nav />

      <V5ContactHeader />

      {/* === DIRECT === email, LinkedIn, location, availability */}
      <V5ContactDirect />

      {/* === ENGAGEMENTS === the ways to work together */}
      <V5Engagements />

      <V5Footer />
    </div>);

};

Object.assign(window, { V5ContactApp, V5ContactHeader, V5ContactDirect, V5_CONTACT_HEADER_WORDS });

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