/* PROOF / CASE STUDY — pull-quote editorial */

function Proof() {
  return (
    <section id="proof" data-snap className="relative bg-green text-cream border-b-2 border-ink">
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 py-20 md:py-28">
        <div className="flex items-center justify-between font-mono text-sm md:text-base mb-10 text-cream/70" aria-hidden="true">
          <span>04 / PROOF</span>
          <span>OUR RESEARCH</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-10">
          {/* giant quote */}
          <blockquote className="lg:col-span-8 relative">
            <span aria-hidden className="font-display font-bold text-[180px] md:text-[260px] leading-none text-orange absolute -top-10 md:-top-16 -left-2 md:-left-4 select-none">“</span>
            <p className="relative font-display font-medium leading-[1.05] tracking-tight text-[28px] sm:text-[40px] lg:text-[56px]">
              Interviews have never been strong predictors of on-the-job success, and GenAI is widening the gap. What's missing is intentional assessment of <span className="text-lime">how candidates actually use AI</span>.
            </p>
            <footer className="mt-8 font-mono text-xs text-cream/80">
              — <span className="text-cream">Hiring partner, global consulting firm</span>
            </footer>
          </blockquote>

          {/* metrics */}
          <div className="lg:col-span-4 space-y-4">
            <div className="border-2 border-cream p-6 hs-orange">
              <div className="font-mono text-[11px] opacity-70">AI ERROR RATE</div>
              <div className="font-display font-bold text-5xl leading-none mt-2">27%</div>
              <div className="font-mono text-[11px] opacity-70 mt-2">of numerical claims in AI-generated consulting research are wrong (Dojo Labs)
</div>
            </div>
            <div className="border-2 border-cream p-6 bg-orange text-ink">
              <div className="font-mono text-[11px]">QUALITY IMPROVEMENT</div>
              <div className="font-display font-bold text-5xl leading-none mt-2">40%
              </div>
              <div className="font-mono text-[11px] mt-2">better output from consultants who work skillfully with AI (BCG x Harvard)
              </div>
            </div>
            <div className="border-2 border-cream p-6">
              <div className="font-mono text-[11px] opacity-70">ASSESSMENT GAP</div>
              <div className="font-display font-bold text-5xl leading-none mt-2">1 in 4</div>
              <div className="font-mono text-[11px] opacity-70 mt-2">hiring process let candidates use AI, and even fewer score how they use it (InterviewMan, 2026)</div>
            </div>
          </div>
        </div>

        {/* problem / intervention / result strip */}
        <div className="mt-16 border-2 border-cream grid md:grid-cols-3 divide-y-2 md:divide-y-0 md:divide-x-2 divide-cream">
          {[{ k: "PROBLEM", v: "Most interviews test how well someone prepares for an interview — not how well they'll actually do the job. That gap is even bigger now that AI is part of the work." }, { k: "INTERVENTION", v: "cubicle puts candidates through a real work scenario — with AI tools, real documents, and a consistent rubric — in under 30 minutes." }, { k: "RESULT", v: "You see how people actually work, not how well they interview." }].
          map((b, i) =>
          <div key={i} className="p-6 md:p-8">
              <div className="font-mono text-[10px] text-orange">{b.k}</div>
              <p className="mt-3 text-[13px] md:text-sm leading-relaxed text-cream/90">{b.v}</p>
            </div>
          )}
        </div>

        {/* research deep-dive link */}
        <div className="mt-10 flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 justify-between border-2 border-cream p-5 md:p-6 bg-green-2/40">
          <div>
            <div className="font-mono text-[10px] text-orange tracking-wider">FULL RESEARCH BREAKDOWN</div>
            <div className="font-display font-bold text-xl md:text-2xl tracking-tight leading-tight mt-1">
              Want all the citations? Read what cubicle measures, and the research it rests on.
            </div>
          </div>
          <a href="blog/what-cubicle-measures.html"
             className="shrink-0 inline-flex items-center gap-2 font-mono text-xs uppercase tracking-wider bg-cream text-ink border-2 border-cream px-5 py-3 hs-orange btn-chunky no-underline">
            Read the post <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>);

}

window.Proof = Proof;