/* eslint-disable */
// Home — Animated stats trio (3-up, with on-scroll counter animation).

function HomeStats() {
  return (
    <section style={{
      padding: "100px 0",
      background: "var(--navy-900)",
      borderTop: "1px solid rgba(255,255,255,0.05)",
      borderBottom: "1px solid rgba(255,255,255,0.05)",
      position: "relative"
    }}>
      <div className="wc-container">
        <Reveal>
          <SectionHeader
            num="01"
            kicker="By the numbers"
            title="Twelve months. 82 placements. The math is honest."
            desc="Not selected. Not curated. Every client who completed our 90-day program in the last 12 months." />
          
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          <StatTile
            big={<><Counter to={76} duration={1400} /><span style={{ color: "rgb(255, 255, 255)" }}> Days</span></>}
            label="Avg. time to offer"
            delta="↓ 3× faster than market "
            note="Across approximately 82 engineering placements · last 12 months" />
          
          <StatTile
            big={<><span style={{ color: "rgb(255, 255, 255)" }}>$</span><Counter to={87} duration={1600} /><span style={{ color: "rgb(255, 255, 255)" }}> K</span></>}
            label="Avg. comp increase"
            delta="↑ +$30K from negotiation alone"
            note="87K avg comp increase — across every placement, employed and unemployed, FAANG and startup." />
          
          <StatTile
            big={<><Counter to={98.78} duration={1200} /><span style={{ color: "rgb(255, 255, 255)" }}> %</span></>}
            label="Placement rate"
            delta="↑ within 90-day window"
            note="98.78% sign offers (total within 180 days). 9% extend over 90 days. 1.22% defer." />
          
        </div>
      </div>
    </section>);

}

function StatTile({ big, label, delta, note }) {
  return (
    <Reveal>
      <div className="wc-card-hoverable" style={{
        background: "rgba(255,255,255,0.025)",
        border: "1px solid rgba(255,255,255,0.08)",
        borderRadius: 16,
        padding: 32
      }}>
        <div className="wc-kicker" style={{ marginBottom: 18, fontSize: "12px" }}>{label}</div>
        <div style={{
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: 64,
          letterSpacing: "-0.04em", color: "#fff", lineHeight: 1
        }}>{big}</div>
        <div style={{
          fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 13,
          color: "#34d399", marginTop: 14
        }}>{delta}</div>
        <div style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 12,
          color: "#527b9b", marginTop: 6, lineHeight: 1.5
        }}>{note}</div>
      </div>
    </Reveal>);

}

window.HomeStats = HomeStats;