// IndustriesPage.jsx — Industries We Serve (per Minerva Industries Page Build Spec v1.1)
// Consolidates four near-duplicate industry pages into one page, spined on the
// regulatory-rigor axis (RUO to Sustained). Segment-specific copy only; routes out
// to domains and disciplines rather than restating practice copy.
// Global rules: no em-dashes, American spelling, no services/consulting language,
// compliant describes the discipline, human in command.

const SPECTRUM = 'linear-gradient(90deg,#D51C29,#E0542A,#E0A230,#F2D12E,#8FBF3F,#069848,#1AA89A,#3FB1E5,#1C4DA1,#4A3BA8,#8B2CA8,#D20F8C)';
const KG_HOME = '/knowledge-governance/';

// Recurring "the Minerva way" strip.
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', fontFamily:'var(--wix-text, inherit)'}}>the Minerva way</span>
      <span style={{width:28, height:2, background:'var(--minerva-gold)'}}></span>
    </div>
  );
}

// ---- A. HERO BAND — title, tagline, the Minerva way strip ----
function IndHero() {
  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:'46px 24px 40px'}}>
      <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>
      <img src="assets/industries-hero.jpg" 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:'left', position:'relative', zIndex:1}}>
        <div className="eyebrow" style={{color:'rgba(224,162,48,0.95)', marginBottom:18}}>Industries We Serve</div>
        <h1 style={{fontSize:56, fontWeight:900, lineHeight:1.06, letterSpacing:'-0.02em', margin:0, color:'#fff', textWrap:'pretty', maxWidth:560}}>
          Industries We Serve
        </h1>
        <p style={{fontSize:21, lineHeight:1.55, color:'rgba(231,239,250,0.88)', margin:'22px 0 0', maxWidth:480, textWrap:'pretty'}}>
          One governed knowledge layer, across the segments where compliance is hardest.
        </p>
        <MinervaWayStrip onDark={true}></MinervaWayStrip>
      </div>
    </section>
  );
}

// ---- B. THE CLAIM — range across regulatory rigor, not a market list ----
function TheClaim() {
  return (
    <section data-screen-label="B - The claim" style={{background:'#fff', padding:'40px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14}}>The claim</div>
        <h2 style={{fontSize:38, fontWeight:900, letterSpacing:'-0.02em', lineHeight:1.18, margin:'0 0 20px', color:'var(--minerva-blue)', textWrap:'pretty'}}>
          Where knowledge execution is hardest, and most valuable.
        </h2>
        <p style={{fontSize:18.5, lineHeight:1.7, color:'var(--fg-muted)', margin:0, display:'inline-block', textAlign:'left', maxWidth:720, textWrap:'pretty'}}>
          Minerva works across four life-science segments and, within each, across the full range of regulatory
          rigor. The same governed knowledge layer holds whether the work is research use only or sustained
          commercial manufacturing. That range is the proof of regulated depth.
        </p>
      </div>
    </section>
  );
}

// ---- C. THE DIFFERENTIATOR — the GxP rigor ladder (RUO/GLP gold, GCP blue, GMP green) ----
const RIGOR = [
  {tag:'RUO', name:'Research Use Only', color:'#E0A230', line:'Pre-regulatory work, with the governed foundations laid early so nothing has to be rebuilt later.'},
  {tag:'GLP', name:'Good Laboratory Practice', color:'#E0A230', line:'Nonclinical safety studies, with data integrity and traceability built in from the first study.'},
  {tag:'GCP', name:'Good Clinical Practice', color:'#3FB1E5', line:'Patient exposure begins, and governed knowledge keeps trials clean, auditable, and stable.'},
  {tag:'GMP', name:'Good Manufacturing Practice', color:'#069348', line:'Marketed product under full regulatory weight, monitored and continuously improved.'},
];

function RigorBand() {
  return (
    <section data-screen-label="C - Regulatory rigor" style={{position:'relative', overflow:'hidden',
      background:'linear-gradient(155deg,#0A1426 0%,#0D1C36 55%,#081420 100%)', color:'#fff', padding:'42px 24px'}}>
      <div style={{position:'absolute', top:0, left:0, right:0, height:3, background:SPECTRUM, opacity:0.9}}></div>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div style={{textAlign:'center', maxWidth:760, margin:'0 auto 52px'}}>
          <div className="eyebrow" style={{color:'rgba(63,177,229,0.95)', marginBottom:14}}>The differentiator</div>
          <h2 style={{fontSize:34, fontWeight:900, letterSpacing:'-0.015em', lineHeight:1.22, margin:0, color:'#fff', textWrap:'pretty'}}>
            The GxP rigor ladder, from RUO to GMP.
          </h2>
        </div>
        {/* Ascending GxP rigor ladder — gold (RUO, GLP) to blue (GCP) to green (GMP) */}
        <div style={{position:'relative'}}>
          <div className="rigor-line" style={{position:'absolute', top:16, left:'12.5%', right:'12.5%', height:2,
            background:'linear-gradient(90deg,#E0A230 0%,#E0A230 33%,#3FB1E5 66%,#069348 100%)'}}></div>
          <div className="rigor-grid" style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24, position:'relative'}}>
            {RIGOR.map((r) => {
              return (
                <div key={r.tag} style={{textAlign:'center'}}>
                  <div style={{display:'flex', justifyContent:'center', marginBottom:18}}>
                    <span style={{position:'relative', width:34, height:34, borderRadius:'50%', flexShrink:0,
                      display:'flex', alignItems:'center', justifyContent:'center',
                      background:r.color, boxShadow:`0 0 0 5px ${r.color}2E`}}>
                      <span style={{width:11, height:11, borderRadius:'50%', background:'#0A1426'}}></span>
                    </span>
                  </div>
                  <h3 style={{fontSize:22, fontWeight:900, margin:'0 0 4px', color:r.color, letterSpacing:'0.02em'}}>{r.tag}</h3>
                  <div style={{fontSize:14, fontWeight:700, color:'#fff', margin:'0 0 8px', letterSpacing:'-0.005em'}}>{r.name}</div>
                  <p style={{fontSize:14.5, lineHeight:1.55, color:'rgba(231,239,250,0.72)', margin:'0 auto', maxWidth:240, textWrap:'pretty'}}>{r.line}</p>
                </div>
              );
            })}
          </div>
        </div>
        <p style={{fontSize:18, lineHeight:1.6, color:'rgba(231,239,250,0.92)', textAlign:'center', maxWidth:680, margin:'52px auto 0', textWrap:'pretty'}}>
          The same knowledge layer carries across all four. <strong style={{color:'#fff'}}>That is what makes it defensible.</strong>
        </p>
      </div>
    </section>
  );
}

// ---- D. FOUR SEGMENT SECTIONS — segment-specific copy + routing only ----
// Routes point to the real domain and discipline pages (now navigable via the
// Execution Areas menu, per Industries spec v1.1 / KG build spec v1.8). "The four
// disciplines" routes to the foundation model on the home, which has no single page.
const CAP = KG_HOME + '#capabilities';
const FND = KG_HOME + '#foundation';
const PD = '/product-development/';
const QI = '/quality-improvement/';
const INV = '/investigations/';
const RM = '/risk-management/';
const SEGMENTS = [
  {
    id:'cell-and-gene-therapy', name:'Cell and Gene Therapy', img:'dna-gene-editing.jpg',
    copy:'Living, often patient-specific products with short shelf life, made in small batches that scale out rather than up. The work spans the ATMP lifecycle: apheresis collection, activation, transduction, expansion, formulation, and cryopreservation, with potency, purity, and viability testing. Variability is the enemy, and every batch matters.',
    routes:[['Product Development',PD],['Investigations',INV],['The four disciplines',FND]],
  },
  {
    id:'biotech-and-vaccines', name:'Biotech and Vaccines', img:'scientists-sample-analysis.jpg',
    copy:'High-volume biopharmaceutical manufacturing, often spread across CMOs, CDMOs, and testing laboratories. The work centers on process characterization, scale-up, and tech transfer across external operations, with ERP, MES, and quality systems carrying the load. Handoffs are where knowledge is lost.',
    routes:[['Quality Improvement',QI],['Product Development',PD],['Investigations',INV]],
  },
  {
    id:'medical-devices', name:'Medical Devices', img:'cleanroom-inspection.jpg',
    copy:'Hardware, software, and manufacturing that must align under design controls and ISO 13485. The work is right-the-first-time development: verification and validation, design history, and requirements and risk traceability, through eQMS to commercialization. Traceability from design input to released device is the whole game.',
    routes:[['Product Development',PD],['Quality Improvement',QI],['Investigations',INV]],
  },
  {
    id:'life-science-robots', name:'Life Science Robots', img:'surgical-robot.jpg',
    copy:'Robotic and automated systems for diagnostics, procedures, and surgical platforms, where software, hardware, and biology meet. The work is system integration and interface modeling, with risk and control strategy set from the earliest prototype and traceable through verification and validation. Early-stage risk intelligence prevents downstream failure.',
    routes:[['Product Development',PD],['Risk Management',RM],['Investigations',INV]],
    cross:true,
  },
];

function SegmentSection({seg, index}) {
  const flip = index % 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/brand-imagery/${seg.img}`} alt={seg.name}
          style={{width:'100%', height:340, objectFit:'cover', display:'block'}}/>
      </div>
    </div>
  );
  const text = (
    <div style={{flex:'1 1 0', minWidth:0}}>
      <h3 style={{fontSize:30, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 16px', color:'var(--minerva-blue)', textWrap:'pretty'}}>{seg.name}</h3>
      <p style={{fontSize:17, lineHeight:1.7, color:'var(--fg-muted)', margin:0, textWrap:'pretty'}}>{seg.copy}</p>
    </div>
  );
  return (
    <section id={seg.id} data-screen-label={seg.name} style={{background: flip ? 'var(--ink-050)' : '#fff', padding:'36px 24px', scrollMarginTop:140, borderTop:'1px solid var(--border)'}}>
      <div style={{maxWidth:1140, margin:'0 auto', display:'flex', gap:60, alignItems:'center', flexWrap:'wrap'}}>
        {flip ? <>{text}{img}</> : <>{img}{text}</>}
      </div>
    </section>
  );
}

// ---- E. THE HAND-OFF — one line routing to domains and disciplines ----
function HandOff() {
  return (
    <section data-screen-label="E - Hand-off" style={{background:'var(--minerva-blue)', color:'#fff', padding:'32px 24px'}}>
      <div style={{maxWidth:900, margin:'0 auto', textAlign:'center'}}>
        <p style={{fontSize:21, lineHeight:1.6, margin:0, color:'#fff', fontWeight:500, textWrap:'pretty'}}>
          The segment sets the context; the practice does the work.
        </p>
        <p style={{fontSize:17, lineHeight:1.6, margin:'14px 0 0', color:'rgba(231,239,250,0.78)', textWrap:'pretty'}}>
          Whatever the segment, the work is the same three domains, <a href={PD} style={{color:'#fff', textDecoration:'underline', textUnderlineOffset:3}}>Product Development</a>,{' '}
          <a href={QI} style={{color:'#fff', textDecoration:'underline', textUnderlineOffset:3}}>Quality Improvement</a>, and{' '}
          <a href={INV} style={{color:'#fff', textDecoration:'underline', textUnderlineOffset:3}}>Investigations</a>, carried by the four disciplines, and run using the Minerva way.
        </p>
      </div>
    </section>
  );
}

// ---- F. CLOSING BAND — outcome line + strip ----
function ClosingBand() {
  return (
    <section data-screen-label="F - 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'}}>
          One foundation, every level of rigor.
        </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 IndustriesPage() {
  return (
    <>
      <NavBar></NavBar>
      <IndHero></IndHero>
      <TheClaim></TheClaim>
      <RigorBand></RigorBand>
      {SEGMENTS.map((seg, i) => <SegmentSection key={seg.id} seg={seg} index={i}></SegmentSection>)}
      <HandOff></HandOff>
      <ClosingBand></ClosingBand>
      <Footer></Footer>
    </>
  );
}

Object.assign(window, { IndustriesPage });
