// Hi-fi science direction — editorial/swiss, data-forward
// Palette:
//   paper  #f3efe4  (warm cream)
//   ink    #111111  (near-black)
//   ink2   #3a3a36
//   rule   #1c1c1c  (hairlines)
//   tint   #e4dfcf  (panel)
//   accent #c65a2a  (signal orange — charts only)
//   accent2 #2b4a3a (deep forest — charts only)

const SCI = {
  paper:'#f3efe4', ink:'#111111', ink2:'#3a3a36', ink3:'#6e6a60',
  tint:'#e4dfcf', tint2:'#eae4d2',
  rule:'#1c1c1c',
  orange:'#c65a2a', forest:'#2b4a3a', sand:'#bfa76a',
  display:'"Cormorant Garamond","GT Sectra",Canela,serif',
  body:'"Inter",system-ui,sans-serif',
  mono:'"JetBrains Mono","IBM Plex Mono",monospace',
};

// —— tiny UI atoms ————————————————————————————
function Rule({ style, v }) {
  return <div style={{ background: SCI.rule, width: v?1:'100%', height: v?'100%':1, ...style }}/>;
}
function MonoLabel({ children, style, size=10 }) {
  return <span style={{ fontFamily:SCI.mono, fontSize:size, letterSpacing:1, textTransform:'uppercase', color:SCI.ink2, ...style }}>{children}</span>;
}
function SciBtn({ children, primary, style, w, size='md', icon }) {
  const sizes = { sm:{h:34,fs:12,px:14}, md:{h:44,fs:13,px:20}, lg:{h:52,fs:14,px:26} };
  const s = sizes[size];
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
      height:s.h, padding:`0 ${s.px}px`, width:w,
      background: primary?SCI.ink:'transparent',
      color: primary?SCI.paper:SCI.ink,
      border:`1px solid ${SCI.ink}`,
      fontFamily:SCI.body, fontSize:s.fs, fontWeight:500, cursor:'pointer',
      ...style
    }}>
      {children}
      {icon && <span style={{fontFamily:SCI.mono}}>{icon}</span>}
    </div>
  );
}
function Pill({ children, dark, style }) {
  return <span style={{
    display:'inline-flex', alignItems:'center', gap:6,
    padding:'4px 10px',
    border:`1px solid ${SCI.ink}`,
    background: dark?SCI.ink:'transparent',
    color: dark?SCI.paper:SCI.ink,
    fontFamily:SCI.mono, fontSize:10, letterSpacing:0.5, textTransform:'uppercase',
    ...style
  }}>{children}</span>;
}

// —— Big Five horizontal bars ————————————————
function BigFiveBars({ values, animated }) {
  const traits = [
    { l:'Openness',          s:'O', v:values[0] },
    { l:'Conscientiousness', s:'C', v:values[1] },
    { l:'Extraversion',      s:'E', v:values[2] },
    { l:'Agreeableness',     s:'A', v:values[3] },
    { l:'Neuroticism',       s:'N', v:values[4] },
  ];
  return (
    <div style={{ fontFamily:SCI.body }}>
      {traits.map((t,i)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'28px 1fr 44px', alignItems:'center', gap:10, padding:'7px 0', borderBottom: i<4?`1px solid ${SCI.tint}`:'none' }}>
          <div style={{ fontFamily:SCI.mono, fontSize:11, fontWeight:500 }}>{t.s}</div>
          <div style={{ position:'relative', height:10, background: SCI.tint }}>
            <div style={{ position:'absolute', left:0, top:0, bottom:0, width:`${t.v}%`, background: i===0?SCI.orange:SCI.ink }}/>
            {/* percentile ticks */}
            {[25,50,75].map(p=>(
              <div key={p} style={{ position:'absolute', left:`${p}%`, top:-3, bottom:-3, width:1, background: SCI.paper }}/>
            ))}
          </div>
          <div style={{ fontFamily:SCI.mono, fontSize:11, textAlign:'right' }}>{t.v}<span style={{color:SCI.ink3}}>%</span></div>
        </div>
      ))}
    </div>
  );
}

// —— MBTI cognitive stack ———————————————————
function MBTIStack() {
  const fns = [
    { fn:'Ni', pos:'Dominant',   w:96 },
    { fn:'Te', pos:'Auxiliary',  w:74 },
    { fn:'Fi', pos:'Tertiary',   w:48 },
    { fn:'Se', pos:'Inferior',   w:28 },
  ];
  return (
    <div>
      {fns.map((f,i)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'48px 90px 1fr', alignItems:'center', gap:10, padding:'6px 0', borderBottom: i<3?`1px solid ${SCI.tint}`:'none' }}>
          <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1, color: i===0?SCI.orange:SCI.ink }}>{f.fn}</div>
          <div style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink3, textTransform:'uppercase', letterSpacing:0.5 }}>{f.pos}</div>
          <div style={{ height:6, background:SCI.tint, position:'relative' }}>
            <div style={{ position:'absolute', left:0, top:0, bottom:0, width:`${f.w}%`, background: i===0?SCI.orange:SCI.ink }}/>
          </div>
        </div>
      ))}
    </div>
  );
}

// —— Enneagram radar (9-pointed) ———————————————
function EnneaRadar({ values }) {
  // values: array of 9 numbers 0..1, index 0 = type 1 at top
  const cx=100, cy=100, R=78;
  const pts = values.map((v,i)=>{
    const a = -Math.PI/2 + (i * 2*Math.PI/9);
    return [cx + Math.cos(a)*R*v, cy + Math.sin(a)*R*v];
  });
  const poly = pts.map(p=>p.join(',')).join(' ');
  const axes = values.map((_,i)=>{
    const a = -Math.PI/2 + (i*2*Math.PI/9);
    return [cx + Math.cos(a)*R, cy + Math.sin(a)*R];
  });
  return (
    <svg viewBox="0 0 200 200" style={{ width:'100%', height:'100%' }}>
      {[0.25,0.5,0.75,1].map((r,i)=>(
        <polygon key={i} fill="none" stroke={SCI.tint} strokeWidth="0.8"
          points={values.map((_,j)=>{ const a=-Math.PI/2+j*2*Math.PI/9; return `${cx+Math.cos(a)*R*r},${cy+Math.sin(a)*R*r}`; }).join(' ')}/>
      ))}
      {axes.map(([x,y],i)=>(
        <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke={SCI.tint} strokeWidth="0.8"/>
      ))}
      <polygon points={poly} fill={SCI.orange} fillOpacity="0.18" stroke={SCI.orange} strokeWidth="1.4"/>
      {pts.map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r={i===7?4:2.4} fill={i===7?SCI.orange:SCI.ink}/>
          {(()=> {
            const a=-Math.PI/2+i*2*Math.PI/9;
            const lx = cx + Math.cos(a)*(R+12);
            const ly = cy + Math.sin(a)*(R+12);
            return <text x={lx} y={ly} fontFamily={SCI.mono} fontSize="9" fill={i===7?SCI.orange:SCI.ink2} textAnchor="middle" dominantBaseline="middle" fontWeight={i===7?600:400}>{i+1}</text>;
          })()}
        </g>
      ))}
    </svg>
  );
}

// —— Sparkline trend ————————————————————————
function Sparkline({ data, color=SCI.ink, height=34 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v,i)=> {
    const x = (i/(data.length-1))*100;
    const y = 100 - ((v-min)/(max-min||1))*100;
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width:'100%', height }}>
      <polyline fill="none" stroke={color} strokeWidth="2" vectorEffect="non-scaling-stroke" points={pts}/>
    </svg>
  );
}

// —— Correlation heat strip ——————————————————
function HeatStrip({ cells=12 }) {
  const vals = [0.2,0.8,0.5,0.9,0.3,0.6,0.7,0.2,0.95,0.4,0.55,0.75];
  return (
    <div style={{ display:'grid', gridTemplateColumns:`repeat(${cells},1fr)`, gap:2 }}>
      {Array.from({length:cells}).map((_,i)=>(
        <div key={i} style={{ aspectRatio:'1/1', background: `rgba(198,90,42,${vals[i%vals.length]})`, border:`1px solid ${SCI.paper}` }}/>
      ))}
    </div>
  );
}

// —— Header / Nav ———————————————————————————
function SciNav({ compact }) {
  return (
    <div style={{
      display:'flex', alignItems:'stretch', height: compact?56:64,
      borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper
    }}>
      <div style={{ padding:'0 28px', display:'flex', alignItems:'center', borderRight:`1px solid ${SCI.ink}`, gap:10 }}>
        <div style={{ width:16, height:16, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
          <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
        </div>
        <div style={{ fontFamily:SCI.display, fontSize:22, letterSpacing:-0.3, fontWeight:500 }}>Persona</div>
        <MonoLabel size={9} style={{marginLeft:4, color:SCI.ink3}}>v3</MonoLabel>
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', padding:'0 28px', gap:32, fontSize:13 }}>
        {['Methodology','Instruments','Sample report','Pricing','Research'].map((l,i)=>(
          <span key={i} style={{ color: i===0?SCI.ink:SCI.ink2, borderBottom: i===0?`1.5px solid ${SCI.ink}`:'none', padding:'4px 0' }}>{l}</span>
        ))}
      </div>
      <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', gap:10 }}>
        <span style={{fontSize:12}}>Sign in</span>
        <SciBtn primary size="sm" icon="→">Take assessment</SciBtn>
      </div>
    </div>
  );
}

// —— SECTION: Hero ——————————————————————————
function SciHero() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}` }}>
      {/* top meta strip */}
      <div style={{ display:'flex', justifyContent:'space-between', padding:'8px 28px', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}` }}>
        <span>FIG. 01 — CANONICAL HOMEPAGE / SCIENCE</span>
        <span>EST. 2026 · N = 184,212 COMPLETED ASSESSMENTS</span>
        <span>21.APR.2026</span>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.15fr 1fr', minHeight:560 }}>
        {/* Left: headline */}
        <div style={{ padding:'56px 56px 40px', borderRight:`1px solid ${SCI.ink}`, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
          <div>
            <MonoLabel>§ 01 · Thesis</MonoLabel>
            <h1 style={{
              fontFamily:SCI.display, fontWeight:500, fontSize:88, lineHeight:0.92, letterSpacing:-1.5,
              margin:'18px 0 0'
            }}>
              Self-knowledge,<br/>
              <span style={{fontStyle:'italic'}}>engineered.</span>
            </h1>
            <div style={{ maxWidth:460, marginTop:22, fontSize:16, lineHeight:1.55, color:SCI.ink2 }}>
              Ten instruments. One cross-referenced report. We triangulate what validated personality science, archetypal frameworks, and numerical systems each say about you — and show you where they agree.
            </div>
          </div>

          <div style={{ marginTop:32 }}>
            <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:14 }}>
              <div style={{ flex:1, maxWidth:360, height:52, border:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 16px', background:SCI.paper }}>
                <MonoLabel style={{marginRight:12}}>DOB</MonoLabel>
                <input placeholder="1994 / 06 / 12" style={{ border:'none', background:'none', outline:'none', flex:1, fontFamily:SCI.mono, fontSize:14, color:SCI.ink }}/>
                <span style={{ color:SCI.ink3, fontFamily:SCI.mono, fontSize:11 }}>↵</span>
              </div>
              <SciBtn primary size="lg" icon="→">Begin</SciBtn>
            </div>
            <div style={{ display:'flex', gap:18, fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>
              <span>— NO SIGNUP TO PREVIEW</span>
              <span>— 12 MIN ASSESSMENT</span>
              <span>— CANCEL ANYTIME</span>
            </div>
          </div>
        </div>

        {/* Right: live data panel */}
        <div style={{ padding:0, display:'grid', gridTemplateRows:'auto 1fr auto' }}>
          {/* Top strip */}
          <div style={{ padding:'14px 24px', borderBottom:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <MonoLabel>Live: sample subject · J.D. · ♀ · 1994</MonoLabel>
            <div style={{ display:'flex', gap:6 }}>
              <Pill>Big Five</Pill><Pill>MBTI</Pill><Pill dark>Enneagram</Pill>
            </div>
          </div>

          {/* Main viz: enneagram radar + Big Five */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', height:'100%' }}>
            <div style={{ padding:24, borderRight:`1px solid ${SCI.tint}`, display:'flex', flexDirection:'column' }}>
              <MonoLabel style={{marginBottom:6}}>Enneagram profile</MonoLabel>
              <div style={{ fontFamily:SCI.display, fontSize:36, lineHeight:1, margin:'2px 0 4px' }}>Type 8<span style={{color:SCI.orange}}>.</span></div>
              <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginBottom:10 }}>8w7 · Sp/Sx · Triad: Gut</div>
              <div style={{ flex:1, minHeight:0 }}>
                <EnneaRadar values={[0.42,0.38,0.48,0.55,0.62,0.58,0.72,0.95,0.61]}/>
              </div>
            </div>
            <div style={{ padding:24, display:'flex', flexDirection:'column' }}>
              <MonoLabel style={{marginBottom:8}}>Big Five · percentile</MonoLabel>
              <BigFiveBars values={[88,72,41,63,22]}/>
              <div style={{ marginTop:14 }}>
                <MonoLabel style={{marginBottom:6}}>MBTI cognitive stack</MonoLabel>
                <MBTIStack/>
              </div>
            </div>
          </div>

          {/* Bottom metric strip */}
          <div style={{ borderTop:`1px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'repeat(4, 1fr)' }}>
            {[
              { k:'Confidence', v:'0.91', sub:'cross-system agreement' },
              { k:'Convergent', v:'7 / 10', sub:'instruments aligned' },
              { k:'Shadow',     v:'Type 1', sub:'growth direction' },
              { k:'Stress',     v:'→ 5',    sub:'integration path' },
            ].map((m,i)=>(
              <div key={i} style={{ padding:'12px 16px', borderRight: i<3?`1px solid ${SCI.tint}`:'none' }}>
                <MonoLabel size={9}>{m.k}</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1, margin:'2px 0' }}>{m.v}</div>
                <div style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink3 }}>{m.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// —— SECTION: Credibility strip —————————————
function SciLogoStrip() {
  const logos = [
    { n:'WIRED',        f:SCI.display, s:22 },
    { n:'The Atlantic', f:SCI.display, s:20, italic:true },
    { n:'NYT',          f:SCI.display, s:26, bold:true },
    { n:'Nautilus',     f:SCI.body,    s:20 },
    { n:'VOX',          f:SCI.body,    s:24, bold:true },
    { n:'Scientific American', f:SCI.display, s:16 },
  ];
  return (
    <div style={{ padding:'26px 28px', borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', gap:48 }}>
      <MonoLabel size={10} style={{ whiteSpace:'nowrap' }}>As featured in —</MonoLabel>
      <div style={{ flex:1, display:'flex', justifyContent:'space-between', alignItems:'center', opacity:0.85 }}>
        {logos.map((l,i)=>(
          <span key={i} style={{
            fontFamily:l.f, fontSize:l.s, color:SCI.ink,
            fontWeight: l.bold?700:400, fontStyle:l.italic?'italic':'normal',
            letterSpacing: l.f===SCI.body?'0.12em':'-0.01em',
          }}>{l.n}</span>
        ))}
      </div>
    </div>
  );
}

// —— SECTION: Methodology (3 steps) —————————
function SciMethod() {
  const steps = [
    {
      n:'01', title:'Capture', kicker:'12-minute intake',
      body:'Birth date, time and location seed the archetypal instruments. A validated 120-item questionnaire scores the psychometric ones.',
      meta:[['Items','120'],['Time','~12 min'],['Validity','IRT-scaled']]
    },
    {
      n:'02', title:'Triangulate', kicker:'10 instruments, one subject',
      body:'Each system is computed independently, then compared. Where they converge is signal; where they diverge is where we ask questions.',
      meta:[['Instruments','10'],['Cross-refs','48'],['Agreement','0.00–1.00']]
    },
    {
      n:'03', title:'Interpret', kicker:'Editorial report',
      body:'Your blueprint is rendered as long-form editorial — not a horoscope. Written around the convergences, footnoted by source, exportable.',
      meta:[['Sections','12'],['Length','~8,000w'],['Audio','38 min']]
    },
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}` }}>
      <div style={{ padding:'56px 56px 24px', display:'grid', gridTemplateColumns:'1fr 2fr', alignItems:'end', gap:40 }}>
        <div>
          <MonoLabel>§ 02 · Method</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:54, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.8, fontWeight:500 }}>
            A <span style={{fontStyle:'italic'}}>measurement</span> problem,<br/>treated as one.
          </h2>
        </div>
        <div style={{ fontSize:15, lineHeight:1.6, color:SCI.ink2, maxWidth:560 }}>
          Most personality tools stop at one instrument. We run ten in parallel, then report not just the results but their <em>disagreements</em> — which is usually where the interesting parts of a person live.
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', borderTop:`1px solid ${SCI.ink}` }}>
        {steps.map((s,i)=>(
          <div key={i} style={{ padding:'32px 28px 36px', borderRight: i<2?`1px solid ${SCI.ink}`:'none' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:16 }}>
              <div style={{ fontFamily:SCI.display, fontSize:52, lineHeight:1, color: i===1?SCI.orange:SCI.ink }}>{s.n}</div>
              <MonoLabel>{s.kicker}</MonoLabel>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:26, lineHeight:1.1, margin:'0 0 10px' }}>{s.title}</div>
            <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2, marginBottom:20 }}>{s.body}</div>
            <div style={{ borderTop:`1px solid ${SCI.tint}` }}>
              {s.meta.map(([k,v],j)=>(
                <div key={j} style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:11 }}>
                  <span style={{color:SCI.ink3, textTransform:'uppercase', letterSpacing:0.5, fontSize:10}}>{k}</span>
                  <span>{v}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— SECTION: Instruments grid ——————————————
function InstrumentIcon({ kind }) {
  const s = { width:'100%', aspectRatio:'1/1' };
  if (kind==='bigfive') return (
    <svg viewBox="0 0 60 60" style={s}>
      {[0,1,2,3,4].map(i=>(
        <g key={i}>
          <rect x="8" y={8+i*9} width="44" height="5" fill={SCI.tint}/>
          <rect x="8" y={8+i*9} width={44*[0.88,0.72,0.41,0.63,0.22][i]} height="5" fill={SCI.ink}/>
        </g>
      ))}
    </svg>
  );
  if (kind==='mbti') return (
    <svg viewBox="0 0 60 60" style={s}>
      {['I','N','T','J'].map((c,i)=>(
        <g key={i}>
          <rect x={6+i*12} y="10" width="10" height="40" fill="none" stroke={SCI.ink} strokeWidth="1"/>
          <text x={11+i*12} y="34" fontFamily={SCI.display} fontSize="13" textAnchor="middle" fill={i===1?SCI.orange:SCI.ink}>{c}</text>
        </g>
      ))}
    </svg>
  );
  if (kind==='ennea') return (
    <svg viewBox="0 0 60 60" style={s}>
      <circle cx="30" cy="30" r="22" fill="none" stroke={SCI.ink} strokeWidth="1"/>
      {Array.from({length:9}).map((_,i)=>{
        const a = -Math.PI/2 + i*2*Math.PI/9;
        const x = 30 + Math.cos(a)*22, y = 30 + Math.sin(a)*22;
        return <circle key={i} cx={x} cy={y} r={i===7?3:1.8} fill={i===7?SCI.orange:SCI.ink}/>;
      })}
    </svg>
  );
  if (kind==='hd') return (
    <svg viewBox="0 0 60 60" style={s}>
      {[[30,10,'▽'],[30,30,'□'],[30,50,'△'],[14,30,'○'],[46,30,'○']].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="5" fill={i%2?SCI.ink:'none'} stroke={SCI.ink} strokeWidth="1"/>
        </g>
      ))}
      <line x1="30" y1="15" x2="30" y2="25" stroke={SCI.ink}/>
      <line x1="30" y1="35" x2="30" y2="45" stroke={SCI.ink}/>
      <line x1="19" y1="30" x2="25" y2="30" stroke={SCI.ink}/>
      <line x1="35" y1="30" x2="41" y2="30" stroke={SCI.ink}/>
    </svg>
  );
  if (kind==='astro') return (
    <svg viewBox="0 0 60 60" style={s}>
      <circle cx="30" cy="30" r="22" fill="none" stroke={SCI.ink} strokeWidth="1"/>
      <circle cx="30" cy="30" r="16" fill="none" stroke={SCI.ink} strokeWidth="0.7"/>
      {Array.from({length:12}).map((_,i)=>{
        const a = i*Math.PI/6;
        return <line key={i} x1={30+Math.cos(a)*16} y1={30+Math.sin(a)*16} x2={30+Math.cos(a)*22} y2={30+Math.sin(a)*22} stroke={SCI.ink} strokeWidth="0.7"/>;
      })}
      <circle cx="44" cy="22" r="2" fill={SCI.orange}/>
      <circle cx="22" cy="38" r="1.5" fill={SCI.ink}/>
    </svg>
  );
  if (kind==='num') return (
    <svg viewBox="0 0 60 60" style={s}>
      <text x="30" y="42" fontFamily={SCI.display} fontSize="38" textAnchor="middle" fill={SCI.ink}>7</text>
      <text x="12" y="20" fontFamily={SCI.mono} fontSize="7" fill={SCI.ink3}>3</text>
      <text x="48" y="20" fontFamily={SCI.mono} fontSize="7" fill={SCI.ink3}>11</text>
      <text x="12" y="54" fontFamily={SCI.mono} fontSize="7" fill={SCI.ink3}>22</text>
    </svg>
  );
  if (kind==='carto') return (
    <svg viewBox="0 0 60 60" style={s}>
      <path d="M8,28 Q18,22 28,28 T52,30" fill="none" stroke={SCI.ink2} strokeWidth="0.7"/>
      <path d="M10,38 Q22,34 32,40 T54,42" fill="none" stroke={SCI.ink2} strokeWidth="0.7"/>
      <line x1="18" y1="8" x2="22" y2="52" stroke={SCI.orange} strokeWidth="1"/>
      <line x1="38" y1="8" x2="34" y2="52" stroke={SCI.ink} strokeWidth="1" strokeDasharray="2 2"/>
      <circle cx="22" cy="30" r="2" fill={SCI.orange}/>
    </svg>
  );
  if (kind==='iching') return (
    <svg viewBox="0 0 60 60" style={s}>
      {[0,1,2,3,4,5].map(i=>{
        const y = 10+i*7, broken = [true,false,true,false,false,true][i];
        return broken
          ? <g key={i}><rect x="8" y={y} width="18" height="3" fill={SCI.ink}/><rect x="34" y={y} width="18" height="3" fill={SCI.ink}/></g>
          : <rect key={i} x="8" y={y} width="44" height="3" fill={SCI.ink}/>;
      })}
    </svg>
  );
  if (kind==='genes') return (
    <svg viewBox="0 0 60 60" style={s}>
      {Array.from({length:8}).map((_,i)=>(
        <g key={i} transform={`translate(${30+Math.cos(i*Math.PI/4)*18-4}, ${30+Math.sin(i*Math.PI/4)*18-4})`}>
          <rect width="8" height="8" fill="none" stroke={SCI.ink} strokeWidth="0.8"/>
          {i===2 && <rect width="8" height="8" fill={SCI.orange}/>}
        </g>
      ))}
      <circle cx="30" cy="30" r="3" fill={SCI.ink}/>
    </svg>
  );
  if (kind==='chinese') return (
    <svg viewBox="0 0 60 60" style={s}>
      <circle cx="30" cy="30" r="22" fill="none" stroke={SCI.ink}/>
      <path d="M30,8 A22,22 0 0,1 30,52 A11,11 0 0,1 30,30 A11,11 0 0,0 30,8" fill={SCI.ink}/>
      <circle cx="30" cy="19" r="2" fill={SCI.paper}/>
      <circle cx="30" cy="41" r="2" fill={SCI.ink}/>
    </svg>
  );
  return null;
}

function SciInstruments() {
  const items = [
    { n:'Big Five (OCEAN)', k:'bigfive',  cat:'Psychometric',  note:'120-item IPIP · IRT-scaled',       status:'Primary' },
    { n:'MBTI / 16-Type',   k:'mbti',     cat:'Typological',   note:'Cognitive-function stack',          status:'Primary' },
    { n:'Enneagram',        k:'ennea',    cat:'Typological',   note:'9-type · wings · subtype',          status:'Primary' },
    { n:'Human Design',     k:'hd',       cat:'Synthetic',     note:'Type · strategy · authority',       status:'Included' },
    { n:'Western Astrology',k:'astro',    cat:'Archetypal',    note:'Natal chart · 12H · aspects',       status:'Included' },
    { n:'Numerology',       k:'num',      cat:'Archetypal',    note:'Life path · expression · soul',     status:'Included' },
    { n:'Astrocartography', k:'carto',    cat:'Archetypal',    note:'Planetary line mapping',            status:'Included' },
    { n:'I Ching',          k:'iching',   cat:'Archetypal',    note:'Hexagram resonance',                status:'Included' },
    { n:'Gene Keys',        k:'genes',    cat:'Archetypal',    note:'Shadow · gift · siddhi',            status:'Included' },
    { n:'Chinese Astrology',k:'chinese',  cat:'Archetypal',    note:'Four pillars · element balance',    status:'Included' },
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'48px 56px 18px', display:'flex', justifyContent:'space-between', alignItems:'end' }}>
        <div>
          <MonoLabel>§ 03 · Instruments</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
            Ten instruments<span style={{color:SCI.orange}}>.</span> One subject.
          </h2>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Pill dark>All 10</Pill><Pill>Psychometric</Pill><Pill>Typological</Pill><Pill>Archetypal</Pill>
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', borderTop:`1px solid ${SCI.ink}` }}>
        {items.map((it,i)=>(
          <div key={i} style={{
            padding:'22px 20px 20px',
            borderRight: (i%5)<4?`1px solid ${SCI.ink}`:'none',
            borderBottom: i<5?`1px solid ${SCI.ink}`:'none',
            display:'flex', flexDirection:'column', gap:14, minHeight:220, background: i===0?SCI.tint2:SCI.paper,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <MonoLabel size={9}>№ {String(i+1).padStart(2,'0')}</MonoLabel>
              <MonoLabel size={9} style={{color:i===0?SCI.orange:SCI.ink3}}>{it.status}</MonoLabel>
            </div>
            <div style={{ width:'60%' }}><InstrumentIcon kind={it.k}/></div>
            <div>
              <div style={{ fontFamily:SCI.display, fontSize:20, lineHeight:1.1, marginBottom:4 }}>{it.n}</div>
              <MonoLabel size={9} style={{color:SCI.ink3}}>{it.cat}</MonoLabel>
              <div style={{ fontSize:12, color:SCI.ink2, marginTop:6, lineHeight:1.4 }}>{it.note}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— SECTION: Sample report / convergence ——————
function SciSample() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
      <div style={{ padding:'48px 56px 24px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'end' }}>
        <div>
          <MonoLabel>§ 04 · Sample output</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
            What the ten<br/>agree on.
          </h2>
        </div>
        <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2 }}>
          A convergence map shows where your instruments reinforce each other. The brighter the cell, the more systems independently point to the same trait.
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.15fr 1fr', borderTop:`1px solid ${SCI.ink}` }}>
        {/* LEFT — convergence matrix */}
        <div style={{ padding:'32px 40px', borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
            <MonoLabel>Convergence matrix · sample subject</MonoLabel>
            <MonoLabel size={9} style={{color:SCI.ink3}}>Agreement scale 0.0 – 1.0</MonoLabel>
          </div>
          <ConvergenceMatrix/>
          <div style={{ marginTop:18, display:'flex', gap:16, alignItems:'center', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2 }}>
            <span>Legend:</span>
            {[0.2,0.45,0.7,0.9].map(v=>(
              <span key={v} style={{display:'inline-flex',alignItems:'center',gap:4}}>
                <span style={{width:14,height:14,background:`rgba(198,90,42,${v})`,border:`1px solid ${SCI.ink}`}}/>
                {v.toFixed(1)}
              </span>
            ))}
          </div>
        </div>

        {/* RIGHT — excerpt card */}
        <div style={{ padding:'32px 40px', background:SCI.paper, display:'flex', flexDirection:'column' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
            <MonoLabel>Excerpt · §7 · Work & vocation</MonoLabel>
            <MonoLabel size={9} style={{color:SCI.ink3}}>7 of 10 instruments agree</MonoLabel>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:28, lineHeight:1.15, margin:'6px 0 10px', letterSpacing:-0.2 }}>
            A builder who resents being managed.
          </div>
          <div style={{ fontSize:14, lineHeight:1.6, color:SCI.ink2 }}>
            Your Big Five profile (high Openness, low Agreeableness) and Enneagram 8 both describe someone who trusts their own calibration over hierarchy. MBTI Ni-Te confirms it: you orient by internal model, not instruction. <span style={{background:'rgba(198,90,42,0.18)'}}>The three archetypal instruments independently flag leadership lines — a convergence our engine rates <strong>0.91</strong></span>.
          </div>
          <div style={{ marginTop:'auto', paddingTop:22, display:'flex', justifyContent:'space-between', alignItems:'end' }}>
            <div>
              <MonoLabel size={9} style={{color:SCI.ink3}}>Trend · this trait over last 3 reports</MonoLabel>
              <div style={{ width:180, marginTop:4 }}>
                <Sparkline data={[0.62,0.68,0.71,0.74,0.79,0.83,0.88,0.91]} color={SCI.orange} height={40}/>
              </div>
            </div>
            <SciBtn icon="→">Read full report</SciBtn>
          </div>
        </div>
      </div>
    </div>
  );
}

function ConvergenceMatrix() {
  const axes = ['Big 5','MBTI','Enn','HD','Astro','Num','Carto','IChing','Genes','Chin'];
  // deterministic-ish sample values
  const cells = axes.map((_,i)=> axes.map((_,j)=>{
    if (i===j) return 1;
    const seed = ((i*7+j*3) % 10)/10;
    return Math.min(0.95, 0.22 + seed*0.75);
  }));
  return (
    <div>
      {/* header row */}
      <div style={{ display:'grid', gridTemplateColumns:`72px repeat(${axes.length}, 1fr)`, gap:0 }}>
        <div/>
        {axes.map((a,i)=>(
          <div key={i} style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink2, textAlign:'center', padding:'4px 0', letterSpacing:0.5 }}>{a}</div>
        ))}
      </div>
      {cells.map((row,i)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:`72px repeat(${axes.length}, 1fr)`, gap:0, alignItems:'stretch' }}>
          <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, padding:'0 8px', display:'flex', alignItems:'center', justifyContent:'flex-end', letterSpacing:0.3 }}>{axes[i]}</div>
          {row.map((v,j)=>(
            <div key={j} style={{
              aspectRatio:'1/1',
              background: i===j?SCI.ink:`rgba(198,90,42,${v.toFixed(2)})`,
              border:`1px solid ${SCI.paper}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily:SCI.mono, fontSize:8,
              color: v>0.55||i===j?SCI.paper:SCI.ink2,
            }}>{i===j?'—':v.toFixed(2).replace('0.','.')}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

// —— SECTION: Pricing ——————————————————————
function SciPricing() {
  const tiers = [
    {
      t:'Observation', p:'$0', per:'forever', kicker:'A first look',
      body:'Unlimited access to your Big Five summary and one other instrument of your choice.',
      features:['Big Five percentile','1 additional instrument','Share link'],
      cta:'Start free', dark:false,
    },
    {
      t:'Blueprint', p:'$79', per:'once', kicker:'The complete report',
      body:'All ten instruments, the full convergence map, a long-form editorial report written around your specific agreements.',
      features:['All 10 instruments','Convergence matrix','~8,000-word report','Audio (38 min)','Export PDF'],
      cta:'Get Blueprint', dark:true, recommended:true,
    },
    {
      t:'Inner Circle', p:'$199', per:'year', kicker:'Living document',
      body:'Blueprint + monthly transit re-runs, relationship compatibility, and access to ask your own chart questions.',
      features:['Everything in Blueprint','Relationship pairing','Quarterly transit update','Chat with your chart','Priority support'],
      cta:'Subscribe', dark:false,
    },
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'48px 56px 18px', display:'flex', justifyContent:'space-between', alignItems:'end' }}>
        <div>
          <MonoLabel>§ 05 · Pricing</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
            Three <span style={{fontStyle:'italic'}}>depths</span>.
          </h2>
        </div>
        <MonoLabel size={10} style={{color:SCI.ink3}}>Prices in USD · tax at checkout</MonoLabel>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', borderTop:`1px solid ${SCI.ink}` }}>
        {tiers.map((t,i)=>(
          <div key={i} style={{
            padding:'30px 28px 32px',
            borderRight: i<2?`1px solid ${SCI.ink}`:'none',
            background: t.dark?SCI.ink:SCI.paper,
            color: t.dark?SCI.paper:SCI.ink,
            position:'relative', display:'flex', flexDirection:'column',
          }}>
            {t.recommended && (
              <div style={{
                position:'absolute', top:-1, right:-1,
                background:SCI.orange, color:SCI.paper,
                fontFamily:SCI.mono, fontSize:9, letterSpacing:0.8, textTransform:'uppercase',
                padding:'5px 12px', border:`1px solid ${SCI.ink}`,
              }}>Most chosen</div>
            )}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10 }}>
              <span style={{ fontFamily:SCI.mono, fontSize:11, letterSpacing:1, textTransform:'uppercase', opacity:0.7 }}>Tier {String(i+1).padStart(2,'0')}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:10, opacity:0.6, letterSpacing:0.5 }}>{t.kicker}</span>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:38, lineHeight:1, margin:'6px 0 2px' }}>{t.t}</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:6, margin:'14px 0 4px' }}>
              <span style={{ fontFamily:SCI.display, fontSize:64, lineHeight:0.9, letterSpacing:-1.5 }}>{t.p}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:11, opacity:0.7 }}>/ {t.per}</span>
            </div>
            <div style={{ fontSize:14, lineHeight:1.5, opacity:0.85, margin:'14px 0 18px', maxWidth:320 }}>{t.body}</div>
            <div style={{ borderTop:`1px solid ${t.dark?'rgba(243,239,228,0.2)':SCI.tint}` }}>
              {t.features.map((f,j)=>(
                <div key={j} style={{ display:'flex', gap:10, padding:'9px 0', borderBottom:`1px solid ${t.dark?'rgba(243,239,228,0.15)':SCI.tint}`, fontSize:13 }}>
                  <span style={{fontFamily:SCI.mono, fontSize:11, opacity:0.5, width:22}}>{String(j+1).padStart(2,'0')}</span>
                  {f}
                </div>
              ))}
            </div>
            <div style={{ marginTop:'auto', paddingTop:22 }}>
              <SciBtn w="100%" size="lg" icon="→" primary={!t.dark}
                style={t.dark?{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}:{}}>{t.cta}</SciBtn>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— SECTION: Testimonials / stats —————————
function SciTestimonials() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr' }}>
        {/* Left: stats */}
        <div style={{ padding:'48px 56px', borderRight:`1px solid ${SCI.ink}` }}>
          <MonoLabel>§ 06 · Adoption</MonoLabel>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, marginTop:24, borderTop:`1px solid ${SCI.ink}` }}>
            {[
              { k:'Subjects assessed', v:'184,212', s:'since Q2·2024' },
              { k:'Reports issued',    v:'92,408',  s:'blueprint tier' },
              { k:'Average length',    v:'8,214w',  s:'per report' },
              { k:'Retention · 90d',   v:'71%',     s:'inner circle' },
            ].map((m,i)=>(
              <div key={i} style={{
                padding:'22px 20px',
                borderRight: (i%2)===0?`1px solid ${SCI.ink}`:'none',
                borderBottom: i<2?`1px solid ${SCI.ink}`:'none',
              }}>
                <MonoLabel size={9}>{m.k}</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:42, lineHeight:1, margin:'8px 0 4px', letterSpacing:-0.5 }}>{m.v}</div>
                <MonoLabel size={9} style={{color:SCI.ink3}}>{m.s}</MonoLabel>
              </div>
            ))}
          </div>
          <div style={{ marginTop:28 }}>
            <MonoLabel>Weekly assessments · 2026</MonoLabel>
            <div style={{ marginTop:10 }}><Sparkline data={[22,28,31,29,34,40,38,44,49,52,58,61,63,68,71,74,78,82]} height={56}/></div>
          </div>
        </div>

        {/* Right: editorial pullquote */}
        <div style={{ padding:'48px 56px', background:SCI.ink, color:SCI.paper }}>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>Subject № 41,208</MonoLabel>
          <blockquote style={{
            fontFamily:SCI.display, fontSize:36, lineHeight:1.15, letterSpacing:-0.3,
            margin:'18px 0 24px',
            maxWidth:520,
          }}>
            “It is the first time a ‘personality test’ has told me something I did not already know <span style={{color:SCI.orange, fontStyle:'italic'}}>and</span> that turned out to be correct.”
          </blockquote>
          <div style={{ display:'flex', alignItems:'center', gap:14, fontFamily:SCI.mono, fontSize:11, letterSpacing:0.5, color:'rgba(243,239,228,0.7)' }}>
            <div style={{width:36,height:36,borderRadius:20,background:'rgba(243,239,228,0.1)',border:'1px solid rgba(243,239,228,0.3)'}}/>
            <div>
              <div>M. WALCOTT</div>
              <div style={{fontSize:10,opacity:0.6}}>researcher · BERLIN · BLUEPRINT TIER</div>
            </div>
          </div>
          <div style={{ marginTop:36, paddingTop:20, borderTop:'1px solid rgba(243,239,228,0.15)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
            {[
              ['“Better than three years of therapy intake.”','— R.K.'],
              ['“Finally a chart reading that cites its sources.”','— A.M.'],
            ].map(([q,a],i)=>(
              <div key={i} style={{ fontSize:13, lineHeight:1.5, color:'rgba(243,239,228,0.85)' }}>
                {q}<div style={{fontFamily:SCI.mono, fontSize:10, opacity:0.55, marginTop:4}}>{a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// —— SECTION: FAQ (editorial) ————————————————
function SciFAQ() {
  const qs = [
    ['Is this science or divination?',
     'Both, honestly labeled. The psychometric instruments (Big Five, MBTI, Enneagram) are treated with their actual statistical weight. The archetypal ones are presented as symbolic frameworks, not predictions. We show you where they agree — that is the whole point.'],
    ['What does the 12-minute assessment cover?',
     '120 IPIP-scaled items for Big Five, 48 MBTI-function items, a 36-item Enneagram discriminator, and the birth data needed for the seven archetypal instruments. Total: ~12 minutes, pauseable.'],
    ['Do I need my birth time?',
     'Strongly recommended. Without it, the astrology and Human Design instruments lose their house structure — about 40% of their signal. We will generate a partial report and tell you exactly what is missing.'],
    ['How do you compute the convergence score?',
     'For each trait, we count the instruments that independently flag it, weight them by that instrument’s known reliability, and normalize to 0–1. The math is open, documented in Research.'],
    ['Can I delete my data?',
     'Yes — one button, under Settings. Birth data and answers are deleted within 24 hours; reports are kept only while your subscription is active unless you export them.'],
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'48px 56px 8px' }}>
        <MonoLabel>§ 07 · Frequently asked</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 24px', letterSpacing:-0.6, fontWeight:500 }}>
          What you actually want to ask.
        </h2>
      </div>
      <div style={{ borderTop:`1px solid ${SCI.ink}` }}>
        {qs.map(([q,a],i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'80px 1fr 1.4fr 60px',
            borderBottom:`1px solid ${SCI.ink}`,
            padding:'22px 56px', gap:24,
            background: i===0?SCI.tint2:SCI.paper,
          }}>
            <div style={{ fontFamily:SCI.mono, fontSize:11, color:SCI.ink3, letterSpacing:0.5 }}>№ {String(i+1).padStart(2,'0')}</div>
            <div style={{ fontFamily:SCI.display, fontSize:24, lineHeight:1.15, letterSpacing:-0.2 }}>{q}</div>
            <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2 }}>{a}</div>
            <div style={{ fontFamily:SCI.display, fontSize:26, textAlign:'right', color:SCI.ink }}>{i===0?'−':'+'}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— SECTION: CTA + Footer ————————————————
function SciCTA() {
  return (
    <div style={{ background:SCI.ink, color:SCI.paper, padding:'72px 56px 56px', borderBottom:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'center' }}>
        <div>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>→ Begin</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:72, lineHeight:0.95, margin:'14px 0 0', letterSpacing:-1.2, fontWeight:500 }}>
            Twelve minutes.<br/>
            <span style={{fontStyle:'italic', color:SCI.orange}}>A lifetime of reference.</span>
          </h2>
        </div>
        <div>
          <div style={{ display:'flex', gap:12, marginBottom:20 }}>
            <div style={{ flex:1, height:56, border:'1px solid rgba(243,239,228,0.4)', display:'flex', alignItems:'center', padding:'0 16px', background:'rgba(243,239,228,0.04)' }}>
              <MonoLabel style={{color:'rgba(243,239,228,0.5)', marginRight:14}}>DOB</MonoLabel>
              <input placeholder="1994 / 06 / 12" style={{ flex:1, background:'none', border:'none', outline:'none', color:SCI.paper, fontFamily:SCI.mono, fontSize:14 }}/>
            </div>
            <SciBtn size="lg" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Begin</SciBtn>
          </div>
          <div style={{ fontFamily:SCI.mono, fontSize:10, letterSpacing:0.5, color:'rgba(243,239,228,0.6)' }}>
            NO SIGNUP TO PREVIEW · FREE TIER FOREVER · DELETE ANYTIME
          </div>
        </div>
      </div>
    </div>
  );
}

function SciFooter() {
  const cols = [
    { h:'Product',    items:['Methodology','Instruments','Sample report','Pricing','Research notes'] },
    { h:'Company',    items:['About','Press','Careers','Contact'] },
    { h:'Legal',      items:['Privacy','Terms','Data deletion','Cookies'] },
    { h:'Follow',     items:['Newsletter','Substack','RSS'] },
  ];
  return (
    <div style={{ padding:'40px 56px 28px', background:SCI.paper }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr repeat(4, 1fr)', gap:40, paddingBottom:28, borderBottom:`1px solid ${SCI.ink}` }}>
        <div>
          <div style={{ fontFamily:SCI.display, fontSize:36, lineHeight:1, letterSpacing:-0.5 }}>Persona<span style={{color:SCI.orange}}>.</span></div>
          <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:6, letterSpacing:0.5 }}>SELF-KNOWLEDGE, ENGINEERED · 2026</div>
          <div style={{ fontSize:13, lineHeight:1.55, color:SCI.ink2, marginTop:20, maxWidth:280 }}>
            Ten instruments, one triangulated reading of you. Treated with the statistical weight each of them actually earns.
          </div>
        </div>
        {cols.map((c,i)=>(
          <div key={i}>
            <MonoLabel>{c.h}</MonoLabel>
            <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:8 }}>
              {c.items.map((it,j)=>(<div key={j} style={{fontSize:13, color:SCI.ink2}}>{it}</div>))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ paddingTop:16, display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>
        <span>© 2026 PERSONA LABS · ALL RIGHTS RESERVED</span>
        <span>RENDERED ON WARM CREAM · NO TRACKING COOKIES</span>
        <span>FIG. 01 / END</span>
      </div>
    </div>
  );
}

// ——— Composite desktop page ————————————————
function HomeScienceHiFiDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, overflow:'hidden', border:`1px solid ${SCI.ink}` }}>
      <SciNav/>
      <SciHero/>
      <SciLogoStrip/>
      <SciMethod/>
      <SciInstruments/>
      <SciSample/>
      <SciPricing/>
      <SciTestimonials/>
      <SciFAQ/>
      <SciCTA/>
      <SciFooter/>
    </div>
  );
}

// ——— Mobile version ————————————————
function HomeScienceHiFiMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}`, overflow:'hidden' }}>
      {/* nav */}
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <SciBtn size="sm" primary icon="→">Begin</SciBtn>
      </div>

      {/* meta */}
      <div style={{ padding:'6px 18px', fontFamily:SCI.mono, fontSize:9, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between' }}>
        <span>FIG. 01</span><span>N = 184,212</span>
      </div>

      {/* hero */}
      <div style={{ padding:'32px 20px 28px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 01 · Thesis</MonoLabel>
        <h1 style={{ fontFamily:SCI.display, fontSize:52, lineHeight:0.92, letterSpacing:-0.8, fontWeight:500, margin:'12px 0 14px' }}>
          Self-knowledge, <span style={{fontStyle:'italic'}}>engineered.</span>
        </h1>
        <div style={{ fontSize:15, lineHeight:1.55, color:SCI.ink2, marginBottom:22 }}>
          Ten instruments. One cross-referenced report. We triangulate what validated personality science, archetypal frameworks, and numerical systems each say about you.
        </div>
        <div style={{ height:52, border:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 14px', marginBottom:10 }}>
          <MonoLabel style={{marginRight:10}}>DOB</MonoLabel>
          <span style={{fontFamily:SCI.mono, fontSize:13, color:SCI.ink3}}>1994 / 06 / 12</span>
        </div>
        <SciBtn primary size="lg" w="100%" icon="→">Take 12-min assessment</SciBtn>
      </div>

      {/* live viz */}
      <div style={{ padding:'22px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
          <MonoLabel>Live sample · J.D.</MonoLabel>
          <Pill dark>Enneagram</Pill>
        </div>
        <div style={{ fontFamily:SCI.display, fontSize:30, lineHeight:1, margin:'4px 0 10px' }}>Type 8<span style={{color:SCI.orange}}>.</span></div>
        <div style={{ aspectRatio:'1/1', maxWidth:280, margin:'0 auto 16px' }}>
          <EnneaRadar values={[0.42,0.38,0.48,0.55,0.62,0.58,0.72,0.95,0.61]}/>
        </div>
        <MonoLabel style={{marginBottom:6}}>Big Five</MonoLabel>
        <BigFiveBars values={[88,72,41,63,22]}/>
      </div>

      {/* logo strip */}
      <div style={{ padding:'18px 20px', borderBottom:`1px solid ${SCI.ink}`, overflow:'hidden' }}>
        <MonoLabel style={{marginBottom:10}}>As featured in —</MonoLabel>
        <div style={{ display:'flex', gap:18, fontFamily:SCI.display, fontSize:18, flexWrap:'wrap', color:SCI.ink }}>
          <span>WIRED</span><span style={{fontStyle:'italic'}}>The Atlantic</span><span style={{fontWeight:700}}>NYT</span><span>Nautilus</span>
        </div>
      </div>

      {/* method */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 02 · Method</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:34, lineHeight:1, margin:'10px 0 18px', letterSpacing:-0.5, fontWeight:500 }}>
          A <span style={{fontStyle:'italic'}}>measurement</span> problem, treated as one.
        </h2>
        {['Capture','Triangulate','Interpret'].map((t,i)=>(
          <div key={i} style={{ padding:'14px 0', borderTop:`1px solid ${SCI.tint}` }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <span style={{fontFamily:SCI.mono, fontSize:11, color:SCI.ink3}}>0{i+1}</span>
              <MonoLabel size={9}>{['12-min intake','10 instruments','Editorial'][i]}</MonoLabel>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:22, marginTop:4 }}>{t}</div>
          </div>
        ))}
      </div>

      {/* instruments */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 03 · Instruments</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, margin:'8px 0 14px', letterSpacing:-0.4, fontWeight:500 }}>Ten<span style={{color:SCI.orange}}>.</span></h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:0, border:`1px solid ${SCI.ink}` }}>
          {[
            ['Big Five','bigfive'],['MBTI','mbti'],['Enneagram','ennea'],['Human Design','hd'],
            ['Astrology','astro'],['Numerology','num'],['Astrocarto.','carto'],['I Ching','iching'],
            ['Gene Keys','genes'],['Chinese','chinese']
          ].map(([n,k],i)=>(
            <div key={i} style={{
              padding:'14px 12px',
              borderRight: (i%2)===0?`1px solid ${SCI.ink}`:'none',
              borderBottom: i<8?`1px solid ${SCI.ink}`:'none',
              display:'flex', alignItems:'center', gap:10,
            }}>
              <div style={{ width:34, flexShrink:0 }}><InstrumentIcon kind={k}/></div>
              <div style={{ fontSize:12, fontWeight:500 }}>{n}</div>
            </div>
          ))}
        </div>
      </div>

      {/* sample quote */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
        <MonoLabel>§ 04 · Sample</MonoLabel>
        <div style={{ fontFamily:SCI.display, fontSize:26, lineHeight:1.1, margin:'10px 0 12px' }}>
          A builder who resents being managed.
        </div>
        <div style={{ fontSize:13, lineHeight:1.55, color:SCI.ink2 }}>
          Big Five (high O, low A) + Enneagram 8 + MBTI Ni-Te all describe the same person. Convergence: <strong>0.91</strong>.
        </div>
      </div>

      {/* pricing */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 05 · Pricing</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, margin:'8px 0 14px', letterSpacing:-0.4, fontWeight:500 }}>Three <span style={{fontStyle:'italic'}}>depths</span>.</h2>
        {[
          { t:'Observation', p:'$0', per:'forever' },
          { t:'Blueprint',   p:'$79', per:'once', dark:true },
          { t:'Inner Circle',p:'$199', per:'year' },
        ].map((t,i)=>(
          <div key={i} style={{
            padding:'16px 14px', marginBottom:10,
            background: t.dark?SCI.ink:SCI.paper,
            color: t.dark?SCI.paper:SCI.ink,
            border:`1px solid ${SCI.ink}`,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <div style={{ fontFamily:SCI.display, fontSize:22 }}>{t.t}</div>
              <div>
                <span style={{ fontFamily:SCI.display, fontSize:28, letterSpacing:-0.5 }}>{t.p}</span>
                <span style={{ fontFamily:SCI.mono, fontSize:10, marginLeft:4, opacity:0.7 }}>/ {t.per}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* testimonial */}
      <div style={{ padding:'28px 20px', background:SCI.ink, color:SCI.paper }}>
        <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>Subject № 41,208</MonoLabel>
        <blockquote style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.2, margin:'12px 0 14px' }}>
          “The first ‘personality test’ that told me something I didn't know <span style={{color:SCI.orange, fontStyle:'italic'}}>and</span> was right.”
        </blockquote>
        <div style={{ fontFamily:SCI.mono, fontSize:10, opacity:0.6 }}>— M. WALCOTT · BERLIN</div>
      </div>

      {/* CTA */}
      <div style={{ padding:'32px 20px', background:SCI.ink, color:SCI.paper, borderTop:'1px solid rgba(243,239,228,0.15)' }}>
        <h2 style={{ fontFamily:SCI.display, fontSize:36, lineHeight:0.95, margin:'0 0 16px', letterSpacing:-0.6, fontWeight:500 }}>
          Twelve minutes. <span style={{fontStyle:'italic', color:SCI.orange}}>A lifetime of reference.</span>
        </h2>
        <SciBtn w="100%" size="lg" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Begin assessment</SciBtn>
      </div>

      {/* footer */}
      <div style={{ padding:'20px', background:SCI.paper, fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, display:'flex', justifyContent:'space-between' }}>
        <span>© 2026 PERSONA</span><span>FIG. 01 / END</span>
      </div>
    </div>
  );
}

// —— Shared input field primitive used by extras ————————
function FieldDesktop({ label, value, mono, placeholder }) {
  return (
    <div style={{ border:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'8px 14px 2px' }}>
        <span style={{ fontFamily:SCI.mono, fontSize:9, letterSpacing:1, textTransform:'uppercase', color:SCI.ink3 }}>{label}</span>
      </div>
      <div style={{ padding:'0 14px 12px', fontFamily: mono?SCI.mono:SCI.body, fontSize:14, color: value?SCI.ink:SCI.ink3 }}>
        {value || placeholder || '—'}
      </div>
    </div>
  );
}

Object.assign(window, {
  SCI, MonoLabel, Pill, SciBtn, Rule,
  BigFiveBars, EnneaRadar, MBTIStack, Sparkline, HeatStrip,
  FieldDesktop,
  SciNav, SciHero,
  HomeScienceHiFiDesktop, HomeScienceHiFiMobile,
});
