// discipline-pages.jsx — The four Knowledge Governance discipline pages on one shared skeleton.
// Per Minerva Discipline Pages Build Spec v1.1. Disciplines are the practice axis.
// Blocks: A Hero · B Thesis · C How it helps operations · D Capability rows ·
//         E The Knowledge Pyramid (owned by KM; referenced by the others) ·
//         F Frontier hand-off · G Closing band.
// Knowledge Management owns the full pyramid; Visualization/Digitalization show it with
// their own caption; Risk Management references it and links back.
// Global rules: no em-dashes, American spelling, no services/consulting language,
// compliant describes the discipline, human in command. NavBar + Footer from SiteChrome.jsx.

const KG_HOME = '/knowledge-governance/';
const KM_PAGE = '/knowledge-management/';
const PHOTO = (f) => `assets/discipline-photos/${f}`;

// Lucide icon paths for the four discipline marks.
const DISC_ICONS = {
  eye: ['M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'],
  database: ['M12 2c-4.97 0-9 1.34-9 3v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5c0-1.66-4.03-3-9-3Z', 'M3 5c0 1.66 4.03 3 9 3s9-1.34 9-3', 'M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3'],
  layers: ['M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z', 'M2 17.65l9.17 4.16a2 2 0 0 0 1.66 0L22 17.65', 'M2 12.65l9.17 4.16a2 2 0 0 0 1.66 0L22 12.65'],
  shield: ['M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z', 'M9 12l2 2 4-4'],
};

function DiscIcon({name, color}) {
  return (
    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {DISC_ICONS[name].map((d, i) => <path key={i} d={d}></path>)}
    </svg>
  );
}

function MinervaWayStrip({onDark}) {
  return (
    <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:12, marginTop:28}}>
      <span style={{width:28, height:2, background:'var(--minerva-gold)'}}></span>
      <span style={{fontSize:13, fontWeight:700, letterSpacing:'0.22em', textTransform:'uppercase',
        color: onDark ? 'rgba(224,162,48,0.95)' : '#B07A12'}}>the Minerva way</span>
      <span style={{width:28, height:2, background:'var(--minerva-gold)'}}></span>
    </div>
  );
}

// ---- The Knowledge Pyramid (Minerva approach): Data -> Information -> Knowledge -> Improvement ----
const PYRAMID_TIERS = [
  { label:'Improvement', sub:'through decision making', w:46, color:'#E0A230', text:'#0A1426' },
  { label:'Knowledge',   sub:'governed, executable',    w:64, color:'#1C4DA1', text:'#fff' },
  { label:'Information',  sub:'structured, connected',   w:82, color:'#3FB1E5', text:'#08263A' },
  { label:'Data',         sub:'raw reality',             w:100, color:'#9FB8D6', text:'#0A1426' },
];

function KnowledgePyramid() {
  return (
    <div style={{maxWidth:760, margin:'0 auto'}}>
      <img src="assets/knowledge-pyramid.png"
        alt="The Knowledge Pyramid, the Minerva Approach. Four bands rise from Data (raw reality) to Information (structured and connected), Knowledge (governed and executable), and Improvement at the apex. An upward arrow on the left marks the climb: Collection, Organization, Visualizations, Digitalization (databases and AI together), Analysis, Synthesis, Inferences, and Decision Making. A Trust Gate sits on the information-to-knowledge boundary and a Learning Gate on the knowledge-to-improvement boundary. On the right, the lower half is Visual-Digital Knowledge Creation, the middle is Knowledge Execution, and the top is Knowledge-Based Continuous Improvement."
        style={{width:'100%', height:'auto', display:'block'}} />
    </div>
  );
}

// ---------- DATA: the four disciplines ----------
const DISCIPLINES = {
  'visualization': {
    accent:'#1AA89A', icon:'eye', title:'Visualization', heroImage:'visualization-hero.png', heroPos:'center', heroImgClass:'vis-hero-img',
    tagline:'See it before you change it.',
    thesis:{ headline:'Seeing is the first step to governing.', paras:[
      'Critical knowledge lives across documents, spreadsheets, systems, and people’s heads. Visualization brings it into the open, as diagrams people can read and act on.',
      'Teams align faster, find what they need, and share the knowledge widely rather than holding it in a few. Seeing is the first step to governing.',
    ]},
    help:{ intro:'Visualization helps teams:', img:'vis-help.jpg', bullets:[
      'See complex systems and processes as one clear picture.',
      'Surface hidden dependencies, bottlenecks, and risks.',
      'Align multidisciplinary teams.',
      'Make decisions from a shared understanding.',
      'Produce the visual ground that governance and digitalization build on.',
    ]},
    rows:[
      { title:'Scientific and operational visualization', img:'vis-1-scientific.jpg', noFade:true, fit:'contain', bg:'#fff', body:'Accurate visual representations of biological, chemical, manufacturing, and operational systems, built for rapid interpretation and shared reasoning across regulated teams.' },
      { title:'Process architecture and modeling', img:'vis-2-modeling.jpg', noFade:true, fit:'contain', bg:'#fff', body:'Process maps and Unified Modeling Language structure, plus 3D system models and operational simulation, that make a process consistent and legible across teams, systems, and sites.' },
      { title:'Infographics and visual analytics', img:'vis-3-analytics.jpg', noFade:true, fit:'contain', bg:'#fff', body:'Scientific infographics that make complex understanding communicable, and visual analytics that turn operational data into trends a team can read and act on.' },
    ],
    pyramid:{ mode:'none', caption:'' },
    centralImage:{ img:'visualization-central.jpg', crop:true, alt:'Engineers reviewing a holographic gear assembly on the manufacturing floor', eyebrow:'Seeing the operation', headline:'' },
    handoff:{ body:'Visualization sees it. Digitalization structures it. Once the operation is visible, it can be made machine-legible and traceable.', link:['Continue to Digitalization', '/digitalization/'] },
    closing:'See it, align on it, govern it.',
  },

  'digitalization': {
    accent:'#3FB1E5', icon:'database', title:'Digitalization', heroImage:'digitalization-hero.png',
    tagline:'Make it machine-legible and traceable.',
    thesis:{ headline:'From a picture you can read to a structure a machine can use.', paras:[
      'Turn the visual into structured, machine-legible, traceable form, aligned with the data integrity you already practice. Every piece of knowledge becomes addressable and auditable.',
      'A diagram a person understands is a start. A structure a machine can read is the next step, and the basis that analytics, automation, and AI run on.',
    ]},
    centralImage:{ img:'digi-central-process.jpg', sideFade:true, alt:'Visual-Digital process knowledge', eyebrow:'Visual-Digital process knowledge', headline:'Structured, connected, and traceable.' },
    help:{ intro:'Digitalization helps teams:', img:'digi-help.png', bullets:[
      'Turn visible understanding into structured, queryable knowledge.',
      'Make every piece of knowledge addressable, traceable, and versioned.',
      'Build the governed digital environment analytics and AI run on.',
      'Preserve operational context so automation stays reliable.',
      'Keep the human in command, with every action defensible.',
    ]},
    rows:[
      { title:'Structured visual data for AI and automation', img:'digi-1-structured.jpg', noFade:true, fit:'contain', bg:'#fff', body:'Visual-digital models and structured datasets that capture operational knowledge in a form humans understand and machines can act on.\nThe bridge to analytics, automation, and AI.' },
      { title:'Predictive digital modeling', img:'digi-2-predictive.jpg', noFade:true, body:'\nComputational simulation and digital models that let teams understand process behavior and reduce uncertainty before implementation, shortening development and informing risk-based decisions.' },
      { title:'Governed digital environments', img:'digi-3-governed.jpg', noFade:true, fit:'contain', bg:'#fff', body:'Electronic batch records, digital quality systems, and custom digital knowledge environments. Secure and scalable, that hold knowledge as a governed, searchable, traceable asset across the lifecycle.' },
    ],
    pyramid:{ mode:'reference', caption:'On the Knowledge Pyramid, digitalization makes the lower tiers a governed base. It commits the visible understanding to structured digital form, so the climb to knowledge and improvement rests on something queryable and traceable. The full pyramid lives on the Knowledge Management page.' },
    handoff:{ body:'Digitalization structures it. Knowledge Management governs it. Structured digital knowledge becomes a governed asset your teams and systems can rely on.', link:['Continue to Knowledge Management', '/knowledge-management/'] },
    closing:'Structure it, govern it, execute on it.',
  },

  'knowledge-management': {
    accent:'#1C4DA1', icon:'layers', title:'Knowledge Management', heroImage:'km-hero.png',
    tagline:'Turn information into knowledge your teams, agents, and robots can use.',
    thesis:{ headline:'Knowledge managed is knowledge put to use.', emphasisLast:true, centerParas:true, paras:[
      'Storing information is only the beginning. Knowledge Management makes critical knowledge visible, structured, verified, and reusable, so teams make better decisions and reference the knowledge again over time.',
      'Knowledge Management is a discipline, not the category.\nThe category is Knowledge Execution.',
    ]},
    help:{ intro:'Knowledge Management helps teams:', img:'km-help.jpg', bullets:[
      'Bring buried knowledge into a structured, governed form.',
      'Make it usable by humans, agents, and robots on the same terms.',
      'Preserve technical understanding as people and tools change.',
      'Build a learning culture that improves operations over time.',
      'Keep one audited source of truth, many views.',
    ]},
    rows:[
      { title:'Technical and system understanding', img:'km-1-technical.jpg', noFade:true, fit:'cover', pad:14, body:'Technical diagrams, system architecture, and UML process models that make system connections legible to people, databases, and AI, so understanding is shared rather than siloed.' },
      { title:'Operational knowledge mapping', img:'km-2-mapping.jpg', noFade:true, body:'Value stream maps and material-and-information flow maps that reveal dependencies, bottlenecks, and improvement opportunities across the operation.' },
      { title:'Knowledge that people retain and apply', img:'km-3-jobaids.jpg', noFade:true, fit:'cover', pad:14, fadeEnd:16, body:'Visual procedures with integrated risk, training that people remember, and job aids that bring governed knowledge to the point of work.' },
    ],
    pyramid:{ mode:'own', caption:'The Knowledge Pyramid, the Minerva Approach. The climb from data, through information, to knowledge, and up to improvement through decision making. Minerva makes the climb visual-digital from the information level, with the lower tiers governed by the Visual-Digital Information Creation Process and the upper tiers driving Knowledge-Based Continuous Improvement.' },
    handoff:{ center:true, body:'Knowledge Management governs it. Risk Management protects it.\nGoverned knowledge becomes reliable when risk travels with it, right to where decisions are made.', link:['Continue to Risk Management', '/risk-management/'] },
    closing:'Better knowledge, for better outcomes.',
  },

  'risk-management': {
    accent:'#E0A230', icon:'shield', title:'Risk Management', heroImage:'risk-hero.png',
    tagline:'Make reliability visible, and the risk defensible.',
    thesis:{ headline:'Risk is best handled where the knowledge lives.', paras:[
      'When risk travels with the knowledge it belongs to, it surfaces early, right where decisions are made.',
      'Risk is mapped onto the process itself, not kept in a separate register, so controls and mitigations are tiered to the risk, traceable to their source, and audit-ready by design.',
    ]},
    help:{ intro:'Risk Management helps teams:', img:'rm-help.jpg', bullets:[
      'Risk surfaced early, where you can act.',
      'Surface failure modes hidden between steps.',
      'Tier controls and mitigations to the actual risk level.',
      'Connect requirements, design, and risk into one traceable record.',
      'Reduce repeat issues with root-cause work that holds.',
      'Make reliability defensible with governed digital evidence.',
    ]},
    rows:[
      { title:'Visual risk analysis\n\n', img:'rm-1-dashboard.png', noFade:true, fit:'contain', bg:'#fff', body:'Visual process and risk representations, with risk dashboards, that make potential failures legible to a multidisciplinary team and align mitigation across functions.' },
      { title:'Risk-based deliverables and methodology', img:'rm-2-failuremodes-crop.png', noFade:true, fit:'contain', bg:'#fff', body:'Design packages, procedures, test methods, verification and validation, and failure-mode analysis, integrated into a connected visual-digital framework rather than scattered across documents.' },
      { title:'Integrated requirements and risk traceability', img:'rm-3-traceability.jpg', noFade:true, fit:'contain', bg:'#fff', body:'Requirements, specifications, risks, controls, and verification linked into unified digital records, traceable from design through commercialization.' },
    ],
    pyramid:{ mode:'image', img:'risk-process-diagram.gif', caption:'The Minerva risk process: context establishment through visual-digital mapping, a visual-digital risk assessment loop of identification, analysis, and evaluation, then treatment, with continuous communication and monitoring around it.' },
    handoff:{ body:'Risk Management protects it. That completes the chain: Visualization sees it, Digitalization structures it, Knowledge Management governs it, Risk Management protects it. Together they are the governed foundation.', link:['Back to Knowledge Governance', KG_HOME] },
    closing:'Maximum reliability, minimal risk.',
  },
};

// ---------- A. HERO ----------
function DiscHero({d}) {
  return (
    <section data-screen-label="A - Hero" style={{position:'relative', overflow:'hidden',
      background:'linear-gradient(160deg,#0A1426 0%,#12305F 60%,#1C4DA1 100%)', color:'#fff', padding:'40px 24px 36px'}}>
      {d.heroImgClass && (
        <style>{`
          .${d.heroImgClass}{object-position:50% 18% !important;}
          @media (max-width:1000px){.${d.heroImgClass}{object-position:30% 50% !important;}}
          @media (max-width:760px){.${d.heroImgClass}{object-position:12% 50% !important;}}
        `}</style>
      )}
      <div style={{position:'absolute', inset:0, opacity:0.10, pointerEvents:'none',
        backgroundImage:'linear-gradient(rgba(255,255,255,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 1px)',
        backgroundSize:'60px 60px', maskImage:'radial-gradient(120% 100% at 50% 0%, #000, transparent 75%)', WebkitMaskImage:'radial-gradient(120% 100% at 50% 0%, #000, transparent 75%)'}}></div>
      {d.heroImage && (d.heroImgScale ? (
        <div style={{position:'absolute', top:0, right:0, bottom:0, width:'58%', zIndex:0, overflow:'hidden', pointerEvents:'none',
          WebkitMaskImage:'linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 34%, #000 66%)',
          maskImage:'linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 34%, #000 66%)'}}>
          <img src={`assets/${d.heroImage}`} alt="" aria-hidden="true"
            style={{width:'100%', height:'100%', objectFit:d.heroFit || 'cover', objectPosition:d.heroPos || 'center',
              userSelect:'none', opacity:0.85, transform:`scale(${d.heroImgScale})`, transformOrigin:d.heroImgOrigin || 'center'}}/>
        </div>
      ) : (
        <img src={`assets/${d.heroImage}`} alt="" aria-hidden="true" className={d.heroImgClass || undefined}
          style={{position:'absolute', top:0, right:0, bottom:0, height:'100%', width:'58%', objectFit:d.heroFit || 'cover',
            objectPosition:d.heroPos || 'center', zIndex:0, pointerEvents:'none', userSelect:'none', opacity:0.85,
            WebkitMaskImage:'linear-gradient(to right, transparent 0, #000 42%)',
            maskImage:'linear-gradient(to right, transparent 0, #000 42%)'}}/>
      ))}
      <div style={{maxWidth:1000, margin:'0 auto', textAlign:d.heroImage ? 'left' : 'center', position:'relative', zIndex:1}}>
        <div style={{width:74, height:74, margin:d.heroImage ? '0 0 22px' : '0 auto 22px', borderRadius:18,
          background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.18)',
          display:'flex', alignItems:'center', justifyContent:'center'}}>
          <DiscIcon name={d.icon} color="#fff"></DiscIcon>
        </div>
        <h1 style={{fontSize:54, fontWeight:900, lineHeight:1.06, letterSpacing:'-0.02em', margin:0, color:'#fff', textWrap:'pretty', maxWidth:d.heroImage ? 560 : 'none'}}>{d.title}</h1>
        <p style={{fontSize:20, lineHeight:1.55, color:'rgba(231,239,250,0.88)', margin:d.heroImage ? '20px 0 0' : '20px auto 0', maxWidth:d.heroImage ? 480 : 620, textWrap:'pretty'}}>{d.tagline}</p>
      </div>
    </section>
  );
}

// ---------- B. THESIS ----------
function Thesis({d}) {
  return (
    <section data-screen-label="B - Thesis" style={{background:'#fff', padding:'40px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14}}>The thesis</div>
        <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.16, margin:'0 0 24px', color:'var(--minerva-blue)', textWrap:'pretty'}}>{d.thesis.headline}</h2>
        <div style={{display:'inline-block', textAlign:'left', maxWidth:720}}>
          {d.thesis.paras.map((p, i) => {
            const emph = d.thesis.emphasisLast && i === d.thesis.paras.length - 1;
            return (
            <p key={i} style={{fontSize:18, lineHeight:1.7, color: emph ? 'var(--minerva-blue)' : 'var(--fg-muted)', fontWeight: emph ? 700 : 400, textAlign: (emph || d.thesis.centerParas) ? 'center' : 'left', margin: i ? '16px 0 0' : 0, textWrap:'pretty'}}>{String(p).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- C. HOW IT HELPS OPERATIONS ----------
function HowItHelps({d}) {
  return (
    <section data-screen-label="C - How it helps" style={{background:'var(--ink-050)', padding:'36px 24px', borderTop:'1px solid var(--border)'}}>
      <div style={{maxWidth:1140, margin:'0 auto', display:'flex', gap:56, alignItems:'center', flexWrap:'wrap'}}>
        <div style={{flex:'1 1 420px', minWidth:0}}>
          <div className="eyebrow" style={{marginBottom:16}}>How it helps operations</div>
          <p style={{fontSize:18, fontWeight:700, color:'var(--fg)', margin:'0 0 18px'}}>{d.help.intro}</p>
          <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12}}>
            {d.help.bullets.map((b, i) => (
              <li key={i} style={{display:'flex', gap:13, alignItems:'flex-start', fontSize:16.5, lineHeight:1.55, color:'var(--fg-muted)'}}>
                <span style={{flexShrink:0, width:8, height:8, borderRadius:'50%', background:d.accent, marginTop:8}}></span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{flex:'1 1 380px', minWidth:0}}>
          <div style={{borderRadius:14, overflow:'hidden', boxShadow:'0 16px 40px rgba(15,26,46,0.16)'}}>
            <img src={PHOTO(d.help.img)} alt="" style={{width:'100%', height:320, objectFit:'cover', display:'block'}}/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- D. CAPABILITY ROWS ----------
function CapabilityRows({d}) {
  const [active, setActive] = React.useState(-1);
  const rows = d.rows;
  const close = () => setActive(-1);
  const go = (dir) => setActive(a => (a + dir + rows.length) % rows.length);
  React.useEffect(() => {
    if (active < 0) return;
    const onKey = (e) => {
      if (e.key === 'Escape') close();
      else if (e.key === 'ArrowRight') go(1);
      else if (e.key === 'ArrowLeft') go(-1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [active, rows.length]);
  const cur = active >= 0 ? rows[active] : null;
  return (
    <section data-screen-label="D - Capability cards" style={{background:'#fff', padding:'40px 24px'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        <div className="disc-cards" style={{display:'grid', gridTemplateColumns:`repeat(${Math.min(rows.length, 3)},1fr)`, gap:18}}>
          {rows.map((row, i) => (
            <div key={row.title} className="mk-card" onClick={() => setActive(i)}
              style={{padding:'28px 26px 0', borderTop:`4px solid ${d.accent}`, overflow:'hidden', display:'flex', flexDirection:'column', cursor:'zoom-in',
                transition:'transform .15s cubic-bezier(0.2,0.8,0.2,1), box-shadow .15s cubic-bezier(0.2,0.8,0.2,1)'}}
              onMouseEnter={(e) => { e.currentTarget.style.transform='translateY(-3px)'; e.currentTarget.style.boxShadow='0 10px 26px rgba(15,26,46,0.12)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow=''; }}>
              <h3 style={{fontSize:23, fontWeight:800, margin:'0 0 12px', color:'var(--fg)', textWrap:'pretty', letterSpacing:'-0.01em', lineHeight:1.18}}>{String(row.title).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</h3>
              <p style={{fontSize:15, lineHeight:1.6, color:'var(--fg-muted)', margin:'0 0 22px', textWrap:'pretty'}}>{String(row.body).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>
              <div style={{width: row.pad ? `calc(100% + 52px - ${row.pad*2}px)` : 'calc(100% + 52px)', height:200, marginLeft: row.pad ? (row.pad-26) : -26, marginRight: row.pad ? (row.pad-26) : -26, marginTop:'auto', marginBottom: row.pad || 0, overflow:'hidden',
                background: row.fit === 'contain' ? (row.bg || '#F3F5F8') : undefined,
                ...(row.noFade ? {} : {WebkitMaskImage:`linear-gradient(to bottom, transparent 0, #000 ${row.fadeEnd || 32}%)`,
                maskImage:`linear-gradient(to bottom, transparent 0, #000 ${row.fadeEnd || 32}%)`})}}>
                <img src={PHOTO(row.img)} alt="" aria-hidden="true"
                  style={{width:'100%', height:'100%', objectFit:row.fit || 'cover', objectPosition:'center', display:'block', clipPath: row.clip}}/>
              </div>
            </div>
          ))}
        </div>
      </div>

      {cur && (
        <div onClick={close} style={{position:'fixed', inset:0, zIndex:1000, background:'rgba(8,14,26,0.86)',
          backdropFilter:'blur(6px)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'40px 24px'}}>
          {/* close */}
          <button onClick={(e) => { e.stopPropagation(); close(); }} aria-label="Close"
            style={{position:'absolute', top:24, right:28, width:44, height:44, borderRadius:'50%', cursor:'pointer',
              background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.28)', color:'#fff', fontSize:22, lineHeight:1}}>×</button>
          {/* prev */}
          <button onClick={(e) => { e.stopPropagation(); go(-1); }} aria-label="Previous"
            style={{position:'absolute', left:'4%', top:'50%', transform:'translateY(-50%)', width:54, height:54, borderRadius:'50%', cursor:'pointer',
              background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.28)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <span style={{fontSize:26, lineHeight:1, marginTop:-2}}>‹</span></button>
          {/* next */}
          <button onClick={(e) => { e.stopPropagation(); go(1); }} aria-label="Next"
            style={{position:'absolute', right:'4%', top:'50%', transform:'translateY(-50%)', width:54, height:54, borderRadius:'50%', cursor:'pointer',
              background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.28)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <span style={{fontSize:26, lineHeight:1, marginTop:-2}}>›</span></button>

          <div onClick={(e) => e.stopPropagation()} style={{maxWidth:1080, width:'100%', textAlign:'center'}}>
            <div style={{fontSize:13, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:d.accent, marginBottom:10}}>{d.title}</div>
            <h3 style={{fontSize:26, fontWeight:800, color:'#fff', margin:'0 0 22px', letterSpacing:'-0.01em'}}>{cur.title}</h3>
            <div style={{borderRadius:14, overflow:'hidden', background: cur.bg || '#fff', boxShadow:'0 24px 60px rgba(0,0,0,0.45)'}}>
              <img src={PHOTO(cur.img)} alt={cur.title}
                style={{width:'100%', maxHeight:'62vh', objectFit:'contain', display:'block', margin:'0 auto'}}/>
            </div>
            <p style={{fontSize:16, lineHeight:1.6, color:'rgba(231,239,250,0.82)', margin:'22px auto 0', maxWidth:760, textWrap:'pretty'}}>{String(cur.body).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>
            <div style={{display:'flex', gap:8, justifyContent:'center', marginTop:24}}>
              {rows.map((_, i) => (
                <button key={i} onClick={(e) => { e.stopPropagation(); setActive(i); }} aria-label={`Card ${i+1}`}
                  style={{width:9, height:9, borderRadius:'50%', border:'none', cursor:'pointer', padding:0,
                    background: i === active ? '#fff' : 'rgba(255,255,255,0.4)'}}/>
              ))}
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// ---------- E. THE KNOWLEDGE PYRAMID ----------
function CentralVisual({d}) {
  const ci = d.centralImage;
  return (
    <section data-screen-label="E - Central visual" style={{background:'var(--ink-050)', padding:'40px 24px', borderTop:'1px solid var(--border)'}}>
      <div style={{maxWidth:1000, margin:'0 auto', textAlign:'center'}}>
        {ci.eyebrow && <div className="eyebrow" style={{marginBottom:14}}>{ci.eyebrow}</div>}
        {ci.headline && <h2 style={{fontSize:32, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 28px', color:'var(--minerva-blue)', textWrap:'pretty'}}>{ci.headline}</h2>}
        <div style={{borderRadius:16, overflow:'hidden', boxShadow:'0 18px 44px rgba(15,26,46,0.18)',
          ...((ci.crop || ci.sideFade) ? {WebkitMaskImage:'linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%)', maskImage:'linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%)'} : {})}}>
          {ci.crop ? (
            <div style={{width:'100%', aspectRatio:'16 / 7', overflow:'hidden'}}>
              <img src={PHOTO(ci.img)} alt={ci.alt || ''} style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center', display:'block'}}/>
            </div>
          ) : (
            <img src={PHOTO(ci.img)} alt={ci.alt || ''} style={{width:'100%', height:'auto', display:'block'}}/>
          )}
        </div>
        {ci.caption && <p style={{fontSize:15.5, color:'var(--fg-muted)', margin:'22px auto 0', maxWidth:720, lineHeight:1.6, textWrap:'pretty'}}>{ci.caption}</p>}
      </div>
    </section>
  );
}

// ---- Native (vector) rebuild of the Minerva visual-digital risk process ----
// Faithful to the ISO 31000 / ICH Q9 topology, drawn on-brand in the Minerva palette.
function RiskProcessDiagram() {
  const ARROW = '#3A4660';               // connector ink
  const FLOW = '#DCE4F5';                // main-flow stage fill (light minerva-blue)
  const SIDE = '#C6D2EE';                // side-column fill (deeper tint)
  const BOX_TX = '#173A78';              // deep-blue box text
  const CONT = '#EEF2F9';                // assessment container fill
  const CONT_STROKE = '#8F9BB0';         // dashed container stroke

  const flowBox = (x, y, w, h) => (
    <rect x={x} y={y} width={w} height={h} rx="8" fill={FLOW} stroke="#B9C6E6" strokeWidth="1"></rect>
  );
  const line = (points, {both} = {}) => (
    <polyline points={points} fill="none" stroke={ARROW} strokeWidth="2.4"
      markerEnd="url(#rp-ah)" markerStart={both ? 'url(#rp-ah)' : undefined}></polyline>
  );

  return (
    <div style={{maxWidth:1000, margin:'0 auto'}}>
      <svg viewBox="0 0 1180 690" width="100%" style={{height:'auto', display:'block',
        fontFamily:'Arial, "Helvetica Neue", Helvetica, sans-serif'}}
        role="img" aria-label="The Minerva visual-digital risk management process. Context Establishment (Visual Digital Mapping) feeds a Visual Digital Risk Assessment loop of Risk Identification, Risk Analysis, and Risk Evaluation, then Risk Treatment. Risk Communication and Consultation (Facilitated Risk Meetings) and Risk Monitoring and Review (Visual Digital Reports) run alongside every step.">
        <defs>
          <marker id="rp-ah" viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <path d="M0,0 L10,5 L0,10 z" fill={ARROW}></path>
          </marker>
        </defs>

        {/* ---- connectors (drawn first, behind boxes) ---- */}
        {/* outer feedback loops */}
        {line("1035,258 1035,28 590,28 590,64")}
        {line("590,632 590,662 1035,662 1035,508")}
        {/* main vertical flow */}
        {line("590,128 590,252")}
        {line("590,300 590,352")}
        {line("590,400 590,452")}
        {line("590,500 590,572")}
        {/* left column to context + treatment */}
        {line("200,258 200,96 430,96", {both:true})}
        {line("200,508 200,602 440,602", {both:true})}
        {/* right column to context */}
        {line("980,258 980,96 750,96", {both:true})}
        {/* side columns to each assessment stage */}
        {line("250,276 440,276", {both:true})}
        {line("250,376 440,376", {both:true})}
        {line("250,476 440,476", {both:true})}
        {line("930,276 740,276", {both:true})}
        {line("930,376 740,376", {both:true})}
        {line("930,476 740,476", {both:true})}

        {/* ---- assessment container ---- */}
        <rect x="392" y="182" width="396" height="336" rx="12" fill={CONT} stroke={CONT_STROKE} strokeWidth="2" strokeDasharray="8 7"></rect>
        <text x="412" y="215" fontSize="16" fontWeight="700" fill="#3A4660">Visual Digital</text>
        <text x="412" y="237" fontSize="16" fontWeight="700" fill="#3A4660">Risk Assessment</text>

        {/* ---- boxes ---- */}
        {/* Context */}
        {flowBox(430, 64, 320, 64)}
        <text x="590" y="90" textAnchor="middle" fontSize="18" fontWeight="700" fill={BOX_TX}>Context Establishment</text>
        <text x="590" y="112" textAnchor="middle" fontSize="15.5" fontWeight="700" fill={BOX_TX}>(Visual Digital Mapping)</text>

        {/* assessment stages */}
        {flowBox(440, 252, 300, 48)}
        <text x="590" y="282" textAnchor="middle" fontSize="18" fontWeight="700" fill={BOX_TX}>Risk Identification</text>
        {flowBox(440, 352, 300, 48)}
        <text x="590" y="382" textAnchor="middle" fontSize="18" fontWeight="700" fill={BOX_TX}>Risk Analysis</text>
        {flowBox(440, 452, 300, 48)}
        <text x="590" y="482" textAnchor="middle" fontSize="18" fontWeight="700" fill={BOX_TX}>Risk Evaluation</text>

        {/* Treatment */}
        {flowBox(440, 572, 300, 60)}
        <text x="590" y="608" textAnchor="middle" fontSize="18" fontWeight="700" fill={BOX_TX}>Risk Treatment</text>

        {/* Left column */}
        <rect x="40" y="258" width="210" height="250" rx="12" fill={SIDE} stroke="#B4C1E1" strokeWidth="1"></rect>
        <text x="145" y="336" textAnchor="middle" fontSize="17" fontWeight="700" fill={BOX_TX}>Risk</text>
        <text x="145" y="358" textAnchor="middle" fontSize="17" fontWeight="700" fill={BOX_TX}>Communication</text>
        <text x="145" y="380" textAnchor="middle" fontSize="17" fontWeight="700" fill={BOX_TX}>and Consultation</text>
        <text x="145" y="426" textAnchor="middle" fontSize="15.5" fontWeight="700" fill={BOX_TX}>(Facilitated</text>
        <text x="145" y="447" textAnchor="middle" fontSize="15.5" fontWeight="700" fill={BOX_TX}>Risk Meetings)</text>

        {/* Right column */}
        <rect x="930" y="258" width="210" height="250" rx="12" fill={SIDE} stroke="#B4C1E1" strokeWidth="1"></rect>
        <text x="1035" y="347" textAnchor="middle" fontSize="17" fontWeight="700" fill={BOX_TX}>Risk Monitoring</text>
        <text x="1035" y="369" textAnchor="middle" fontSize="17" fontWeight="700" fill={BOX_TX}>and Review</text>
        <text x="1035" y="415" textAnchor="middle" fontSize="15.5" fontWeight="700" fill={BOX_TX}>(Visual Digital</text>
        <text x="1035" y="436" textAnchor="middle" fontSize="15.5" fontWeight="700" fill={BOX_TX}>Reports)</text>
      </svg>
    </div>
  );
}

function PyramidBlock({d}) {
  const p = d.pyramid;
  const isOwn = p.mode === 'own';
  if (p.mode === 'image') {
    return (
      <section data-screen-label="E - Risk process" style={{background:'var(--ink-050)', padding:'40px 24px', borderTop:'1px solid var(--border)'}}>
        <div style={{maxWidth:1200, margin:'0 auto', textAlign:'center'}}>
          <div className="eyebrow" style={{marginBottom:24}}>The risk process</div>
          <div style={{background:'#fff', borderRadius:12, boxShadow:'var(--shadow-2)', border:'1px solid var(--border)', padding:'20px', overflow:'hidden'}}>
            <img src={`assets/discipline-photos/${p.img}`} alt="The Minerva risk management deliverables process"
              style={{width:'100%', height:'auto', display:'block', borderRadius:4}} />
          </div>
          {p.caption ? <p style={{fontSize:16.5, lineHeight:1.7, color:'var(--fg-muted)', margin:'28px auto 0', maxWidth:760, textWrap:'pretty'}}>{p.caption}</p> : null}
        </div>
      </section>
    );
  }
  return (
    <section data-screen-label="E - Knowledge Pyramid" style={{background:'var(--ink-050)', padding:'40px 24px', borderTop:'1px solid var(--border)'}}>
      <div style={{maxWidth:1000, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14}}>{isOwn ? 'The Knowledge Pyramid' : 'On the Knowledge Pyramid'}</div>
        {isOwn && (
          <h2 style={{fontSize:32, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 36px', color:'var(--minerva-blue)', textWrap:'pretty'}}>The climb from data to improvement.</h2>
        )}
        {p.mode !== 'reference' && (
          <div style={{margin:'0 0 28px'}}>
            <KnowledgePyramid></KnowledgePyramid>
          </div>
        )}
        <p style={{fontSize:16.5, lineHeight:1.7, color:'var(--fg-muted)', margin:'0 auto', maxWidth:760, textWrap:'pretty'}}>{p.caption}</p>
        {p.mode !== 'own' && (
          <div style={{marginTop:20}}>
            <a href={KM_PAGE} style={{fontSize:15, fontWeight:700, color:'var(--minerva-blue)', textDecoration:'none'}}>See the full Knowledge Pyramid on Knowledge Management →</a>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- F. FRONTIER HAND-OFF ----------
function Handoff({d}) {
  const [label, href] = d.handoff.link;
  return (
    <section data-screen-label="F - Hand-off" style={{background:'var(--minerva-blue)', color:'#fff', padding:'32px 24px'}}>
      <div style={{maxWidth:840, margin:'0 auto', textAlign:'center'}}>
        <p style={{fontSize:20, lineHeight:1.6, margin:'0 0 24px', color:'#fff', fontWeight:500, display:'inline-block', textAlign: d.handoff.center ? 'center' : 'left', maxWidth:760, textWrap:'pretty'}}>{String(d.handoff.body).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>
        <a href={href} style={{display:'inline-block', background:'var(--minerva-gold)', color:'#0A1426', fontWeight:700, fontSize:15.5,
          padding:'13px 26px', borderRadius:8, textDecoration:'none', boxShadow:'0 2px 10px rgba(224,162,48,0.30)'}}>{label} →</a>
      </div>
    </section>
  );
}

// ---------- G. CLOSING ----------
function Closing({d}) {
  return (
    <section data-screen-label="G - Closing" style={{background:'#fff', padding:'44px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
        <h2 style={{fontSize:42, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.12, margin:0, color:'var(--minerva-blue)', textWrap:'pretty'}}>{d.closing}</h2>
        <MinervaWayStrip></MinervaWayStrip>
        <div style={{marginTop:32}}>
          <a href="/start-a-diagnostic/" className="mk-btn-gold" style={{textDecoration:'none', display:'inline-block'}}>Start a Diagnostic →</a>
        </div>
      </div>
    </section>
  );
}

function DisciplinePage({slug}) {
  const d = DISCIPLINES[slug];
  // Skeleton order (spec §4): Hero, Thesis, Central visual, Capability rows,
  // Hand-off, Benefits, Close. The central visual is the Knowledge Pyramid block;
  // Visualization suppresses it entirely (mode 'none') so the pyramid is not
  // mentioned there.
  const showPyramid = d.pyramid && d.pyramid.mode !== 'none';
  const central = d.centralImage
    ? <CentralVisual d={d}></CentralVisual>
    : (showPyramid ? <PyramidBlock d={d}></PyramidBlock> : null);
  return (
    <>
      <NavBar></NavBar>
      <DiscHero d={d}></DiscHero>
      <Thesis d={d}></Thesis>
      {central}
      <CapabilityRows d={d}></CapabilityRows>
      <Handoff d={d}></Handoff>
      <HowItHelps d={d}></HowItHelps>
      <Closing d={d}></Closing>
      <Footer></Footer>
    </>
  );
}

Object.assign(window, { DisciplinePage, DISCIPLINES, KnowledgePyramid });