// domain-pages.jsx — The three Knowledge Governance domain pages on one shared skeleton.
// Per Minerva Domain Pages Build Spec v1.0. Situation-first, not capability-first.
// Blocks: A Hero · B Situation · C How the integrated practice resolves it ·
//         D Domain framework · (PD only) Sustaining phase · E Capability rows ·
//         F Proof/outcome · G Closing band.
// Global rules: no em-dashes, American spelling, no services/consulting language,
// compliant describes the discipline, human in command. NavBar + Footer come from SiteChrome.jsx.

const SPECTRUM = 'linear-gradient(90deg,#D51C29,#E0542A,#E0A230,#F2D12E,#8FBF3F,#069848,#1AA89A,#3FB1E5,#1C4DA1,#4A3BA8,#8B2CA8,#D20F8C)';
const KG_HOME = '/knowledge-governance/';
// Each discipline now has its own page; chips link straight to it.
const DISCIPLINE_HREF = {
  'Knowledge Management': '/knowledge-management/',
  'Risk Management': '/risk-management/',
  'Visualization': '/visualization/',
  'Digitalization': '/digitalization/',
};

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>
  );
}

// ---------- DATA: the three domains ----------
const DOMAINS = {
  'product-development': {
    accent: '#1C4DA1', icon: 'product-development.svg',
    heroImage: 'pd-hero.png',
    title: 'Product Development',
    tagline: 'Knowledge that holds from first principle to commercial product.',
    situation: {
      headline: 'Decisions are made fast, by people who understand why.',
      center: true,
      paras: [
        'Captured where the next person can find it, it keeps working after the team changes, ready when a tech transfer, an audit, or a change order asks the question years later.\nThat is knowledge that compounds across the lifecycle.',
      ],
    },
    resolve: 'Visualization makes the process and its decisions legible to multidisciplinary teams, digitalization makes requirements and reasoning traceable and reusable, knowledge management governs that rationale from raw data to decision so it carries across handoffs, and risk management stays bound to the design.',
    hideResolvePills: true,
    disciplines: ['Visualization', 'Digitalization', 'Knowledge Management', 'Risk Management'],
    framework: {
      kind: 'lifecycle',
      eyebrow: 'The lifecycle frame',
      headline: '',
      intro: 'The product development lifecycle runs in phases, from first pitch to commercial product, and four activities run across every one: planning, requirements, risk, and deliverables. Governance is built into its shape, with a Design Line and a Design Lock that set when change is allowed.\n\nThis is the span the reasoning holds across.',
      phases: ['Definition', 'Concept', 'Feasibility', 'Design', 'Verification & Validation', 'Commercialization', 'Sustaining'],
      note: 'Planning, requirements, risk, and deliverables management run across every phase.',
    },
    sustaining: {
      headline: 'Improvement is not a separate project. It is the lifecycle continuing.',
      body: 'Once a product or process is commercial, the same governed knowledge drives data-based optimization, capacity increase, and continuous improvement, risk-based and traceable, so the product keeps getting better without losing its history.',
    },
    resolveImages: [
      { img: 'pd-visual-mapping.png', caption: 'Visual-digital process mapping' },
    ],
    rowsAsCards: true,
    rowsLead: 'Each activity runs across every phase of the PDP, on governed Visual-Digital Knowledge\u2122.',
    rows: [
      { title: 'Planning and project management', color: '#1C4DA1', img: 'pd-planning.png', noFade: true, imgInset: true,
        body: 'Planning and project management run on shared operational data, so multidisciplinary teams work from one aligned view of the work.' },
      { title: 'Requirements management', color: '#E0A230', img: 'pd-requirements.jpg', noFade: true,
        body: 'Requirements are visual, digitally connected, and tied to risk and validation, so traceability holds across the lifecycle and verification is ready when you are.' },
      { title: 'Risk management', color: '#D20F8C', img: 'pd-risk.png', noFade: true,
        body: 'One connected risk view spans design, process, software, and use-related risk, so decisions stay risk-based and the reasoning is shared, not siloed.' },
      { title: 'Deliverables management', color: '#069348', img: 'pd-process-knowledge.jpg', noFade: true, imgInset: true,
        body: 'Every deliverable is created, revised, approved, and archived under one governed system, so nothing loses its history across the lifecycle.' },
    ],
    outcome: 'Reasoning travels with the work, data stays queryable, and changes resolve against governed history. Nothing gets lost between projects.',
    outcomeImg: 'pd-whatchanges.jpg',
    proof: 'Built on a track record across biotech and medical devices, where development knowledge has to survive tech transfer and hold up years later.',
    proofImg: 'pd-proof.jpg',
    closing: 'From concept to commercial,\nand better every cycle.',
  },

  'quality-improvement': {
    accent: '#069348', icon: 'quality-improvement.svg', heroImage: 'qi-hero.png',
    title: 'Quality Improvement',
    tagline: 'Quality that compounds, instead of repeating.',
    situation: {
      headline: 'A quality system grows every year.',
      paras: [
        'More procedures, more CAPAs, more records. When the lesson from one fix reaches the next team, when CAPA records are easy to query, and when past attempts are remembered by the system rather than a few people, quality compounds, improvement shows and fixes stay solved.',
      ],
    },
    resolve: 'The four disciplines applied to the quality system: visualization makes the system legible end to end, digitalization makes every change traceable and inspection-ready, knowledge management connects the quality knowledge so it is reusable, and risk management tiers controls to real risk.',
    archImg: 'qi-quality-architecture.png',
    archImgAlt: 'Minerva Phase-Appropriate Quality System Architecture',
    disciplines: ['Visualization', 'Digitalization', 'Knowledge Management', 'Risk Management'],
    framework: {
      kind: 'pillars',
      eyebrow: 'The improvement frame',
      headline: 'Phase-appropriate quality, framed as improvement that holds.',
      pillars: [
        ['Architecture matched to the stage', 'Quality architecture matched to the lifecycle stage, so the system fits the work.\nBuilt to improve decision-making, from early development through commercialization.', 'qi-architecture.jpg'],
        ['Sustained through surveillance', 'Structured, traceable control documentation and integrated knowledge.\nKeep the system audit-ready as conditions change, improvement that holds under inspection.', 'qi-compliance.jpg', 'right'],
        ['Governed, not one-off', '\nRapid, structured inspection response and remediation that resolve gaps and leave the quality system measurably stronger, not just compliant for a day.', 'qi-remediation.jpg'],
      ],
    },
    rows: [
    ],
    outcome: 'Lessons carry across teams, CAPA history is queryable, and improvement is demonstrable.',
    outcomeImg: 'qi-whatchanges.jpg',
    proof: 'Built on hundreds of quality and process improvements that hold under the next inspection.',
    proofImg: 'qi-proof.jpg',
    closing: 'Better quality, maintained.',
  },

  'investigations': {
    accent: '#E0A230', icon: 'investigations.svg', heroImage: 'investigations-hero.png',
    title: 'Investigations',
    tagline: 'Root cause, found faster, reused next time.',
    situation: {
      headline: 'An investigation is open and the clock is running.',
      paras: [
        'You need root cause, and often the answer already lives in an investigation you have done before. Past investigations hold answers worth remembering. When the lesson is captured where the next investigator can find it, recurring root causes get closed for good and each investigation makes the next one faster.',
      ],
    },
    resolve: 'The four disciplines applied to issue resolution: visualization makes root cause legible, digitalization makes the investigation queryable and traceable, knowledge management keeps the finding usable, and risk management drives risk-based impact and prioritization.',
    disciplines: ['Visualization', 'Digitalization', 'Knowledge Management', 'Risk Management'],
    framework: {
      kind: 'frames',
      eyebrow: 'The R3 and C3 frames',
      headline: 'Two frames, one resolution.',
      frames: [
        ['R3', 'Quality investigations', 'Response, Resolution, Reduction. Rapid, integrated resolution of deviations and quality events, with the knowledge and risk visibility to reduce future recurrence and backlog.', 'r3-quality.png'],
        ['C3', 'Technical investigations', 'Characterization, Comprehension, Communication. Complex technical findings structured into scientific and operational knowledge that supports faster, more consistent decisions.', 'c3-technical.png'],
      ],
    },
    rowsAsCards: true,
    rows: [
      { title: 'Digitalized root-cause analysis', img: 'inv-rootcause-crop.png', imgPos: 'center 38%', imgFramed: true, flush: true,
        body: 'Cause-and-effect, Five Whys, fault tree, FMEA, and Pareto, run as structured digital methods that find the most probable cause with precision.' },
      { title: 'Technically-supported CAPAs', img: 'inv-capa-new.png', imgPos: 'center 40%', flush: true,
        body: 'Corrective and preventive actions grounded in targeted laboratory and scientific assessment, not desktop analysis, so they hold.' },
      { title: 'Risk-based solutions and remediation', img: 'inv-risk-new.png', flush: true,
        body: 'Findings turned into digital risk files, FMEAs, and Five Whys that strengthen future risk assessment across process, design, and use.' },
    ],
    outcome: 'Recurring causes close for good, and each investigation accelerates the next.',
    outcomeImg: 'inv-whatchanges.jpg',
    proof: '1,000+ technical investigations across cell therapy products, root cause found and made reusable.',
    proofImg: 'inv-rootcause-methods.png',
    closing: 'Resolve it once, and prevent the next.',
  },
};

// ---------- A. HERO BAND ----------
function DomainHero({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'}}>
      <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 && (
        <img src={`assets/${d.heroImage}`} alt="" aria-hidden="true"
          style={{position:'absolute', top:0, right:0, bottom:0, height:'100%', width:'58%', objectFit:'cover',
            objectPosition:'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'}}>
          <img src={`assets/tile-icons/${d.icon}`} alt="" style={{width:38, height:38, objectFit:'contain', filter:'brightness(0) invert(1)'}}/>
        </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 : 640, textWrap:'pretty'}}>{d.tagline}</p>
      </div>
    </section>
  );
}

// ---------- B. THE SITUATION (merged with "Where the value is") ----------
function Situation({d}) {
  return (
    <section data-screen-label="B - The situation" style={{background:'var(--ink-050)', padding:'40px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14}}>The situation</div>
        <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.16, margin:'0 0 24px', color:'var(--minerva-blue)', textWrap:'pretty'}}>{d.situation.headline}</h2>
        <div style={{display:'inline-block', textAlign: d.situation.center ? 'center' : 'left', maxWidth:720}}>
          {d.situation.paras.map((p, i) => (
          <p key={i} style={{fontSize:18, lineHeight:1.7, color:'var(--fg-muted)', margin: i ? '16px 0 0' : 0, textAlign: d.situation.center ? 'center' : undefined, textWrap:'pretty'}}>{String(p).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>
          ))}
        </div>
        {d.value && (
          <div style={{marginTop:36, paddingTop:34, borderTop:'1px solid var(--border)'}}>
            <div className="eyebrow" style={{marginBottom:14, color:'#B07A12'}}>Where the value is</div>
            <h2 style={{fontSize:30, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.2, margin:'0 0 20px', color:'var(--minerva-blue)', textWrap:'pretty'}}>{d.value.headline}</h2>
            <p style={{fontSize:18, lineHeight:1.7, color:'var(--fg-muted)', margin:0, display:'inline-block', textAlign:'left', maxWidth:720, textWrap:'pretty'}}>{d.value.body}</p>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- C. HOW THE INTEGRATED PRACTICE RESOLVES IT ----------
function WhereValue({d}) {
  return null;
}

function ResolvePill({name, href}) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{display:'inline-flex', alignItems:'center', gap:7, fontSize:14, fontWeight:700,
        color:'var(--minerva-blue)', textDecoration:'none', background:'#fff',
        border:'1px solid ' + (hover ? 'var(--minerva-blue)' : 'var(--border)'), padding:'9px 16px', borderRadius:999,
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover ? '0 8px 18px rgba(15,26,46,0.12)' : '0 1px 2px rgba(15,26,46,0.05)',
        transition: 'transform .15s cubic-bezier(0.2,0.8,0.2,1), box-shadow .15s cubic-bezier(0.2,0.8,0.2,1), border-color .15s'}}>{name}</a>
  );
}

function Resolve({d}) {
  const hasImages = d.resolveImages && d.resolveImages.length;
  const images = hasImages && (
    <div style={{display:'grid', gridTemplateColumns: d.resolveImages.length > 1 ? '1fr 1fr' : '1fr', gap:20}}>
      {d.resolveImages.map(im => (
        <figure key={im.img} style={{margin:0}}>
          <div style={{borderRadius:14, overflow:'hidden', border:'1px solid var(--border)', boxShadow:'0 8px 24px rgba(15,26,46,0.10)', background:'#fff', padding:14}}>
            <img src={`assets/domain-photos/${im.img}`} alt={im.caption}
              onError={(e)=>{const f=e.currentTarget.closest('figure'); if(f) f.style.display='none';}}
              style={{width:'100%', height:220, objectFit:'contain', display:'block'}}/>
          </div>
          <figcaption style={{fontSize:13.5, fontWeight:700, color:'var(--minerva-blue)', textAlign:'center', marginTop:10}}>{im.caption}</figcaption>
        </figure>
      ))}
    </div>
  );
  return (
    <section data-screen-label="C - How it resolves" style={{background:'var(--ink-050)', padding:'40px 24px', borderTop:'1px solid var(--border)'}}>
      {d.archImg && (
        <div style={{maxWidth:1100, margin:'0 auto 40px'}}>
          <div style={{borderRadius:14, overflow:'hidden', border:'1px solid var(--border)', boxShadow:'0 8px 24px rgba(15,26,46,0.10)', background:'#fff', padding:14}}>
            <img src={`assets/domain-photos/${d.archImg}`} alt={d.archImgAlt || ''}
              style={{width:'100%', height:'auto', display:'block'}} />
          </div>
        </div>
      )}
      {hasImages ? (
        <div className="dom-frames" style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:56, alignItems:'center'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:14}}>How the integrated practice resolves it</div>
            <p style={{fontSize:18.5, lineHeight:1.7, color:'var(--fg)', margin:'0 0 20px', textWrap:'pretty'}}>{d.resolve}</p>
            {!d.hideResolvePills && (
              <div style={{display:'flex', flexWrap:'wrap', gap:10, margin:'0 0 20px'}}>
                {d.disciplines.map(name => (
                  <ResolvePill key={name} name={name} href={DISCIPLINE_HREF[name] || KG_HOME}></ResolvePill>
                ))}
              </div>
            )}
          </div>
          <div>{images}</div>
        </div>
      ) : (
        <div style={{maxWidth:860, margin:'0 auto', textAlign:'center'}}>
          <div className="eyebrow" style={{marginBottom:14}}>How the integrated practice resolves it</div>
          <p style={{fontSize:18.5, lineHeight:1.7, color:'var(--fg)', margin:'0 0 28px', display:'inline-block', textAlign:'left', maxWidth:760, textWrap:'pretty'}}>{d.resolve}</p>
          {!d.hideResolvePills && (
            <div style={{display:'flex', flexWrap:'wrap', gap:10, justifyContent:'center'}}>
              {d.disciplines.map(name => (
                <ResolvePill key={name} name={name} href={DISCIPLINE_HREF[name] || KG_HOME}></ResolvePill>
              ))}
            </div>
          )}
          <p style={{fontSize:13.5, color:'var(--fg-muted)', margin:'16px 0 0', fontStyle:'italic'}}>Every domain is the four disciplines applied to one arena.</p>
        </div>
      )}
    </section>
  );
}

// ---------- PDP lifecycle matrix (replaces the plain phase-box flow) ----------
// Recreated from the "Product Development Process Activities" diagram in the
// Minerva KG visual language: rounded mk-card matrix, brand-spectrum activity
// columns, hairline grid, the Design / Design Lock lines, and a deliverables
// flow column on the right.
function FlowArrow({color}) {
  return (
    <div style={{display:'flex', flexDirection:'column', alignItems:'center', alignSelf:'stretch', padding:'6px 0'}}>
      <div style={{flex:1, width:7, background:color, borderRadius:4, minHeight:24}}></div>
      <div style={{width:0, height:0, borderLeft:'8px solid transparent', borderRight:'8px solid transparent', borderTop:`10px solid ${color}`}}></div>
    </div>
  );
}

function DeliverGroup({title, items, arrow, note}) {
  return (
    <div style={{display:'flex', gap:14, height:'100%', padding:'6px 0'}}>
      <FlowArrow color={arrow}/>
      <div style={{alignSelf:'center'}}>
        <div style={{fontSize:14.5, fontWeight:800, color:'var(--fg)', marginBottom:7}}>{title}</div>
        <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:4}}>
          {items.map(it => <li key={it} style={{fontSize:13.5, color:'var(--fg-muted)', lineHeight:1.4}}>– {it}</li>)}
        </ul>
        {note && <div style={{fontSize:11, color:'var(--ink-300)', marginTop:7, fontStyle:'italic'}}>{note}</div>}
      </div>
    </div>
  );
}

function LifecycleMatrix() {
  const border = '1px solid var(--border)';
  const ACT = [
    { label:'Planning and Project Management', text:'#1C4DA1', chip:'rgba(28,77,161,0.13)',  bar:'rgba(28,77,161,0.55)' },
    { label:'Requirements Management',         text:'#9A6E12', chip:'rgba(224,162,48,0.18)', bar:'rgba(224,162,48,0.72)' },
    { label:'Risk Management',                 text:'#B00B77', chip:'rgba(210,15,140,0.13)', bar:'rgba(210,15,140,0.45)' },
    { label:'Deliverables Management',         text:'#069348', chip:'rgba(6,147,72,0.14)',   bar:'rgba(6,147,72,0.52)' },
  ];
  // grid rows: 1 header · 2-4 above · 5 design line · 6 design · 7 lock line · 8 V&V · 9 commercialization
  const PH = [
    { n:'1', name:'Definition (Pitch)',           row:2, bars:1, mh:38 },
    { n:'2', name:'Concept',                      row:3, bars:1, mh:38 },
    { n:'3', name:'Feasibility',                  row:4, bars:1, mh:38 },
    { n:'4', name:'Design',                       row:6, bars:1, mh:62 },
    { n:'5', name:'Verification and Validation',  row:8, bars:3, mh:84 },
    { n:'6', name:'Commercialization',            row:9, bars:1, mh:38 },
  ];
  return (
    <div style={{overflowX:'auto', overflowY:'hidden', paddingBottom:10, zoom:0.8, display:'flex', justifyContent:'center'}}>
      <div style={{display:'grid', gridTemplateColumns:'54px 186px repeat(4, 132px) 200px', minWidth:0, margin:'0 auto', alignItems:'stretch'}}>

        {/* matrix card background behind the four activity columns */}
        <div style={{gridColumn:'3 / 7', gridRow:'1 / 10', background:'#fff', border, borderRadius:14, boxShadow:'0 1px 2px rgba(15,26,46,0.06)', zIndex:0}}></div>

        {/* header labels */}
        <div style={{gridColumn:2, gridRow:1, display:'flex', alignItems:'center', justifyContent:'flex-end', padding:'0 14px 0 0', zIndex:1}}>
          <span style={{fontSize:18, fontWeight:800, color:'var(--fg)'}}>Phases</span>
        </div>
        {ACT.map((a, ci) => (
          <div key={'h'+ci} style={{gridColumn:3+ci, gridRow:1, padding:8, zIndex:1}}>
            <div style={{background:a.chip, color:a.text, borderRadius:10, padding:'10px 8px', minHeight:66, textAlign:'center', fontWeight:800, fontSize:12, lineHeight:1.28, display:'flex', alignItems:'center', justifyContent:'center'}}>{a.label}</div>
          </div>
        ))}
        <div style={{gridColumn:7, gridRow:1, display:'flex', alignItems:'center', padding:'0 0 0 20px', zIndex:1}}>
          <span style={{fontSize:20, fontWeight:800, color:'var(--fg)'}}>Deliverables</span>
        </div>

        {/* band labels (left) */}
        <div style={{gridColumn:1, gridRow:'2 / 5', display:'flex', alignItems:'center', justifyContent:'center', textAlign:'center', zIndex:1}}>
          <span style={{fontSize:12, fontWeight:600, color:'var(--fg-muted)', lineHeight:1.35}}>Above<br/>the Line</span>
        </div>
        <div style={{gridColumn:1, gridRow:'6 / 7', display:'flex', alignItems:'center', justifyContent:'center', textAlign:'center', zIndex:1}}>
          <span style={{fontSize:12, fontWeight:600, color:'var(--fg-muted)', lineHeight:1.35}}>Below<br/>the Line</span>
        </div>
        <div style={{gridColumn:1, gridRow:'8 / 10', display:'flex', alignItems:'center', justifyContent:'center', textAlign:'center', zIndex:1}}>
          <span style={{fontSize:12, fontWeight:600, color:'var(--fg-muted)', lineHeight:1.35}}>Change<br/>Control<br/>Required</span>
        </div>

        {/* phase name + activity cells */}
        {PH.map((ph) => (
          <React.Fragment key={ph.n}>
            <div style={{gridColumn:2, gridRow:ph.row, display:'flex', alignItems:'center', padding:'5px 14px 5px 6px', minHeight:ph.mh, zIndex:1}}>
              <span style={{fontSize:15, fontWeight:800, color:'var(--fg)'}}>{ph.n}. {ph.name}</span>
            </div>
            {ACT.map((a, ci) => (
              <div key={ph.n+'-'+ci} style={{gridColumn:3+ci, gridRow:ph.row, borderLeft: ci===0 ? 'none' : border, borderTop:border, display:'flex', flexDirection:'column', justifyContent:'center', gap:6, padding:'5px 16px', minHeight:ph.mh, zIndex:1}}>
                {Array.from({length:ph.bars}).map((_, bi) => (
                  <div key={bi} style={{height:13, borderRadius:999, background:a.bar}}></div>
                ))}
              </div>
            ))}
          </React.Fragment>
        ))}

        {/* deliverables flow groups (right) */}
        <div style={{gridColumn:7, gridRow:'2 / 5', paddingLeft:20, zIndex:1}}>
          <DeliverGroup title="Design Inputs" arrow="#9BA7B5" items={['Needs','Requirements']}/>
        </div>
        <div style={{gridColumn:7, gridRow:'6 / 7', paddingLeft:20, zIndex:1}}>
          <DeliverGroup title="Design Outputs" arrow="#9BA7B5" items={['Specifications','Prototypes','Pilots','Commercial Products']}/>
        </div>
        <div style={{gridColumn:7, gridRow:'8 / 10', paddingLeft:20, zIndex:1}}>
          <DeliverGroup title="V&V Outputs" arrow="#E29ABA" items={['Protocols','Reports','Commercial DMR']} note="DMR: Device Master Record"/>
        </div>

        {/* Design Line */}
        <div style={{gridColumn:'1 / 8', gridRow:5, position:'relative', display:'flex', alignItems:'center', minHeight:8, zIndex:2}}>
          <div style={{position:'absolute', left:0, right:0, top:'50%', borderTop:'2.5px solid #0A1426'}}></div>
          <span style={{position:'relative', background:'#fff', paddingRight:8, fontSize:12.5, fontWeight:800, color:'#0A1426'}}>Design Line</span>
        </div>

        {/* Design Lock Line + lock — nudged down by ~1 line (its own font size) */}
        <div style={{gridColumn:'1 / 8', gridRow:7, position:'relative', display:'flex', alignItems:'center', minHeight:8, zIndex:2, transform:'translateY(13px)'}}>
          <div style={{position:'absolute', left:0, right:0, top:'50%', borderTop:'3px solid #E29ABA'}}></div>
          <span style={{position:'relative', background:'#fff', paddingRight:8, fontSize:12.5, fontWeight:800, color:'#D20F8C'}}>Design Lock Line</span>
          <span style={{position:'relative', marginLeft:'auto', background:'#fff', padding:'0 0 0 8px', display:'flex', alignItems:'center', gap:9}}>
            <span style={{fontSize:11, fontWeight:700, color:'var(--fg-muted)', textAlign:'right', lineHeight:1.2, whiteSpace:'nowrap'}}>After Design Lock</span>
            <span style={{width:26, height:26, borderRadius:7, background:'#D20F8C', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
            </span>
          </span>
        </div>

      </div>
    </div>
  );
}

// ---------- D. DOMAIN FRAMEWORK (three renderers) ----------
function Framework({d}) {
  const f = d.framework;
  const isFrames = f.kind === 'frames';
  return (
    <section data-screen-label="D - Framework" style={{background: isFrames ? 'var(--minerva-blue)' : '#fff', padding:'40px 24px'}}>
      <div style={{maxWidth:1100, margin:'0 auto'}}>
        {f.kind !== 'lifecycle' && (
        <div style={{textAlign:'center', marginBottom:44}}>
          <div className="eyebrow" style={{marginBottom:14, color: isFrames ? 'rgba(224,162,48,0.95)' : undefined}}>{f.eyebrow}</div>
          {f.headline && <h2 style={{fontSize:32, fontWeight:900, letterSpacing:'-0.02em', margin:0, color: isFrames ? '#fff' : 'var(--minerva-blue)', textWrap:'pretty'}}>{f.headline}</h2>}
          {f.intro && <p style={{fontSize:18, lineHeight:1.7, color:'var(--fg-muted)', margin: f.headline ? '18px auto 0' : '0 auto', maxWidth:760, display:'inline-block', textAlign:'left', textWrap:'pretty'}}>{f.intro}</p>}
        </div>
        )}

        {f.kind === 'lifecycle' && (
          <div className="dom-frames" style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:56, alignItems:'center'}}>
            <div>
              <div style={{borderRadius:14, overflow:'hidden', border:'1px solid var(--border)', boxShadow:'0 8px 24px rgba(15,26,46,0.10)', background:'#fff', padding:14}}>
                <img src="assets/domain-photos/pd-lifecycle.gif"
                  alt="Product Development Process activities across the lifecycle. Planning, requirements, risk, and deliverables management run across all six phases, from Definition through Commercialization, split by the Design Line and Design Lock Line, with the deliverables flow from design inputs to V and V outputs."
                  style={{display:'block', width:'100%', height:'auto'}} />
              </div>
              <p style={{fontSize:13.5, fontWeight:700, color:'var(--minerva-blue)', textAlign:'center', marginTop:10}}>The Product Development Process (PDP)</p>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom:16}}>{f.eyebrow}</div>
              {f.headline && <h2 style={{fontSize:32, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 18px', color:'var(--minerva-blue)', textWrap:'pretty'}}>{f.headline}</h2>}
              {f.intro && <p style={{fontSize:18, lineHeight:1.7, color:'var(--fg-muted)', margin:'0 0 18px', textWrap:'pretty'}}>{String(f.intro).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>}
            </div>
          </div>
        )}

        {f.kind === 'pillars' && (
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18}} className="dom-pillars">
            {f.pillars.map(([t, b, img, pos], i) => (
              <div key={t} className="mk-card" style={{padding:'28px 26px 0', borderTop:`4px solid ${d.accent}`, overflow:'hidden', display:'flex', flexDirection:'column'}}>
                <h3 style={{fontSize:23, fontWeight:800, margin:'0 0 12px', color:'var(--fg)', letterSpacing:'-0.01em', lineHeight:1.18}}>{t}</h3>
                <p style={{fontSize:15, lineHeight:1.6, color:'var(--fg-muted)', margin:'0 0 22px', textWrap:'pretty'}}>{String(b).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</p>
                {img && (
                  <img src={`assets/domain-photos/${img}`} alt="" aria-hidden="true"
                    style={{width:'calc(100% + 52px)', height:200, objectFit:'cover', objectPosition: pos || 'center', marginLeft:-26, marginRight:-26, marginTop:'auto', display:'block',
                      WebkitMaskImage:'linear-gradient(to bottom, transparent 0, #000 18%)',
                      maskImage:'linear-gradient(to bottom, transparent 0, #000 18%)'}} />
                )}
              </div>
            ))}
          </div>
        )}

        {f.kind === 'frames' && (
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}} className="dom-frames">
            {f.frames.map(([code, label, body, img]) => (
              <div key={code} className="mk-card" style={{padding:'32px 30px', background:'#fff', border:'1px solid var(--border)', borderTop:`4px solid ${d.accent}`, borderRadius:'var(--radius-lg, 14px)', 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=''; }}>
                <div style={{display:'flex', alignItems:'baseline', gap:12, marginBottom:12}}>
                  <span style={{fontSize:30, fontWeight:900, color:d.accent, letterSpacing:'-0.02em', fontFamily:'var(--wix-display, inherit)'}}>{code}</span>
                  <span style={{fontSize:16, fontWeight:700, color:'var(--fg)'}}>{label}</span>
                </div>
                {img && (
                  <div style={{margin:'0 0 16px'}}>
                    <img src={`assets/domain-photos/${img}`} alt={`${code} — ${label}`}
                      style={{width:'100%', height:'auto', display:'block'}} />
                  </div>
                )}
                <p style={{fontSize:15.5, lineHeight:1.65, color:'var(--fg-muted)', margin:0, textWrap:'pretty'}}>{body}</p>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- (PD only) SUSTAINING PHASE ----------
function Sustaining({d}) {
  if (!d.sustaining) return null;
  return (
    <section data-screen-label="Sustaining phase" style={{background:'var(--minerva-blue)', color:'#fff', padding:'36px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14, color:'rgba(224,162,48,0.95)'}}>Where improvement lives</div>
        <h2 style={{fontSize:32, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.2, margin:'0 0 18px', color:'#fff', textWrap:'pretty'}}>{d.sustaining.headline}</h2>
        <p style={{fontSize:18, lineHeight:1.7, color:'rgba(255,255,255,0.85)', margin:0, display:'inline-block', textAlign:'center', textWrap:'pretty'}}>{d.sustaining.body}</p>
      </div>
    </section>
  );
}

// ---------- E. CAPABILITY ROWS ----------
function CapabilityRows({d}) {
  const rows = d.rows || [];
  const [active, setActive] = React.useState(-1);
  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]);
  if (rows.length === 0) return null;
  const cur = active >= 0 ? rows[active] : null;
  const lightbox = 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'}}>
      <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>
      <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>
      <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: cur.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:'#fff', boxShadow:'0 24px 60px rgba(0,0,0,0.45)'}}>
          <img src={`assets/domain-photos/${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'}}>{cur.body}</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>
  );
  if (d.rowsAsCards) {
    const four = d.rows.length === 4;
    const cols = four ? 'repeat(4,1fr)' : 'repeat(3,1fr)';
    return (
      <section data-screen-label="E - Capability cards" style={{background:'#fff', padding:'40px 24px'}}>
        <div style={{maxWidth:1140, margin:'0 auto'}}>
          {d.rowsLead && <p style={{fontSize:16.5, lineHeight:1.6, color:'var(--fg-muted)', textAlign:'center', margin:'0 auto 28px', maxWidth:720, textWrap:'pretty'}}>{d.rowsLead}</p>}
          <div className="dom-pillars" style={{display:'grid', gridTemplateColumns:cols, gap:18}}>
            {d.rows.map((row, i) => (
              <div key={row.title} className="mk-card" onClick={() => row.img && setActive(i)}
                style={{padding:'26px 24px 24px', borderTop:`4px solid ${row.color || d.accent}`, overflow:'hidden', display:'flex', flexDirection:'column', cursor: row.img ? 'zoom-in' : 'default', 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: four ? 19 : 22, fontWeight:800, margin:'0 0 12px', color:'var(--fg)', letterSpacing:'-0.01em', lineHeight:1.2, minHeight: four ? '2.4em' : undefined, textWrap:'pretty'}}>{row.title}</h3>
                <p style={{fontSize:15, lineHeight:1.6, color:'var(--fg-muted)', margin:'0 0 34px', textWrap:'pretty'}}>{row.body}</p>
                {row.img && (
                  <img src={`assets/domain-photos/${row.img}`} alt="" aria-hidden="true"
                    onError={(e)=>{e.currentTarget.style.display='none';}}
                    style={row.noFade
                      ? {width: row.imgInset ? 'calc(100% + 24px)' : 'calc(100% + 48px)', height:170, objectFit:'contain', objectPosition: row.imgPos || 'center bottom', marginLeft: row.imgInset ? -12 : -24, marginRight: row.imgInset ? -12 : -24, marginBottom: row.flush ? -24 : 0, marginTop:'auto', display:'block'}
                      : {width:'calc(100% + 48px)', height:170, objectFit:'cover', objectPosition: row.imgPos || 'center', marginLeft:-24, marginRight:-24, marginBottom: row.flush ? -24 : 0, marginTop:'auto', display:'block',
                        WebkitMaskImage:'linear-gradient(to bottom, transparent 0, #000 32%)',
                        maskImage:'linear-gradient(to bottom, transparent 0, #000 32%)'}} />
                )}
              </div>
            ))}
          </div>
        </div>
        {lightbox}
      </section>
    );
  }
  return (
    <section data-screen-label="E - Capability rows" style={{background:'#fff', padding:'20px 24px 8px'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        {d.rows.map((row, i) => {
          const flip = i % 2 === 1;
          const img = (
            <div style={{flex:'1 1 0', minWidth:0}}>
              <div style={{borderRadius:14, overflow:'hidden', boxShadow:'0 16px 40px rgba(15,26,46,0.16)'}}>
                <img src={`assets/domain-photos/${row.img}`} alt={row.title} style={{width:'100%', height:320, objectFit:'cover', display:'block'}}/>
              </div>
            </div>
          );
          const text = (
            <div style={{flex:'1 1 0', minWidth:0}}>
              <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
                <span style={{width:30, height:30, borderRadius:8, flexShrink:0, background:`${d.accent}1A`, color:d.accent,
                  display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:14}}>{`0${i+1}`}</span>
                <h3 style={{fontSize:24, fontWeight:800, letterSpacing:'-0.015em', margin:0, color:'var(--minerva-blue)', textWrap:'pretty'}}>{row.title}</h3>
              </div>
              <p style={{fontSize:17, lineHeight:1.7, color:'var(--fg-muted)', margin:0, textWrap:'pretty'}}>{row.body}</p>
            </div>
          );
          return (
            <div key={row.title} className="dom-row" style={{display:'flex', gap:56, alignItems:'center', flexWrap:'wrap', padding:'40px 0', borderTop: i ? '1px solid var(--border)' : 'none'}}>
              {flip ? <>{text}{img}</> : <>{img}{text}</>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------- F. PROOF / OUTCOME ----------
function OutcomeProofBox({eyebrow, eyebrowColor, text, size, img}) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{flex:'1 1 0', minWidth:0, background:'#fff', border:'1px solid ' + (hover ? 'var(--minerva-blue)' : 'var(--border)'),
        borderRadius:14, padding:'34px 34px', textAlign:'left',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 12px 28px rgba(15,26,46,0.12)' : '0 1px 2px rgba(15,26,46,0.05)',
        transition: 'transform .15s cubic-bezier(0.2,0.8,0.2,1), box-shadow .15s cubic-bezier(0.2,0.8,0.2,1), border-color .15s'}}>
      <div className="eyebrow" style={{marginBottom:14, color:eyebrowColor || undefined}}>{eyebrow}</div>
      <p style={{fontSize:size, lineHeight:1.55, fontWeight:600, color:'var(--fg)', margin:0, textWrap:'pretty'}}>{text}</p>
      {img && (
        <div style={{marginTop:20, borderRadius:10, overflow:'hidden', border:'1px solid var(--border)'}}>
          <img src={`assets/domain-photos/${img}`} alt="" aria-hidden="true" style={{width:'100%', height:'auto', display:'block'}} />
        </div>
      )}
    </div>
  );
}

function Outcome({d}) {
  if (!d.outcome && !d.proof) return null;
  return (
    <section data-screen-label="F - What changes and proof" style={{background:'var(--ink-050)', padding:'40px 24px', borderTop:'1px solid var(--border)'}}>
      <div style={{maxWidth:1040, margin:'0 auto'}}>
        <div className="eyebrow" style={{textAlign:'center', marginBottom:22}}>The payoff</div>
        <div style={{display:'flex', gap:24, alignItems:'stretch', flexWrap:'wrap'}}>
          {d.outcome && <OutcomeProofBox eyebrow="What changes" text={d.outcome} size={20} img={d.outcomeImg}></OutcomeProofBox>}
          {d.proof && <OutcomeProofBox eyebrow="Proof" eyebrowColor="#B07A12" text={d.proof} size={18} img={d.proofImg}></OutcomeProofBox>}
        </div>
      </div>
    </section>
  );
}

// ---------- F2. PROOF (merged into Outcome) ----------
function ProofBlock({d}) {
  return null;
}

// ---------- G. CLOSING BAND ----------
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'}}>{String(d.closing).split('\n').map((seg,si,arr)=> si<arr.length-1 ? [seg, <br key={si} />] : seg)}</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 DomainPage({slug}) {
  const d = DOMAINS[slug];
  return (
    <>
      <NavBar></NavBar>
      <DomainHero d={d}></DomainHero>
      <Situation d={d}></Situation>
      <WhereValue d={d}></WhereValue>
      {d.framework && d.framework.kind !== 'pillars' ? <Framework d={d}></Framework> : null}
      <Resolve d={d}></Resolve>
      {d.framework && d.framework.kind === 'pillars' ? <Framework d={d}></Framework> : null}
      <Sustaining d={d}></Sustaining>
      <CapabilityRows d={d}></CapabilityRows>
      <Outcome d={d}></Outcome>
      <ProofBlock d={d}></ProofBlock>
      <Closing d={d}></Closing>
      <Footer></Footer>
    </>
  );
}

Object.assign(window, { DomainPage, DOMAINS });