// ============ SIGNAL (bento stats) + CRAFT (skills + stack) ============

function Heatmap({ trigger }) {
  // 26 weeks × 7 days — deterministic pseudo-random with an upward trend
  const weeks = 26, days = 7;
  const cells = useMemo(() => {
    const out = [];
    let seed = 7;
    const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
    for (let w = 0; w < weeks; w++) {
      for (let d = 0; d < days; d++) {
        const trend = w / weeks;              // 0 → 1
        const r = rnd();
        // weekends quieter; weekdays heavier; overall trend upward
        const weekday = d >= 1 && d <= 5 ? 1 : 0.4;
        const v = r * 0.55 + trend * 0.55;
        const score = v * weekday;
        let lvl = 0;
        if (score > 0.15) lvl = 1;
        if (score > 0.35) lvl = 2;
        if (score > 0.55) lvl = 3;
        if (score > 0.78) lvl = 4;
        out.push({ w, d, lvl });
      }
    }
    return out;
  }, []);
  return (
    <div className="heatmap">
      {cells.map((c, i) => (
        <i key={i}
          className={`hm-${c.lvl}`}
          style={{
            gridColumn: c.w + 1,
            gridRow: c.d + 1,
            opacity: trigger ? 1 : 0,
            transitionDelay: `${(c.w * 7 + c.d) * 6}ms`,
          }}
        />
      ))}
    </div>
  );
}

function Signal() {
  const ref = useRef(null);
  const seen = useInView(ref, 0.25);
  const commits = useCount(768, seen);
  const years = useCount(12, seen);
  const surfaces = useCount(10, seen);
  return (
    <section id="sig" ref={ref}>
      <div className="shead reveal">
        <span className="idx">§ 02 · SIGNAL</span>
        <span className="t">Proof, instrumented. The numbers behind the pitch.</span>
        <span className="meta">T+ LIVE · 26 WK</span>
      </div>

      <div className="bento reveal d1">
        <div className="cell wide">
          <div className="k"><span>Contribution heatmap · 26 wk</span><span className="hint">↗</span></div>
          <div className="hm-row">
            <div className="hm-v">{commits}<span className="unit">+</span><span className="hm-lbl">commits</span></div>
            <Heatmap trigger={seen} />
          </div>
          <div className="hm-legend">
            <span>less</span>
            <i className="hm-0" /><i className="hm-1" /><i className="hm-2" /><i className="hm-3" /><i className="hm-4" />
            <span>more</span>
          </div>
        </div>

        <div className="cell center">
          <div className="k"><span>Shipped surfaces</span><span className="hint">#</span></div>
          <div className="v">{surfaces}</div>
          <div className="sub">Systems designed & delivered end-to-end.</div>
        </div>

        <div className="cell center">
          <div className="k"><span>Experience</span><span className="hint">yrs</span></div>
          <div className="v">{years}<span className="unit">+</span></div>
          <div className="sub">AI / ML infrastructure · 2013 → now</div>
        </div>

        <div className="cell center">
          <div className="k"><span>Company arc</span><span className="hint">→</span></div>
          <div className="v" style={{ fontSize: "22px", lineHeight: 1.2 }}>
            Pre-Seed<br />→ Series A
          </div>
          <div className="sub">Sole senior → hiring & leading a team</div>
        </div>

        <div className="cell center">
          <div className="k"><span>Film archive</span><span className="hint">FRAMES</span></div>
          <div className="fcounter">04732 · 11h 48m</div>
          <div className="sub">Hawai'i volcanoes · Burning Man · field</div>
        </div>
      </div>
    </section>
  );
}

function Stack() {
  const ref = useRef(null);
  const seen = useInView(ref, 0.12);
  return (
    <section id="stack" ref={ref}>
      <div className="shead reveal">
        <span className="idx">§ 03 · CRAFT</span>
        <span className="t">What I reach for when the cluster is on fire.</span>
        <span className="meta">AS-OF 26.Q2 · MAIN</span>
      </div>

      <div className="skills reveal d1">
        <div>
          <h5 className="stack-block" style={{ color: "var(--ink-dim)", marginBottom: 6 }}>↳ Core Competencies</h5>
          {SKILLS.map((s) => (
            <div key={s.name} className="skill">
              <span className="name">{s.name}</span>
              <span className="v">{String(s.val).padStart(2, "0")} / 100</span>
              <span className="bar" style={{ "--w": seen ? `${s.val}%` : "0%" }} />
            </div>
          ))}
        </div>

        <div>
          <h5 className="stack-block" style={{ color: "var(--ink-dim)", marginBottom: 14 }}>↳ Technology Stack</h5>
          <div className="stack-grid">
            {STACK.map((g) => (
              <div className="stack-block" key={g.g}>
                <h5>{g.g}</h5>
                <div className="chips">
                  {g.i.map((item) => <span key={item} className="chip">{item}</span>)}
                </div>
              </div>
            ))}
          </div>
          <div className="stack-block" style={{
            border: "1px solid var(--rule)", padding: "14px 16px",
            fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-dim)", lineHeight: 1.6
          }}>
            ↳ Local rig: Apple Silicon M2 Max · 96 GB RAM<br />
            ↳ Model trio: Qwen3-Coder-Next, Qwen3.5-27B, Qwen3.5-35B-A3B
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Signal, Stack });