/* chapters-late.jsx — Depth (VI) + Independence (VII) + Throughlines + Contact */
/* global React, ChapterShell, CHAPTERS, THROUGHLINES, Bloom, Splatter, ColorBar, RegistrationMark, Arrow, GrabTarget, GRAB_WEATHER, GRAB_ANIMALS, LinkedInStamp */

const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

/* ============================================================
   CHAPTER VI — Huntress. Recasting the function.
   ============================================================ */
function ChapterDepth() {
  const chapter = CHAPTERS[5];
  return <ChapterShell chapter={chapter} art={null} />;
}

/* "Recasting the function" visual:
   A before/after dossier — reactive function on the left (stamped DROPPED),
   proactive function on the right (stamped SHIPPING), with the
   product-analytics card stood up "from zero" beneath both. */
function RecastBoard() {
  const before = [
    { name: "Ad-hoc requests",        kind: "reactive" },
    { name: "Hero-mode rescues",      kind: "reactive" },
    { name: "Status updates as work", kind: "reactive" },
    { name: "Decisions without data", kind: "reactive" },
    { name: "Capitalization gaps",    kind: "reactive" },
  ];
  const after = [
    { name: "Operating cadence",            kind: "proactive" },
    { name: "Proactive enablement",         kind: "proactive" },
    { name: "Outcomes as work",             kind: "proactive" },
    { name: "Every decision on data",       kind: "proactive" },
    { name: "Cap compliance, automated",    kind: "proactive" },
  ];

  const [recast, setRecast] = useStateL(false);
  const ref = useRefL(null);

  useEffectL(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => setRecast(true), 400);
          obs.disconnect();
        }
      }),
      { threshold: 0.35 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="recast" ref={ref}>
      <div className="recast__header">
        <span>FIG. 6 · RECASTING THE FUNCTION</span>
        <button
          className="recast__toggle"
          onClick={() => setRecast((v) => !v)}
          aria-pressed={recast}>
          {recast ? "↶ reset" : "▸ recast →"}
        </button>
      </div>

      <div className="recast__columns" data-recast={recast}>
        <div className="recast__col recast__col--before">
          <div className="recast__col-head">
            <span className="recast__col-tag">BEFORE</span>
            <h4>Reactive</h4>
          </div>
          {before.map((b, i) => (
            <div className="recast__row recast__row--before" key={b.name} style={{ transitionDelay: `${i * 60}ms` }}>
              <span className="recast__mark">×</span>
              <span className="recast__name">{b.name}</span>
            </div>
          ))}
        </div>

        <div className="recast__arrow" aria-hidden="true">
          <span>recast</span>
          <svg viewBox="0 0 60 30" width="60" height="30">
            <path d="M 4 15 Q 30 4 56 15" stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round" />
            <path d="M 50 9 L 56 15 L 50 21" stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <div className="recast__col recast__col--after">
          <div className="recast__col-head">
            <span className="recast__col-tag recast__col-tag--on">AFTER</span>
            <h4>Proactive</h4>
          </div>
          {after.map((a, i) => (
            <div className="recast__row recast__row--after" key={a.name} style={{ transitionDelay: `${i * 60 + 200}ms` }}>
              <span className="recast__mark">✓</span>
              <span className="recast__name">{a.name}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="recast__zero" data-on={recast}>
        <div className="recast__zero-num">0 <em>→</em> 1</div>
        <div className="recast__zero-body">
          <h5>Product Analytics &amp; Reporting</h5>
          <p>A net-new capability, built from zero. Data as the foundation for every decision the team made next.</p>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   CHAPTER VII — Independence. Rolodex of engagements.
   ============================================================ */
function ChapterIndependence() {
  const chapter = CHAPTERS[6];
  return <ChapterShell chapter={chapter} art={null} />;
}

/* "Now Booking" card — replaces the old Rolodex with a cleaner availability
   statement and the menu of engagement modes. */
function NowBooking() {
  return (
    <div className="now-booking">
      <div className="now-booking__stamp">
        <span className="now-booking__stamp-text">Now Booking</span>
        <span className="now-booking__stamp-year">2026 &mdash; ’27</span>
      </div>
      <p className="now-booking__deck">
        Looking for embedded engagements where the work is real and the room is the right one.
      </p>
      <ul className="now-booking__list">
        <li>Chief of Staff — Engineering / Product</li>
        <li>Product &amp; Engineering Operations</li>
        <li>PMO Build &amp; Revamp</li>
        <li>Program Director — high-stakes programs</li>
      </ul>
      <p className="now-booking__hand">say hello &rarr;</p>
    </div>);
}

function Rolodex() {
  const cards = [
  {
    co: "Instruqt",
    role: "Strategic Partner to CTO, VP Product, VP Engineering",
    dates: "May 2024 → Jan 2026",
    body: "Embedded as Product & Engineering Ops architect for a globally distributed dev-platforms company. Coached the next CTO into the role mid-engagement.",
    tag: "PRODUCT & ENG OPS"
  },
  {
    co: "Monks / GM",
    role: "Program Director, embedded",
    dates: "2025",
    body: "Led a 13-person cross-functional team designing a unified campaign planning and workflow system for General Motors across all brands.",
    tag: "PROGRAM LEADERSHIP"
  },
  {
    co: "AgencyX",
    role: "Strategic Advisor",
    dates: "2025",
    body: "Advised on the architecture of a 4-year, $200M multichannel marketing program — operating model, governance, delivery framework, pitch.",
    tag: "ADVISORY"
  }];


  const [idx, setIdx] = useStateL(0);
  const next = () => setIdx((i) => (i + 1) % cards.length);
  const prev = () => setIdx((i) => (i - 1 + cards.length) % cards.length);

  return (
    <div className="rolodex">
      <div className="rolodex__top">
        <span className="dateline">FIG. 7 · ROLODEX · ACTIVE ENGAGEMENTS</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-soft)" }}>{idx + 1} / {cards.length}</span>
      </div>

      <div className="rolodex__cards">
        {cards.map((c, i) => {
          const offset = i - idx;
          const isCurrent = i === idx;
          return (
            <div
              key={c.co}
              className="biz-card"
              aria-hidden={!isCurrent}
              style={{
                transform: `translateX(${offset * 8}px) translateY(${Math.abs(offset) * 14}px) rotate(${offset * 1.5}deg)`,
                opacity: isCurrent ? 1 : 0.4,
                zIndex: cards.length - Math.abs(offset),
                pointerEvents: isCurrent ? "auto" : "none",
              }}>

              <div>
                <div className="dateline" style={{ color: "var(--accent)" }}>{c.tag}</div>
                <h3 className="biz-card__co" style={{ marginTop: 4 }}>{c.co}</h3>
                <p className="biz-card__role">{c.role}</p>
              </div>
              <p className="biz-card__body">{c.body}</p>
              <div className="biz-card__foot">
                <span>{c.dates}</span>
                <span>Vastola LLC · est. 2024</span>
              </div>
            </div>);

        })}
      </div>

      <div className="rolodex__nav">
        <button className="binder__btn" onClick={prev}>&larr; flip back</button>
        <span className="rolodex__nav-cue">
          spin the rolodex &mdash;
        </span>
        <button className="binder__btn" onClick={next}>flip forward &rarr;</button>
      </div>
    </div>);

}

/* ============================================================
   THROUGHLINES — black banner. Improved legibility (thicker, paper-weight,
   small letterspacing on the deck; numerals get the highlight color).
   ============================================================ */
function Throughlines() {
  return (
    <section className="throughlines" data-screen-label="Throughlines">
      <div className="page" style={{ position: "relative" }}>
        <Bloom color="var(--accent)" size={400} top={-120} left={"60%"} seed={6} opacity={0.5} style={{ mixBlendMode: "screen" }} />
        <p className="dateline" style={{ color: "var(--highlight)" }}>Common threads · 2005 → Present</p>
        <h2 className="throughlines__title">
          The way <em>I work</em>.
        </h2>
        <p className="throughlines__deck">Five patterns that emerged from doing the work, again and again, across very different environments.</p>
        <div className="throughlines__list">
          {THROUGHLINES.map((t, i) =>
          <div className="throughline" key={t.word}>
              <p className="throughline__word"><em>{String(i + 1).padStart(2, "0")}.</em> {t.word}</p>
              <p className="throughline__body">{t.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   FOOTER — global colophon strip rendered on every view.
   Contains The Colophon, the high-five cat, and the END OF ISSUE
   sign-off. The former "Editor's note" (Ch. VIII) is intentionally
   gone — its location pair ("Based: Detroit, MI · Remote") moved
   into the About Me section.
   ============================================================ */
function Footer() {
  return (
    <section className="contact" id="contact" data-screen-label="The Colophon">
      {/* The top-right folio band was a duplicate "Colophon" label; removed.
          The eyebrow below carries the "Colophon — End of issue" line
          (with mdash) as the single label for this section. */}
      <div className="page">
        <div className="eyebrow contact__eyebrow">
          <span>The Colophon &mdash; End of issue</span>
        </div>

        {/* Top row — credits on the left, the lucky cat + sign-off grouped on
            the right (condenses the footer height). */}
        <div className="footer-top">
          <div className="footer-credits">
            <button
              type="button"
              className="cover__tagline"
              onClick={() => window.dispatchEvent(new CustomEvent("vastola.about.open"))}
              aria-label="About this zine">
              A digital hand-set zine.
            </button>
            <p className="cover__byline">
              Written, edited, &amp; lived by <strong>Anastasia Vastola</strong>
              <span className="cover__partner">in partnership with Claude</span>
            </p>
          </div>

          {/* Lucky cat + counter + "give me a high five!" + sign-off, grouped right. */}
          <div className="footer-highfive">
            <HighFiveCat />
            <p className="footer-signoff mono">THANK YOU FOR READING</p>
          </div>
        </div>

        {/* Horizontal divider. */}
        <hr className="footer-rule" aria-hidden="true" />

        {/* Info block — social links + copyright + colophon. */}
        <div className="footer-info">
          {/* Small monochrome social logos, in front of the copyright. */}
          <div className="footer-social">
            <a className="footer-social__link" href="https://substack.com/@onvelocity"
               target="_blank" rel="noopener noreferrer" aria-label="Substack">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
                <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
              </svg>
            </a>
            <a className="footer-social__link" href="https://www.instagram.com/on_velocity?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw=="
               target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <rect x="2" y="2" width="20" height="20" rx="5.5" />
                <circle cx="12" cy="12" r="4.2" />
                <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none" />
              </svg>
            </a>
            <a className="footer-social__link" href="https://www.linkedin.com/in/avastola/"
               target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
                <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.8 0 0 .78 0 1.73v20.54C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .78 23.2 0 22.22 0z" />
              </svg>
            </a>
            {/* Easter eggs — colour picker + grab-targets — sit between the
                social icons and the copyright. */}
            <div className="footer-colorbar">
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
                <GrabTarget emojis={GRAB_WEATHER} cursorClass="is-weathering" size={15} />
                <ColorBar width={84} height={6} />
                <GrabTarget emojis={GRAB_ANIMALS} cursorClass="is-wanding" size={15} />
              </span>
            </div>
            {/* Copyright follows the colour bar on the same row. */}
            <p className="footer-info__copyright mono">
              &copy; {new Date().getFullYear()} Anastasia Vastola LLC &middot; All rights reserved
            </p>
          </div>
          <div className="colophon">
            <div>
              <strong>Volume / Issue</strong>
              VOL. I · ISS. 01 · {new Date().getFullYear()}
            </div>
            <div>
              <strong>Set in</strong>
              BODONI MODA · NEWSREADER · BOWLBY ONE · CAVEAT · DM MONO
            </div>
            <div>
              <strong>Printed on</strong>
              THE INTERNET · CMYK · NO TREES
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HIGH-FIVE LUCKY CAT — easter egg at the end of the issue.
   Cross-user cumulative counter via abacus.jasoncameron.dev (free).
   To reset/adjust the count (e.g. to subtract your own test hits),
   open the browser console and run:  resetHighFives(0)
   ============================================================ */
function HighFiveCat() {
  const [count, setCount] = useStateL(null);
  const [pulse, setPulse] = useStateL(false);
  /* Each click pushes a "thank-you" particle with a random position/rotation.
     Particles auto-purge after the rise animation finishes. */
  const [thanks, setThanks] = useStateL([]);

  /* Bumped to v3 to effectively reset the counter — abacus.jasoncameron.dev's
     /set endpoint requires admin auth, so switching keys is the clean way. */
  const NS = "vastola-zine-vol-1";
  const KEY = "high-fives-v3";
  const CACHE_KEY = `vastola.highFives.${KEY}`;
  const GET_URL = `https://abacus.jasoncameron.dev/get/${NS}/${KEY}`;
  const HIT_URL = `https://abacus.jasoncameron.dev/hit/${NS}/${KEY}`;
  const SET_URL = (n) => `https://abacus.jasoncameron.dev/set/${NS}/${KEY}?value=${n}`;

  /* Small helpers — keep the last known value in localStorage so a flaky
     network never visually rewinds the counter to 0 on refresh. */
  function readCache() {
    try {
      const raw = localStorage.getItem(CACHE_KEY);
      const n = raw == null ? null : parseInt(raw, 10);
      return Number.isFinite(n) ? n : null;
    } catch (e) { return null; }
  }
  function writeCache(n) {
    if (!Number.isFinite(n)) return;
    try { localStorage.setItem(CACHE_KEY, String(n)); } catch (e) { /* ignore */ }
  }

  useEffectL(() => {
    /* Paint the cached value immediately so the count doesn't flash 0 → N
       while the network request is in flight. */
    const cached = readCache();
    if (cached != null) setCount(cached);

    /* Sync with the remote counter. On failure, keep whatever's already on
       screen — never reset to 0. */
    fetch(GET_URL)
      .then((r) => r.json())
      .then((data) => {
        if (typeof data.value === "number") {
          setCount(data.value);
          writeCache(data.value);
        }
        /* If the response shape is weird, leave the cached value alone. */
      })
      .catch(() => {
        /* Network failed; cached value (or null spinner) stays put. */
        if (cached == null) setCount(0); /* first-ever visit with no network — show 0 placeholder */
      });

    /* Admin helper — exposed so the site owner can subtract test hits.
       Usage in browser console: resetHighFives(0)  or  resetHighFives(42) */
    window.resetHighFives = async (n) => {
      try {
        const r = await fetch(SET_URL(n));
        const data = await r.json();
        if (typeof data.value === "number") {
          setCount(data.value);
          writeCache(data.value);
        }
        console.log(`%cHigh-fives set to ${data.value}.`, "color: #c5573a; font-weight: bold;");
        return data.value;
      } catch (e) {
        console.error("resetHighFives failed:", e);
      }
    };

    console.log(
      "%c🐱 Hi! To reset the high-five counter, run: %cresetHighFives(0)",
      "color: #c5573a; font-weight: bold;",
      "color: #1f5d62; font-family: monospace;"
    );
  }, []);

  async function handleHighFive() {
    /* Spawn a "thank-you" particle immediately so rapid clicks accumulate */
    const id = Date.now() + Math.random();
    const particle = {
      id,
      x: (Math.random() - 0.5) * 220,           /* horizontal offset from center (-110..110) */
      yStart: Math.random() * 40 + 10,           /* start near the cat's middle/top */
      drift: (Math.random() - 0.5) * 50,         /* sideways drift during the rise */
      rot: (Math.random() - 0.5) * 50,           /* tilt (-25°..25°) */
      scale: 0.85 + Math.random() * 0.55,        /* size variation */
    };
    setThanks((prev) => [...prev, particle]);
    setTimeout(() => {
      setThanks((prev) => prev.filter((p) => p.id !== id));
    }, 1500);

    setPulse(true);
    setTimeout(() => setPulse(false), 420);
    setCount((c) => {
      const next = (c ?? 0) + 1;
      writeCache(next); /* optimistic — also persist so a refresh shows the click */
      return next;
    });
    try {
      const r = await fetch(HIT_URL);
      const data = await r.json();
      if (typeof data.value === "number") {
        setCount(data.value);
        writeCache(data.value);
      }
    } catch (e) {
      /* keep optimistic cached value; will resync next page load */
    }
  }

  return (
    <div className="high-five">
      {/* Count bubble sits above the cat, like a speech bubble. Hidden until
          there's at least one high-five — no "0" bubble on first load. */}
      {count > 0 && (
        <div className="high-five__bubble" aria-live="polite">
          <span className="high-five__bubble-num">{count.toLocaleString()}</span>
          <span className="high-five__bubble-tail" aria-hidden="true" />
        </div>
      )}

      <div className="high-five__zone">
        {/* Thank-you particles spawn here, behind the cat (z-index below the button) */}
        <div className="high-five__thanks-layer" aria-hidden="true">
          {thanks.map((p) =>
            <span
              key={p.id}
              className="high-five__thanks"
              style={{
                left: `calc(50% + ${p.x}px)`,
                bottom: `${p.yStart}px`,
                "--drift": `${p.drift}px`,
              }}>
              <span
                className="high-five__thanks-inner"
                style={{ transform: `rotate(${p.rot}deg) scale(${p.scale})` }}>
                🙏
              </span>
            </span>
          )}
        </div>

        <button
          type="button"
          className={`high-five__button ${pulse ? "is-pulsing" : ""}`}
          onClick={handleHighFive}
          aria-label="High-five the lucky cat">
          <LuckyCat />
        </button>
      </div>

      <p className="high-five__hint">give me a high five!</p>
    </div>);
}

/* ============================================================
   ROTATING POLAROID — picks a random photo on page load and
   cross-fades through the set every ~9 seconds.
   ============================================================ */
const PORTRAIT_PHOTOS = [
  "/uploads/anastasia-1.jpeg",
  "/uploads/anastasia-3.jpeg",
  "/uploads/anastasia-4.jpeg",
  "/uploads/anastasia-5.jpeg",
  "/uploads/anastasia-6.jpeg",
  "/uploads/anastasia-7.jpeg",
  "/uploads/anastasia-8.jpeg",
  "/uploads/anastasia-9.jpeg",
  "/uploads/anastasia-10.jpeg",
];

function RotatingPolaroid() {
  /* Start at a random index so each refresh shows a different first photo */
  const [idx, setIdx] = useStateL(() => Math.floor(Math.random() * PORTRAIT_PHOTOS.length));
  const [fading, setFading] = useStateL(false);

  useEffectL(() => {
    const ROTATE_MS = 9000;
    const FADE_MS = 600;
    const t = setInterval(() => {
      setFading(true);
      setTimeout(() => {
        setIdx((i) => (i + 1 + Math.floor(Math.random() * (PORTRAIT_PHOTOS.length - 1))) % PORTRAIT_PHOTOS.length);
        setFading(false);
      }, FADE_MS);
    }, ROTATE_MS);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="polaroid">
      <div className="polaroid__photo">
        <img
          src={PORTRAIT_PHOTOS[idx]}
          alt="Anastasia Vastola"
          className={`polaroid__img ${fading ? "is-fading" : ""}`}
          key={idx} />
        <span className="polaroid__photo-grain" aria-hidden="true" />
      </div>
      <span className="polaroid__tape" aria-hidden="true" />
    </div>);
}

/* ============================================================
   LUCKY CAT (Maneki-neko) — hand-drawn SVG.
   The .lucky-cat__arm group is rotated via CSS @keyframes so the
   beckoning paw waves continuously, with a bigger swing on click.
   ============================================================ */
function LuckyCat() {
  /* Two PNG layers: the body stays static; the arm is rotated independently
     around its shoulder pivot so only the paw waves. */
  return (
    <div className="lucky-cat" aria-hidden="true">
      <img
        className="lucky-cat__body"
        src="/assets/lucky-cat-body.png"
        alt=""
        draggable="false" />
      <img
        className="lucky-cat__arm"
        src="/assets/lucky-cat-arm.png"
        alt=""
        draggable="false" />
    </div>);
}

/* Kept the old SVG below in case we want it back. Rendered only if explicitly used. */
function LuckyCatSVG() {
  return (
    <svg
      className="lucky-cat"
      viewBox="0 0 240 300"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true">
      {/* Soft ground shadow */}
      <ellipse cx="120" cy="288" rx="72" ry="6" fill="var(--ink)" opacity="0.18" />

      {/* ================== BODY (sitting, pear-shape) ================== */}
      <path
        d="M 120 280 Q 52 280 50 210 Q 50 158 88 140 L 152 140 Q 190 158 190 210 Q 188 280 120 280 Z"
        fill="var(--paper)" stroke="var(--ink)" strokeWidth="4.5" strokeLinejoin="round" />

      {/* Belly oval (cream, slightly lighter, defines the apron) */}
      <ellipse cx="120" cy="220" rx="38" ry="44" fill="rgba(255,255,255,0.5)" />
      <path d="M 120 178 Q 92 200 90 240 Q 95 268 120 270 Q 145 268 150 240 Q 148 200 120 178 Z"
            fill="none" stroke="var(--ink)" strokeWidth="2" opacity="0.55" />

      {/* Calico patches on the body — bold flat orange + dark */}
      <path d="M 60 168 Q 50 180 56 200 Q 75 198 78 175 Q 72 168 60 168 Z"
            fill="var(--accent)" stroke="var(--ink)" strokeWidth="2.5" strokeLinejoin="round" />
      <path d="M 172 192 Q 188 200 184 222 Q 168 220 162 200 Q 166 190 172 192 Z"
            fill="var(--ink)" opacity="0.85" stroke="var(--ink)" strokeWidth="2.5" strokeLinejoin="round" />

      {/* ================== BACK (SITTING) PAWS ================== */}
      <ellipse cx="78" cy="280" rx="18" ry="9" fill="var(--paper)" stroke="var(--ink)" strokeWidth="3" />
      <ellipse cx="162" cy="280" rx="18" ry="9" fill="var(--paper)" stroke="var(--ink)" strokeWidth="3" />
      {/* Toe-bean lines */}
      <g stroke="var(--ink)" strokeWidth="2" strokeLinecap="round">
        <line x1="72" y1="280" x2="72" y2="287" />
        <line x1="78" y1="281" x2="78" y2="288" />
        <line x1="84" y1="280" x2="84" y2="287" />
        <line x1="156" y1="280" x2="156" y2="287" />
        <line x1="162" y1="281" x2="162" y2="288" />
        <line x1="168" y1="280" x2="168" y2="287" />
      </g>

      {/* ================== FRONT (STATIC) PAW — wrapped around coin ================== */}
      <path d="M 92 222 Q 80 230 80 248 Q 84 258 100 256 L 108 248 Q 110 232 100 220 Z"
            fill="var(--paper)" stroke="var(--ink)" strokeWidth="3" strokeLinejoin="round" />

      {/* ================== GOLD KOBAN COIN ================== */}
      <g transform="translate(108, 244)">
        {/* Coin outer */}
        <path d="M -22 -28 Q 22 -28 22 0 Q 22 28 -22 28 Q -22 0 -22 -28 Z"
              fill="#f0c14a" stroke="var(--ink)" strokeWidth="3" strokeLinejoin="round" />
        {/* Inner border */}
        <path d="M -16 -22 Q 16 -22 16 0 Q 16 22 -16 22 Q -16 0 -16 -22 Z"
              fill="none" stroke="var(--ink)" strokeWidth="1.8" opacity="0.6" />
        {/* Coin character (using $ for universal recognition) */}
        <text x="0" y="6" textAnchor="middle" fontSize="22" fontWeight="900"
              fontFamily="Georgia, serif" fill="var(--ink)">$</text>
      </g>

      {/* ================== HEAD ================== */}
      <circle cx="120" cy="90" r="60" fill="var(--paper)" stroke="var(--ink)" strokeWidth="4.5" />

      {/* Head calico patches — orange on left side / forehead */}
      <path d="M 76 60 Q 64 70 64 90 Q 72 100 92 96 Q 100 78 96 60 Q 84 56 76 60 Z"
            fill="var(--accent)" stroke="var(--ink)" strokeWidth="2.5" strokeLinejoin="round" />
      {/* Dark patch on right side */}
      <path d="M 148 78 Q 162 84 168 102 Q 156 110 142 104 Q 140 90 148 78 Z"
            fill="var(--ink)" opacity="0.85" stroke="var(--ink)" strokeWidth="2.5" strokeLinejoin="round" />
      {/* Small forehead spot (the iconic Maneki-neko brow accent) */}
      <ellipse cx="120" cy="56" rx="6" ry="5" fill="var(--accent)" stroke="var(--ink)" strokeWidth="2" />

      {/* ================== EARS ================== */}
      {/* Outer ears (cream with thick outline) */}
      <polygon points="74,46 60,8 100,32" fill="var(--paper)" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      <polygon points="166,46 180,8 140,32" fill="var(--paper)" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      {/* Inner ears (warm accent — pink/orange) */}
      <polygon points="78,40 70,22 92,32" fill="var(--accent)" />
      <polygon points="162,40 170,22 148,32" fill="var(--accent)" />
      {/* Ear-tip orange on left ear top */}
      <path d="M 60 8 L 70 22 L 74 14 Z" fill="var(--accent)" stroke="var(--ink)" strokeWidth="2" strokeLinejoin="round" />

      {/* ================== FACE ================== */}
      {/* Eyebrows — small arcs above the eyes (woodblock-style accent) */}
      <path d="M 87 74 Q 95 70 103 74" stroke="var(--ink)" strokeWidth="3" fill="none" strokeLinecap="round" />
      <path d="M 137 74 Q 145 70 153 74" stroke="var(--ink)" strokeWidth="3" fill="none" strokeLinecap="round" />

      {/* Eyes — closed, smiling arcs */}
      <path d="M 86 94 Q 95 104 104 94" stroke="var(--ink)" strokeWidth="3.5" fill="none" strokeLinecap="round" />
      <path d="M 136 94 Q 145 104 154 94" stroke="var(--ink)" strokeWidth="3.5" fill="none" strokeLinecap="round" />

      {/* Cheek blush (subtle) */}
      <circle cx="86" cy="110" r="8" fill="var(--accent)" opacity="0.25" />
      <circle cx="154" cy="110" r="8" fill="var(--accent)" opacity="0.25" />

      {/* Nose */}
      <path d="M 113 108 L 127 108 L 120 116 Z" fill="var(--accent)" stroke="var(--ink)" strokeWidth="2" strokeLinejoin="round" />

      {/* Mouth (3-curve smile beneath nose) */}
      <path d="M 120 116 Q 113 124 107 119" stroke="var(--ink)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <path d="M 120 116 Q 127 124 133 119" stroke="var(--ink)" strokeWidth="2.5" fill="none" strokeLinecap="round" />

      {/* Whiskers — 3 each side */}
      <g stroke="var(--ink)" strokeWidth="1.8" strokeLinecap="round">
        <line x1="66" y1="106" x2="84" y2="108" />
        <line x1="66" y1="112" x2="84" y2="112" />
        <line x1="66" y1="118" x2="84" y2="116" />
        <line x1="156" y1="108" x2="174" y2="106" />
        <line x1="156" y1="112" x2="174" y2="112" />
        <line x1="156" y1="116" x2="174" y2="118" />
      </g>

      {/* ================== COLLAR + BELL ================== */}
      {/* Collar band (thick red with darker outline) */}
      <path d="M 72 140 Q 120 158 168 140 L 168 152 Q 120 170 72 152 Z"
            fill="var(--accent)" stroke="var(--ink)" strokeWidth="3" strokeLinejoin="round" />
      {/* Collar stud dots */}
      <circle cx="84" cy="148" r="2.5" fill="var(--ink)" />
      <circle cx="100" cy="153" r="2.5" fill="var(--ink)" />
      <circle cx="140" cy="153" r="2.5" fill="var(--ink)" />
      <circle cx="156" cy="148" r="2.5" fill="var(--ink)" />

      {/* Bell hanging below the collar */}
      <circle cx="120" cy="166" r="11" fill="#f0c14a" stroke="var(--ink)" strokeWidth="2.5" />
      <line x1="120" y1="166" x2="120" y2="175" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
      <path d="M 114 163 L 126 163" stroke="var(--ink)" strokeWidth="1.5" opacity="0.6" />
      <circle cx="116" cy="162" r="1.6" fill="var(--paper)" opacity="0.7" />

      {/* ================== BECKONING ARM (animated) ================== */}
      <g className="lucky-cat__arm">
        {/* Arm body — up and out from the right shoulder */}
        <path d="M 158 150 Q 178 110 192 60 Q 196 44 204 46 Q 210 52 206 70 Q 196 124 178 162 Z"
              fill="var(--paper)" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
        {/* Orange accent stripe on arm (calico) */}
        <path d="M 200 56 Q 198 78 188 96 Q 184 88 188 72 Q 192 60 200 56 Z"
              fill="var(--accent)" opacity="0.85" />
        {/* Paw (the high-five hand!) */}
        <circle cx="200" cy="50" r="14" fill="var(--paper)" stroke="var(--ink)" strokeWidth="3.5" />
        {/* Paw pad — pink-accent */}
        <ellipse cx="200" cy="54" rx="6" ry="4.5" fill="var(--accent)" opacity="0.7" />
        {/* Toe beans */}
        <circle cx="194" cy="42" r="2.2" fill="var(--ink)" />
        <circle cx="200" cy="40" r="2.2" fill="var(--ink)" />
        <circle cx="206" cy="42" r="2.2" fill="var(--ink)" />
      </g>
    </svg>);
}

/* Footer is the new name for the colophon-only "Contact" section.
   Both names point to the same component so older modules keep working. */
const Contact = Footer;
Object.assign(window, { ChapterDepth, RecastBoard, ChapterIndependence, Rolodex, Throughlines, Footer, Contact, HighFiveCat, LuckyCat, RotatingPolaroid });