// Homepage22.jsx — sections changed by the Minerva 2.2 content brief
// Hero (§1, no change vs live) · ProblemBand (§2, new subline) · Foundation (§3, NEW) · OutcomeTiles (§4, 6→4)

// Tile icons recreated from the live minervakrm.com colored service tiles (1.75px outline).
// investigations = magnifier+pie · product-dev = paired test tubes ·
// risk-hand = Risk-mgmt hand+rising-chart · knowledge-tree = Knowledge-mgmt hierarchy
function LucideIcon({name, size=24, color='var(--minerva-blue)'}) {
  const paths = {
    'investigations': <><circle cx="10" cy="10" r="7"></circle><line x1="15.5" y1="15.5" x2="21" y2="21"></line><path d="M10 10 L10 3.5"></path><path d="M10 10 L16.5 10"></path><path d="M10 3.5 A6.5 6.5 0 0 1 16.5 10"></path></>,
    'product-dev': <><path d="M9 2v17.5A2.5 2.5 0 0 1 6.5 22 2.5 2.5 0 0 1 4 19.5V2"></path><path d="M20 2v17.5a2.5 2.5 0 0 1-2.5 2.5 2.5 2.5 0 0 1-2.5-2.5V2"></path><path d="M3 2h7"></path><path d="M14 2h7"></path><path d="M9 16H4"></path><path d="M20 16h-5"></path></>,
    'risk-hand': <><path d="M4.5 15c0 3.6 3 5.6 7.5 5.6s7.5-2 7.5-5.6"></path><path d="M3 13.3 4.5 15"></path><path d="M21 13.3 19.5 15"></path><path d="M8 13.5v-1.5"></path><path d="M11.5 13.5v-3"></path><path d="M15 13.5v-4.5"></path><path d="M7 12.5 15.5 5.5"></path><path d="M12.5 5.5 15.5 5.5 15.5 8.5"></path></>,
    'knowledge-tree': <><rect x="9" y="2" width="6" height="5" rx="1"></rect><rect x="2" y="16" width="5" height="5" rx="1"></rect><rect x="9.5" y="16" width="5" height="5" rx="1"></rect><rect x="17" y="16" width="5" height="5" rx="1"></rect><path d="M12 7v3"></path><path d="M4.5 11h15"></path><path d="M4.5 11v5"></path><path d="M12 11v5"></path><path d="M19.5 11v5"></path></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name]}
    </svg>
  );
}

// Review aid: dashed outline + section label when "Highlight what changed" is on
function ChangeFrame({on, label, children}) {
  if (!on) return children;
  return (
    <div style={{position:'relative', outline:'2px dashed var(--minerva-magenta)', outlineOffset:-2}}>
      <div style={{position:'absolute', top:0, left:0, zIndex:5, background:'var(--minerva-magenta)', color:'#fff', fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', padding:'4px 10px', borderRadius:'0 0 8px 0'}}>{label}</div>
      {children}
    </div>
  );
}

// ---- §1 HERO — NO CHANGE (matches live site) ----
function Hero() {
  return (
    <section data-screen-label="Hero" className="hero-section" style={{background:'var(--paper)', padding:'44px 24px 36px'}}>
      <div style={{maxWidth:1200, margin:'0 auto', position:'relative', zIndex:1}}>
        <div style={{maxWidth:560}}>
          <div className="eyebrow" style={{fontSize:14, letterSpacing:'0.18em', marginBottom:20}}>Faster Smarter Safer</div>
          <h1 style={{fontSize:54, fontWeight:900, lineHeight:1.07, letterSpacing:'-0.02em', margin:'0 0 24px', color:'var(--minerva-blue)', textWrap:'pretty'}}>
            We build the compliant knowledge execution layer for Life Sciences
          </h1>
          <div style={{height:4, width:80, background:'var(--minerva-gold)', borderRadius:2, marginBottom:24}}></div>
          <p style={{fontSize:19, lineHeight:1.6, color:'var(--fg-muted)', margin:'0 0 32px', maxWidth:520, textWrap:'pretty'}}>
            Minerva transforms your complex technical, quality, and operational data into compliant
            executable knowledge for smarter decisions by Humans, AI Agents and Robots.
          </p>
          <div style={{display:'flex', gap:12}}>
            <button className="mk-btn-gold">Start Diagnostic →</button>
            <button className="mk-btn-secondary">Discover the Minerva Way</button>
          </div>
        </div>
      </div>
      <img className="hero-bleed-img" src="assets/photo-main-hero.jpg" alt="Clinician hand over a patient's hand with a gold digital circuit overlay"/>
    </section>
  );
}

// ---- §2 PROBLEM BAND — headline kept, subline replaced ----
function ProblemBand({t}) {
  return (
    <ChangeFrame on={t.highlightChanges} label="§2 · Subline updated">
      <section data-screen-label="Problem band" style={{background:'var(--minerva-blue)', color:'#fff', padding:'56px 24px'}}>
        <div style={{maxWidth:880, margin:'0 auto', textAlign:'center'}}>
          <h2 style={{fontSize:32, fontWeight:900, letterSpacing:'-0.01em', lineHeight:1.25, margin:'0 0 18px', color:'#fff', textWrap:'pretty'}}>
            Most regulated life sciences organizations have information. Few have controlled, executable knowledge.
          </h2>
          <p style={{fontSize:18, lineHeight:1.65, color:'rgba(255,255,255,0.85)', margin:0, textWrap:'pretty'}}>
            Minerva converts your data, documents, and SME experience into compliant{' '}
            <strong style={{color:'#fff'}}>Visual&#8209;Digital Knowledge™</strong> — built from three things every
            regulated decision depends on: <strong style={{color:'#fff'}}>Knowledge, Risk, and Context.</strong>
          </p>
        </div>
      </section>
    </ChangeFrame>
  );
}

// ---- §3 FOUNDATION — Knowledge + Risk + Context ----
// Knowledge & Risk = the established (light) business. Context = the AI-era addition,
// rendered with cues from the dark-style brief: navy surface, one accent + glow, spectrum
// top-rule, a single italic-serif accent word. (See Partner Site - Design Cue Brief.md)
const FOUNDATION_COLS = [
  {title:'Knowledge Management', ai:false, body:'Convert disconnected documents, data, and SME experience into usable knowledge your teams, systems, and AI tools can actually understand and apply.'},
  {title:'Risk Management', ai:false, body:'Reduce subjectivity through visual process mapping, structured assessments, and integrated risk intelligence aligned with ICH Q9(R1) and ISO 14971.'},
  {title:'Context', ai:true, body:'Engineer the context that makes your knowledge legible to AI agents and robots — so digital reasoning stays in control, compliant, and human-verified.'},
];

// hex accent → soft glow rgba (~27% alpha), matching the brief's "<accent>46" shadow
function giGlow(hex) {
  const h = hex.replace('#','');
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  return `rgba(${r},${g},${b},0.27)`;
}

function Foundation({t}) {
  const accent = t.giAccent || '#3FB1E5';
  return (
    <ChangeFrame on={t.highlightChanges} label="§3 · New section">
      <section id="foundation" data-screen-label="Foundation: Knowledge + Risk + Context" style={{background:'#fff', padding:'72px 24px'}}>
        <div style={{maxWidth:1200, margin:'0 auto'}}>
          <div style={{textAlign:'center', marginBottom:20}}>
            <div className="eyebrow" style={{marginBottom:16}}>The foundation</div>
            <h2 style={{fontSize:44, fontWeight:900, letterSpacing:'-0.02em', margin:0, display:'flex', alignItems:'baseline', justifyContent:'center', flexWrap:'wrap', columnGap:18, rowGap:4}}>
              <span>Knowledge</span>
              <span aria-hidden="true" style={{color:t.plusAccent, fontSize:'1.18em', fontWeight:900, lineHeight:1, transform:'translateY(2px)'}}>+</span>
              <span>Risk</span>
              <span aria-hidden="true" style={{color:t.plusAccent, fontSize:'1.18em', fontWeight:900, lineHeight:1, transform:'translateY(2px)'}}>+</span>
              <span>Context</span>
            </h2>
          </div>
          <p style={{fontSize:17, lineHeight:1.65, color:'var(--fg-muted)', maxWidth:820, margin:'0 auto 48px', textAlign:'center', textWrap:'pretty'}}>
            Minerva has always been a Knowledge and Risk Management firm. The age of{' '}
            <span className="gi-serif" style={{fontSize:'1.12em', color:'var(--minerva-blue)'}}>general intelligence</span>{' '}
            adds one thing — Context. Our Visual&#8209;Digital Methods combine all three: visual for humans,
            digital for AI, verified by a person before anything becomes executable knowledge.
          </p>
          <div className="mk-foundation-grid">
            {FOUNDATION_COLS.map(c => c.ai ? (
              <div key={c.title} className="gi-card" style={{padding:'30px 28px', '--gi-accent':accent, '--gi-accent-glow':giGlow(accent)}}>
                <div className="gi-spectrum" style={{position:'absolute', top:0, left:0, right:0, height:3}}></div>
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:12}}>
                  <h3 style={{fontSize:20, fontWeight:700, margin:0, color:'#fff'}}>{c.title}</h3>
                  <span style={{fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:accent, border:`1px solid ${accent}`, padding:'3px 8px', borderRadius:999}}>AI era</span>
                </div>
                <p style={{fontSize:15, lineHeight:1.6, color:'rgba(231,239,250,0.85)', margin:0, textWrap:'pretty'}}>
                  Engineer the <span className="gi-serif" style={{color:accent, fontSize:'1.1em'}}>context</span> that makes
                  your knowledge legible to AI agents and robots — so digital reasoning stays in control, compliant,
                  and human-verified — the context layer that makes your knowledge AI-ready.
                </p>
              </div>
            ) : (
              <div key={c.title} className="mk-card" style={{padding:28}}>
                <h3 style={{fontSize:20, fontWeight:700, margin:'0 0 10px'}}>{c.title}</h3>
                <p style={{fontSize:15, lineHeight:1.6, color:'var(--fg-muted)', margin:0, textWrap:'pretty'}}>{c.body}</p>
              </div>
            ))}
          </div>
          <p style={{fontSize:17, lineHeight:1.6, color:'var(--fg-muted)', maxWidth:760, margin:'44px auto 0', textAlign:'center', textWrap:'pretty'}}>
            The result is one governed source of truth — readable by your people and your AI alike.{' '}
            <strong style={{color:'var(--fg)'}}>That's the Minerva Way.</strong>
          </p>
          <div style={{textAlign:'center', marginTop:18}}>
            <a href="#" style={{fontSize:15, fontWeight:700, color:'var(--minerva-blue)', textDecoration:'none'}}>See where we take Visual&#8209;Digital Knowledge further →</a>
          </div>
        </div>
      </section>
    </ChangeFrame>
  );
}

// ---- §4 OUTCOME TILES — four tiles, one shared neutral-blue treatment ----
const TILES = [
  {icon:'investigations.svg', title:'Investigations',
   desc:'Turn investigations into queryable, executable knowledge — not archived PDFs. Structured root-cause analysis that reduces recurrence, strengthens CAPAs, and keeps the finding usable years later.',
   twist:'Queryable by your engineers and your AI agents alike — the finding stays usable, not buried.'},
  {icon:'product-development.svg', title:'Product Development',
   desc:'Transform development complexity into visual workflows, traceable requirements, and risk-based execution — so process knowledge survives tech transfer and accelerates product readiness.',
   twist:'Machine-legible — the same knowledge that trains your people can instruct your agents and robots.'},
  {icon:'process-improvement.svg', title:'Process Improvement',
   desc:'Make processes visible end-to-end, expose variation and waste, and improve them with risk-based, traceable changes that hold.',
   twist:'Continuously monitored — visual-digital models surface drift before it becomes a deviation.'},
  {icon:'quality-improvement.svg', title:'Quality Improvement',
   desc:'Strengthen quality systems with connected, governed knowledge — fewer repeat deviations, faster CAPAs, and audit-ready traceability aligned with ICH Q9(R1).',
   twist:'Governed end-to-end — every change traceable and audit-ready for humans and AI.'},
];

function OutcomeTiles({t}) {
  const chip = t.twistStyle === 'AI chip';
  return (
    <ChangeFrame on={t.highlightChanges} label="§4 · 6 tiles → 4 outcome tiles">
      <section id="capabilities" data-screen-label="Outcome tiles" style={{background:'var(--ink-050)', padding:'80px 24px'}}>
        <div style={{maxWidth:1200, margin:'0 auto'}}>
          <div style={{textAlign:'center', marginBottom:48}}>
            <div className="eyebrow" style={{marginBottom:12}}>What we do</div>
            <h2 style={{fontSize:36, fontWeight:900, letterSpacing:'-0.02em', margin:'0 auto', maxWidth:780, textWrap:'pretty'}}>
              This is how Minerva helps teams move with clarity, speed, and low risk
            </h2>
          </div>
          <div className="mk-tiles-grid">
            {TILES.map(tile => (
              <div key={tile.title} className="mk-card" style={{padding:24, display:'flex', flexDirection:'column'}}>
                <div style={{width:44, height:44, borderRadius:12, background:'var(--accent-soft)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16}}>
                  <img src={`assets/tile-icons/${tile.icon}`} style={{width:26, height:26, objectFit:'contain'}} alt=""/>
                </div>
                <h3 style={{fontSize:19, fontWeight:700, margin:'0 0 8px'}}>{tile.title}</h3>
                <p style={{fontSize:14.5, lineHeight:1.55, color:'var(--fg-muted)', margin:'0 0 16px', textWrap:'pretty'}}>{tile.desc}</p>
                <div style={{marginTop:'auto', borderTop:'1px solid #C9D7EE', paddingTop:14}}>
                  {chip ? (
                    <div style={{display:'flex', gap:8, alignItems:'flex-start'}}>
                      <span style={{flexShrink:0, fontSize:10, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--minerva-blue)', background:'var(--accent-soft)', padding:'3px 7px', borderRadius:999, marginTop:1}}>With AI</span>
                      <span style={{fontSize:13.5, lineHeight:1.5, color:'var(--fg-muted)'}}>{tile.twist}</span>
                    </div>
                  ) : (
                    <p style={{fontSize:13.5, lineHeight:1.5, fontStyle:'italic', color:'var(--minerva-blue)', margin:0}}>{tile.twist}</p>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </ChangeFrame>
  );
}

Object.assign(window, { LucideIcon, ChangeFrame, Hero, ProblemBand, Foundation, OutcomeTiles });