// SiteChrome.jsx — unchanged sections of the Minerva homepage (per brief §0: do not restyle)
// Header, Industries, ClientStrip, ClosingCTA, Footer

const NAV_SERVICES = ['Product Development','Quality Improvement','Investigations','Knowledge Management','Risk Management','Visualizations','Digitalization'];
const NAV_INDUSTRIES = ['Cell and Gene Therapy','Biotech and Vaccines','Medical Devices','Life Science Robots'];
const NAV_ABOUT = ['About Minerva','Our Team'];
// Pages that exist in this prototype get a real link; everything else stays a placeholder.
const NAV_HREFS = { 'Quality Improvement': '/quality-improvement/', 'Start Diagnostic': '/start-a-diagnostic/', 'Start a Diagnostic': '/start-a-diagnostic/', 'Diagnostic': '/start-a-diagnostic/', 'Product Development': '/product-development/', 'Investigations': '/investigations/', 'Knowledge Management': '/knowledge-management/', 'Risk Management': '/risk-management/', 'Visualization': '/visualization/', 'Digitalization': '/digitalization/' };

function Header() {
  const [open, setOpen] = React.useState(null);
  return (
    <header data-screen-label="Header" style={{position:'sticky', top:0, zIndex:10, background:'rgba(255,255,255,0.96)', backdropFilter:'blur(8px)', borderBottom:'1px solid var(--border)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'18px 24px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:32}}>
        <a href="/knowledge-governance/"><img src="assets/logo-minerva-word.png" style={{height:30, display:'block'}} alt="Minerva"/></a>
        <nav style={{display:'flex', alignItems:'center', gap:28, fontSize:15, fontWeight:700, color:'var(--fg)'}}>
          <span style={{cursor:'pointer', position:'relative'}} onMouseEnter={()=>setOpen('s')} onMouseLeave={()=>setOpen(null)}>
            Capabilities ▾
            {open==='s' && <Dropdown items={NAV_SERVICES}></Dropdown>}
          </span>
          <span style={{cursor:'pointer', position:'relative'}} onMouseEnter={()=>setOpen('i')} onMouseLeave={()=>setOpen(null)}>
            Industries We Serve ▾
            {open==='i' && <Dropdown items={NAV_INDUSTRIES}></Dropdown>}
          </span>
          <span style={{cursor:'pointer', position:'relative'}} onMouseEnter={()=>setOpen('a')} onMouseLeave={()=>setOpen(null)}>
            About Us ▾
            {open==='a' && <Dropdown items={NAV_ABOUT}></Dropdown>}
          </span>
          <span style={{cursor:'pointer'}}>Blog</span>
          <a href="#contact" style={{fontWeight:700, color:'#0A1426', background:'var(--minerva-gold)', padding:'10px 18px', borderRadius:8, textDecoration:'none', whiteSpace:'nowrap', boxShadow:'0 2px 10px rgba(224,162,48,0.30)'}}>Start Diagnostic</a>
        </nav>
      </div>
    </header>
  );
}

function Dropdown({items}) {
  return (
    <div style={{position:'absolute', top:'100%', left:-16, paddingTop:8, minWidth:260, zIndex:20}}>
      <div style={{background:'#fff', border:'1px solid var(--border)', borderRadius:12, boxShadow:'0 12px 32px rgba(15,26,46,0.1)', padding:8}}>
        {items.map(t=>(
          <a key={t} href={NAV_HREFS[t] || '#'} style={{display:'block', padding:'10px 14px', borderRadius:8, fontSize:14, fontWeight:400, color:'var(--fg)', textDecoration:'none'}}>{t}</a>
        ))}
      </div>
    </div>
  );
}

// Grouped dropdown: titled sections (e.g. Execution Areas = Domains + Disciplines).
function GroupedDropdown({groups}) {
  return (
    <div style={{position:'absolute', top:'100%', left:-16, paddingTop:8, minWidth:280, zIndex:20}}>
      <div style={{background:'#fff', border:'1px solid var(--border)', borderRadius:12, boxShadow:'0 12px 32px rgba(15,26,46,0.1)', padding:8}}>
        {groups.map((g, gi)=>(
          <div key={g.title} style={{marginTop: gi ? 6 : 0, paddingTop: gi ? 6 : 0, borderTop: gi ? '1px solid var(--border)' : 'none'}}>
            <div style={{padding:'6px 14px 4px', fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--fg-muted)'}}>{g.title}</div>
            {g.items.map(t=>(
              <a key={t} href={NAV_HREFS[t] || '#'} style={{display:'block', padding:'9px 14px', borderRadius:8, fontSize:14, fontWeight:400, color:'var(--fg)', textDecoration:'none'}}>{t}</a>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================================
// NavBar — two-tier brand navigation (per "Minerva Nav Bar - Handoff Spec").
// Tier 1: master brand bar (firm logo + KG/GI division switch + gold CTA), scrolls away.
// Tier 2: division sub-bar, sticky; on Knowledge Governance it is the LIGHT / green theme,
//         with the KG box active and the GI box previewing the dark/sky theme.
// Mounted on the Knowledge Governance home page; other interior pages keep <Header>.
// ============================================================================
const SPECTRUM_RULE = 'linear-gradient(90deg,#D51C29,#E0542A,#E0A230,#F2D12E,#8FBF3F,#069848,#1AA89A,#3FB1E5,#1C4DA1,#4A3BA8,#8B2CA8,#D20F8C)';
const GI_HOME_URL = '../..//compliant-ai-readiness/'; // General Intelligence (VISDI/Mingi) home in this project.
const SPLASH_URL = '../..//home/';  // firm-level "one firm, two divisions" splash page. Both Minerva logos point here.
const KG_HOME = '/knowledge-governance/';
const KG_SECTIONS = [
  { id:'method',       label:'The Method',  href:'#foundation' },
  { id:'capabilities', label:'Capabilities', href:'#capabilities' },
  { id:'industries',   label:'Industries',  href:'#industries' },
  { id:'clients',      label:'Clients',     href:'#clients' },
  { id:'contact',      label:'Contact',     href:'#contact' },
];

// Sub-nav: Domains and Disciplines are first-class nav dropdowns, followed by
// Industries, About Minerva, Blog.
const TIER2_MENU = [
  { label:'Domains',     items:['Product Development','Quality Improvement','Investigations'] },
  { label:'Disciplines', items:['Visualization','Digitalization','Knowledge Management','Risk Management'] },
  { label:'Industries',  href:'/industries/' },
];

function DivisionBox({label, href, active, theme, block, onClick}) {
  const gi = theme === 'gi';
  const base = {
    display: block ? 'flex' : 'inline-flex', alignItems:'center', justifyContent: block ? 'center' : 'flex-start',
    gap:9, textDecoration:'none', width: block ? '100%' : 'auto', boxSizing:'border-box',
    padding:'10px 18px', borderRadius:'var(--radius-md)', fontSize:15, letterSpacing:'-0.01em',
    fontWeight: active ? 700 : 600, whiteSpace:'nowrap',
    transition:'box-shadow .2s cubic-bezier(0.2,0.8,0.2,1), border-color .2s cubic-bezier(0.2,0.8,0.2,1)',
  };
  const themed = gi
    ? { background: active ? '#0A1426' : '#0E1A30', color:'#FFFFFF',
        border: active ? '1px solid #3FB1E5' : '1px solid rgba(63,177,229,0.45)',
        boxShadow: active ? '0 2px 14px rgba(63,177,229,0.30)' : 'none' }
    : { background:'#FFFFFF', color: active ? '#1C4DA1' : 'var(--ink-800)',
        border: active ? '1px solid #1C4DA1' : '1px solid var(--ink-300)',
        boxShadow: active ? '0 2px 14px rgba(28,77,161,0.20)' : 'none' };
  const dot = gi ? '#3FB1E5' : '#1C4DA1';
  return (
    <a href={href} onClick={onClick} style={{...base, ...themed}}>
      {active && <span style={{width:8, height:8, borderRadius:999, background:dot, flexShrink:0}}></span>}
      {label}
    </a>
  );
}

// Hamburger / close toggle. Visibility is class-driven (.nav-burger), never inline.
function Burger({open, onClick}) {
  return (
    <button className="nav-burger" type="button" onClick={onClick}
            aria-expanded={open} aria-label={open ? 'Close menu' : 'Open menu'}
            style={{background:'none', border:0, cursor:'pointer', width:44, height:44, padding:8,
                    alignItems:'center', justifyContent:'center', borderRadius:'var(--radius-md)'}}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--ink-900)" strokeWidth="2" strokeLinecap="round">
        {open
          ? <><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></>
          : <><line x1="3" y1="7" x2="21" y2="7"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="17" x2="21" y2="17"></line></>}
      </svg>
    </button>
  );
}

function GoldCTA({href, small}) {
  return (
    <a href={href} style={{
      background:'var(--minerva-gold)', color:'#0A1426', fontWeight:700, textDecoration:'none',
      padding: small ? '8px 16px' : '10px 19px', fontSize: small ? 14.5 : 15,
      borderRadius:'var(--radius-md)', boxShadow:'0 2px 10px rgba(224,162,48,0.30)', whiteSpace:'nowrap',
      transition:'background .15s cubic-bezier(0.2,0.8,0.2,1), box-shadow .15s cubic-bezier(0.2,0.8,0.2,1)',
    }}>Start a Diagnostic</a>
  );
}

// Small circular LinkedIn link — sits to the right of the gold CTA in the master bar.
function LinkedInBtn() {
  return (
    <a href="https://www.linkedin.com/company/minerva-knowledge-and-risk-management/about/"
       target="_blank" rel="noopener noreferrer" aria-label="Minerva on LinkedIn"
       title="Minerva on LinkedIn"
       style={{
         display:'inline-flex', alignItems:'center', justifyContent:'center',
         width:38, height:38, borderRadius:'50%', flexShrink:0,
         background:'var(--ink-100)', color:'var(--ink-500)', textDecoration:'none',
         border:'1px solid var(--ink-200)',
         transition:'background .15s cubic-bezier(0.2,0.8,0.2,1), box-shadow .15s cubic-bezier(0.2,0.8,0.2,1)',
       }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.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.74v20.52C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.74V1.74C24 .78 23.2 0 22.22 0z"></path>
      </svg>
    </a>
  );
}

function NavBar({sections = KG_SECTIONS, activeId = null, showPinnedCta = true}) {
  const [pinned, setPinned] = React.useState(false);
  const [open, setOpen] = React.useState(null);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setPinned(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Close the overlay if the viewport grows back to desktop (prevents a stuck menu on rotate/resize).
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 1024) setMenuOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  // Lock body scroll while the overlay is open.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const ctaHref = NAV_HREFS['Start Diagnostic'] || '#';
  const closeMenu = () => setMenuOpen(false);
  return (
    <>
      <style>{`
        @keyframes navLogoSettle { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
        @keyframes navCtaReveal  { from { opacity:0; transform:translateX(10px); }  to { opacity:1; transform:translateX(0); } }
        .nav-pin-logo { animation: navLogoSettle .28s cubic-bezier(0.2,0.8,0.2,1) both; }
        .nav-pin-cta  { animation: navCtaReveal .26s cubic-bezier(0.2,0.8,0.2,1) both; }
        .nav-subtrigger { position:relative; transition: color .15s cubic-bezier(0.2,0.8,0.2,1); }
        .nav-subtrigger:hover { color: var(--minerva-blue); }
        /* ---- responsive / overlay model (shipped with the component so it can't get stuck open) ---- */
        .nav-burger { display:none; }
        .nav-menu-overlay { display:none; position:fixed; inset:0; z-index:200; flex-direction:column; background:#fff; }
        @media (max-width:1024px) {
          .nav-tier1, .nav-tier2 { padding-left:24px !important; padding-right:24px !important; }
          .nav-actions       { display:none !important; }
          .nav-links-desktop { display:none !important; }
          .nav-burger        { display:inline-flex !important; }
          .nav-menu-overlay.open { display:flex !important; }
        }
        @media (min-width:1025px) {
          .nav-menu-overlay { display:none !important; }
        }
        .nav-ov-link { display:block; padding:16px 0; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:14px; color:var(--ink-900); text-decoration:none; }
        .nav-ov-sub  { padding:9px 0 9px 14px; font-size:15px; color:var(--fg-muted); text-decoration:none; }
        .nav-ov-sub:hover, .nav-ov-link:hover { color:var(--minerva-blue); }
      `}</style>

      {/* ---- Tier 1 — master brand bar (scrolls away) ---- */}
      <div className="nav-tier1" data-screen-label="NavBar" style={{
        position:'relative', zIndex:60, display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 72px', height:76, background:'rgba(255,255,255,0.93)',
        backdropFilter:'blur(12px) saturate(1.4)', WebkitBackdropFilter:'blur(12px) saturate(1.4)',
        borderBottom:'1px solid var(--ink-200)',
      }}>
        <a href={SPLASH_URL} style={{display:'flex', alignItems:'center'}}>
          <img src="assets/logo-minerva-word.png" style={{height:30, display:'block'}} alt="Minerva"/>
        </a>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <div className="nav-actions" style={{display:'flex', alignItems:'center', gap:14}}>
            <DivisionBox label="Knowledge Governance" href={KG_HOME} active={true} theme="kg"></DivisionBox>
            <DivisionBox label="Compliant AI Readiness" href={GI_HOME_URL} active={false} theme="gi"></DivisionBox>
            <span style={{width:1, height:24, background:'var(--ink-300)'}}></span>
            <GoldCTA href={ctaHref}></GoldCTA>
            <LinkedInBtn></LinkedInBtn>
          </div>
          <Burger open={menuOpen} onClick={() => setMenuOpen(o => !o)}></Burger>
        </div>
        <div style={{position:'absolute', left:0, right:0, bottom:-2, height:2, opacity:0.9, background:SPECTRUM_RULE}}></div>
      </div>

      {/* ---- Tier 2 — division sub-bar (sticky, KG light/green theme) ---- */}
      <div className="nav-tier2" style={{
        position:'sticky', top:0, zIndex:50, display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 72px', height:56, background:'rgba(255,255,255,0.92)',
        backdropFilter:'blur(16px) saturate(1.5)', WebkitBackdropFilter:'blur(16px) saturate(1.5)',
        borderBottom:'1px solid var(--ink-200)',
        boxShadow: pinned ? '0 10px 30px rgba(15,26,46,0.12)' : 'none',
        transition:'box-shadow .25s cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:16}}>
          {pinned && (
            <>
              <a href={SPLASH_URL} className="nav-pin-logo" style={{display:'flex', alignItems:'center'}}>
                <img src="assets/logo-minerva-km.svg" style={{height:30, display:'block'}} alt="Minerva"/>
              </a>
              <span style={{width:1, height:24, background:'var(--ink-300)'}}></span>
            </>
          )}
          <span style={{width:4, height:22, borderRadius:2, background:'#1C4DA1', flexShrink:0}}></span>
          <a href={KG_HOME} style={{fontWeight:700, fontSize:16.5, letterSpacing:'-0.01em', color:'var(--ink-900)', textDecoration:'none'}}>Knowledge Governance</a>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:16}}>
          <nav className="nav-sublinks nav-links-desktop" style={{display:'flex', alignItems:'center', gap:28, fontSize:14, fontWeight:700, color:'var(--ink-800)'}}>
            {TIER2_MENU.map((m, idx) => {
              const node = (m.items || m.groups) ? (
                <span key={m.label} className="nav-subtrigger" style={{cursor:'pointer', textTransform:'uppercase', letterSpacing:'0.05em', whiteSpace:'nowrap'}}
                      onMouseEnter={() => setOpen(idx)} onMouseLeave={() => setOpen(null)}>
                  {m.label} ▾
                  {open === idx && (m.groups ? <GroupedDropdown groups={m.groups}></GroupedDropdown> : <Dropdown items={m.items}></Dropdown>)}
                </span>
              ) : (
                <a key={m.label} href={m.href} className="nav-subtrigger" style={{textTransform:'uppercase', letterSpacing:'0.05em', whiteSpace:'nowrap', color:'var(--ink-800)', textDecoration:'none'}}>{m.label}</a>
              );
              return node;
            })}
            {pinned && showPinnedCta && <span className="nav-pin-cta"><GoldCTA href={ctaHref} small={true}></GoldCTA></span>}
          </nav>
          {pinned && <Burger open={menuOpen} onClick={() => setMenuOpen(o => !o)}></Burger>}
        </div>
      </div>

      {/* ---- Mobile / tablet full-screen overlay (≤1024px) ---- */}
      <div className={'nav-menu-overlay' + (menuOpen ? ' open' : '')} style={{flexDirection:'column'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 24px', borderBottom:'1px solid var(--ink-200)'}}>
          <a href={SPLASH_URL} onClick={closeMenu} style={{display:'flex', alignItems:'center'}}>
            <img src="assets/logo-minerva-km.svg" style={{height:34, display:'block'}} alt="Minerva"/>
          </a>
          <Burger open={true} onClick={closeMenu}></Burger>
        </div>
        <div style={{flex:1, overflowY:'auto', padding:'24px', display:'flex', flexDirection:'column', gap:26}}>
          <div>
            <div className="eyebrow" style={{marginBottom:12}}>Divisions</div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              <DivisionBox label="Knowledge Governance" href={KG_HOME} active={true} theme="kg" block={true} onClick={closeMenu}></DivisionBox>
              <DivisionBox label="Compliant AI Readiness" href={GI_HOME_URL} active={false} theme="gi" block={true} onClick={closeMenu}></DivisionBox>
            </div>
          </div>
          <a href={ctaHref} onClick={closeMenu} style={{display:'block', textAlign:'center', background:'var(--minerva-gold)', color:'#0A1426', fontWeight:700, fontSize:16, padding:'14px 24px', borderRadius:'var(--radius-md)', textDecoration:'none', boxShadow:'0 2px 10px rgba(224,162,48,0.30)'}}>Start a Diagnostic</a>
          <nav style={{display:'flex', flexDirection:'column'}}>
            {TIER2_MENU.map(m => (
              <div key={m.label} style={{borderTop:'1px solid var(--ink-200)'}}>
                {m.groups ? (
                  <>
                    <div className="nav-ov-link" style={{paddingBottom:6, cursor:'default'}}>{m.label}</div>
                    {m.groups.map(g => (
                      <div key={g.title} style={{paddingBottom:10}}>
                        <div style={{padding:'2px 0 2px 14px', fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--fg-muted)'}}>{g.title}</div>
                        <div style={{display:'flex', flexDirection:'column'}}>
                          {g.items.map(it => <a key={it} href={NAV_HREFS[it] || '#'} onClick={closeMenu} className="nav-ov-sub">{it}</a>)}
                        </div>
                      </div>
                    ))}
                  </>
                ) : m.items ? (
                  <>
                    <div className="nav-ov-link" style={{paddingBottom:6, cursor:'default'}}>{m.label}</div>
                    <div style={{display:'flex', flexDirection:'column', paddingBottom:14}}>
                      {m.items.map(it => <a key={it} href={NAV_HREFS[it] || '#'} onClick={closeMenu} className="nav-ov-sub">{it}</a>)}
                    </div>
                  </>
                ) : (
                  <a href={m.href} onClick={closeMenu} className="nav-ov-link">{m.label}</a>
                )}
              </div>
            ))}
          </nav>
        </div>
        <div style={{height:3, background:SPECTRUM_RULE, opacity:0.9}}></div>
      </div>
    </>
  );
}

// ============================================================================
// KnowledgeExecutionNav — firm-level "Knowledge Execution" nav (matches the splash).
// Same Tier-1 master bar as NavBar, but NEITHER division is active, and Tier 2 is the
// umbrella "Knowledge Execution" bar with the firm-level About Minerva / Blog links.
// Mounted on the About Minerva (/about-minerva/) and Blog pages.
// ============================================================================
const SPECTRUM_VERTICAL_RULE = 'linear-gradient(180deg,#D51C29,#E0542A,#E0A230,#F2D12E,#8FBF3F,#069848,#1AA89A,#3FB1E5,#1C4DA1,#4A3BA8,#8B2CA8,#D20F8C)';
const KE_SUBLINKS = [
  { label:'About Minerva', href:'/about-minerva/' },
  { label:'Blog',          href:'/blog/' },
];

function KnowledgeExecutionNav() {
  const [pinned, setPinned] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setPinned(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 1024) setMenuOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const ctaHref = NAV_HREFS['Start Diagnostic'] || '#';
  const closeMenu = () => setMenuOpen(false);
  return (
    <>
      <style>{`
        @keyframes navLogoSettle { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
        .ke-sublink { transition: color .15s cubic-bezier(0.2,0.8,0.2,1); }
        .ke-sublink:hover { color: var(--minerva-blue); }
        .nav-burger { display:none; }
        .nav-menu-overlay { display:none; position:fixed; inset:0; z-index:200; flex-direction:column; background:#fff; }
        @media (max-width:1024px) {
          .nav-tier1, .nav-tier2 { padding-left:24px !important; padding-right:24px !important; }
          .nav-actions       { display:none !important; }
          .nav-links-desktop { display:none !important; }
          .nav-burger        { display:inline-flex !important; }
          .nav-menu-overlay.open { display:flex !important; }
        }
        @media (min-width:1025px) { .nav-menu-overlay { display:none !important; } }
        .nav-ov-link { display:block; padding:16px 0; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:14px; color:var(--ink-900); text-decoration:none; }
        .nav-ov-link:hover { color:var(--minerva-blue); }
      `}</style>

      {/* ---- Tier 1 — master brand bar (scrolls away) ---- */}
      <div className="nav-tier1" data-screen-label="NavBar" style={{
        position:'relative', zIndex:60, display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 72px', height:76, background:'rgba(255,255,255,0.93)',
        backdropFilter:'blur(12px) saturate(1.4)', WebkitBackdropFilter:'blur(12px) saturate(1.4)',
        borderBottom:'1px solid var(--ink-200)',
      }}>
        <a href={SPLASH_URL} style={{display:'flex', alignItems:'center'}}>
          <img src="assets/logo-minerva-word.png" style={{height:30, display:'block'}} alt="Minerva"/>
        </a>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <div className="nav-actions" style={{display:'flex', alignItems:'center', gap:14}}>
            <DivisionBox label="Knowledge Governance" href={KG_HOME} active={false} theme="kg"></DivisionBox>
            <DivisionBox label="Compliant AI Readiness" href={GI_HOME_URL} active={false} theme="gi"></DivisionBox>
            <span style={{width:1, height:24, background:'var(--ink-300)'}}></span>
            <GoldCTA href={ctaHref}></GoldCTA>
            <LinkedInBtn></LinkedInBtn>
          </div>
          <Burger open={menuOpen} onClick={() => setMenuOpen(o => !o)}></Burger>
        </div>
        <div style={{position:'absolute', left:0, right:0, bottom:-2, height:2, opacity:0.9, background:SPECTRUM_RULE}}></div>
      </div>

      {/* ---- Tier 2 — Knowledge Execution umbrella sub-bar (sticky) ---- */}
      <div className="nav-tier2" style={{
        position:'sticky', top:0, zIndex:50, display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 72px', height:56, background:'rgba(255,255,255,0.92)',
        backdropFilter:'blur(16px) saturate(1.5)', WebkitBackdropFilter:'blur(16px) saturate(1.5)',
        borderBottom:'1px solid var(--ink-200)',
        boxShadow: pinned ? '0 10px 30px rgba(15,26,46,0.12)' : 'none',
        transition:'box-shadow .25s cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:16}}>
          {pinned && (
            <>
              <a href={SPLASH_URL} style={{display:'flex', alignItems:'center', animation:'navLogoSettle .28s cubic-bezier(0.2,0.8,0.2,1) both'}}>
                <img src="assets/logo-minerva-km.svg" style={{height:30, display:'block'}} alt="Minerva"/>
              </a>
              <span style={{width:1, height:24, background:'var(--ink-300)'}}></span>
            </>
          )}
          <a href={SPLASH_URL} style={{display:'flex', alignItems:'center', gap:13, textDecoration:'none'}}>
            <span style={{width:4, height:22, borderRadius:2, background:SPECTRUM_VERTICAL_RULE, flexShrink:0}}></span>
            <span style={{fontFamily:'var(--wix-display)', fontWeight:700, fontSize:16.5, letterSpacing:'-0.005em', color:'var(--ink-900)'}}>Knowledge Execution</span>
          </a>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:16}}>
          <nav className="nav-links-desktop" style={{display:'flex', alignItems:'center', gap:28}}>
            {KE_SUBLINKS.map(({label, href}) => (
              <a key={label} href={href} className="ke-sublink" style={{fontFamily:'var(--wix-text)', fontSize:14, fontWeight:700, letterSpacing:'0.05em', textTransform:'uppercase', color:'var(--ink-800)', textDecoration:'none', whiteSpace:'nowrap'}}>{label}</a>
            ))}
            {pinned && <span><GoldCTA href={ctaHref} small={true}></GoldCTA></span>}
          </nav>
          {pinned && <Burger open={menuOpen} onClick={() => setMenuOpen(o => !o)}></Burger>}
        </div>
      </div>

      {/* ---- Mobile / tablet overlay (≤1024px) ---- */}
      <div className={'nav-menu-overlay' + (menuOpen ? ' open' : '')} style={{flexDirection:'column'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 24px', borderBottom:'1px solid var(--ink-200)'}}>
          <a href={SPLASH_URL} onClick={closeMenu} style={{display:'flex', alignItems:'center'}}>
            <img src="assets/logo-minerva-km.svg" style={{height:34, display:'block'}} alt="Minerva"/>
          </a>
          <Burger open={true} onClick={closeMenu}></Burger>
        </div>
        <div style={{flex:1, overflowY:'auto', padding:'24px', display:'flex', flexDirection:'column', gap:26}}>
          <div>
            <div className="eyebrow" style={{marginBottom:12}}>Divisions</div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              <DivisionBox label="Knowledge Governance" href={KG_HOME} active={false} theme="kg" block={true} onClick={closeMenu}></DivisionBox>
              <DivisionBox label="Compliant AI Readiness" href={GI_HOME_URL} active={false} theme="gi" block={true} onClick={closeMenu}></DivisionBox>
            </div>
          </div>
          <a href={ctaHref} onClick={closeMenu} style={{display:'block', textAlign:'center', background:'var(--minerva-gold)', color:'#0A1426', fontWeight:700, fontSize:16, padding:'14px 24px', borderRadius:'var(--radius-md)', textDecoration:'none', boxShadow:'0 2px 10px rgba(224,162,48,0.30)'}}>Start a Diagnostic</a>
          <nav style={{display:'flex', flexDirection:'column'}}>
            {KE_SUBLINKS.map(({label, href}) => (
              <div key={label} style={{borderTop:'1px solid var(--ink-200)'}}>
                <a href={href} onClick={closeMenu} className="nav-ov-link">{label}</a>
              </div>
            ))}
          </nav>
        </div>
        <div style={{height:3, background:SPECTRUM_RULE, opacity:0.9}}></div>
      </div>
    </>
  );
}

const INDUSTRIES = [
  {t:'Cell and gene therapy', img:'dna-gene-editing.jpg', d:'Advanced therapy development and release.'},
  {t:'Biotech and vaccines', img:'scientists-sample-analysis.jpg', d:'Manufacturing performance and risk.'},
  {t:'Medical devices', img:'cleanroom-inspection.jpg', d:'Device development and commercialization.'},
  {t:'Life science robots', img:'surgical-robot.jpg', cross:true, d:'Robotic and automated systems.'},
];

const INDUSTRY_SLIDES = [
  {t:'Cell and gene therapy', img:'dna-gene-editing.jpg'},
  {t:'Biotech and vaccines', img:'scientists-sample-analysis.jpg'},
  {t:'Medical devices', img:'cleanroom-inspection.jpg'},
  {t:'Life science robots', img:'surgical-robot.jpg', cross:true},
];

// §6 TRUST AND FIT (merged) — built for the way you are audited (Site Brief 02 v1.1).
// Industries (white axis) and Situations (link to domain pages) kept visually distinct.
const TRUST_INDUSTRIES = ['Cell and Gene Therapy', 'Biotech and Vaccines', 'Medical Devices', 'Life Science Robots'];
const TRUST_SITUATIONS = [
  {t:'Product Development', href:'/product-development/'},
  {t:'Quality Improvement', href:'/quality-improvement/'},
  {t:'Investigations', href:'/investigations/'},
];

function TrustAndFit() {
  return (
    <section id="industries" data-screen-label="Trust and fit" style={{background:'#fff', padding:'52px 24px'}}>
      <div style={{maxWidth:980, margin:'0 auto'}}>
        <div style={{textAlign:'center', maxWidth:820, marginInline:'auto'}}>
          <div className="eyebrow" style={{marginBottom:14}}>Trust and fit</div>
          <h2 style={{fontSize:40, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.12, margin:'0 0 22px', textWrap:'pretty'}}>Built for the way you are audited.</h2>
          <p style={{fontSize:18, lineHeight:1.7, color:'var(--fg-muted)', margin:'0 auto', maxWidth:760, display:'inline-block', textAlign:'left', textWrap:'pretty'}}>
            Every piece of governed knowledge is verified by a qualified person and traceable to its source. It
            extends the same discipline you already trust for your data to the knowledge built on it. Every result
            is verified before it counts. The human stays in command.
          </p>
        </div>

        <div style={{textAlign:'center', margin:'40px 0 24px'}}>
          <span className="eyebrow" style={{color:'var(--minerva-blue)'}}>Built for regulated work</span>
        </div>

        <div className="trustfit-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, alignItems:'stretch'}}>
          {/* Industries — white axis */}
          <div className="mk-card" style={{padding:'28px 30px'}}>
            <p style={{fontSize:13, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--minerva-blue)', margin:'0 0 18px'}}>Industries</p>
            <div style={{display:'flex', flexWrap:'wrap', gap:10}}>
              {TRUST_INDUSTRIES.map(t => (
                <span key={t} style={{fontSize:15.5, fontWeight:600, color:'var(--fg)', background:'var(--ink-050)', border:'1px solid var(--border)', borderRadius:999, padding:'9px 16px'}}>{t}</span>
              ))}
            </div>
          </div>
          {/* Situations — link down to domain pages */}
          <div className="mk-card" style={{padding:'28px 30px'}}>
            <p style={{fontSize:13, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--minerva-blue)', margin:'0 0 18px'}}>Domains</p>
            <div style={{display:'flex', flexWrap:'wrap', gap:10}}>
              {TRUST_SITUATIONS.map(s => (
                <a key={s.t} href={s.href} style={{fontSize:15.5, fontWeight:600, color:'var(--minerva-blue)', background:'var(--accent-soft)', border:'1px solid #C9D7EE', borderRadius:999, padding:'9px 16px', textDecoration:'none'}}>{s.t} →</a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// §6 THE PROOF — earned proof replaces the logo wall (KG Rebuild Spec v1.7). No logos.
function Proof() {
  const strip = ['Since 2014', 'Regulated life sciences', 'Human in command'];
  return (
    <section id="proof" data-screen-label="The proof" style={{padding:'44px 24px', background:'var(--ink-050)', borderTop:'1px solid var(--border)'}}>
      <div style={{maxWidth:860, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14}}>Proof</div>
        <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 22px', textWrap:'pretty'}}>Twelve years. Clients who came for the visual language and stayed.</h2>
        <p style={{fontSize:18.5, lineHeight:1.7, color:'var(--fg-muted)', margin:'0 auto', maxWidth:760, textAlign:'center', textWrap:'pretty'}}>
          Once knowledge is visible, true, and traceable, work moves faster and results grow more reliable. That
          is why clients stay.
        </p>
        <div style={{display:'flex', flexWrap:'wrap', alignItems:'center', justifyContent:'center', gap:'12px 20px', margin:'34px 0 0'}}>
          {strip.map((s, i) => (
            <React.Fragment key={s}>
              {i > 0 && <span aria-hidden="true" style={{width:5, height:5, borderRadius:'50%', background:'var(--minerva-gold)'}}></span>}
              <span style={{fontSize:14, fontWeight:700, letterSpacing:'0.10em', textTransform:'uppercase', color:'var(--fg-muted)'}}>{s}</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// §7 THE BRIDGE UP — styled as a dark navy AI box (matches the home "destination" card).
function Handoff() {
  return (
    <section id="handoff" data-screen-label="The bridge up" style={{background:'#fff', padding:'44px 24px'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        <div style={{position:'relative', overflow:'hidden', textAlign:'center',
          background:'linear-gradient(155deg,#0A1426 0%,#0C1830 55%,#080F1C 100%)',
          border:'1px solid rgba(63,177,229,0.34)', borderRadius:14, boxShadow:'0 16px 44px rgba(10,20,38,0.35)',
          padding:'56px 40px 52px'}}>
          <span style={{position:'absolute', top:0, left:0, right:0, height:3, background:SPECTRUM_RULE, opacity:0.9}}></span>
          <div className="eyebrow" style={{marginBottom:14, color:'var(--minerva-sky)'}}>The bridge up</div>
          <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 18px', color:'#fff', textWrap:'pretty'}}>The foundation AI runs on.</h2>
          <p style={{fontSize:18, lineHeight:1.7, color:'#C4D8EE', margin:'0 auto 30px', maxWidth:720, display:'block', textAlign:'left', textWrap:'pretty'}}>
            Governed knowledge is what makes AI safe to deploy in regulated work. When you are ready, the same
            foundation becomes executable, with results you can defend.
          </p>
          <a href="../..//compliant-ai-readiness/"
            style={{display:'inline-flex', alignItems:'center', gap:8, fontSize:16, fontWeight:700,
              color:'var(--minerva-sky)', textDecoration:'none'}}>See Compliant AI Readiness →</a>
        </div>
      </div>
    </section>
  );
}

// §8 THE CLOSE — Diagnostic defined (locked, same verbatim as Home close), gold CTA.
function FinalCTA() {
  return (
    <section id="contact" data-screen-label="The close" style={{background:'var(--minerva-blue)', color:'#fff', padding:'48px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'left'}}>
        <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 18px', color:'#fff', textWrap:'pretty', textAlign:'center'}}>Start with a Diagnostic.</h2>
        <p style={{fontSize:18, lineHeight:1.7, color:'rgba(255,255,255,0.85)', margin:'0 auto 30px', maxWidth:740, textAlign:'left', textWrap:'pretty'}}>
          The Diagnostic is how Minerva begins. We walk your process, see where your knowledge stands, and find
          the gaps and the openings. Then we build a working slice on your own knowledge with your team, the piece
          that delivers the most value for your objectives. You leave with a map, a working proof, and an ROI
          projection for the path forward.
        </p>
        <div style={{textAlign:'center'}}>
          <a href="/start-a-diagnostic/" className="mk-btn-gold" style={{textDecoration:'none', display:'inline-block'}}>Start a Diagnostic</a>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// KeyTerms — GEO section: static, semantic <dl> of the eight core terms.
// Copy is verbatim from the Key Terms brief; the matching JSON-LD lives in the
// page <head>. Light theme to stay consistent with the rest of the KG page.
// ============================================================================
const KEY_TERMS = [
  {term:'Visual-Digital Knowledge™ (VDK)', def:'Knowledge made legible to people and machines at once, visual for humans, digital for AI, human-verified. Minerva’s core output.'},
  {term:'The Minerva Way', def:'Minerva’s method for turning scattered data, documents, and expertise into compliant, executable knowledge for regulated life sciences.'},
  {term:'Knowledge Execution Layer', def:'The compliant, AI-ready layer between fragmented life-sciences data and the humans, AI agents, and robots that act on it.'},
  {term:'Executable Knowledge', def:'Knowledge structured to be acted on by a person, AI agent, or robot, not just stored or read.'},
  {term:'Knowledge Management', def:'The human and process discipline Minerva was built on. It turns disconnected documents, data, and expertise into governed knowledge, and today is one element of the knowledge execution layer rather than the whole of what Minerva delivers.'},
  {term:'Risk Management', def:'Reducing decision subjectivity through visual process mapping and structured risk assessment, aligned with ICH Q9(R1) and ISO 14971.'},
  {term:'Context', def:'Engineered information that makes knowledge safe for AI agents and robots to act on; Minerva’s third element after Knowledge and Risk.'},
  {term:'AI-Ready Knowledge', def:'Knowledge that is structured, governed, and human-verified so AI can use it reliably in regulated environments.'},
];

function KeyTerms() {
  return (
    <section id="key-terms" data-screen-label="Key Terms" aria-labelledby="key-terms-heading" style={{background:'var(--ink-900)', padding:'28px 24px', borderTop:'1px solid rgba(255,255,255,0.1)'}}>
      <style>{`
        .kt-details > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; }
        .kt-details > summary::-webkit-details-marker { display:none; }
        .kt-details > summary::after { content:'+'; font-size:17px; font-weight:400; color:rgba(255,255,255,0.55); line-height:1; }
        .kt-details[open] > summary::after { content:'–'; }
        .kt-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 64px; margin:18px 0 0; text-align:left; }
        .kt-item { font-size:15px; line-height:1.6; }
        .kt-item dt { font-weight:700; color:#fff; display:inline; }
        .kt-item dd { display:inline; margin:0; color:rgba(255,255,255,0.7); }
        @media (max-width:760px) { .kt-grid { grid-template-columns:1fr; } }
      `}</style>
      <div style={{maxWidth:1100, margin:'0 auto', textAlign:'center'}}>
        <details className="kt-details">
          <summary>
            <h2 id="key-terms-heading" className="eyebrow" style={{margin:0, fontSize:12, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--minerva-sky)'}}>Key Terms</h2>
          </summary>
          <dl className="kt-grid">
            {KEY_TERMS.map(t => (
              <div key={t.term} className="kt-item">
                <dt>{t.term}</dt><dd>: {t.def}</dd>
              </div>
            ))}
          </dl>
        </details>
      </div>
    </section>
  );
}

// Unified footer IA — one model across every Minerva page (KG + Compliant AI Readiness + splash).
// Paths here are relative to the KG pages folder (knowledge-governance/Homepage 2.2/):
// KG pages are local; firm-level + CAIR pages sit two levels up.
const FOOTER_COLS = [
  { title:'Explore', links:[
    ['Knowledge Execution', '../..//home/'],
    ['Knowledge Governance', '/knowledge-governance/'],
    ['Compliant AI Readiness', '../..//compliant-ai-readiness/'],
  ]},
  { title:'Knowledge Governance', links:[
    ['Product Development', '/product-development/'],
    ['Quality Improvement', '/quality-improvement/'],
    ['Investigations', '/investigations/'],
    ['Visualization', '/visualization/'],
    ['Digitalization', '/digitalization/'],
    ['Knowledge Management', '/knowledge-management/'],
    ['Risk Management', '/risk-management/'],
    ['Industries', '/industries/'],
  ]},
  { title:'Compliant AI Readiness', links:[
    ['The Method', '../..//method/'],
    ['Mingi', '../..//mingi/'],
    ['Products', '../..//products/'],
    ['By Function', '../..//by-function/'],
  ]},
  { title:'The Firm', links:[
    ['About Minerva', 'https://minervakrm.com'],
    ['Our Team', '/about-minerva/'],
    ['Blog', '/blog/'],
    ['Start a Diagnostic', '/start-a-diagnostic/'],
  ]},
];

function Footer() {
  return (
    <footer data-screen-label="Footer" style={{background:'var(--ink-900)', color:'rgba(255,255,255,0.7)', padding:'56px 24px 36px'}}>
      <div style={{maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'1.7fr 1fr 1.1fr 1.1fr 1fr', gap:40}}>
        <div>
          <img src="assets/logo-minerva-km-white-clear.svg" style={{height:56}} alt="Minerva Knowledge Management"/>
          <p style={{fontSize:14, marginTop:16, lineHeight:1.6, color:'rgba(255,255,255,0.7)'}}>5901 West Century Blvd 750<br/>Los Angeles, CA 90045</p>
          <a href="mailto:info@minervakrm.com" style={{color:'#fff', fontWeight:700, fontSize:14}}>info@minervakrm.com</a>
        </div>
        {FOOTER_COLS.map(c => <FooterCol key={c.title} title={c.title} links={c.links}></FooterCol>)}
      </div>
      <div style={{maxWidth:1200, margin:'40px auto 0', paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.1)', fontSize:13}}>© 2026 Minerva Knowledge Management LLC</div>
    </footer>
  );
}

function FooterCol({title, links}) {
  return (
    <div>
      <h5 style={{fontSize:12, fontWeight:700, color:'#fff', textTransform:'uppercase', letterSpacing:'0.12em', margin:'0 0 14px'}}>{title}</h5>
      <ul style={{listStyle:'none', padding:0, margin:0, fontSize:13, lineHeight:2}}>
        {links.map(([label, href]) => <li key={label}><a href={href} style={{color:'rgba(255,255,255,0.7)'}}>{label}</a></li>)}
      </ul>
    </div>
  );
}

Object.assign(window, { Header, NavBar, KnowledgeExecutionNav, DivisionBox, GoldCTA, Dropdown, GroupedDropdown, TrustAndFit, Proof, Handoff, FinalCTA, KeyTerms, Footer });