// 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'];
// Nav labels → live minervakrm.com pages (absolute URLs; these pages live on the existing WP site).
// 'Start Diagnostic' is intentionally left pointing at the in-folder KG page (do not change).
const NAV_HREFS = {
  // Capabilities
  'Product Development':   'https://minervakrm.com/product-development/',
  'Quality Improvement':   'https://minervakrm.com/quality-systems/',   // live page is "Quality Systems"
  'Investigations':        'https://minervakrm.com/investigations/',
  'Knowledge Management':  'https://minervakrm.com/knowledge-management/',
  'Risk Management':       'https://minervakrm.com/risk-management/',
  'Visualizations':        'https://minervakrm.com/visualizations/',
  'Digitalization':        'https://minervakrm.com/digitalization/',
  // Industries We Serve
  'Cell and Gene Therapy': 'https://minervakrm.com/cell-and-gene-therapy/',
  'Biotech and Vaccines':  'https://minervakrm.com/biotech-and-vaccines/',
  'Medical Devices':       'https://minervakrm.com/medical-devices/',
  'Life Science Robots':   'https://minervakrm.com/surgical-robots/',     // live slug is /surgical-robots/
  // About / Quick links
  'About Minerva':         'https://minervakrm.com/about-minerva/',
  'Our Team':              'https://minervakrm.com/our-team/',
  'Blog':                  'https://minervakrm.com/blog/',
  'Contact':               'https://minervakrm.com/contact/',
  // KG-owned page — left as-is per request
  'Start Diagnostic':      'Start Diagnostic.html',
};

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="index.html"><img src="assets/logo-minerva-km-horizontal.svg" style={{height:44, display:'block'}} alt="Minerva Knowledge Management"/></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>
          <a href="https://minervakrm.com/blog/" style={{cursor:'pointer', color:'inherit', textDecoration:'none'}}>Blog</a>
          <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>
  );
}

// ============================================================================
// 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 = '/general-intelligence/'; // 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 = 'index.html';
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' },
];

// Tier 2 sub-bar carries the site's main menu (matches the live dropdown nav).
const TIER2_MENU = [
  { label:'Services',           items: NAV_SERVICES },
  { label:'Industries We Serve', items: NAV_INDUSTRIES },
  { label:'About Us',           items: NAV_ABOUT },
  { label:'Blog',               href:'https://minervakrm.com/blog/' },
];

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-km-horizontal.svg" style={{height:42, display:'block'}} alt="Minerva Knowledge Management"/>
        </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="General Intelligence" 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) => m.items ? (
              <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 && <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>
            ))}
            {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="General Intelligence" 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.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>
    </>
  );
}

const INDUSTRIES = [
  {t:'Cell and gene therapy', img:'dna-gene-editing.jpg', d:'Accelerate advanced therapy development through integrated process knowledge, structured investigations, and risk-based quality execution across manufacturing and operations.'},
  {t:'Biotech and vaccines', img:'scientists-sample-analysis.jpg', d:'Improve manufacturing performance and reduce operational complexity through visual process characterization, digital quality systems, and knowledge-driven risk management.'},
  {t:'Medical devices', img:'cleanroom-inspection.jpg', d:'Strengthen device development and commercialization using visual system modeling, traceable risk management, and integrated knowledge systems.'},
  {t:'Life science robots', img:'surgical-robot.jpg', d:'Support robotic and automated system development with digital process knowledge, visual workflows, and risk-based quality execution.'},
];

function Industries() {
  return (
    <section id="industries" data-screen-label="Industries" style={{background:'#fff', padding:'80px 24px'}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div style={{textAlign:'center', marginBottom:48}}>
          <div className="eyebrow" style={{marginBottom:12}}>Industries we serve</div>
          <h2 style={{fontSize:36, fontWeight:900, letterSpacing:'-0.02em', margin:'0 auto', maxWidth:820, textWrap:'pretty'}}>Knowledge governance for life sciences, where quality, speed, and compliance matter</h2>
        </div>
        <div className="mk-industries-grid">
          {INDUSTRIES.map(i => (
            <div key={i.t} className="mk-card" style={{padding:0, overflow:'hidden', display:'flex', flexDirection:'column'}}>
              <img src={`assets/brand-imagery/${i.img}`} style={{width:'100%', height:200, objectFit:'cover', display:'block', transform: i.stretchY ? `scaleY(${i.stretchY})` : undefined}} alt={i.t}/>
              <div style={{padding:28}}>
                <h3 style={{fontSize:20, fontWeight:700, margin:'0 0 8px'}}>{i.t}</h3>
                <p style={{fontSize:15, color:'var(--fg-muted)', margin:'0 0 14px', lineHeight:1.55}}>{i.d}</p>
                <a href="#" style={{fontSize:13, fontWeight:700, color:'var(--minerva-blue)'}}>Know more →</a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const CLIENT_LOGOS = ['Johnson-and-Johnson','Pfizer','lilly','Illumina','BD','Kite','Ethicon','Auris','Bruker','Eloviz','flexion','Instilbio','nanostring','Pacira','PFEnex','Plexus'];

function ClientStrip() {
  return (
    <section id="clients" data-screen-label="Clients" style={{padding:'64px 24px', background:'var(--ink-050)'}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div style={{textAlign:'center', marginBottom:36}}>
          <h3 style={{fontSize:24, fontWeight:700, margin:'0 auto', maxWidth:720, textWrap:'pretty'}}>Trusted by life sciences teams from emerging startups to global organizations</h3>
          <p style={{fontSize:15, color:'var(--fg-muted)', margin:'10px auto 0', maxWidth:680}}>Providing knowledge-driven execution support across product development, investigations, quality systems, digitalization, and operational improvement.</p>
        </div>
        <div className="mk-clients-grid">
          {CLIENT_LOGOS.map(l => (
            <div key={l} style={{padding:12, display:'flex', alignItems:'center', justifyContent:'center', height:56}}>
              <img src={`assets/clients/${l}.svg`} style={{maxHeight:36, maxWidth:'100%', filter:'grayscale(1)', opacity:.72}} alt={l}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingCTA() {
  return (
    <>
      <section data-screen-label="Where knowledge becomes execution" style={{background:'#fff', padding:'72px 24px'}}>
        <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
          <h2 style={{fontSize:36, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 16px'}}>Where knowledge becomes execution</h2>
          <p style={{fontSize:17, lineHeight:1.6, color:'var(--fg-muted)', margin:0, textWrap:'pretty'}}>
            Delivering faster, smarter, and better results for clients, doctors, and patients through a knowledge and
            risk-based approach, using advanced visualization and digitalization techniques — the Minerva way.
          </p>
        </div>
      </section>
      <section id="contact" data-screen-label="CTA" style={{background:'var(--minerva-blue)', color:'#fff', padding:'64px 24px'}}>
        <div style={{maxWidth:900, margin:'0 auto', textAlign:'center'}}>
          <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 16px', color:'#fff', textWrap:'pretty'}}>Ready to turn complexity into faster, smarter, lower-risk execution?</h2>
          <p style={{fontSize:18, color:'rgba(255,255,255,0.82)', margin:'0 auto 28px', maxWidth:720, textWrap:'pretty'}}>
            Let's build the Visual-Digital Knowledge™ systems that help your teams move faster, investigate smarter, and make safe decisions.
          </p>
          <button className="mk-btn-gold">Start Diagnostic</button>
        </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:'Turning disconnected documents, data, and expertise into governed knowledge that teams, systems, and AI can apply.'},
  {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" style={{background:'var(--ink-050)', padding:'72px 24px', borderTop:'1px solid var(--border)'}}>
      <style>{`
        .kt-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px 64px; margin:0; }
        .kt-item dt { font-weight:700; color:var(--ink-900); display:inline; }
        .kt-item dd { display:inline; margin:0; color:var(--fg-muted); }
        .kt-item { font-size:16px; line-height:1.6; }
        @media (max-width:760px) { .kt-grid { grid-template-columns:1fr; gap:24px; } }
      `}</style>
      <div style={{maxWidth:1100, margin:'0 auto'}}>
        <div className="eyebrow" style={{marginBottom:14}}>Key Terms</div>
        <p style={{fontSize:17, lineHeight:1.6, color:'var(--fg-muted)', margin:'0 0 44px', maxWidth:740, textWrap:'pretty'}}>
          Plain-language definitions of the core concepts behind Minerva’s approach to knowledge and risk in regulated life sciences.
        </p>
        <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>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer data-screen-label="Footer" style={{background:'var(--ink-900)', color:'rgba(255,255,255,0.7)', padding:'48px 24px'}}>
      <div style={{maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:32}}>
        <div>
          <img src="assets/logo-minerva-km-horizontal.svg" style={{height:40, filter:'brightness(0) invert(1)'}} 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>
        <FooterCol title="Capabilities" items={NAV_SERVICES}></FooterCol>
        <FooterCol title="Industries We Serve" items={NAV_INDUSTRIES}></FooterCol>
        <FooterCol title="Quick Links" items={['About Minerva','Our Team','Blog','Start Diagnostic']}></FooterCol>
      </div>
      <div style={{maxWidth:1200, margin:'32px auto 0', paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.1)', fontSize:13}}>© 2026. Powered by Minerva.</div>
    </footer>
  );
}

function FooterCol({title, items}) {
  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}}>
        {items.map(i => <li key={i}><a href={NAV_HREFS[i] || '#'} style={{color:'rgba(255,255,255,0.7)'}}>{i}</a></li>)}
      </ul>
    </div>
  );
}

Object.assign(window, { Header, NavBar, DivisionBox, GoldCTA, Dropdown, Industries, ClientStrip, ClosingCTA, KeyTerms, Footer });