
const { useState } = React;
const { SectionHeader, useReveal } = window;

/* ── Pareto ── */
function ParetoSection() {
  const [active, setActive] = useState(1);
  const configs = [
    {
      id:0, name:'VD-Focused', tag:'Security-critical pipelines',
      scaL:0.3, vdL:1.0, vdF1:0.717, scaF1:0.329, vdPct:98, scaPct:33,
      accent:'var(--blue)',
      pros:['Retains 98% of solo VD performance','Adds SCA as a bonus capability at no inference cost','Best for CI/CD security gates and CVE scanners'],
      use:'Ideal when vulnerability detection is the primary concern — security review tools, compliance pipelines, or automated code auditing.',
      code:`model.add_weighted_adapter(\n  ["sca", "vd"],\n  [0.3, 1.0],\n  "merged",\n  combination_type="linear"\n)`,
    },
    {
      id:1, name:'Balanced', tag:'General-purpose code analysis',
      scaL:0.5, vdL:0.3, vdF1:0.678, scaF1:0.788, vdPct:93, scaPct:79,
      accent:'var(--accent)',
      pros:['93% of solo VD performance','79% of solo SCA performance','Best overall multi-task balance — single inference pass'],
      use:'Recommended for most deployments. A single model handles both security scanning and code quality checks simultaneously.',
      code:`model.add_weighted_adapter(\n  ["sca", "vd"],\n  [0.5, 0.3],\n  "merged",\n  combination_type="linear"\n)`,
    },
    {
      id:2, name:'SCA-Focused', tag:'Code quality tooling',
      scaL:1.0, vdL:0.3, vdF1:0.621, scaF1:0.907, vdPct:85, scaPct:91,
      accent:'var(--green)',
      pros:['Retains 91% of solo SCA performance','Adds basic vulnerability awareness','Best for linters, formatters, and style enforcement'],
      use:'Ideal for developer tooling focused on code quality — complexity warnings, naming conventions, resource management — with opportunistic vulnerability flagging.',
      code:`model.add_weighted_adapter(\n  ["sca", "vd"],\n  [1.0, 0.3],\n  "merged",\n  combination_type="linear"\n)`,
    },
  ];

  const c = configs[active];
  const ref = useReveal();

  return (
    <section id="pareto" className="sec">
      <div className="wrap">
        <SectionHeader label="§7 — Pareto Analysis" title="Three Optimal Deployment Configurations"
          desc="No single merged configuration dominates all others. These three Pareto-optimal points span the practical VD–SCA performance trade-off space." />

        <div ref={ref} className="reveal" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:1, border:'1px solid var(--bdr)' }} className="mobile-stack">
          {/* Selector */}
          <div style={{ borderRight:'1px solid var(--bdr)' }}>
            {configs.map(cfg => (
              <div key={cfg.id}
                onClick={() => setActive(cfg.id)}
                style={{
                  padding:'24px 28px', cursor:'pointer',
                  borderBottom: cfg.id < 2 ? '1px solid var(--bdr)' : 'none',
                  background: active===cfg.id ? 'var(--card)' : 'transparent',
                  borderLeft: active===cfg.id ? `2px solid ${cfg.accent}` : '2px solid transparent',
                  transition:'all 0.2s',
                }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: active===cfg.id ? 16 : 0 }}>
                  <div>
                    <div style={{ fontWeight:600, fontSize:15, color: active===cfg.id ? 'var(--t1)' : 'var(--t2)', marginBottom:3 }}>{cfg.name}</div>
                    <div style={{ fontFamily:'var(--fm)', fontSize:10, color:'var(--t3)', letterSpacing:'0.08em' }}>{cfg.tag}</div>
                  </div>
                  <div style={{ textAlign:'right' }}>
                    <div style={{ fontFamily:'var(--fm)', fontSize:10, color:'var(--t3)' }}>λSCA={cfg.scaL} &nbsp;·&nbsp; λVD={cfg.vdL}</div>
                  </div>
                </div>
                {active===cfg.id && (
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, animation:'fade-up 0.25s ease both' }}>
                    {[
                      { l:'VD F1',  v:cfg.vdF1.toFixed(3),  pct:cfg.vdPct,  c:'var(--blue)' },
                      { l:'SCA F1', v:cfg.scaF1.toFixed(3), pct:cfg.scaPct, c:'var(--green)' },
                    ].map(m=>(
                      <div key={m.l} style={{ padding:'12px 14px', border:'1px solid var(--bdr)', background:'rgba(255,255,255,0.02)' }}>
                        <div style={{ fontFamily:'var(--fm)', fontSize:9, color:'var(--t3)', marginBottom:5 }}>{m.l}</div>
                        <div style={{ fontFamily:'var(--fm)', fontSize:20, fontWeight:700, color:m.c }}>{m.v}</div>
                        <div style={{ height:3, borderRadius:0, background:'rgba(255,255,255,0.06)', marginTop:8 }}>
                          <div style={{ width:`${m.pct}%`, height:'100%', background:m.c, transition:'width 0.5s ease' }} />
                        </div>
                        <div style={{ fontFamily:'var(--fm)', fontSize:9, color:'var(--t3)', marginTop:4 }}>{m.pct}% of solo</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Detail */}
          <div style={{ padding:'32px 28px', background:'var(--card)', transition:'all 0.3s' }}>
            <div style={{ fontFamily:'var(--fm)', fontSize:10, color:'var(--t3)', letterSpacing:'0.14em', marginBottom:14 }}>RECOMMENDED FOR</div>
            <p style={{ fontSize:15, color:'var(--t2)', lineHeight:1.78, marginBottom:24, borderLeft:'2px solid var(--accent)', paddingLeft:18, fontStyle:'italic' }}>
              {c.use}
            </p>
            <div style={{ fontFamily:'var(--fm)', fontSize:10, color:'var(--t3)', letterSpacing:'0.14em', marginBottom:14 }}>ADVANTAGES</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:24 }}>
              {c.pros.map(p=>(
                <div key={p} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                  <span style={{ color:c.accent, flexShrink:0, marginTop:2 }}>–</span>
                  <span style={{ fontSize:13, color:'var(--t2)', lineHeight:1.6 }}>{p}</span>
                </div>
              ))}
            </div>
            <div style={{ fontFamily:'var(--fm)', fontSize:10, color:'var(--t3)', letterSpacing:'0.14em', marginBottom:10 }}>PEFT SNIPPET</div>
            <pre style={{
              fontFamily:'var(--fm)', fontSize:11, color:'var(--t2)',
              background:'var(--bg)', border:'1px solid var(--bdr)',
              padding:'14px 16px', lineHeight:1.75, overflowX:'auto',
            }}>{c.code}</pre>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Key Findings ── */
function ContributionsSection() {
  const ref = useReveal();
  const findings = [
    { n:'01', title:'Merging Is Viable', body:'Post-hoc LoRA adapter merging works for code analysis. Merged configurations retain up to 98% VD and 91% SCA performance in a single inference pass.' },
    { n:'02', title:'Asymmetric Interference', body:'VD is 4× more sensitive to SCA adapter weight than vice versa. Binary classification requires more precise parameter specialisation than structured generation.' },
    { n:'03', title:'Avoid Equal High Lambdas', body:'λSCA = λVD = 1.0 is catastrophic. Unnormalised merging at twice the natural magnitude destroys both tasks. Always bound λ < 1.0 or normalise.' },
    { n:'04', title:'Data Quality First', body:'PrimeVul vs. BigVul produced +0.249 F1 improvement — larger than Qwen-3B→Llama-8B model scaling (+0.078). Fix your data before scaling your model.' },
    { n:'05', title:'Three Pareto Configs', body:'VD-focused (λSCA=0.3, λVD=1.0), Balanced (λSCA=0.5, λVD=0.3), and SCA-focused (λSCA=1.0, λVD=0.3) provide actionable deployment options.' },
  ];
  return (
    <section className="sec sec-alt">
      <div className="wrap">
        <SectionHeader label="§8 — Key Findings" title="What This Means in Practice"
          desc="Five distilled insights from 19 configurations, 13,321 test samples, and 8–10 hours of grid search on a single consumer GPU." />
        <div ref={ref} className="reveal" style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:1, border:'1px solid var(--bdr)' }}>
          {findings.map((f,i)=>(
            <div key={f.n} style={{
              padding:'24px 20px',
              background:'var(--card)',
              borderRight: i<4 ? '1px solid var(--bdr)' : 'none',
              borderTop:'2px solid var(--accent)',
            }}>
              <div style={{ fontFamily:'var(--fm)', fontSize:20, fontWeight:800, color:'var(--t3)', marginBottom:14 }}>{f.n}</div>
              <div style={{ fontWeight:600, fontSize:13, color:'var(--t1)', marginBottom:10, lineHeight:1.4 }}>{f.title}</div>
              <p style={{ fontSize:12, color:'var(--t2)', lineHeight:1.7 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Future Work ── */
function FutureWorkSection() {
  const ref = useReveal();
  const items = [
    { n:'01', title:'Multi-seed Validation',        prio:'HIGH', desc:'Repeat all experiments across 5+ random seeds. Report BCa bootstrap CIs alongside point estimates to separate evaluation variance from training variance.' },
    { n:'02', title:'Advanced Merging Methods',     prio:'HIGH', desc:'Compare unnormalised linear combination against TIES-Merging (sign-conflict resolution) and DARE (random pruning). Add normalised baseline (λ normalised to sum=1).' },
    { n:'03', title:'Finer Lambda Resolution',      prio:'MED',  desc:'Expand to 0.1 increments — especially in the 0.7–1.0 range where steepest performance cliffs occur. May reveal additional Pareto-optimal configurations.' },
    { n:'04', title:'Real-world SCA Evaluation',    prio:'MED',  desc:'Validate SCA adapter against Semgrep, Pylint, or Bandit on open-source codebases. The 0.994 F1 is likely inflated by template overlap in synthetic data.' },
    { n:'05', title:'Zero/Few-shot Baselines',      prio:'MED',  desc:'Evaluate the base model with task-specific prompting (no LoRA) to isolate the adapter contribution: task formatting vs. genuine task knowledge.' },
    { n:'06', title:'Longer Context & Class Balance',prio:'LOW', desc:'Evaluate with MAX_SEQ=1024+ on larger GPUs. Test VD on naturally imbalanced datasets — real-world vulnerability prevalence is typically below 5%.' },
    { n:'07', title:'Model Scale & Rank Ablation',  prio:'LOW',  desc:'Test on 3B and 70B+ models to determine whether interference patterns are scale-dependent. Vary LoRA rank to understand its interaction with mergeability.' },
    { n:'08', title:'Per-layer Selective Merging',  prio:'LOW',  desc:'Use adapter similarity analysis (CKA, cosine distance) to guide layer-wise coefficient selection rather than uniform lambdas across all 32 transformer layers.' },
  ];
  const pc = { HIGH:'var(--red)', MED:'var(--accent)', LOW:'var(--t3)' };

  return (
    <section id="future" className="sec">
      <div className="wrap">
        <SectionHeader label="§9 — Future Work" title="Eight Research Directions"
          desc="Limitations identified in this study point directly to the experiments needed to validate and extend these findings." />
        <div ref={ref} className="reveal" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:1, border:'1px solid var(--bdr)' }}>
          {items.map((it,i)=>(
            <div key={it.n} style={{
              padding:'22px 20px', background:'var(--card)',
              borderRight: (i+1)%4!==0 ? '1px solid var(--bdr)' : 'none',
              borderBottom: i<4 ? '1px solid var(--bdr)' : 'none',
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:12 }}>
                <span style={{ fontFamily:'var(--fm)', fontSize:11, color:'var(--t3)' }}>{it.n}</span>
                <span style={{ fontFamily:'var(--fm)', fontSize:9, color:pc[it.prio], letterSpacing:'0.1em' }}>{it.prio}</span>
              </div>
              <div style={{ fontWeight:600, fontSize:13, color:'var(--t1)', marginBottom:8, lineHeight:1.35 }}>{it.title}</div>
              <p style={{ fontSize:12, color:'var(--t2)', lineHeight:1.65 }}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── References ── */
function ReferencesSection() {
  const [open, setOpen] = useState(false);
  const refs = [
    '[1] E. J. Hu et al. LoRA: Low-rank adaptation of large language models. ICLR, 2022.',
    '[2] T. Dettmers et al. QLoRA: Efficient finetuning of quantized LLMs. NeurIPS, 2023.',
    '[3] M. Wortsman et al. Model soups: Averaging weights of multiple fine-tuned models improves accuracy. ICML, 2022.',
    '[4] G. Ilharco et al. Editing models with task arithmetic. ICLR, 2023.',
    '[5] P. Yadav et al. TIES-Merging: Resolving interference when merging models. NeurIPS, 2023.',
    '[6] L. Yu et al. Language models are Super Mario: Absorbing abilities from homologous models. ICML, 2024.',
    '[7] C. Huang et al. LoRAHub: Efficient cross-task generalization via dynamic LoRA composition. arXiv:2307.13269, 2023.',
    '[8] J. Pfeiffer et al. AdapterFusion: Non-destructive task composition for transfer learning. EACL, 2021.',
    '[9] Z. Feng et al. CodeBERT: A pre-trained model for programming and natural languages. EMNLP, 2020.',
    '[10] Y. Wang et al. CodeT5: Identifier-aware unified pre-trained encoder-decoder models. EMNLP, 2021.',
    '[11] R. Li et al. StarCoder: May the source be with you! arXiv:2305.06161, 2023.',
    '[12] Z. Luo et al. WizardCoder: Empowering code LLMs with evol-instruct. ICLR, 2024.',
    '[13] B. Rozière et al. Code Llama: Open foundation models for code. arXiv:2308.12950, 2023.',
    '[14] Meta AI. The Llama 3 herd of models. arXiv:2407.21783, 2024.',
    '[15] M. Fu et al. LineVul: A transformer-based line-level vulnerability prediction. MSR, 2022.',
    '[16] S. Chakraborty et al. Deep learning based vulnerability detection: Are we there yet? IEEE TSE, 2022.',
    '[17] Y. Zhou et al. Devign: Effective vulnerability identification via graph neural networks. NeurIPS, 2019.',
    '[18] J. Fan et al. A C/C++ code vulnerability dataset with code changes and CVE summaries. MSR, 2020.',
    '[19] Y. Ding et al. Vulnerability detection with code language models: How far are we? arXiv:2403.18624, 2024.',
    '[20] R. Croft et al. Data quality for software vulnerability datasets. ICSE, 2023.',
    '[21] M. Ahmed et al. SecVulEval: Benchmarking LLMs for real-world C/C++ vulnerability detection. arXiv:2505.19828, 2025.',
    '[22] Q. Zhang et al. A survey on LLMs for software engineering. arXiv:2312.15223, 2024.',
    '[23] M. Chen et al. Evaluating large language models trained on code. arXiv:2107.03374, 2021.',
    '[24] C. S. Xia et al. Automated program repair in the era of large pre-trained LLMs. ICSE, 2023.',
    '[25] N. Houlsby et al. Parameter-efficient transfer learning for NLP. ICML, 2019.',
    '[26] X. L. Li & P. Liang. Prefix-tuning: Optimizing continuous prompts for generation. ACL, 2021.',
    '[27] B. Efron & R. J. Tibshirani. An Introduction to the Bootstrap. Chapman and Hall/CRC, 1993.',
    '[28] P. Koehn. Statistical significance tests for machine translation evaluation. EMNLP, 2004.',
  ];
  const shown = open ? refs : refs.slice(0,6);

  return (
    <section className="sec sec-alt">
      <div className="wrap">
        <SectionHeader label="§10 — References" title="28 Citations" />
        <div className="glass" style={{ padding:'0' }}>
          {shown.map((r,i)=>(
            <div key={i} style={{
              padding:'13px 24px', fontFamily:'var(--fm)', fontSize:12,
              color:'var(--t2)', lineHeight:1.65,
              borderBottom: i < shown.length-1 ? '1px solid var(--bdr)' : 'none',
            }}>{r}</div>
          ))}
          <div style={{ padding:'16px 24px', borderTop:'1px solid var(--bdr)' }}>
            <button onClick={()=>setOpen(!open)} style={{
              fontFamily:'var(--fm)', fontSize:11, color:'var(--accent)',
              background:'none', border:'none', cursor:'pointer',
              letterSpacing:'0.08em', transition:'color 0.2s',
            }}
              onMouseEnter={e=>e.target.style.color='var(--accent-h)'}
              onMouseLeave={e=>e.target.style.color='var(--accent)'}
            >
              {open ? '↑ Show fewer' : `↓ Show all ${refs.length} references`}
            </button>
          </div>
        </div>

        {/* Footer */}
        <div style={{ marginTop:72, paddingTop:36, borderTop:'1px solid var(--bdr)', display:'flex', justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:24 }}>
          <div>
            <div style={{ fontFamily:'var(--fm)', fontSize:11, color:'var(--accent)', marginBottom:8, letterSpacing:'0.08em' }}>LoRA·MERGE</div>
            <div style={{ fontSize:13, color:'var(--t2)', marginBottom:4 }}>Sankalp Pathak & Sanjay Garg — Jaypee University of Engineering and Technology — 2026</div>
            <div style={{ fontFamily:'var(--fm)', fontSize:10, color:'var(--t3)', letterSpacing:'0.05em' }}>DOI: 10.21203/rs.3.rs-9189872/v1 &nbsp;·&nbsp; CC BY 4.0 &nbsp;·&nbsp; Llama-3.1-8B-Instruct &nbsp;·&nbsp; LoRA r=16</div>
          </div>
          <div style={{ display:'flex', gap:16, alignItems:'center' }}>
            <a href="#abstract" style={{ fontFamily:'var(--fm)', fontSize:11, color:'var(--t2)', letterSpacing:'0.06em', transition:'color 0.2s' }}
              onMouseEnter={e=>e.target.style.color='var(--accent)'}
              onMouseLeave={e=>e.target.style.color='var(--t2)'}>↑ Top</a>
            <a href="https://doi.org/10.21203/rs.3.rs-9189872/v1" target="_blank" style={{ fontFamily:'var(--fm)', fontSize:11, color:'var(--t2)', letterSpacing:'0.06em', transition:'color 0.2s' }}
              onMouseEnter={e=>e.target.style.color='var(--accent)'}
              onMouseLeave={e=>e.target.style.color='var(--t2)'}>Read Paper ↗</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ParetoSection, ContributionsSection, FutureWorkSection, ReferencesSection });
