/* Shared chrome for all AIReady pages (home + services, academy, resources, about).
   Forest-deep header with the Gaia Allies | AIReady lockup, a Services dropdown,
   the Pulse members flyout, and a gold "Consult" button. Siblings under websites/,
   so ../<page>/ links resolve uniformly. */
(function () {
  const { Button } = window.GaiaAlliesDesignSystem_6e4515;
  const wrap = { maxWidth: 1180, margin: '0 auto', padding: '0 40px' };
  const DIAG = 'https://diagnostic.gaiaallies.com/score';
  const CAL = 'https://calendly.com/amy-adams/discovery';

  /* Responsive layer — injected once. Inline-styled React elements can't carry
     media queries, so we collapse multi-column grids and tighten container
     padding generically by inline-style attribute, and toggle desktop nav vs.
     hamburger. One stylesheet covers all 12 pages. */
  if (typeof document !== 'undefined') {
    var st = document.getElementById('air-responsive');
    if (!st) { st = document.createElement('style'); st.id = 'air-responsive'; document.head.appendChild(st); }
    st.textContent = [
      'html,body{overflow-x:hidden;max-width:100%;}',
      '.services-tablist-nav{display:none;}',
      '@media (max-width:860px){',
      '  [style*="max-width: 1180px"]{padding-left:20px !important;padding-right:20px !important;}',
      '  [style*="padding: 0px 40px"]{padding-left:20px !important;padding-right:20px !important;}',
      '  [style*="grid-template-columns"]:not(.air-keepgrid){grid-template-columns:minmax(0,1fr) !important;}',
      '  [style*="grid-template-columns"]:not(.air-keepgrid) > *{min-width:0 !important;}',
      '  .air-creds{flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:10px !important;}',
      '  .home-creds{align-items:center !important;justify-content:center !important;}',
      '  .home-creds .air-stepcard{padding-right:0 !important;text-align:center !important;}',
      '  .academy-creds{align-items:center !important;justify-content:center !important;}',
      '  .about-record-line2{display:block !important;}',
      '  .air-stepcard{border-right:0 !important;padding-left:0 !important;}',
      '  .services-tablist-wrap{position:relative;margin:36px -20px 0;}',
      '  .services-tablist-wrap::before,.services-tablist-wrap::after{content:"";position:absolute;top:0;bottom:1px;width:40px;z-index:1;pointer-events:none;transition:opacity .2s ease;}',
      '  .services-tablist-wrap.at-start::before,.services-tablist-wrap.at-end::after,.services-tablist-wrap.no-overflow::before,.services-tablist-wrap.no-overflow::after{opacity:0;}',
      '  .services-tablist-wrap::before{left:0;background:linear-gradient(to right,var(--white) 45%,transparent);}',
      '  .services-tablist-wrap::after{right:0;background:linear-gradient(to left,var(--white) 45%,transparent);}',
      '  .services-tablist-nav{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(calc(-50% - 1px));z-index:2;width:36px;height:36px;padding:0;border:none;border-radius:50%;background:var(--white);box-shadow:0 2px 12px rgba(15,42,30,.12);color:var(--gold);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .2s ease,transform .15s ease,box-shadow .15s ease;}',
      '  .services-tablist-nav--prev{left:4px;}',
      '  .services-tablist-nav--next{right:4px;}',
      '  .services-tablist-wrap.at-start .services-tablist-nav--prev,.services-tablist-wrap.at-end .services-tablist-nav--next,.services-tablist-wrap.no-overflow .services-tablist-nav{opacity:0;pointer-events:none;}',
      '  .services-tablist-nav:active{transform:translateY(calc(-50% - 1px)) scale(.94);box-shadow:0 1px 6px rgba(15,42,30,.1);}',
      '  .services-tablist{margin-top:0 !important;overflow-x:auto !important;overscroll-behavior-x:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:44px;padding:0 44px 0px 5px !important;gap:4px !important;}',
      '  .services-tablist [role="tab"]{scroll-snap-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px;}',
      '  .services-tablist{scrollbar-width:none !important;-ms-overflow-style:none !important;}',
      '  .services-tablist::-webkit-scrollbar{display:none !important;}',
      '  [style*="padding-block: 140px"]{padding-block:64px !important;}',
      '  [style*="padding-block: 102px"]{padding-block:62px !important;}',
      '  [style*="padding-block: 98px"]{padding-block:62px !important;}',
      '  [style*="padding-block: 96px"]{padding-block:62px !important;}',
      '  .hero-eyebrow-line2{display:block !important;}',
      '  .air-desktop{display:none !important;}',
      '  .air-burger{display:inline-flex !important;}',
      '}',
      '@media (max-width:420px){',
      '  .air-lockup{font-size:17px !important;}',
      '}'
    ].join('\n');
  }

  const SERVICES = [
    ['For you and your firm', [
      ['Office Hours', '/services#office-hours'],
      ['Roadmap', '/services#roadmap'],
      ['Advisory', '/services#advisor'],
    ]],
    ['For your team', [
      ['Training', '/services#training'],
      ['Academy', '/services#academy'],
    ]],
  ];

  function Lockup() {
    const ai = { color: 'var(--gold-h)', textTransform: 'uppercase', fontWeight: 800 };
    return (
      <span className="air-lockup" style={{ display: 'inline-flex', alignItems: 'center', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 20, letterSpacing: '.2px', lineHeight: 1 }}>
        <a href="/" title="Gaia Allies home" style={{ color: 'var(--ice)', background: 'none', textDecoration: 'none' }}>
          g<span style={ai}>ai</span>a&nbsp;allies
        </a>
        <span style={{ display: 'inline-block', width: 1.5, height: 16, background: 'var(--gold)', opacity: .5, margin: '0 12px' }}></span>
        <a href="/aiready" style={{ color: 'var(--ice)', background: 'none', textDecoration: 'none' }}>
          <span style={ai}>AI</span><span style={{ fontWeight: 700 }}>Ready</span><span style={{ fontSize: '.55em', verticalAlign: 'super', color: 'var(--gold-h)' }}>™</span>
        </a>
      </span>
    );
  }

  function AirNav({ active, showBenchmark = true, consult = CAL }) {
    const [svc, setSvc] = React.useState(false);
    const [pulse, setPulse] = React.useState(false);
    const [open, setOpen] = React.useState(false);
    const burgerBar = { display: 'block', width: 24, height: 2, background: 'var(--ice)', borderRadius: 2 };
    const mobileLink = { display: 'block', padding: '11px 0', textDecoration: 'none', fontSize: 16, fontWeight: 600, color: 'var(--ice)' };
    const link = (label, href) => (
      <a href={href} style={{ color: active === label ? 'var(--gold-h)' : 'rgba(244,241,231,.8)', fontSize: 14, fontWeight: active === label ? 600 : 500, textDecoration: 'none', whiteSpace: 'nowrap' }}>{label}</a>
    );
    return (
      <React.Fragment>
      {showBenchmark && (
      <div style={{ background: 'var(--forest-darkest)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ ...wrap, minHeight: 38, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, flexWrap: 'wrap', paddingBlock: 7 }}>
          <span style={{ fontSize: 12.5, color: 'rgba(244,241,231,.75)' }}>
            See where your firm stands on AI in five minutes.
          </span>
          <a href={DIAG} style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--gold-h)', textDecoration: 'none', whiteSpace: 'nowrap' }}>Take the benchmark →</a>
        </div>
      </div>
      )}
      <header className="s-deep" style={{ position: 'sticky', top: 0, zIndex: 40, borderBottom: '1px solid var(--line)' }}>
        <div style={{ ...wrap, height: 74, display: 'flex', alignItems: 'center', gap: 26 }}>
          <Lockup />
          <nav className="air-desktop" style={{ display: 'flex', gap: 22, marginLeft: 'auto', alignItems: 'center' }}>
            {/* Services dropdown */}
            <div style={{ position: 'relative' }} onMouseEnter={() => setSvc(true)} onMouseLeave={() => setSvc(false)}>
              <a href="/services" style={{ background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', color: active === 'Services' || svc ? 'var(--gold-h)' : 'rgba(244,241,231,.8)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: active === 'Services' ? 600 : 500, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '26px 0' }}>
                Services <span style={{ fontSize: 9, transform: svc ? 'rotate(180deg)' : 'none', transition: 'transform .25s var(--ease)' }}>▾</span>
              </a>
              <div style={{ position: 'absolute', top: '100%', left: '50%', transform: svc ? 'translate(-50%,0)' : 'translate(-50%,8px)', width: 250, background: 'var(--forest-darkest)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lift)', padding: 10, opacity: svc ? 1 : 0, visibility: svc ? 'visible' : 'hidden', transition: 'opacity .25s var(--ease), transform .25s var(--ease)' }}>
                {SERVICES.map(([groupLabel, items], gi) => (
                  <div key={groupLabel}>
                    {gi > 0 && <div style={{ height: 1, background: 'var(--line)', margin: '8px 6px' }}></div>}
                    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.15em', textTransform: 'uppercase', color: 'var(--gold-h)', padding: '10px 12px 5px' }}>{groupLabel}</div>
                    {items.map(([t, href]) => (
                      <a key={t} href={href} style={{ display: 'block', padding: '10px 12px', borderRadius: 'var(--radius-sm)', textDecoration: 'none', fontSize: 14.5, fontWeight: 600, color: 'var(--ice)' }}>{t}</a>
                    ))}
                  </div>
                ))}
              </div>
            </div>
            {link('About', '/about')}
            {link('Resources', '/resources')}
            <span style={{ width: 1, height: 22, background: 'var(--line)' }}></span>
            {/* Pulse flyout */}
            <a href="/pulse-about" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 13px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--hairline)', color: 'var(--gold-h)', fontSize: 13.5, fontWeight: 600, textDecoration: 'none', whiteSpace: 'nowrap' }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--gold)' }}></span>
              The Pulse
              <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(244,241,231,.55)' }}>Members only</span>
            </a>
            <Button variant="primary" size="sm" href={consult}>Book a consult</Button>
          </nav>
          <button className="air-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)} style={{ display: 'none', marginLeft: 'auto', flexDirection: 'column', gap: 5, background: 'none', border: 'none', cursor: 'pointer', padding: 8 }}>
            <span style={burgerBar}></span><span style={burgerBar}></span><span style={burgerBar}></span>
          </button>
        </div>
        {open && (
          <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--forest-darkest)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', boxShadow: 'var(--shadow-lift)', padding: '8px 20px 24px' }}>
            {SERVICES.map(([groupLabel, items]) => (
              <div key={groupLabel}>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.15em', textTransform: 'uppercase', color: 'var(--gold-h)', padding: '14px 0 4px' }}>{groupLabel}</div>
                {items.map(([t, href]) => (
                  <a key={t} href={href} style={mobileLink}>{t}</a>
                ))}
              </div>
            ))}
            <div style={{ height: 1, background: 'var(--line)', margin: '12px 0' }}></div>
            <a href="/about" style={mobileLink}>About</a>
            <a href="/resources" style={mobileLink}>Resources</a>
            <a href="/pulse-about" style={mobileLink}>The Pulse <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(244,241,231,.55)', marginLeft: 6 }}>Members</span></a>
            <div style={{ marginTop: 18 }}>
              <Button variant="primary" size="sm" href={consult}>Book a consult</Button>
            </div>
          </div>
        )}
      </header>
      </React.Fragment>
    );
  }

  function AirFooter({ consult = CAL }) {
    const cols = [
      { h: 'AIReady™', items: [['Benchmark', DIAG], ['Services', '/services'], ['Academy', '/academy'], ['Resources', '/resources'], ['About', '/about']] },
      { h: 'Products', items: [['The Pulse', '/pulse-about'], ['Atlas', '/atlas']] },
      { h: 'Connect', items: [['Consult', consult], ['Gaia Allies', '/'], ['LinkedIn', 'https://www.linkedin.com/in/adams-amy/']] },
    ];
    return (
      <footer className="s-deep" style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ ...wrap, padding: '64px 40px 40px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40 }}>
            <div>
              <Lockup />
              <p style={{ color: 'rgba(244,241,231,.6)', fontSize: 14, marginTop: 18, maxWidth: 300, lineHeight: 1.5 }}>
                AI training, consulting, and governance for law firms. A Gaia Allies practice.
              </p>
            </div>
            {cols.map((c) => (
              <div key={c.h}>
                <p style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--gold-h)', margin: '4px 0 16px' }}>{c.h}</p>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {c.items.map(([label, href]) => (
                    <li key={label}><a href={href} style={{ color: 'rgba(244,241,231,.72)', fontSize: 14, textDecoration: 'none' }}>{label}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 48, paddingTop: 22, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <span style={{ color: 'rgba(244,241,231,.5)', fontSize: 13 }}>© 2026 Gaia Allies. AIReady™ is a practice of Gaia Allies.</span>
            <span style={{ display: 'flex', gap: 20 }}>
              <a href="/privacy" style={{ color: 'rgba(244,241,231,.5)', fontSize: 13, textDecoration: 'none' }}>Privacy Policy</a>
              <a href="/terms" style={{ color: 'rgba(244,241,231,.5)', fontSize: 13, textDecoration: 'none' }}>Terms of Service</a>
            </span>
          </div>
        </div>
      </footer>
    );
  }

  Object.assign(window, { AirNav, AirFooter });
})();