/* global React */
const { useState, useRef, useEffect } = React;

/* ============================================================
   Animation primitives, inspired by magicui.design
     - TypingAnimation: types out plain-text children once in view
     - NumberTicker:    animates a number from 0 to value once in view
     - Marquee:         continuous horizontal scroll, pause on hover
   ============================================================ */
function useInView(opts = { threshold: 0.3 }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current || inView) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); obs.disconnect(); }
    }, opts);
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [inView]);
  return [ref, inView];
}

function TypingAnimation({ children, duration = 28, delay = 0, className, as: Tag = 'div' }) {
  const text = typeof children === 'string' ? children : String(children ?? '');
  const [ref, inView] = useInView();
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!inView) return;
    let i = 0;
    let iv;
    const start = setTimeout(() => {
      iv = setInterval(() => {
        i += 1;
        setN(i);
        if (i >= text.length) clearInterval(iv);
      }, duration);
    }, delay);
    return () => { clearTimeout(start); if (iv) clearInterval(iv); };
  }, [inView, text, duration, delay]);
  const done = n >= text.length;
  return (
    <Tag ref={ref} className={`typing ${className || ''}`} aria-label={text}>
      <span aria-hidden="true">{text.slice(0, n)}</span>
      {!done && <span className="typing-caret" aria-hidden="true" />}
    </Tag>
  );
}

function NumberTicker({ value, duration = 2800, prefix = '', suffix = '', decimals = 0, className }) {
  const [ref, inView] = useInView({ threshold: 0.4 });
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!inView) return;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setV(value * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, value, duration]);
  const formatted = decimals > 0
    ? v.toFixed(decimals)
    : Math.round(v).toLocaleString('en-US');
  return <span ref={ref} className={className}>{prefix}{formatted}{suffix}</span>;
}

function Marquee({ children, speed = 60, pauseOnHover = true, className }) {
  const items = React.Children.toArray(children);
  return (
    <div className={`marquee ${pauseOnHover ? 'marquee-pause' : ''} ${className || ''}`}>
      <div className="marquee-track" style={{ animationDuration: `${speed}s` }}>
        {items.map((c, i) => <div key={`a${i}`} className="marquee-item">{c}</div>)}
        {items.map((c, i) => <div key={`b${i}`} className="marquee-item" aria-hidden="true">{c}</div>)}
      </div>
    </div>
  );
}

/* ============================================================
   Cite, inline source link with hover popover
   ============================================================ */
function Cite({ id, label, children }) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ left: 0, top: 0 });
  const ref = useRef(null);
  const closeTimer = useRef(null);

  const cancelClose = () => {
    if (closeTimer.current) {
      clearTimeout(closeTimer.current);
      closeTimer.current = null;
    }
  };
  const scheduleClose = () => {
    cancelClose();
    closeTimer.current = setTimeout(() => setOpen(false), 220);
  };

  useEffect(() => () => cancelClose(), []);

  useEffect(() => {
    if (!open || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const popW = 320;
    let left = r.left + window.scrollX;
    if (left + popW > window.innerWidth - 24) left = window.innerWidth - popW - 24;
    setPos({ left, top: r.bottom + window.scrollY });
  }, [open]);

  const src = SOURCES[id];
  if (!src) return <span>{children}</span>;
  const cls = `cite${src.kind === 'Secondary' ? ' cite-secondary' : ''}`;

  return (
    <>
      <span
        ref={ref}
        className={cls}
        onMouseEnter={() => { cancelClose(); setOpen(true); }}
        onMouseLeave={scheduleClose}
        onClick={(e) => {
          e.preventDefault();
          const el = document.getElementById('sources');
          if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 16, behavior: 'smooth' });
        }}>
        {children}<span className="marker">[{id}]</span>
      </span>
      {open && (
        <div
          className="cite-pop"
          style={{ left: pos.left, top: pos.top }}
          onMouseEnter={() => { cancelClose(); setOpen(true); }}
          onMouseLeave={scheduleClose}>
          <div className="label">Source {id} &middot; {src.kind}</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 14, lineHeight: 1.35, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{src.title}</div>
          {label && <div style={{ marginTop: 10 }}>{label}</div>}
          <div className="src">{src.citation}</div>
        </div>
      )}
    </>);
}

/* ============================================================
   Sources data
   ============================================================ */
const SOURCES = {
  E1: {
    kind: 'Experiment',
    title: 'LeetCode proficiency vs. real GitHub issue resolution',
    citation: 'Tang, K. & Atri, R. "Computer Algorithm Puzzles and Real World Issues Relatedness." Unpublished Experiment, Green Level High School, Apr. 2026.',
    summary: 'The same LLM was given LeetCode puzzles used in coding interviews, then real matplotlib GitHub issues. It solved the puzzles perfectly, solved only the easiest real issue, identified but failed the medium, and could not even identify the hard one.'
  },
  S1: {
    kind: 'Survey',
    title: 'Coding Club member intent (n = 12)',
    citation: 'Atri, R. & Tang, K. "Coding Club Member Intention." Unpublished Survey, Green Level High School, Apr. 2026.',
    summary: '100% of respondents reported interest in CS careers. Software engineering ranked above competitive programming; applied CS ranked above theory.'
  },
  O1: {
    kind: 'Observation',
    title: 'CS internship application cycle (n = 93)',
    citation: 'Atri, R. & Tang, K. "Observation on Computer Science Hiring Process & Statistics." Unpublished Observation, Green Level High School, Apr. 2026.',
    summary: '93 applications produced 28 rejections, 58 no responses, 7 interviews, and 6 offers. Automated screen response rate was approximately 7%; once a human conducted the interview, conversion was approximately 85%.'
  },
  X1: {
    kind: 'Secondary',
    title: 'SWE-bench Verified, OpenAI',
    citation: 'OpenAI. "Introducing SWE-bench Verified." openai.com, 2024.',
    summary: 'Benchmark of LLM ability to resolve real GitHub issues, used to contextualize the gap between puzzle-solving and shipping software. Leading models have moved from roughly 2% resolution in early 2024 to well over 50% by 2025.'
  },
  X2: {
    kind: 'Secondary',
    title: 'GitHub Octoverse 2024',
    citation: 'GitHub. "Octoverse: AI leads Python to top language as the number of global developers surges." github.blog, Oct. 2024.',
    summary: 'Reports more than 518 million contributions to open-source projects in 2024 and continued growth in the global developer population. A larger public-portfolio surface area for skills-first screening to draw on.'
  },
  X3: {
    kind: 'Secondary',
    title: 'Hiring without whiteboards (community list)',
    citation: 'Poteto, L. et al. "hiring-without-whiteboards." github.com/poteto/hiring-without-whiteboards, accessed 2026.',
    summary: 'Community-maintained list of 700+ companies whose interview process uses real work (pair programming, take-home projects, trial weeks) rather than synthetic algorithm puzzles.'
  },
  X4: {
    kind: 'Secondary',
    title: 'Hidden Workers: Untapped Talent (HBS / Accenture)',
    citation: 'Fuller, J., Raman, M. et al. "Hidden Workers: Untapped Talent." Harvard Business School & Accenture, 2021.',
    summary: 'Surveys 8,000+ "hidden workers" and 2,250 executives. Finds automated ATS filters exclude an estimated 27M+ qualified US workers, and 88% of executives admit their filters reject candidates who could do the job.'
  },
  X5: {
    kind: 'Secondary',
    title: 'Stack Overflow Developer Survey 2024',
    citation: 'Stack Overflow. "2024 Developer Survey." stackoverflow.co/developer-survey-2024.',
    summary: '76% of developers report using or planning to use AI coding tools in their workflow; productivity is cited as the top benefit. Cost of producing real shipped work continues to drop.'
  },
  X6: {
    kind: 'Secondary',
    title: 'The Emerging Degree Reset (Burning Glass)',
    citation: 'Burning Glass Institute. "The Emerging Degree Reset." 2022.',
    summary: '46% of middle-skill and 31% of high-skill occupations saw "material degree resets" between 2017-2019: companies dropped bachelor\'s requirements in favor of demonstrated skills. The trend has continued through 2024.'
  }
};

/* ============================================================
   Nav, 4 centered tabs, Sources on right, no brand text
   ============================================================ */
function Nav() {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <div className="brand-spacer" />
        <div className="nav-tabs">
          <a href="#problem">The Problem</a>
          <a href="#evidence">Evidence</a>
          <a href="#demo">Live Demo</a>
          <a href="#solution">A Better Path</a>
        </div>
        <div className="nav-cta">
          <a href="#sources" className="cta">Sources &rarr;</a>
        </div>
      </div>
    </nav>);
}

/* ============================================================
   Hero
   ============================================================ */
function HeroFigure() {
  const dots = [];
  for (let i = 0; i < 70; i++) {
    const x = Math.random() * 100;
    const y = Math.random() * 100;
    const onDiagonal = Math.random() < 0.35;
    const px = x;
    const py = onDiagonal ? Math.min(100, Math.max(0, x + (Math.random() - 0.5) * 30)) : y;
    dots.push({ x: px, y: py, r: 2 + Math.random() * 2 });
  }
  return (
    <svg className="hero-figure inline-figure" viewBox="0 0 360 360" aria-hidden="true">
      <defs>
        <pattern id="grid" width="36" height="36" patternUnits="userSpaceOnUse">
          <path d="M 36 0 L 0 0 0 36" fill="none" stroke="#14131015" strokeWidth="0.5" />
        </pattern>
      </defs>
      <rect width="360" height="360" fill="url(#grid)" />
      <line x1="40" y1="320" x2="340" y2="320" stroke="#14131055" strokeWidth="1" />
      <line x1="40" y1="320" x2="40" y2="20" stroke="#14131055" strokeWidth="1" />
      <text x="180" y="350" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b6759" letterSpacing="1.4">LEETCODE SCORE &rarr;</text>
      <text x="20" y="170" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b6759" letterSpacing="1.4" transform="rotate(-90 20 170)">SHIPPING ABILITY &rarr;</text>
      {dots.map((d, i) => (
        <circle key={i} cx={40 + d.x * 3} cy={320 - d.y * 3} r={d.r} fill="#14131066" />
      ))}
      <ellipse cx="280" cy="280" rx="60" ry="44" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="3 3" />
      <text x="280" y="232" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="var(--accent)" letterSpacing="0.4">who gets hired</text>
    </svg>);
}

function Hero() {
  return (
    <header id="top" className="hero shell">
      <div className="hero-grid">
        <div className="hero-figure-wrap"><HeroFigure /></div>
        <p className="hero-lede">
          An argument, with data, that the filters between an engineer and a job are pointed at the <span className="em">wrong target</span>.
        </p>
      </div>
    </header>);
}

/* ============================================================
   IntroTerminal, magicui-style terminal gating entry to the site
   ============================================================ */
function IntroTerminal({ onDone }) {
  const lines = [
    "We're testing the wrong skill, then wondering",
    "why the right people don't get hired."
  ];
  const speed = 38;
  const [li, setLi] = useState(0);
  const [ch, setCh] = useState(0);
  const [showQ, setShowQ] = useState(false);
  const [showBtn, setShowBtn] = useState(false);
  const [fade, setFade] = useState(false);

  useEffect(() => {
    document.body.classList.add('intro-active');
    return () => document.body.classList.remove('intro-active');
  }, []);

  useEffect(() => {
    if (li >= lines.length) {
      const t1 = setTimeout(() => setShowQ(true), 450);
      const t2 = setTimeout(() => setShowBtn(true), 2200);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    }
    const line = lines[li];
    if (ch < line.length) {
      const t = setTimeout(() => setCh(ch + 1), speed);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => { setLi(li + 1); setCh(0); }, 340);
    return () => clearTimeout(t);
  }, [li, ch]);

  const enter = () => {
    setFade(true);
    setTimeout(() => onDone && onDone(), 600);
  };

  return (
    <div className={`intro-overlay ${fade ? 'intro-fade' : ''}`} aria-hidden={fade}>
      <div className="intro-terminal" role="presentation">
        <div className="intro-chrome">
          <span className="intro-dot intro-dot-r" />
          <span className="intro-dot intro-dot-y" />
          <span className="intro-dot intro-dot-g" />
          <span className="intro-title">argument.sh</span>
        </div>
        <div className="intro-body">
          {lines.map((l, i) => {
            if (i > li) return null;
            const show = i < li ? l : l.slice(0, ch);
            const typing = i === li && ch < l.length;
            return (
              <div key={i} className="intro-row">
                <span className="intro-prompt">&gt;</span>
                <span className="intro-text">
                  {show}
                  {typing && <span className="intro-caret" />}
                </span>
              </div>
            );
          })}
          {showQ && (
            <div className="intro-row intro-q-row">
              <span className="intro-prompt">&gt;</span>
              <span className="intro-q">?</span>
              <span className="intro-caret" />
            </div>
          )}
        </div>
      </div>
      {showBtn && (
        <button className="intro-btn" onClick={enter} autoFocus>
          Why?
        </button>
      )}
    </div>
  );
}

/* ============================================================
   Problem section, the three claims
   ============================================================ */
function ProblemSection() {
  return (
    <section id="problem" className="section">
      <div className="shell">
        <div className="section-head center">
          <h2 className="section-title">
            Three filters stand between an engineer and a job. <span className="em">All three measure the wrong thing.</span>
          </h2>
          <TypingAnimation as="p" className="section-kicker" duration={14}>
            Education, automated screening, and the coding interview are supposed to identify capable software engineers. In practice, each filter optimizes for a proxy (theory, brand, or puzzle) that has little to do with the work itself.
          </TypingAnimation>
        </div>

        <div className="claim">
          <div className="claim-label">Claim 01 &ndash; Curriculum</div>
          <div>
            <h3>Algorithm proficiency does not transfer to real engineering work.</h3>
            <p>
              In <Cite id="E1">our coding experiment</Cite>, an LLM that scored a perfect 5/5 on LeetCode interview puzzles solved only the <em>easiest</em> tagged matplotlib GitHub issue. It identified the medium issue but couldn&rsquo;t fix it, and couldn&rsquo;t even identify the hard one. That gap matches the wider industry benchmark on real GitHub issues <Cite id="X1">tracked by SWE-bench</Cite>.
            </p>
            <p>
              The conclusion isn&rsquo;t that algorithms are useless. It&rsquo;s that they&rsquo;re a poor measure of the thing schools claim to be preparing students for.
            </p>
          </div>
        </div>

        <div className="claim">
          <div className="claim-label">Claim 02 &ndash; Screening</div>
          <div>
            <h3>Automated resume filters reward brand names, not engineering.</h3>
            <p>
              Across <Cite id="O1">93 internship applications</Cite>, the automated pipeline produced a response rate of roughly 7%. Once a human conducted the interview, that same candidate converted at <strong>85%</strong> (6 offers from 7 interviews). The signal a recruiter sees is real; the signal the filter passes through isn&rsquo;t.
            </p>
            <p>
              In FAANG specifically, the difference was stark: a cold application led to a rejection at round 2. A referral, with the same resume, led to an offer.
            </p>
          </div>
        </div>

        <div className="claim">
          <div className="claim-label">Claim 03 &ndash; Demand</div>
          <div>
            <h3>The students paying for this system want a different one.</h3>
            <p>
              In <Cite id="S1">our survey of 12 Coding Club members</Cite>, 100% reported interest in CS <em>careers</em>. Software engineering outranked competitive programming; applied CS outranked theory. The classroom is teaching theory to a room full of people who came for the practice.
            </p>
            <div className="pull-quote">
              Supply does not meet demand. Students want careers; classes teach&nbsp;System.out.println. <Cite id="S1">Data backing this claim is in S1.</Cite>
              <span className="attr">Research conclusion, Source S1</span>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================================================
   Evidence section, the data visualizations
   ============================================================ */
function BenchBars() {
  const rows = [
    { lbl: 'LC · Easy', pct: 100, cls: 'win', v: '5/5' },
    { lbl: 'LC · Medium', pct: 100, cls: 'win', v: '5/5' },
    { lbl: 'GH · Easy', pct: 100, cls: 'win', v: '5/5' },
    { lbl: 'GH · Medium', pct: 50, cls: 'fail', v: '2-3/5' },
    { lbl: 'GH · Hard', pct: 12, cls: 'fail', v: '1/5' }
  ];
  return (
    <div style={{ marginTop: 18 }}>
      {rows.map((r, i) => (
        <div key={i} className={`bench-row ${r.cls}`}>
          <div className="lbl">{r.lbl}</div>
          <div className="bar"><span style={{ width: r.pct + '%' }} /></div>
          <div className="pct">{r.v}</div>
        </div>
      ))}
    </div>);
}

function Funnel() {
  const steps = [
    { lbl: 'Applications submitted', sub: 'Cold + referral', v: 93, cls: '' },
    { lbl: 'No response', sub: 'Automated screen', v: 58, cls: 'machine' },
    { lbl: 'Rejections', sub: 'Automated screen', v: 28, cls: 'machine' },
    { lbl: 'Interviews granted', sub: '7.5% response', v: 7, cls: '' },
    { lbl: 'Offers extended', sub: '85% conversion', v: 6, cls: 'human' }
  ];
  return (
    <div className="funnel">
      {steps.map((s, i) => (
        <div key={i} className={`funnel-step ${s.cls}`} style={{ paddingRight: 24 + (93 - s.v) * 0.1 + '%' }}>
          <div className="lbl">{s.lbl}<small>{s.sub}</small></div>
          <div className="v">{s.v}</div>
        </div>
      ))}
    </div>);
}

function Donut() {
  const seg = [
    { lbl: 'Software engineering', pct: 67, color: 'var(--accent)' },
    { lbl: 'Applied CS / other', pct: 17, color: 'var(--ink-2)' },
    { lbl: 'Competitive / theory', pct: 16, color: '#bdb6a4' }
  ];
  let acc = 0;
  const C = 2 * Math.PI * 50;
  return (
    <div className="donut-wrap">
      <svg className="donut" viewBox="0 0 120 120">
        <circle cx="60" cy="60" r="50" fill="none" stroke="var(--bg-deep)" strokeWidth="16" />
        {seg.map((s, i) => {
          const dash = s.pct / 100 * C;
          const offset = -(acc / 100) * C;
          acc += s.pct;
          return (
            <circle key={i} cx="60" cy="60" r="50" fill="none"
              stroke={s.color} strokeWidth="16"
              strokeDasharray={`${dash} ${C - dash}`}
              strokeDashoffset={offset}
              transform="rotate(-90 60 60)" />);
        })}
        <text x="60" y="58" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="22" fill="var(--ink)" letterSpacing="-1">100%</text>
        <text x="60" y="74" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="var(--muted)" letterSpacing="1">CAREER-INTENT</text>
      </svg>
      <div className="donut-legend">
        <ul>
          {seg.map((s, i) => (
            <li key={i}><span className="sw" style={{ background: s.color }} />{s.lbl}<span style={{ color: 'var(--muted)', marginLeft: 8, fontFamily: 'var(--mono)', fontSize: 11 }}>{s.pct}%</span></li>
          ))}
        </ul>
        <div style={{ marginTop: 14, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>n = 12 · GLHS Coding Club</div>
      </div>
    </div>);
}

function EvidenceSection() {
  return (
    <section id="evidence" className="section">
      <div className="shell">
        <div className="section-head center">
          <h2 className="section-title">
            Three pieces of <span className="em">originally conducted</span> research. Each isolates a different filter.
          </h2>
          <p className="section-kicker">
            An experiment for the classroom, an observation for the screen, a survey for the demand. Together they describe the same gap from three angles.
          </p>
        </div>

        <div className="data-grid">
          <div className="data-card" style={{ gridColumn: 'span 5' }}>
            <h4>Source E1 &ndash; Experiment</h4>
            <div className="big">5/5 <span style={{ fontSize: '0.5em', color: 'var(--muted)' }}>vs</span> <span className="em">1/5</span></div>
            <div className="cap">Same LLM. Perfect on LeetCode interview puzzles, near-failure on a real matplotlib hard issue. Puzzles measure puzzle-solving.</div>
            <BenchBars />
            <div className="source">Tang &amp; Atri, 2026 &ndash; n = 5 problems</div>
          </div>

          <div className="data-card" style={{ gridColumn: 'span 7' }}>
            <h4>Source O1 &ndash; Observation</h4>
            <div className="big"><span className="em"><NumberTicker value={7} suffix="%" /></span> &nbsp;&rarr;&nbsp; <NumberTicker value={85} suffix="%" /></div>
            <div className="cap">Of 93 applications, automated screens responded to 7%. Of the humans who interviewed, 85% extended offers.</div>
            <div style={{ marginTop: 18 }}><Funnel /></div>
            <div className="source">Atri &amp; Tang, 2026 &ndash; n = 93 applications</div>
          </div>

          <div className="data-card" style={{ gridColumn: 'span 7' }}>
            <h4>Source S1 &ndash; Survey</h4>
            <div className="big"><NumberTicker value={100} /><span className="em">%</span></div>
            <div className="cap">Every Coding Club respondent reported interest in a CS career. Applied software engineering led every preference ranking.</div>
            <div style={{ marginTop: 24 }}><Donut /></div>
            <div className="source">Atri &amp; Tang, 2026 &ndash; n = 12 students</div>
          </div>

          <div className="data-card scope-card" style={{ gridColumn: 'span 5' }}>
            <div className="note-scope-line">
              These are findings, not proof. We describe one school, one applicant, one library&rsquo;s issue tracker.
            </div>
            <p className="scope-body">
              Per advisor feedback, we report the data as <em>evidence of a pattern</em>, not a universal claim about hiring at every company. The pattern is consistent enough across our three independent methods to act on.
            </p>
            <div className="source">Saurabh A</div>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================================================
   Solution section
   ============================================================ */
function SolutionSection() {
  const paths = [
    {
      h: 'Learn by shipping, not by syntax.',
      p: 'Replace the "print to console for six weeks" intro with a small, deployed project. Pick a problem you have, build the ugliest possible version, and put it on the internet. The vocabulary (loops, conditionals, types) is acquired in service of something real.',
      cite: <Cite id="X1">SWE-bench</Cite>,
      links: [
        { t: 'The Odin Project', u: 'https://www.theodinproject.com/' },
        { t: 'fast.ai — Practical DL', u: 'https://www.fast.ai/' },
        { t: 'Full Stack Open', u: 'https://fullstackopen.com/' }
      ]
    },
    {
      h: 'Treat your GitHub as the resume.',
      p: 'A keyword filter cannot evaluate a repository, but a human can. Three public projects with READMEs, commit history, and a live URL beats five "Tools: Java, Python, AWS" bullet points. Find an open-source project you use and fix one issue.',
      cite: <Cite id="X2">Octoverse 2024</Cite>,
      links: [
        { t: 'Good First Issues', u: 'https://goodfirstissues.com/' },
        { t: 'CodeTriage', u: 'https://www.codetriage.com/' },
        { t: 'First Contributions guide', u: 'https://github.com/firstcontributions/first-contributions' }
      ]
    },
    {
      h: 'Find companies that interview the work.',
      p: 'A growing number of companies have replaced LeetCode rituals with paid take-home work, pair-programming on real code, or trial weeks. Apply there first; the conversion rate is higher and the signal is honest.',
      cite: <Cite id="X3">hiring-without-whiteboards</Cite>,
      links: [
        { t: 'No-Whiteboard Companies', u: 'https://github.com/poteto/hiring-without-whiteboards' },
        { t: 'CodeSignal frameworks', u: 'https://codesignal.com/' },
        { t: 'Triplebyte / Karat screens', u: 'https://karat.com/' }
      ]
    },
    {
      h: 'Build in public so the artifact finds you.',
      p: 'A short, honest devlog turns a private project into a discovery surface. Engineers and recruiters land on the writeup, then land on you. One paragraph, one screenshot, one repo link beats a paywalled portfolio site.',
      cite: <Cite id="X5">Stack Overflow 2024</Cite>,
      links: [
        { t: 'dev.to', u: 'https://dev.to/' },
        { t: 'Hashnode', u: 'https://hashnode.com/' },
        { t: 'Substack engineering blogs', u: 'https://substack.com/' }
      ]
    },
    {
      h: 'Use open source as your referral engine.',
      p: 'Maintainers and contributors form a real, working talent pool that hires. One sustained contribution stream beats a hundred cold applications, because the people reviewing your code are also the people who write job descriptions.',
      cite: <Cite id="O1">O1 referral conversion</Cite>,
      links: [
        { t: 'OpenSauced', u: 'https://opensauced.pizza/' },
        { t: 'maintainerati', u: 'https://maintainerati.org/' },
        { t: 'OSS Insight', u: 'https://ossinsight.io/' }
      ]
    },
    {
      h: 'Ship to one real user.',
      p: 'A side project with one paying customer or 200 weekly active users outsignals every cert and every brand name on a resume. Free deploy targets and template stacks mean the build is no longer the bottleneck.',
      cite: <Cite id="X4">HBS / Accenture</Cite>,
      links: [
        { t: 'Indie Hackers', u: 'https://www.indiehackers.com/' },
        { t: 'Vercel deploy', u: 'https://vercel.com/' },
        { t: 'Stripe Atlas', u: 'https://stripe.com/atlas' }
      ]
    }
  ];

  return (
    <section id="solution" className="section">
      <div className="shell">
        <div className="section-head center">
          <h2 className="section-title">
            The ATS still rewards prestige. <span className="em">But the floor is shifting, and you can act on the shift today.</span>
          </h2>
          <p className="section-kicker">
            Three drivers are quietly tilting hiring toward measured work and away from brand signal: a much larger public record of what people have built (<Cite id="X2">518M+ OSS contributions in 2024</Cite>), a published roster of 700+ companies that no longer run whiteboard interviews (<Cite id="X3">no-whiteboard list</Cite>), and generative AI collapsing the cost of learning and shipping (<Cite id="X1">~2% to 50%+ on SWE-bench in 18 months</Cite>). As the cost of producing real work falls, the merit floor rises. Below: the numbers, then the actions you can take this week.
          </p>
        </div>

        <Marquee speed={70} className="shift-strip-marquee">
          <div className="shift-card">
            <div className="lbl">Surface area</div>
            <div className="stat"><span className="em"><NumberTicker value={518} suffix="M+" /></span></div>
            <div className="note">contributions to open-source projects in 2024, with global developer population still rising. The skills-first portfolio is now the default, not the exception. <Cite id="X2">Octoverse 2024</Cite></div>
          </div>
          <div className="shift-card">
            <div className="lbl">Adoption</div>
            <div className="stat"><span className="em"><NumberTicker value={700} suffix="+" /></span></div>
            <div className="note">companies on the community-maintained "no whiteboard" list, interviewing with real work instead of synthetic puzzles. Start your search there. <Cite id="X3">hiring-without-whiteboards</Cite></div>
          </div>
          <div className="shift-card">
            <div className="lbl">AI leverage</div>
            <div className="stat">~2% to <span className="em"><NumberTicker value={50} suffix="%+" /></span></div>
            <div className="note">jump in LLM resolution of real GitHub issues from early 2024 to 2025. Shipping a working prototype is now a weekend, not a semester. <Cite id="X1">SWE-bench</Cite></div>
          </div>
          <div className="shift-card">
            <div className="lbl">Degree reset</div>
            <div className="stat"><span className="em"><NumberTicker value={46} suffix="%" /></span></div>
            <div className="note">of middle-skill occupations saw bachelor&rsquo;s requirements drop between 2017&ndash;2019, replaced by demonstrated skills. The trend kept compounding through 2024. <Cite id="X6">Burning Glass</Cite></div>
          </div>
          <div className="shift-card">
            <div className="lbl">AI tooling adoption</div>
            <div className="stat"><span className="em"><NumberTicker value={76} suffix="%" /></span></div>
            <div className="note">of developers report using or planning to use AI coding tools in their workflow. The marginal cost of producing demonstrable work keeps falling. <Cite id="X5">Stack Overflow 2024</Cite></div>
          </div>
          <div className="shift-card">
            <div className="lbl">Hidden talent</div>
            <div className="stat"><span className="em"><NumberTicker value={27} suffix="M+" /></span></div>
            <div className="note">qualified US workers excluded by automated ATS filters; 88% of executives admit their filters reject people who could do the job. <Cite id="X4">HBS / Accenture</Cite></div>
          </div>
        </Marquee>

        <Marquee speed={95} className="path-marquee">
          {paths.map((p, i) => (
            <div key={i} className="path-card">
              <h4>{p.h}</h4>
              <p>{p.p}</p>
              <div className="path-cite">Source: {p.cite}</div>
              <div className="actions">
                {p.links.map((l, j) => (
                  <a key={j} href={l.u} target="_blank" rel="noopener noreferrer">{l.t} <span>&rarr;</span></a>
                ))}
              </div>
            </div>
          ))}
        </Marquee>

        <div className="versus">
          <div>
            <h4>The old pipeline rewards</h4>
            <div className="v-title">Brand, theory, and sorted-array recall under timer (~7% automated response rate, <Cite id="O1">O1</Cite>).</div>
            <ul>
              <li>Recognized university or employer in the header (top-10 brands raise call-back rates by an order of magnitude vs unbranded peers, per <Cite id="O1">O1</Cite>)</li>
              <li>Keyword density matching the JD (7%-class response rate when the keyword bar is unmet, <Cite id="O1">O1</Cite>)</li>
              <li>Whiteboard performance on synthetic puzzles (no correlation to real-issue resolution, <Cite id="E1">E1</Cite>)</li>
              <li>GPA &amp; coursework with the &ldquo;right&rdquo; titles</li>
            </ul>
          </div>
          <div>
            <h4>A skills-first pipeline rewards</h4>
            <div className="v-title">Evidence of having built something a stranger can use (85% offer rate once humans interview, <Cite id="O1">O1</Cite>).</div>
            <ul>
              <li>Public, working artifact with a URL (518M+ contributions in 2024 give recruiters somewhere to look, <Cite id="X2">X2</Cite>)</li>
              <li>Commits, PRs, and issue discussion in real repos</li>
              <li>Interview formats that look like the actual job (now offered by 700+ listed companies, <Cite id="X3">X3</Cite>)</li>
              <li>Demonstrated ownership over a multi-week project</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================================================
   Sources section
   ============================================================ */
function SourcesSection() {
  const items = [
    { id: 'E1', ...SOURCES.E1 },
    { id: 'O1', ...SOURCES.O1 },
    { id: 'S1', ...SOURCES.S1 },
    { id: 'X1', ...SOURCES.X1 },
    { id: 'X2', ...SOURCES.X2 },
    { id: 'X3', ...SOURCES.X3 }
  ];
  return (
    <section id="sources" className="section">
      <div className="shell">
        <div className="section-head center">
          <h2 className="section-title">Sources and method.</h2>
          <p className="section-kicker">
            Three originally conducted studies (an experiment, an observation, a survey) plus three secondary references. Hover any inline marker to see the source in context; click to land here.
          </p>
        </div>

        <div className="sources-list">
          {items.map((it) => (
            <div key={it.id} className="source-item">
              <div className="id">[{it.id}] &ndash; {it.kind}</div>
              <h4 className="t">{it.title}</h4>
              <div className="meta">{it.citation}</div>
              <p>{it.summary}</p>
            </div>
          ))}
        </div>
      </div>
    </section>);
}

/* ============================================================
   Footer, centered Authors/Read/Use
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="shell footer-grid">
        <div>
          <h5>Authors</h5>
          <a href="https://linkedin.com/in/rianfyi" target="_blank" rel="noopener noreferrer">Rian Atri</a>
          <a href="https://github.com/prismelt" target="_blank" rel="noopener noreferrer">Kunyu Tang</a>
          <p style={{ color: 'var(--muted)' }}>Advisor: Saurabh A</p>
        </div>
        <div>
          <h5>Read</h5>
          <a href="#problem">01 · The Problem</a>
          <a href="#evidence">02 · Evidence</a>
          <a href="#demo">03 · Live Demo</a>
          <a href="#solution">04 · A Better Path</a>
          <a href="#sources">05 · Sources</a>
        </div>
        <div>
          <h5>Use</h5>
          <a href="#sources">Full citations</a>
          <a href="#demo">Try the screener</a>
        </div>
      </div>
    </footer>);
}

Object.assign(window, {
  Nav, Hero, ProblemSection, EvidenceSection, SolutionSection, SourcesSection, Footer, Cite, SOURCES,
  IntroTerminal, TypingAnimation, NumberTicker, Marquee
});