const { useState, useEffect, useRef } = React;

/* ── Shared utilities ── */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.classList.add('reveal');
    const obs = new IntersectionObserver(
      ([entry]) => {if (entry.isIntersecting) el.classList.add('in');},
      { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

function SectionHeader({ label, title, desc = '' }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="reveal" style={{ marginBottom: 60 }}>
      {label &&
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
          <span className="sec-label">{label}</span>
        </div>
      }
      <div className="rule" style={{ marginBottom: 28 }} />
      <h2 className="sec-title">{title}</h2>
      {desc && <p className="sec-desc">{desc}</p>}
    </div>);

}

/* ── Nav ── */
function LoRANav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      background: scrolled ? 'rgba(9,9,15,0.96)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--bdr)' : 'none',
      transition: 'all 0.4s ease',
      height: 52,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 52px'
    }}>
      <span style={{ fontFamily: 'var(--fm)', fontSize: 11, letterSpacing: '0.12em', color: "rgb(255, 255, 255)" }}>
        LoRA·MERGE
      </span>

      <div style={{ display: 'flex', gap: 28 }} className="mobile-hide">
        {[
        { l: 'Abstract', h: '#abstract' },
        { l: 'Method', h: '#methodology' },
        { l: 'Results', h: '#results' },
        { l: 'Deployment', h: '#pareto' },
        { l: 'Future Work', h: '#future' }].
        map(({ l, h }) =>
        <a key={h} href={h}
        style={{ fontFamily: 'var(--fm)', fontSize: 11, letterSpacing: '0.06em', whiteSpace: 'nowrap', transition: 'color 0.2s', color: "rgb(255, 255, 255)" }}
        onMouseEnter={(e) => e.target.style.color = 'var(--accent)'}
        onMouseLeave={(e) => e.target.style.color = 'var(--t2)'}>
          {l}</a>
        )}
      </div>

      <a href="https://doi.org/10.21203/rs.3.rs-9189872/v1" target="_blank"
      style={{ fontFamily: 'var(--fm)', fontSize: 10, letterSpacing: '0.08em', transition: 'color 0.2s', color: "rgb(255, 255, 255)" }}
      onMouseEnter={(e) => e.target.style.color = 'var(--accent)'}
      onMouseLeave={(e) => e.target.style.color = 'var(--t3)'}>
        DOI ↗</a>
    </nav>);

}

/* ── Hero ── */
function LoRAHero() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setVisible(true), 80);
    return () => clearTimeout(t);
  }, []);

  const rule = <div className="rule" style={{ marginBottom: 32 }} />;

  return (
    <div style={{
      minHeight: '100vh',
      background: 'radial-gradient(ellipse 100% 65% at 50% 30%, #0d0f24 0%, #09090f 68%)',
      display: 'flex',
      alignItems: 'center', justifyContent: 'center',
      padding: '88px 24px 80px',
      position: 'relative', fontFamily: "Arial", textAlign: "left", flexDirection: "column"
    }}>
      {/* Dot texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px)',
        backgroundSize: '44px 44px', pointerEvents: 'none'
      }} />

      {/* Top amber accent bar */}
      <div style={{
        position: 'absolute', top: 0, left: '8%', right: '8%', height: '2px',
        background: 'linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent)',
        opacity: 0.45
      }} />

      {/* Content */}
      <div style={{
        position: 'relative', zIndex: 1, maxWidth: 760, width: '100%',
        opacity: visible ? 1 : 0,
        transform: visible ? 'none' : 'translateY(18px)',
        transition: 'opacity 1.1s ease, transform 1.1s ease'
      }}>
        {/* Pre-title */}
        <div style={{
          fontSize: 10,
          letterSpacing: '0.22em',
          textTransform: 'uppercase', marginBottom: 24, fontFamily: "Helvetica", color: "rgb(255, 255, 255)"
        }}>
          Research Article &nbsp;·&nbsp; Preprint &nbsp;·&nbsp; April 16, 2026
        </div>

        {rule}

        {/* Title */}
        <h1 style={{
          fontFamily: 'var(--fh)', fontWeight: 800,
          fontSize: 'clamp(36px, 5.5vw, 70px)',
          lineHeight: 1.07, letterSpacing: '-0.035em',
          marginBottom: 18, color: "rgb(255, 255, 255)"
        }}>
          Merging LoRA Adapters<br />
          <span style={{ fontWeight: 400, fontSize: '0.82em', color: "rgb(255, 255, 255)" }}>
            for Multi-Task Code Analysis
          </span>
        </h1>

        <p style={{
          fontFamily: 'var(--fb)', fontSize: 17, fontStyle: 'italic',
          lineHeight: 1.65, marginBottom: 32, color: "rgb(255, 255, 255)"
        }}>
          An Empirical Study of Linear Combination and Task Interference
        </p>

        {rule}

        {/* Authors */}
        <p style={{ fontSize: 15, fontWeight: 500, marginBottom: 6, color: "rgb(255, 255, 255)" }}>Sankalp Pathak 

        </p>
        <p style={{ fontSize: 14, color: 'var(--t2)', marginBottom: 8 }}>

        </p>
        <p style={{ fontFamily: 'var(--fm)', fontSize: 10, letterSpacing: '0.06em', marginBottom: 32, color: "rgb(255, 255, 255)" }}>
          DOI: 10.21203/rs.3.rs-9189872/v1 &nbsp;·&nbsp; CC BY 4.0 &nbsp;·&nbsp; pathaksankalp04@gmail.com
        </p>

        {rule}

        {/* Pullquote */}
        <blockquote style={{
          borderLeft: '2px solid var(--accent)',
          paddingLeft: 22, marginBottom: 32,
          fontFamily: 'var(--fb)', fontStyle: 'italic',
          fontSize: 16, lineHeight: 1.82, color: "rgb(255, 255, 255)"
        }}>
          "Merged adapters retain up to 98% of solo VD performance and 91% of solo SCA performance
          simultaneously, with a single inference pass. Dataset quality — not model capacity — is
          the primary bottleneck for vulnerability detection."
        </blockquote>

        {rule}

        {/* Jump links */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--fm)', fontSize: 9, letterSpacing: '0.15em', color: "rgb(255, 255, 255)" }}>SECTIONS</span>
          {[
          { l: 'Abstract', h: '#abstract' },
          { l: 'Methodology', h: '#methodology' },
          { l: 'Results', h: '#results' },
          { l: 'Deployment', h: '#pareto' },
          { l: 'Future Work', h: '#future' }].
          map(({ l, h }) =>
          <a key={h} href={h}
          style={{ fontFamily: 'var(--fm)', fontSize: 11, letterSpacing: '0.06em', transition: 'color 0.2s', color: "rgb(255, 255, 255)" }}
          onMouseEnter={(e) => e.target.style.color = 'var(--accent)'}
          onMouseLeave={(e) => e.target.style.color = 'var(--t2)'}>
            {l}</a>
          )}
        </div>
      </div>
    </div>);

}

Object.assign(window, { LoRANav, LoRAHero, SectionHeader, useReveal });