(function () {
const { Button } = window.CarterSCritterCareDesignSystem_68e3fd;

/* ══════════════════════════════════════════════════════════════
   Hand-drawn doodle library (shared across all screens).
   Original ink-line critters - slightly imperfect, organic shapes
   in the brand's ink-brown stroke. Exposed on window.CC so the
   other screen files can use them without a new module/file.
   Each returns an <svg class="doodle">; coloring comes from the
   .doodle CSS classes (fill-mint, ink, etc.) defined in site.css.
   ══════════════════════════════════════════════════════════════ */

// Auto-key a children array so the positional doodle helpers below
// never trip React's "unique key" warning (we author without keys).
function keyed(children) {
  return React.Children.map(children, function (child, i) {
    if (!React.isValidElement(child)) return child;
    return child.key == null ? React.cloneElement(child, { key: i }) : child;
  });
}
function D(props, children) {
  return React.createElement('svg', Object.assign({
    className: 'doodle', viewBox: '0 0 100 100', fill: 'none',
    role: 'img', 'aria-hidden': true, xmlns: 'http://www.w3.org/2000/svg'
  }, props), keyed(children));
}
const P = (d, cls) => React.createElement('path', { d, className: cls });
const C = (cx, cy, r, cls) => React.createElement('circle', { cx, cy, r, className: cls });
const E = (cx, cy, rx, ry, cls, extra) => React.createElement('ellipse', Object.assign({ cx, cy, rx, ry, className: cls }, extra || {}));
const L = (x1, y1, x2, y2) => React.createElement('line', { x1, y1, x2, y2 });

/* ---- Tarantula: fuzzy round body + 8 bent legs ---- */
function Tarantula() {
  const legL = [
    'M40 50 C28 40 20 38 10 30', 'M40 56 C26 52 16 52 6 50',
    'M40 62 C27 64 17 68 9 72', 'M41 68 C30 74 24 80 18 88'
  ];
  const legR = [
    'M60 50 C72 40 80 38 90 30', 'M60 56 C74 52 84 52 94 50',
    'M60 62 C73 64 83 68 91 72', 'M59 68 C70 74 76 80 82 88'
  ];
  return D({}, [
    React.createElement('g', { key: 'legs' }, legL.concat(legR).map((d, i) => React.createElement('path', { key: i, d, className: 'nofill' }))),
    E(50, 62, 16, 15, 'fill-coral', { key: 'abd' }),
    E(50, 45, 11, 10, 'fill-coral', { key: 'ceph' }),
    P('M44 38 C45 33 48 32 49 37', 'nofill'),
    P('M56 38 C55 33 52 32 51 37', 'nofill'),
    C(46, 44, 1.6, 'ink'), C(54, 44, 1.6, 'ink')
  ]);
}

/* ---- Leopard gecko: plump lizard, curl tail, spots ---- */
function Gecko() {
  return D({}, [
    P('M22 54 C18 44 28 36 42 38 C52 39 56 46 66 46 C78 46 84 54 80 62 C88 64 92 72 86 78 C82 82 76 80 76 74', 'fill-butter'),
    P('M30 56 C26 64 30 72 38 70', 'nofill'),
    P('M40 58 C38 68 44 74 50 70', 'nofill'),
    P('M58 54 C58 64 64 70 70 66', 'nofill'),
    C(30, 47, 1.6, 'ink'), C(56, 50, 2, 'ink'), C(46, 49, 2, 'ink'), C(66, 53, 1.6, 'ink'),
    P('M22 48 C18 47 17 50 20 51', 'nofill')
  ]);
}

/* ---- Viper gecko: small lizard, banded tail ---- */
function ViperGecko() {
  return D({}, [
    P('M20 58 C18 50 26 44 38 46 C48 47 52 52 62 52 C74 52 82 58 80 66 C86 72 80 80 72 76', 'fill-peach'),
    L(44, 50, 44, 58), L(52, 51, 52, 59), L(60, 53, 60, 60),
    P('M74 64 C70 70 74 76 80 73', 'nofill'),
    C(26, 53, 1.7, 'ink'),
    P('M20 53 C16 52 16 56 19 56', 'nofill')
  ]);
}

/* ---- White's tree frog: chunky frog, big eyes, toe pads ---- */
function Frog() {
  return D({}, [
    P('M24 60 C20 44 34 34 50 34 C66 34 80 44 76 60 C74 70 64 76 50 76 C36 76 26 70 24 60', 'fill-green'),
    C(36, 40, 9, 'fill-cream'), C(64, 40, 9, 'fill-cream'),
    C(36, 41, 3, 'ink'), C(64, 41, 3, 'ink'),
    P('M40 62 C46 68 54 68 60 62', 'nofill'),
    P('M26 70 C20 74 18 82 26 82 C30 82 32 78 30 74', 'fill-green'),
    P('M74 70 C80 74 82 82 74 82 C70 82 68 78 70 74', 'fill-green'),
    C(24, 84, 2.4, 'fill-green'), C(30, 86, 2.4, 'fill-green'),
    C(70, 86, 2.4, 'fill-green'), C(76, 84, 2.4, 'fill-green')
  ]);
}

/* ---- Hermit crab: spiral shell + claw + eyestalks ---- */
function HermitCrab() {
  return D({}, [
    P('M40 42 C30 36 18 42 16 54 C14 68 26 78 40 74 C36 66 38 56 48 52 C44 48 42 46 40 42', 'fill-butter'),
    P('M30 56 C30 53 33 52 34 55 C35 52 38 53 38 56 C38 60 34 62 34 62 C34 62 30 60 30 56', 'nofill'),
    P('M50 50 C58 44 70 46 76 56', 'nofill'),
    P('M76 56 C82 52 88 56 86 62 C84 66 78 66 76 62', 'fill-coral'),
    P('M60 64 C66 70 74 72 80 70', 'nofill'),
    P('M58 70 C64 76 72 78 78 78', 'nofill'),
    L(54, 48, 52, 40), L(60, 48, 60, 40),
    C(52, 38, 1.8, 'ink'), C(60, 38, 1.8, 'ink')
  ]);
}

/* ---- Isopod (roly-poly): segmented oval + little legs ---- */
function Isopod() {
  return D({}, [
    P('M22 50 C22 38 36 32 50 32 C64 32 78 38 78 50 C78 62 64 70 50 70 C36 70 22 62 22 50', 'fill-sky'),
    L(34, 34, 30, 68), L(43, 33, 41, 69), L(52, 33, 52, 69), L(61, 33, 63, 69), L(70, 35, 72, 66),
    P('M22 50 C18 48 16 52 20 54', 'nofill'),
    L(30, 70, 28, 78), L(40, 71, 39, 80), L(52, 71, 52, 80), L(64, 71, 65, 80), L(72, 68, 74, 76),
    C(26, 44, 1.4, 'ink')
  ]);
}

/* ---- Corn snake: coiled S + belly bands ---- */
function Snake() {
  return D({}, [
    P('M20 70 C12 64 16 52 28 52 C42 52 44 64 56 64 C70 64 72 50 62 44 C54 39 44 44 44 52', 'fill-coral'),
    L(30, 53, 30, 63), L(38, 54, 38, 64), L(50, 55, 50, 64), L(58, 52, 58, 61),
    P('M62 44 C66 40 72 40 74 36', 'nofill'),
    P('M74 36 C78 33 78 28 73 28 C70 28 68 31 70 34', 'fill-coral'),
    C(72, 31, 1.4, 'ink'),
    P('M73 36 C76 36 77 38 75 39', 'nofill')
  ]);
}

/* ---- Aquatic snail: spiral shell + foot + tentacles ---- */
function Snail() {
  return D({}, [
    P('M26 70 C22 70 20 66 24 64 L66 64 C76 64 80 70 70 72 C60 73 36 72 26 70', 'fill-green'),
    P('M58 40 C44 38 36 50 42 60 C50 70 66 66 66 54 C66 46 60 44 56 48 C53 51 55 56 60 55', 'fill-butter'),
    P('M24 64 C20 56 22 50 26 50', 'nofill'),
    L(27, 50, 24, 42), L(31, 50, 30, 42),
    C(24, 41, 1.3, 'ink'), C(30, 41, 1.3, 'ink')
  ]);
}

/* ---- Service / utility doodles ---- */
function DogWalk() {
  return D({}, [
    P('M26 70 C22 58 30 48 42 48 C52 48 56 54 66 54 C72 54 74 48 78 46', 'fill-peach'),
    P('M30 50 C28 44 32 40 36 44', 'nofill'),
    P('M42 48 C40 42 44 38 48 42', 'nofill'),
    C(34, 47, 1.4, 'ink'),
    L(34, 70, 34, 82), L(44, 70, 44, 82), L(56, 68, 56, 82), L(64, 66, 64, 82),
    P('M66 54 C72 56 74 62 70 70', 'nofill'),
    P('M78 46 C86 44 90 50 86 56 C84 60 80 58 80 54', 'nofill'),
    C(82, 30, 7, 'fill-mint'),
    P('M82 37 C82 46 78 50 74 52', 'nofill'),
    P('M78 28 L86 28 M82 24 L82 32', 'nofill')
  ]);
}
function DropIn() {
  return D({}, [
    P('M30 78 L30 30 C30 26 32 24 36 24 L58 24 C62 24 64 26 64 30 L64 78', 'fill-sky'),
    P('M64 78 L82 78 C84 78 86 76 86 74 L86 40 C86 38 70 30 64 30', 'nofill'),
    C(58, 52, 2.4, 'ink'),
    C(46, 70, 4, 'fill-peach'), C(40, 62, 2, 'fill-peach'), C(46, 60, 2, 'fill-peach'), C(52, 62, 2, 'fill-peach')
  ]);
}
function Overnight() {
  return D({}, [
    P('M64 26 C50 24 38 36 40 52 C42 66 56 74 70 68 C58 66 50 56 52 44 C53 36 58 30 64 26', 'fill-butter'),
    P('M30 36 l3 0 m-1.5 -1.5 l0 3', 'nofill'),
    C(34, 64, 1.6, 'ink'), C(74, 44, 1.6, 'ink'), C(72, 56, 1.4, 'ink')
  ]);
}
function HouseCare() {
  return D({}, [
    P('M30 76 C28 60 34 50 44 50 C40 44 42 36 50 36 C48 30 52 24 58 26', 'fill-green'),
    P('M44 50 C50 48 56 52 56 60', 'nofill'),
    P('M62 78 L62 58 C62 54 66 52 72 52 C80 52 84 56 84 60 L84 64', 'fill-sky'),
    P('M84 56 C90 52 92 56 88 60 C86 62 84 60 84 58', 'nofill'),
    L(66, 60, 65, 64), L(72, 60, 72, 65), L(78, 60, 79, 64)
  ]);
}
function ReportCard() {
  return D({}, [
    P('M28 34 L72 34 C76 34 78 36 78 40 L78 70 C78 74 76 76 72 76 L28 76 C24 76 22 74 22 70 L22 40 C22 36 24 34 28 34', 'fill-cream'),
    C(38, 50, 6, 'nofill'),
    P('M22 70 L40 56 L52 64 L66 50 L78 60', 'nofill'),
    P('M58 26 C58 23 62 22 63 25 C64 22 68 23 68 26 C68 30 63 33 63 33 C63 33 58 30 58 26', 'fill-coral')
  ]);
}
function Paw() {
  return D({}, [
    E(50, 64, 13, 11, 'ink'),
    E(34, 46, 5.2, 7, 'ink', { transform: 'rotate(-18 34 46)' }),
    E(44, 38, 5.4, 7.4, 'ink'),
    E(56, 38, 5.4, 7.4, 'ink'),
    E(66, 46, 5.2, 7, 'ink', { transform: 'rotate(18 66 46)' })
  ]);
}

window.CC = {
  D, P, C, E, L,
  Tarantula, Gecko, ViperGecko, Frog, HermitCrab, Isopod, Snake, Snail,
  DogWalk, DropIn, Overnight, HouseCare, ReportCard, Paw
};

/* tiny inline paw for trails / footer (16 to 26px) */
window.CCPaw = function CCPaw(props) {
  return React.createElement('svg', Object.assign({ viewBox: '0 0 100 100', fill: 'currentColor', 'aria-hidden': true }, props),
    React.createElement('ellipse', { cx: 50, cy: 62, rx: 14, ry: 12 }),
    React.createElement('ellipse', { cx: 32, cy: 44, rx: 6, ry: 8, transform: 'rotate(-18 32 44)' }),
    React.createElement('ellipse', { cx: 43, cy: 35, rx: 6.4, ry: 8.6 }),
    React.createElement('ellipse', { cx: 57, cy: 35, rx: 6.4, ry: 8.6 }),
    React.createElement('ellipse', { cx: 68, cy: 44, rx: 6, ry: 8, transform: 'rotate(18 68 44)' })
  );
};

/* ---- Report-card example dialog (shared via window.CCReportDialog) ---- */
function ReportCardDialog({ open, onClose }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const d = ref.current;
    if (d && !d.open) d.showModal();
    const handleClose = () => onClose();
    d.addEventListener('close', handleClose);
    return () => d.removeEventListener('close', handleClose);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <dialog
      ref={ref}
      className="rc-modal"
      aria-label="Example daily report card"
      onClick={(e) => { if (e.target === ref.current) onClose(); }}
    >
      <div className="rc-modal__frame">
        <span className="rc-modal__tape" aria-hidden="true"></span>
        <button type="button" className="rc-modal__close" onClick={onClose} aria-label="Close the example">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true"><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></svg>
        </button>
        <img
          className="rc-modal__img"
          src="/design-system/assets/report-card-example.png"
          alt="Example daily report card for a dog named Buddy: three photos, a checklist covering medicine, walks, meals, rest and activity, and a thank-you note signed by Carter."
        />
        <p className="rc-modal__caption cc-hand">every visit ends with one of these</p>
      </div>
    </dialog>
  );
}
window.CCReportDialog = ReportCardDialog;

function Nav({ route, go }) {
  // Content links only. The single action (Connect with Carter) lives in the
  // CTA button, so the redundant "Book a stay" link is intentionally gone from
  // both the desktop bar and the mobile panel (which both map over `links`).
  const links = [
    ['home', 'Home'],
    ['services', 'Services & pricing'],
    ['about', 'Meet Carter'],
  ];

  /* ── Mobile menu (renders nothing visible at desktop widths; the trigger
        and panel are display:none above the mobile breakpoint in site.css).
        A brand "field-notebook" slide-down sheet: hamburger sticker toggles a
        cream torn-page panel with the four links + a Book CTA. ── */
  const [menuOpen, setMenuOpen] = React.useState(false);
  const triggerRef = React.useRef(null);
  const panelRef = React.useRef(null);
  const reactId = React.useId ? React.useId() : 'ccnav';
  const panelId = 'site-nav-panel-' + reactId.replace(/[:]/g, '');

  const closeMenu = React.useCallback(() => setMenuOpen(false), []);

  // Close on route change (navigating via the panel or anywhere else).
  React.useEffect(() => { setMenuOpen(false); }, [route]);

  // While open: lock body scroll, close on Esc, move focus into the panel.
  // Also close if the viewport grows past the mobile breakpoint (resize /
  // rotation) so the scroll lock can't strand a hidden-panel desktop view.
  React.useEffect(() => {
    if (!menuOpen) return;
    const body = document.body;
    const prevOverflow = body.style.overflow;
    body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') { setMenuOpen(false); } };
    document.addEventListener('keydown', onKey);
    const mq = window.matchMedia('(min-width: 761px)');
    const onMq = () => { if (mq.matches) setMenuOpen(false); };
    mq.addEventListener('change', onMq);
    // focus the first focusable control in the panel for keyboard users
    const first = panelRef.current && panelRef.current.querySelector('a, button');
    if (first) first.focus();
    return () => {
      document.removeEventListener('keydown', onKey);
      mq.removeEventListener('change', onMq);
      body.style.overflow = prevOverflow;
    };
  }, [menuOpen]);

  // Return focus to the trigger after the panel closes (keyboard affordance).
  const wasOpenRef = React.useRef(false);
  React.useEffect(() => {
    if (wasOpenRef.current && !menuOpen && triggerRef.current) {
      triggerRef.current.focus();
    }
    wasOpenRef.current = menuOpen;
  }, [menuOpen]);

  const goAnd = (key) => { setMenuOpen(false); go(key); };

  return (
    <header className="site-nav">
      <div className="site-nav__inner">
        <a className="site-brand" href="#" aria-label="Carter's Critter Care home" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <img src="/design-system/assets/logo.png" alt="Carter's Critter Care" className="site-brand__logo" />
        </a>
        <nav className="site-nav__links" aria-label="Primary">
          {links.map(([key, label]) => (
            <a
              key={key}
              href="#"
              className={'site-nav__link' + (route === key ? ' is-active' : '')}
              aria-current={route === key ? 'page' : undefined}
              onClick={(e) => { e.preventDefault(); go(key); }}
            >{label}</a>
          ))}
        </nav>
        <div className="site-nav__cta">
          <Button variant="sticker" size="sm" arrow onClick={() => go('book')}>Connect with Carter</Button>
        </div>
        <div className="site-nav__menu">
          <button
            type="button"
            ref={triggerRef}
            className={'site-nav__toggle' + (menuOpen ? ' is-open' : '')}
            aria-expanded={menuOpen}
            aria-controls={panelId}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            onClick={() => setMenuOpen((v) => !v)}
          >
            <span className="site-nav__toggle-box" aria-hidden="true">
              <span className="site-nav__toggle-bar"></span>
              <span className="site-nav__toggle-bar"></span>
              <span className="site-nav__toggle-bar"></span>
            </span>
          </button>
          <Button variant="sticker" size="sm" arrow onClick={() => go('book')}>Connect</Button>
        </div>
      </div>

      {menuOpen ? (
        <div className="site-nav__overlay">
          <button
            type="button"
            className="site-nav__scrim"
            aria-label="Close menu"
            tabIndex={-1}
            onClick={closeMenu}
          ></button>
          <div className="site-nav__panel" id={panelId} ref={panelRef} role="dialog" aria-modal="true" aria-label="Site menu">
            <nav className="site-nav__panel-links" aria-label="Primary">
              {links.map(([key, label]) => (
                <a
                  key={key}
                  href="#"
                  className={'site-nav__panel-link' + (route === key ? ' is-active' : '')}
                  aria-current={route === key ? 'page' : undefined}
                  onClick={(e) => { e.preventDefault(); goAnd(key); }}
                >
                  <span>{label}</span>
                  <span className="site-nav__panel-chev" aria-hidden="true">→</span>
                </a>
              ))}
            </nav>
            <div className="site-nav__panel-cta">
              <Button variant="sticker" size="lg" block arrow onClick={() => goAnd('book')}>Connect with Carter</Button>
              <span className="site-nav__panel-note cc-hand">no payment to say hi</span>
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}

window.Nav = Nav;
})();