/* chapters-early.jsx — Embedded Operator (Ch. 00) + Foundation (Ch. I) + Scale (Ch. II) */
/* global React, Bloom, Splatter, Halftone, RegistrationMark, ColorBar, Arrow, Underline, CircledNumber, Burst, mulberry, CHAPTERS, ROLES, ENGAGEMENT_MODES, PageTurn, LinkedInStamp, smoothJump, ReactDOM */

const { useState: useStateE, useEffect: useEffectE, useRef: useRefE, useMemo: useMemoE } = React;

/* Stat-click context: when provided by an ancestor (the Career Journey view),
   stat tiles render as buttons that open the case-study modal. When null
   (the original linear flow), they render as plain divs. */
const StatClickContext = React.createContext(null);
Object.assign(window, { StatClickContext });

/* ============================================================
   ChapterShell — shared layout
   ============================================================ */
function ChapterShell({ chapter, art, children, alt }) {
  const [activeTitle, setActiveTitle] = useStateE(chapter.titleDefault);
  const title = chapter.titleOptions[activeTitle];
  const onStatClick = React.useContext(StatClickContext);
  return (
    <section className="chapter" id={`chapter-${chapter.id}`} data-screen-label={`${chapter.num} ${title}`}>
      <div className="folio">
        <span>{chapter.dateline}</span>
        <span className="folio__num">{chapter.folio}</span>
      </div>

      <div className="page">
        <p className="chapter__num">Chapter {chapter.num}.</p>

        <div className="alt-titles" role="tablist" aria-label="Alternate chapter titles">
          <span className="alt-titles__label">Alt. titles &mdash;</span>
          {chapter.titleOptions.map((opt, i) =>
          <button
            key={i}
            className="alt-title"
            role="tab"
            data-active={i === activeTitle}
            aria-selected={i === activeTitle}
            onClick={() => setActiveTitle(i)}>
            
              {opt}
            </button>
          )}
        </div>

        <h2 className="chapter__title">{title}</h2>
        <p className="chapter__subtitle">{chapter.subtitle}</p>

        <div className="eyebrow">
          <span>{chapter.company}</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>{chapter.role}</span>
        </div>
        {chapter.descriptor && (
          <div className="chapter__descriptor">{chapter.descriptor}</div>
        )}

        <div className="chapter__body-cols">
        <div className={`chapter__grid ${art ? "" : "chapter__grid--no-art"}`}>
          <div className="chapter__narrative">
            {chapter.narrative.map((p, i) =>
            <p key={i} className={i === 0 ? "dropcap" : ""}>{p}</p>
            )}

            {chapter.marginalia &&
            <div style={{ marginTop: 26 }}>
                <span style={{ fontFamily: "var(--font-hand)", fontSize: 26, color: "var(--accent)", display: "inline-block", transform: "rotate(-2deg)" }}>
                  &mdash; {chapter.marginalia}
                </span>
              </div>
            }
          </div>

          {art && <div className="chapter__art">{art}</div>}
        </div>

        {/* Case studies — stacked in the right column. Clickable when a
            StatClickContext handler is provided (Career Journey view). */}
        <div className="chapter__cases">
        <header className="chapter__cases-head">
          <span className="chapter__cases-title">Case studies</span>
          <span className="chapter__cases-soon">coming soon</span>
        </header>
        <div className="stats">
          {chapter.stats.map((s, i) => {
            const inner = (
              <React.Fragment>
                <div className="stat__num">
                  {s.num}<em>{s.unit || ""}</em>{s.suffix || ""}
                </div>
                <div className="stat__label">{s.label}</div>
              </React.Fragment>
            );
            return onStatClick ? (
              <button
                key={i}
                type="button"
                className="stat stat--clickable"
                onClick={() => onStatClick(chapter.id, i)}
                aria-label={`Open case study: ${s.label}`}>
                {inner}
                <span className="stat__chip" aria-hidden="true">case study →</span>
              </button>
            ) : (
              <div key={i} className="stat">{inner}</div>
            );
          })}
        </div>
        </div>
        </div>

        {/* Pull quote — rendered only if the chapter has one */}
        {chapter.quote && (
          <blockquote className="pullquote">
            <span className="pullquote__mark">&ldquo;</span>
            <p className="pullquote__text">{chapter.quote.text}</p>
            <div className="pullquote__cite">
              &mdash;&nbsp; <strong>{chapter.quote.who}</strong>, {chapter.quote.role}
            </div>
          </blockquote>
        )}

        {chapter.quoteB &&
        <blockquote className="pullquote" style={{ marginTop: 36 }}>
            <p className="pullquote__text" style={{ fontSize: "clamp(18px, 2vw, 24px)" }}>{chapter.quoteB.text}</p>
            <div className="pullquote__cite">
              &mdash;&nbsp; <strong>{chapter.quoteB.who}</strong>, {chapter.quoteB.role}
            </div>
          </blockquote>
        }

        {/* Accent-colored separator rule. The "See all recommendations" link
            sits clearly below this red line, visually detached from the
            pullquote citation above. Renders on every chapter regardless
            of whether the chapter itself has a quote. */}
        <hr className="pullquote__rule" aria-hidden="true" />
        <a className="pullquote__more"
           href="https://www.linkedin.com/in/avastola/details/recommendations/?detailScreenTabIndex=0"
           target="_blank"
           rel="noopener noreferrer">
          See all recommendations on LinkedIn &rarr;
        </a>

        {children}
      </div>
    </section>);

}

/* ============================================================
   OFFERINGS — Embedded Operator: 4 roles × 3 ways to engage
   ============================================================ */
function Offerings() {
  const [activeRole, setActiveRole] = useStateE(0);
  const [hoverRole, setHoverRole]   = useStateE(null);  /* idx of hovered tab */
  const [painIdx, setPainIdx]       = useStateE(0);
  const [painFade, setPainFade]     = useStateE(false);
  const [modalOpen, setModalOpen]   = useStateE(false);
  const role = ROLES[activeRole];
  /* Which column the "pick a role" arrow points to: hovered tab if any,
     otherwise the active tab. */
  const cueIdx = hoverRole == null ? activeRole : hoverRole;

  /* Reset the pain-point rotation whenever the user switches role */
  useEffectE(() => { setPainIdx(0); setPainFade(false); }, [activeRole]);

  /* Auto-advance every 20s with a short cross-fade */
  useEffectE(() => {
    if (!role.painPoints || role.painPoints.length < 2) return;
    const t = setInterval(() => {
      setPainFade(true);
      setTimeout(() => {
        setPainIdx((i) => (i + 1) % role.painPoints.length);
        setPainFade(false);
      }, 380);
    }, 20000);
    return () => clearInterval(t);
  }, [activeRole, role.painPoints]);

  /* Esc closes the pain-point modal */
  useEffectE(() => {
    if (!modalOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setModalOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [modalOpen]);

  function pickPain(i) {
    if (i === painIdx) return;
    setPainFade(true);
    setTimeout(() => { setPainIdx(i); setPainFade(false); }, 220);
  }

  return (
    <section className="chapter offerings-section" id="offerings" data-screen-label="00 Embedded Operator">
      <div className="folio">
        <span>The Independent Practice · Currently available</span>
        <span className="folio__num">PG 003</span>
      </div>

      <div className="page">
        <div className="eyebrow"><span>Let&rsquo;s make an impact</span></div>
        <h2 className="chapter__title offerings__title">
          Ways to <em style={{ fontStyle: "italic", color: "var(--accent)" }}>Engage.</em>
        </h2>
        <p className="chapter__subtitle">Four roles I play.
Many ways we engage.
One operator who&rsquo;s done it before.</p>

        <div className="offerings__lede">
          <Bloom color="var(--bloom)" size={300} top={-60} left={"75%"} seed={4} opacity={0.4} />
          <p className="body offerings__lede-copy">I embed with leadership teams to design and activate the operating systems that high-growth or high-complexity organizations need to scale sustainably. I have a strong preference for the room where decisions get made and change is driven. I don't implement and disappear. I architect for durability, leaving organizations measurably more capable than I found them. Engagements typically run 3 to 18+ months.



          </p>
          <XShapedCallout />
        </div>

        {/* ===== 4 ROLES — selectable tabs with the "yes, this is what I need" pitch ===== */}
        <div className="roles">
          {/* Cue wrapper — the "pick a role ↓" arrow rides above the tabs
              and slides between columns as the user hovers / clicks. */}
          <div
            className="roles__cue-row"
            style={{ "--cue-cols": ROLES.length, "--cue-idx": cueIdx }}>
            <span className="hand offerings__pickone" aria-hidden="true">
              pick a role &darr;
            </span>
          </div>
          <div className="roles__tabs" role="tablist" aria-label="The four roles I play">
            {ROLES.map((r, i) => <button key={r.id}
            role="tab"
            aria-selected={i === activeRole}
            data-active={i === activeRole}
            className="role-tab"
            onMouseEnter={() => setHoverRole(i)}
            onMouseLeave={() => setHoverRole(null)}
            onFocus={() => setHoverRole(i)}
            onBlur={() => setHoverRole(null)}
            onClick={() => setActiveRole(i)}>
                <span className="role-tab__num">{r.num}</span>
                <span className="role-tab__title">{r.title}</span>
                <span className="role-tab__indicator" aria-hidden="true" />
              </button>
            )}
          </div>

          <div className="role-panel" role="tabpanel" key={role.id}>
            <div className="role-panel__grid">
              {/* LEFT: identity — number, title, subtitle, description (pitch) kept visually together */}
              <div className="role-panel__identity">
                <div className="dateline" style={{ color: "var(--accent)" }}>{role.num} · The role</div>
                <h3 className="role-panel__title">{role.title}</h3>
                <p className="role-panel__sub">{role.subtitle}</p>
                <p className="role-panel__pitch">{role.pitch}</p>
              </div>

              {/* RIGHT: detail — "Yes, this is me, if…" stacked above "What it looks like in practice" */}
              <div className="role-panel__detail">
                <div className="role-panel__match">
                  <span className="hand" style={{ fontSize: 26 }}>Yes &mdash; this is me, if&hellip;</span>

                  {/* Rotating pain point — fades through 4 every 20s, clickable to open the full list */}
                  <button
                    type="button"
                    className={`role-panel__pain ${painFade ? "is-fading" : ""}`}
                    onClick={() => setModalOpen(true)}
                    aria-label="See all pain points for this role">
                    <em>{role.painPoints[painIdx]}</em>
                  </button>

                  {/* Navigation dots */}
                  <div className="role-panel__pain-dots" role="tablist" aria-label="Pain point">
                    {role.painPoints.map((_, i) =>
                      <button
                        key={i}
                        type="button"
                        role="tab"
                        aria-selected={i === painIdx}
                        aria-label={`Pain point ${i + 1}`}
                        className={`role-panel__pain-dot ${i === painIdx ? "is-active" : ""}`}
                        onClick={() => pickPain(i)} />
                    )}
                    <button
                      type="button"
                      className="role-panel__pain-more"
                      onClick={() => setModalOpen(true)}>
                      see all &rarr;
                    </button>
                  </div>
                </div>

                <div className="role-panel__practice">
                  <div className="role-panel__divider"><span>What it looks like in practice</span></div>
                  <ul className="role-panel__list">
                    {role.looksLike.map((b, i) =>
                    <li key={i}><span className="role-panel__bullet">✦</span> {b}</li>
                    )}
                  </ul>
                </div>
              </div>
            </div>
          </div>

          {/* ===== Pain-point modal — opens on click of the rotating text or "see all" ===== */}
          {modalOpen && ReactDOM.createPortal(
            <div className="pain-modal" role="dialog" aria-modal="true" aria-labelledby="pain-modal-title"
                 onMouseDown={(e) => { if (e.target === e.currentTarget) setModalOpen(false); }}>
              <div className="pain-modal__card">
                <button type="button" className="pain-modal__close" onClick={() => setModalOpen(false)} aria-label="Close">&times;</button>
                <span className="pain-modal__tape">{role.num} &middot; {role.title}</span>
                <h3 id="pain-modal-title" className="pain-modal__title">
                  Does this sound like the <em>room you&rsquo;re in?</em>
                </h3>
                <p className="pain-modal__sub">I&rsquo;m here to help.</p>
                <ol className="pain-modal__list">
                  {role.painPoints.map((p, i) =>
                    <li key={i} className="pain-modal__item">
                      <span className="pain-modal__num">{String(i + 1).padStart(2, "0")}</span>
                      <p className="pain-modal__text">{p}</p>
                    </li>
                  )}
                </ol>
                <a
                  href="https://www.linkedin.com/in/avastola/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="pain-modal__cta"
                  onClick={() => setModalOpen(false)}>
                  Let&rsquo;s talk &rarr;
                </a>
              </div>
            </div>,
            document.body
          )}
        </div>

        {/* ===== 3 WAYS TO ENGAGE ===== */}
        <div className="engage-block">
          <div className="engage-block__head">
            <span className="tape" style={{ background: "var(--accent)", color: "var(--paper)" }}>How we engage</span>
            <h3 className="engage-block__title">Four ways in</h3>
          </div>

          <div className="engage-grid">
            {ENGAGEMENT_MODES.map((m) =>
            <div key={m.n} className="engage-card">
                <div className="engage-card__num">{m.n}</div>
                <h4 className="engage-card__title">{m.title}</h4>
                <p className="engage-card__duration">{m.duration}</p>
                <p className="engage-card__body">{m.body}</p>
              </div>
            )}
          </div>

          {/* CTA — sits beneath the engagement grid. Routes outreach to LinkedIn. */}
          <div className="engage-block__cta">
            <h3 className="engage-block__cta-title">Built &amp; led, at scale.</h3>
            <a
              href="https://www.linkedin.com/in/avastola/"
              className="linkbtn"
              target="_blank"
              rel="noopener noreferrer">
              Let&rsquo;s make an impact &rarr;
            </a>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================================================
   CHAPTER I — Born in Branding (cutting room floor)
   What hits the cutting room floor is what's LEFT BEHIND.
   These are the early-career challenges that got trimmed away.
   ============================================================ */
function ChapterFoundation() {
  const chapter = CHAPTERS[0];
  return <ChapterShell chapter={chapter} art={null} />;
}

/* ============================================================
   FIG. 1 — The Process Loop
   An animated three-stage workflow that mirrors how I built
   the UX practice from the ground up at Greenfield Belser:

     WIREFRAMES  →  FUNCTIONAL SPECS  →  DESIGN SYSTEM / TRAINING

   The three panels animate in sequence: wireframe blocks
   draw themselves, then spec lines populate with callout
   pins, then a grid of design-system components lights up
   one tile at a time. A dashed flow line connects the panels
   and loops back, signaling the iterative nature of the work.
   ============================================================ */
function ProcessLab() {
  const ref = useRefE(null);
  const [drawn, setDrawn] = useStateE(false);

  /* Trigger the entrance only when the figure scrolls into view. */
  useEffectE(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) { setDrawn(true); obs.disconnect(); }
      }),
      { threshold: 0.25 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  /* Design-system component tiles — populate in a stagger to evoke a
     library coming online piece by piece. */
  const SYSTEM_TILES = [
    { label: "btn" }, { label: "input" }, { label: "card" },
    { label: "nav" }, { label: "modal" }, { label: "type" },
    { label: "grid" }, { label: "color" }, { label: "icon" },
  ];

  return (
    <div className={`process-lab ${drawn ? "is-drawn" : ""}`} ref={ref} aria-hidden="true">
      {/* Drafting-grid background — quiet blueprint texture. */}
      <div className="process-lab__grid" />

      {/* Top corner label, in the same convention as Fig 2 (Blueprint). */}
      <span className="process-lab__label">FIG. 1 · The Process Loop</span>
      <span className="process-lab__hint">wireframes → specs → system</span>

      <svg
        className="process-lab__scene"
        viewBox="0 0 600 460"
        preserveAspectRatio="xMidYMid meet">
        <defs>
          {/* Reusable callout pin: small circle with a number inside. */}
          <symbol id="pl-pin" viewBox="-8 -8 16 16">
            <circle r="7" fill="var(--paper)" stroke="var(--accent)" strokeWidth="1.2" />
          </symbol>
          {/* Arrowhead marker for the flow lines. */}
          <marker id="pl-arrow" viewBox="0 0 10 10" refX="9" refY="5"
                  markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
          </marker>
        </defs>

        {/* ============================================================
            PANEL 1 — WIREFRAMES (left third)
            Stroke-dash draw-in for each wireframe rectangle.
            ============================================================ */}
        <g className="pl-panel pl-panel--wires">
          <rect x="20" y="60"  width="160" height="220" className="pl-panel__frame pl-draw" />
          <text x="100" y="50" textAnchor="middle" className="pl-panel__title">WIREFRAMES</text>
          <text x="100" y="296" textAnchor="middle" className="pl-panel__sub">STAGE 01 · STRUCTURE</text>

          {/* Header bar */}
          <rect x="32" y="74"  width="136" height="18" className="pl-wire pl-draw" style={{ animationDelay: ".15s" }} />
          {/* Nav row */}
          <rect x="32" y="98"  width="40"  height="8"  className="pl-wire pl-draw" style={{ animationDelay: ".30s" }} />
          <rect x="76" y="98"  width="40"  height="8"  className="pl-wire pl-draw" style={{ animationDelay: ".34s" }} />
          <rect x="120" y="98" width="40"  height="8"  className="pl-wire pl-draw" style={{ animationDelay: ".38s" }} />
          {/* Hero block */}
          <rect x="32" y="116" width="136" height="58" className="pl-wire pl-draw" style={{ animationDelay: ".50s" }} />
          {/* Two columns of content */}
          <rect x="32" y="184" width="62"  height="36" className="pl-wire pl-draw" style={{ animationDelay: ".70s" }} />
          <rect x="106" y="184" width="62" height="36" className="pl-wire pl-draw" style={{ animationDelay: ".78s" }} />
          {/* CTA row */}
          <rect x="58" y="232" width="84"  height="14" className="pl-wire pl-wire--cta pl-draw" style={{ animationDelay: ".90s" }} />
          {/* Footer rule */}
          <line x1="32" y1="262" x2="168" y2="262" className="pl-wire-line pl-draw" style={{ animationDelay: "1.00s" }} />

          {/* Measure marks — architectural detail */}
          <g className="pl-fade" style={{ animationDelay: "1.10s" }}>
            <line x1="14" y1="60"  x2="14" y2="280" stroke="var(--ink)" strokeWidth="0.6" opacity="0.5" />
            <line x1="10" y1="60"  x2="18" y2="60"  stroke="var(--ink)" strokeWidth="0.6" opacity="0.5" />
            <line x1="10" y1="280" x2="18" y2="280" stroke="var(--ink)" strokeWidth="0.6" opacity="0.5" />
            <text x="6" y="172" className="pl-tick" textAnchor="middle" transform="rotate(-90 6 172)">220</text>
          </g>
        </g>

        {/* ============================================================
            PANEL 2 — FUNCTIONAL SPECS (middle third)
            Lines of spec text populate; callout pins reference
            wireframe elements via dashed connector lines.
            ============================================================ */}
        <g className="pl-panel pl-panel--specs">
          <rect x="220" y="60" width="160" height="220" className="pl-panel__frame pl-draw" style={{ animationDelay: ".20s" }} />
          <text x="300" y="50" textAnchor="middle" className="pl-panel__title">FUNCTIONAL SPECS</text>
          <text x="300" y="296" textAnchor="middle" className="pl-panel__sub">STAGE 02 · BEHAVIOR</text>

          {/* Document header strip */}
          <rect x="232" y="74" width="136" height="6" className="pl-spec-rule pl-draw" style={{ animationDelay: ".45s" }} />

          {/* Numbered spec rows — each appears as a number + a "text" bar */}
          {[
            { y: 92,  num: "01", w: 120, delay: ".55s" },
            { y: 110, num: "02", w: 108, delay: ".62s" },
            { y: 128, num: "03", w: 116, delay: ".69s" },
            { y: 146, num: "04", w: 96,  delay: ".76s" },
            { y: 164, num: "05", w: 112, delay: ".83s" },
            { y: 182, num: "06", w: 100, delay: ".90s" },
            { y: 200, num: "07", w: 124, delay: ".97s" },
            { y: 218, num: "08", w: 92,  delay: "1.04s" },
            { y: 236, num: "09", w: 116, delay: "1.11s" },
            { y: 254, num: "10", w: 84,  delay: "1.18s" },
          ].map((row) => (
            <g key={row.num} className="pl-fade" style={{ animationDelay: row.delay }}>
              <text x="234" y={row.y + 5} className="pl-spec-num">{row.num}</text>
              <rect x="252" y={row.y} width={row.w} height="3" className="pl-spec-line" />
            </g>
          ))}

          {/* Callout pins on the spec — referencing back to the wireframes */}
          <g className="pl-fade pl-pulse-soft" style={{ animationDelay: "1.30s" }}>
            <use href="#pl-pin" x="378" y="108" />
            <text x="378" y="112" textAnchor="middle" className="pl-pin-num">A</text>
          </g>
          <g className="pl-fade pl-pulse-soft" style={{ animationDelay: "1.45s" }}>
            <use href="#pl-pin" x="378" y="172" />
            <text x="378" y="176" textAnchor="middle" className="pl-pin-num">B</text>
          </g>
          <g className="pl-fade pl-pulse-soft" style={{ animationDelay: "1.60s" }}>
            <use href="#pl-pin" x="378" y="236" />
            <text x="378" y="240" textAnchor="middle" className="pl-pin-num">C</text>
          </g>

          {/* Dashed connector lines from spec pins back to wireframe blocks */}
          <path d="M 372 108 C 250 110 200 130 180 140" className="pl-connector pl-draw"
                style={{ animationDelay: "1.65s" }} />
          <path d="M 372 172 C 250 180 200 200 180 200" className="pl-connector pl-draw"
                style={{ animationDelay: "1.75s" }} />
          <path d="M 372 236 C 250 240 200 240 180 238" className="pl-connector pl-draw"
                style={{ animationDelay: "1.85s" }} />
        </g>

        {/* ============================================================
            PANEL 3 — DESIGN SYSTEM / TRAINING (right third)
            A 3×3 grid of component tiles lights up in stagger.
            A small hand-off arrow + figure suggests training.
            ============================================================ */}
        <g className="pl-panel pl-panel--system">
          <rect x="420" y="60" width="160" height="220" className="pl-panel__frame pl-draw" style={{ animationDelay: ".40s" }} />
          <text x="500" y="50" textAnchor="middle" className="pl-panel__title">SYSTEM · TRAINING</text>
          <text x="500" y="296" textAnchor="middle" className="pl-panel__sub">STAGE 03 · DURABILITY</text>

          {/* 3×3 component grid — tiles populate one at a time */}
          {SYSTEM_TILES.map((tile, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            const x = 432 + col * 46;
            const y = 80 + row * 46;
            return (
              <g key={i} className="pl-tile pl-fade-scale" style={{ animationDelay: `${1.40 + i * 0.10}s` }}>
                <rect x={x} y={y} width="38" height="38"
                      className="pl-tile__rect" />
                <text x={x + 19} y={y + 23} textAnchor="middle" className="pl-tile__label">
                  {tile.label}
                </text>
              </g>
            );
          })}

          {/* Knowledge transfer hint — small designer figures + arrow */}
          <g className="pl-fade" style={{ animationDelay: "2.40s" }}>
            {/* "Trainer" head + shoulders */}
            <circle cx="446" cy="240" r="6" fill="var(--ink)" />
            <path d="M 436 256 Q 446 248 456 256 L 456 264 L 436 264 Z" fill="var(--ink)" />
            {/* Arrow of knowledge */}
            <line x1="462" y1="252" x2="538" y2="252" className="pl-flow-line"
                  markerEnd="url(#pl-arrow)" />
            {/* Two "learner" figures */}
            <circle cx="548" cy="240" r="5" fill="var(--ink)" opacity="0.7" />
            <path d="M 540 254 Q 548 248 556 254 L 556 262 L 540 262 Z" fill="var(--ink)" opacity="0.7" />
            <circle cx="566" cy="240" r="5" fill="var(--ink)" opacity="0.5" />
            <path d="M 558 254 Q 566 248 574 254 L 574 262 L 558 262 Z" fill="var(--ink)" opacity="0.5" />
          </g>
        </g>

        {/* ============================================================
            FLOW CONNECTORS — animated dashed arrows linking the three
            panels left-to-right, plus an iteration loop arc beneath.
            ============================================================ */}
        <g className="pl-fade" style={{ animationDelay: "2.20s" }}>
          {/* Panel 1 → Panel 2 */}
          <path d="M 184 170 C 195 170 205 170 216 170"
                className="pl-flow-line pl-flow-line--dashed"
                markerEnd="url(#pl-arrow)" />
          {/* Panel 2 → Panel 3 */}
          <path d="M 384 170 C 395 170 405 170 416 170"
                className="pl-flow-line pl-flow-line--dashed"
                markerEnd="url(#pl-arrow)" />
        </g>

        {/* Iteration loop — Panel 3 → Panel 1 (curves under) */}
        <g className="pl-fade" style={{ animationDelay: "2.60s" }}>
          <path d="M 500 290 C 500 340 380 380 300 380 C 220 380 100 340 100 290"
                className="pl-flow-line pl-flow-line--loop"
                markerEnd="url(#pl-arrow)" />
          <text x="300" y="402" textAnchor="middle" className="pl-loop-label">
            ITERATE · REFINE · SHIP
          </text>
        </g>

        {/* Tiny accent splatter — hand-set zine wink */}
        <g className="pl-fade" style={{ animationDelay: "2.80s" }}>
          <circle cx="560" cy="430" r="2.4" fill="var(--accent)" />
          <circle cx="568" cy="426" r="1.4" fill="var(--accent)" opacity="0.7" />
          <circle cx="553" cy="437" r="1.1" fill="var(--accent)" opacity="0.5" />
        </g>
      </svg>

      <div className="process-lab__stamp">
        <span className="stamp">SYSTEM · SHIPPED</span>
      </div>
    </div>);
}

/* ============================================================
   CHAPTER II — Connective Tissue (operating model blueprint)
   ============================================================ */
function ChapterScale() {
  const chapter = CHAPTERS[1];
  return <ChapterShell chapter={chapter} art={null} />;
}

function Blueprint() {
  const ref = useRefE(null);
  const [drawn, setDrawn] = useStateE(false);

  useEffectE(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {setDrawn(true);obs.disconnect();}
      }),
      { threshold: 0.3 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="blueprint" ref={ref}>
      <div className="blueprint__grid" />
      <span className="blueprint__label">FIG. 2 · OPERATING MODEL · DC OFFICE</span>

      <svg width="100%" height="100%" viewBox="0 0 500 400" style={{ position: "relative", zIndex: 1 }} aria-hidden="true">
        <defs>
          <style>{`
            .bp-line, .bp-rect { stroke: var(--ink); stroke-width: 1.5; fill: none; }
            .bp-rect-fill { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
            .bp-text { fill: var(--ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
            .bp-label { fill: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; }
            .bp-draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s ease-out; }
            .bp-fade { opacity: 0; transition: opacity .5s ease-out; }
            .blueprint.drawn .bp-draw { stroke-dashoffset: 0; }
            .blueprint.drawn .bp-fade { opacity: 1; }
            .bp-accent { stroke: var(--accent); }
          `}</style>
        </defs>

        {/* Central node */}
        <g className={drawn ? "drawn" : ""}>
          <rect x="180" y="160" width="140" height="60" className="bp-rect-fill bp-draw" />
          <text x="250" y="187" textAnchor="middle" className="bp-label bp-fade" style={{ transitionDelay: ".8s" }}>DELIVERY</text>
          <text x="250" y="205" textAnchor="middle" className="bp-text bp-fade" style={{ transitionDelay: "1s" }}>PM &middot; OPS &middot; FIN</text>

          {/* Top-left: Clients — Warner Bros instead of Sony */}
          <rect x="20" y="40" width="120" height="48" className="bp-rect-fill bp-draw" style={{ transitionDelay: ".1s" }} />
          <text x="80" y="62" textAnchor="middle" className="bp-label bp-fade" style={{ transitionDelay: ".9s" }}>CLIENTS</text>
          <text x="80" y="78" textAnchor="middle" className="bp-text bp-fade" style={{ transitionDelay: "1.1s" }}>Delta &middot; Warner Bros</text>

          {/* Top-right: Creative */}
          <rect x="360" y="40" width="120" height="48" className="bp-rect-fill bp-draw" style={{ transitionDelay: ".2s" }} />
          <text x="420" y="62" textAnchor="middle" className="bp-label bp-fade" style={{ transitionDelay: "1s" }}>CREATIVE</text>
          <text x="420" y="78" textAnchor="middle" className="bp-text bp-fade" style={{ transitionDelay: "1.2s" }}>STRAT &middot; DESIGN</text>

          {/* Bottom-left: Engineering — DATA ANALYSIS instead of BUILD */}
          <rect x="20" y="310" width="120" height="48" className="bp-rect-fill bp-draw" style={{ transitionDelay: ".3s" }} />
          <text x="80" y="332" textAnchor="middle" className="bp-label bp-fade" style={{ transitionDelay: "1.1s" }}>ENGINEERING</text>
          <text x="80" y="348" textAnchor="middle" className="bp-text bp-fade" style={{ transitionDelay: "1.3s" }}>DATA ANALYSIS &middot; QA</text>

          {/* Bottom-right: Finance / Resourcing */}
          <rect x="360" y="310" width="120" height="48" className="bp-rect-fill bp-draw" style={{ transitionDelay: ".4s" }} />
          <text x="420" y="332" textAnchor="middle" className="bp-label bp-fade" style={{ transitionDelay: "1.2s" }}>RESOURCING</text>
          <text x="420" y="348" textAnchor="middle" className="bp-text bp-fade" style={{ transitionDelay: "1.4s" }}>UTIL &middot; P&L</text>

          {/* Connectors */}
          <line x1="140" y1="64" x2="180" y2="170" className="bp-line bp-draw" style={{ transitionDelay: ".5s" }} />
          <line x1="360" y1="64" x2="320" y2="170" className="bp-line bp-draw" style={{ transitionDelay: ".55s" }} />
          <line x1="140" y1="334" x2="180" y2="210" className="bp-line bp-draw" style={{ transitionDelay: ".6s" }} />
          <line x1="360" y1="334" x2="320" y2="210" className="bp-line bp-draw" style={{ transitionDelay: ".65s" }} />

          {/* Accent dotted feedback loop */}
          <path d="M 80 88 Q 250 130, 420 88" className="bp-line bp-draw bp-accent" strokeDasharray="4 6" style={{ transitionDelay: ".7s", strokeDashoffset: 600 }} />

          <text x="250" y="120" textAnchor="middle" className="bp-text bp-fade" style={{ transitionDelay: "1.5s", fill: "var(--accent)" }}>
            FEEDBACK LOOP
          </text>
          <text x="20" y="394" className="bp-text bp-fade" style={{ transitionDelay: "1.6s" }}>SCALE: 1:1 &middot; SHEET 02 OF 14</text>
          <text x="480" y="394" textAnchor="end" className="bp-text bp-fade" style={{ transitionDelay: "1.6s" }}>A. VASTOLA · 2014</text>
        </g>
      </svg>

      <style dangerouslySetInnerHTML={{ __html: `
        .blueprint.drawn .bp-draw { stroke-dashoffset: 0 !important; }
        .blueprint.drawn .bp-fade { opacity: 1 !important; }
      ` }} />
      {drawn && <Splatter color="var(--accent)" size={120} seed={5} style={{ bottom: 10, left: 10 }} />}

      <ApplyClass target=".blueprint" cls="drawn" active={drawn} />

      <div className="blueprint__stamp">
        <span className="stamp">SHIPS ON TIME</span>
      </div>
    </div>);

}

/* Tiny helper that toggles a class on an outer element */
function ApplyClass({ target, cls, active }) {
  useEffectE(() => {
    const el = document.querySelector(target);
    if (!el) return;
    if (active) el.classList.add(cls);else
    el.classList.remove(cls);
  }, [active, target, cls]);
  return null;
}

/* ============================================================
   X-SHAPED CALLOUT + MODAL — sits inside Offerings near the roles
   tabs. Opens a portaled modal explaining the block / X-shaped
   operator concept (3 blocks of context + references).
   ============================================================ */
function XShapedCallout() {
  const [open, setOpen] = useStateE(false);

  useEffectE(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <>
      <button
        type="button"
        className="xshaped-callout"
        onClick={() => setOpen(true)}
        aria-label="Read about X-shaped operators">
        <span className="xshaped-callout__star" aria-hidden="true">✱</span>
        <span className="xshaped-callout__text">
          I&rsquo;m an <em>x-shaped</em> operator.
        </span>
        <span className="xshaped-callout__hint">read why it matters &rarr;</span>
      </button>
      {open && ReactDOM.createPortal(
        <XShapedModal onClose={() => setOpen(false)} />,
        document.body
      )}
    </>
  );
}

function XShapedModal({ onClose }) {
  /* Lock body scroll while the modal is open */
  useEffectE(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, []);

  return (
    <div
      className="cs-modal xshaped-modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="xshaped-modal-title"
      onClick={onClose}>
      <div className="cs-modal__card" onClick={(e) => e.stopPropagation()}>
        <header className="cs-modal__head">
          <p className="cs-modal__eyebrow">Theory · 2026</p>
          <h2 id="xshaped-modal-title" className="cs-modal__title">
            Why X-shaped operators matter
          </h2>
          <p className="cs-modal__stat">&mdash; and why they&rsquo;re rare</p>
          <button
            type="button"
            className="cs-modal__close"
            onClick={onClose}
            aria-label="Close">
            &times;
          </button>
        </header>

        <div className="cs-modal__body">
          <section className="cs-modal__section">
            <h3 className="cs-modal__sec-label">Block 1 &mdash; The Intelligence Shift</h3>
            <p>
              NVIDIA CEO Jensen Huang recently redefined what intelligence looks like in
              an AI-driven world. When asked who the smartest person he&rsquo;s ever met
              was, he didn&rsquo;t name a world-class coder or problem-solver. Instead, he
              made a striking observation:{" "}
              <a
                href="https://www.linkedin.com/posts/rajeshkalra_an-answer-that-should-make-you-think-nvidia-activity-7423309978440216577-FYPk"
                target="_blank" rel="noopener noreferrer">
                traditional &ldquo;technical smarts&rdquo; are being commoditized by AI
              </a>
              . True intelligence now is the ability to &ldquo;see around corners&rdquo;
              and anticipate what others miss.
            </p>
            <p>
              This shift has massive implications for how you should evaluate leadership
              and operations talent. For decades, organizations hired for T-shaped
              expertise: deep mastery in one domain plus empathy across others.{" "}
              <a
                href="https://www.ted.com/talks/forget_about_t_shaped_people_we_need_x_shaped_people"
                target="_blank" rel="noopener noreferrer">
                That model served us well, as Tim Brown at IDEO pioneered in 2010
              </a>
              . But the world has outpaced it.
            </p>
            <p>
              What your organization needs now is someone who doesn&rsquo;t just
              understand multiple domains. They need to operate fluently across them.
              Someone who can connect strategy to execution, engineering reality to
              business opportunity, and organizational dynamics to market shifts, often
              before those connections are obvious. Someone who sees around corners.
            </p>
            <p>
              That person is X-shaped. And they&rsquo;re worth their weight in gold.
            </p>
          </section>

          <section className="cs-modal__section">
            <h3 className="cs-modal__sec-label">Block 2 &mdash; From T-Shaped to X-Shaped</h3>
            <p>
              <strong>The T-Shaped Expert:</strong> Deep mastery in one area (the vertical
              bar) plus broad knowledge elsewhere (the horizontal bar). They&rsquo;re
              essential team members but they have a hard ceiling: they still need
              handoffs. The T-shaped Chief of Staff understands executive operations
              deeply but needs to defer to the product leader on roadmap decisions or
              the CFO on budget trade-offs. Valuable, but bounded.
            </p>
            <p>
              <strong>The X-Shaped Operator:</strong>{" "}
              <a
                href="https://www.ted.com/talks/forget_about_t_shaped_people_we_need_x_shaped_people"
                target="_blank" rel="noopener noreferrer">
                As David Clifford articulates in his argument for why we need X-shaped
                people
              </a>{" "}
              and{" "}
              <a
                href="https://www.lennysnewsletter.com/p/the-design-process-is-dead"
                target="_blank" rel="noopener noreferrer">
                as Jenny Wen at Anthropic demonstrates in her hiring approach
              </a>
              , these individuals sit comfortably in the 80th percentile across multiple
              core domains. They don&rsquo;t need handoffs; they ARE the bridge. An
              X-shaped Chief of Staff can own quarterly OKR strategy, manage incident
              response, speak fluently with both engineers and investors, understand
              product constraints, and spot organizational risks before they
              metastasize. They don&rsquo;t just coordinate work across silos; they
              eliminate unnecessary silos altogether.
            </p>
            <p>
              <strong>Why this matters right now:</strong> You&rsquo;re drowning in tools
              and AI-generated output. What you&rsquo;re starved for is judgment.
              Direction. Someone who can look at complexity and see patterns others miss.
              AI will handle execution. What humans must do now is synthesis, foresight,
              and purpose.
            </p>
            <p>
              X-shaped people are rare because they&rsquo;re hard to build. They require
              genuine curiosity, intellectual humility, and years of bouncing across
              different domains until the connections become intuitive. You can&rsquo;t
              outsource this. And when you find someone with it, they compound your
              organization&rsquo;s ability to move faster, anticipate problems, and make
              decisions without endless deliberation.
            </p>
          </section>

          <section className="cs-modal__section">
            <h3 className="cs-modal__sec-label">Why This Matters for Your Hire</h3>
            <p>
              If you&rsquo;re evaluating leadership candidates for your Chief of Staff,
              VP of Operations, PMO leadership, or cross-functional program direction
              roles, ask yourself: Do they need a translator to talk to your engineers?
              Do they default to deferring strategic decisions to others? Can they spot
              the intersection between your product roadmap, your burn rate, and your
              hiring plan, and course-correct before those three things collide?
            </p>
            <p>
              An X-shaped operator doesn&rsquo;t just manage these relationships. They
              see the problem two moves ahead and move you there proactively.
            </p>
          </section>

          <section className="cs-modal__section">
            <h3 className="cs-modal__sec-label">References</h3>
            <ul className="xshaped-modal__refs">
              <li>
                <a
                  href="https://www.linkedin.com/posts/rajeshkalra_an-answer-that-should-make-you-think-nvidia-activity-7423309978440216577-FYPk"
                  target="_blank" rel="noopener noreferrer">
                  Jensen Huang on intelligence in the age of AI
                </a>
              </li>
              <li>
                <a
                  href="https://www.ted.com/talks/forget_about_t_shaped_people_we_need_x_shaped_people"
                  target="_blank" rel="noopener noreferrer">
                  David Clifford: Forget About T-Shaped People (TEDxChristchurch)
                </a>
              </li>
              <li>
                <a
                  href="https://www.lennysnewsletter.com/p/the-design-process-is-dead"
                  target="_blank" rel="noopener noreferrer">
                  Jenny Wen: The Design Process is Dead (Lenny&rsquo;s Podcast)
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ChapterShell, Offerings, ChapterFoundation, ProcessLab, ChapterScale, Blueprint, XShapedCallout, XShapedModal });