// Secondary components: through-line + SAE-LoRA viz, Cohere, education, tech, writing, contact
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

// ——— Research through-line ———

function Throughline() {
  return (
    <div className="throughline">
      <div className="tl-prose">
        <p>
          There is a single thread running through everything I've built: <strong>how information is represented
          to and within neural networks determines performance more than model scale or training compute.</strong>
        </p>
        <p>
          Whether it's SAE features for retrieval, board state for game-playing, or data format for comprehension —
          representation is the bottleneck.
        </p>
      </div>
      <ol className="tl-list">
        {window.THROUGHLINE.map((t, i) => (
          <li key={i} className="tl-item">
            <span className="tl-year mono">{t.year}</span>
            <div className="tl-body">
              <h4>{t.title}</h4>
              <p>{t.note}</p>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

// ——— SAE-LoRA interactive diagram ———

function SaeLoRAViz() {
  const [mode, setMode] = useState2("after");

  const FEATURES = [
    { id: "ws",    label: "whitespace",             before: 0.92, after: 0.11, cat: "generic" },
    { id: "uint",  label: "uint keyword",           before: 0.88, after: 0.18, cat: "generic" },
    { id: "pub",   label: "public modifier",        before: 0.83, after: 0.22, cat: "generic" },
    { id: "cmt",   label: "comments",               before: 0.79, after: 0.14, cat: "generic" },
    { id: "reent", label: "reentrancy pattern",     before: 0.12, after: 0.94, cat: "sec" },
    { id: "call",  label: "low-level call{value}",  before: 0.21, after: 0.91, cat: "sec" },
    { id: "acc",   label: "access-control gap",     before: 0.09, after: 0.87, cat: "sec" },
    { id: "int",   label: "integer overflow",       before: 0.15, after: 0.83, cat: "sec" },
    { id: "oracle",label: "oracle manipulation",    before: 0.07, after: 0.79, cat: "sec" }
  ];

  const r = mode === "before" ? 0.024 : 0.901;
  const isAfter = mode === "after";

  return (
    <div className="lora2">
      {/* —— Toggle —— */}
      <div className="lora2-toggle">
        <button
          className={`lora2-pill ${!isAfter ? "active" : ""}`}
          onClick={() => setMode("before")}
        >
          <span className="lora2-pill-num mono">01</span>
          <span className="lora2-pill-label">Frozen SAE</span>
          <span className="lora2-pill-sub mono">baseline</span>
        </button>
        <button
          className={`lora2-pill ${isAfter ? "active" : ""}`}
          onClick={() => setMode("after")}
        >
          <span className="lora2-pill-num mono">02</span>
          <span className="lora2-pill-label">SAE-LoRA</span>
          <span className="lora2-pill-sub mono">ours</span>
        </button>
      </div>

      {/* —— Big metric banner —— */}
      <div className="lora2-metric">
        <div className="lora2-metric-label mono">R@10 · 232k smart-contract corpus</div>
        <div className="lora2-metric-row">
          <div className="lora2-metric-num">{r.toFixed(3)}</div>
          <div className="lora2-metric-scale">
            <div className="lora2-metric-track">
              <div className="lora2-metric-fill" style={{ width: `${r * 100}%` }} />
              <div className="lora2-metric-max" style={{ left: "90.1%" }} title="SAE-LoRA ceiling">
                <span className="mono small">0.901</span>
              </div>
              <div className="lora2-metric-min" style={{ left: "2.4%" }} title="baseline">
                <span className="mono small">0.024</span>
              </div>
            </div>
            <div className="lora2-metric-lift">
              <span className="mono small subtle">{isAfter ? "37.6× over baseline" : "37.6× below ours"}</span>
            </div>
          </div>
        </div>
      </div>

      {/* —— Two-column body —— */}
      <div className="lora2-body">
        {/* Input column */}
        <section className="lora2-panel">
          <header className="lora2-panel-head">
            <span className="lora2-step mono">A</span>
            <span className="lora2-panel-title">Input · Solidity</span>
          </header>
          <pre className="lora2-code">
{`function withdraw() public {
  uint bal = balances[msg.sender];
  (bool ok,) = msg.sender.call{
    value: bal
  }("");
  require(ok);
  balances[msg.sender] = 0;
}`}
          </pre>
          <div className="lora2-flow">
            <div className="lora2-flow-row">
              <span className="lora2-flow-tag mono">01</span>
              <span>Qwen2.5-Coder · L19 hidden</span>
            </div>
            <div className="lora2-flow-row">
              <span className="lora2-flow-tag mono">02</span>
              <span>SAE encoder · width 16,384</span>
            </div>
            <div className="lora2-flow-row">
              <span className="lora2-flow-tag mono">03</span>
              <span>TopK · IDF · L2-norm</span>
            </div>
          </div>
          <div className="lora2-formula">
            <div className="mono subtle small">SAE-LoRA update</div>
            <div className="lora2-formula-eq mono">
              W<sub>eff</sub> = W<sub>e</sub> + AB
            </div>
            <div className="lora2-formula-note mono small subtle">
              A ∈ ℝ<sup>1536×256</sup> &nbsp;·&nbsp; B ∈ ℝ<sup>256×16384</sup><br/>
              +4.6M params · ~0.3% of backbone · decoder frozen
            </div>
          </div>
        </section>

        {/* Features column */}
        <section className="lora2-panel">
          <header className="lora2-panel-head">
            <span className="lora2-step mono">B</span>
            <span className="lora2-panel-title">Active features · top-9</span>
            <span className="lora2-legend">
              <span className="lora2-dot lora2-dot-generic" />generic
              <span className="lora2-dot lora2-dot-sec" />security
            </span>
          </header>
          <div className="lora2-features">
            {FEATURES.map(f => {
              const v = mode === "before" ? f.before : f.after;
              return (
                <div key={f.id} className={`lora2-feat cat-${f.cat}`}>
                  <div className="lora2-feat-label mono">{f.label}</div>
                  <div className="lora2-feat-track">
                    <div className="lora2-feat-fill" style={{ width: `${v * 100}%` }} />
                  </div>
                  <div className="lora2-feat-val mono">{v.toFixed(2)}</div>
                </div>
              );
            })}
          </div>
          <footer className="lora2-feat-caption">
            {isAfter
              ? "After adaptation: security-discriminative features dominate the top-k."
              : "Frozen SAE: generic code patterns dominate — reconstruction-optimal, but retrieval-useless."}
          </footer>
        </section>
      </div>
    </div>
  );
}

// ——— Cohere collaboration ———

function CohereCollab() {
  const c = window.COHERE;
  return (
    <div className="cohere">
      <div className="cohere-head">
        <div>
          <div className="mono subtle small">{c.subtitle}</div>
          <h3>{c.title}</h3>
          <p className="cohere-role mono">{c.role} · Team of {c.team.length}</p>
        </div>
        <div className="cohere-links">
          {c.links.map(l => (
            <a key={l.href} href={l.href} target="_blank" rel="noreferrer" className="mono">{l.label} ↗</a>
          ))}
        </div>
      </div>
      <p className="cohere-what">{c.what}</p>

      <div className="cohere-grid">
        <div>
          <div className="mono subtle small">SAE SPEC</div>
          <dl className="kv">
            {c.sae.map(([k, v]) => (
              <div key={k} className="kv-row">
                <dt>{k}</dt>
                <dd className="mono">{v}</dd>
              </div>
            ))}
          </dl>
        </div>
        <div>
          <div className="mono subtle small">FOUR REGIONAL SAES</div>
          <div className="variant-list">
            {c.variants.map(([k, v]) => (
              <div key={k} className="variant">
                <div className="variant-name mono">{k}</div>
                <div className="variant-desc">{v}</div>
              </div>
            ))}
          </div>
          <div className="mono subtle small mt">TEAM</div>
          <ul className="team">
            {c.team.map(m => <li key={m}>{m}</li>)}
          </ul>
        </div>
      </div>
    </div>
  );
}

// ——— Education ———

function Education() {
  return (
    <div className="edu">
      <div className="edu-row">
        <div className="edu-year mono">2022–2024</div>
        <div className="edu-body">
          <h4>MS in Computer Applications (MCA)</h4>
          <div className="edu-inst">Lovely Professional University</div>
        </div>
        <div className="edu-stat mono">CGPA 8.6</div>
      </div>
      <div className="edu-row">
        <div className="edu-year mono">2022</div>
        <div className="edu-body">
          <h4>JEE</h4>
          <div className="edu-inst">Joint Entrance Examination</div>
        </div>
        <div className="edu-stat mono">280 / 360</div>
      </div>
    </div>
  );
}

// ——— Tech stack ———

// ——— Tech stack moved to tech-stack.jsx ———

// ——— Writing placeholder ———

function Writing() {
  return (
    <div className="writing">
      <div className="writing-note mono subtle small">Blog is in development — here's what's queued:</div>
      {window.WRITING.map((w, i) => (
        <div key={i} className="writing-row">
          <div className="writing-status mono small">{w.status}</div>
          <div className="writing-body">
            <h4>{w.title}</h4>
            <p>{w.note}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// ——— Contact ———

function Contact() {
  const links = [
    { label: "Email", href: "mailto:farseenshaikh20@gmail.com", value: "farseenshaikh20@gmail.com" },
    { label: "GitHub", href: "https://github.com/FarseenSh", value: "github.com/FarseenSh" },
    { label: "HuggingFace", href: "https://huggingface.co/Farseen0", value: "huggingface.co/Farseen0" },
    { label: "OpenReview", href: "https://openreview.net/profile?id=~Farseen_Shaikh1", value: "~Farseen_Shaikh1" },
    { label: "CV", href: "assets/Farseen_Shaikh_CV.pdf", value: "Download PDF" }
  ];
  return (
    <div className="contact">
      <div className="contact-lede">
        <p>
          I'm looking for roles where representation, interpretability, and retrieval meet —
          research engineering, applied research, or a collaborative PhD. Based in India, open to remote and relocation.
        </p>
      </div>
      <ul className="contact-list">
        {links.map(l => (
          <li key={l.label}>
            <span className="mono subtle small">{l.label}</span>
            <a href={l.href} target={l.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">{l.value} ↗</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, {
  Throughline, SaeLoRAViz, CohereCollab, Education, Writing, Contact
});