// Cases.jsx — case studies / portfolio with stylized mockups (no stock images)
function Cases() {
  return (
    <section className="section" id="cases">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>Selected work</span>
          <h2>Real teams, fewer hours, better numbers.</h2>
          <p>
            A snapshot of recent engagements. Names retained with permission;
            details on file for serious enquiries.
          </p>
        </div>

        <div className="cases-grid">
          {/* Card 1 — wide, Light Space Architects recruiting */}
          <div className="case-card w4 tall reveal">
            <div className="case-visual">
              <div className="cv ink">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", color: "rgba(255,255,255,0.5)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 12 }}>
                  <span>recruit / pipeline</span>
                  <span>q3 → q4</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, flex: 1 }}>
                  <div className="cv-mock">
                    <div className="l"><span className="nm">Sourcing</span><span className="ck g"></span></div>
                    <div className="l"><span className="nm">Screening</span><span className="ck g"></span></div>
                    <div className="l"><span className="nm">Portfolio review</span><span className="ck b"></span></div>
                    <div className="l"><span className="nm">Offer</span><span className="ck s"></span></div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                    <div className="cv-mock">
                      <div className="l"><span className="nm">Time-to-hire</span><span className="v">11 d</span></div>
                      <div className="l"><span className="nm">Offer rate</span><span className="v">82%</span></div>
                    </div>
                    <div className="cv-mock" style={{ background: "var(--bill-500)", borderColor: "var(--bill-700)" }}>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 600, color: "var(--ink-800)" }}>+24 hires</div>
                      <div style={{ fontSize: 10, color: "var(--ink-700)" }}>across 4 roles</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="case-meta">
              <div className="case-tags">
                <span className="case-tag">Architecture</span>
                <span className="case-tag">Recruiting</span>
              </div>
              <h4>Light Space Architects — a recruiting engine that ships hires in weeks, not quarters</h4>
              <p className="blurb">
                Took the studio from a stalled pipeline to a steady cadence of senior hires —
                sourcing, screening, and scheduling handled end-to-end.
              </p>
              <div className="result">
                <span className="num">11 days</span>
                <span className="lbl">avg time-to-hire</span>
              </div>
            </div>
          </div>

          {/* Card 2 — OONA Insurance recruiting + social */}
          <div className="case-card w2 tall reveal d1">
            <div className="case-visual">
              <div className="cv coral">
                <div style={{ display: "flex", justifyContent: "space-between", color: "var(--coral-700)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 14 }}>
                  <span>social / week 6</span>
                  <span>↑ engagement</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6, flex: 1 }}>
                  {Array.from({ length: 9 }).map((_, i) => (
                    <div key={i} style={{
                      aspectRatio: 1,
                      borderRadius: 6,
                      background: i % 3 === 1 ? "var(--coral-500)" : i % 4 === 0 ? "var(--ink-800)" : "rgba(255,255,255,0.7)",
                      boxShadow: "var(--shadow-1)"
                    }}></div>
                  ))}
                </div>
              </div>
            </div>
            <div className="case-meta">
              <div className="case-tags">
                <span className="case-tag">Insurance</span>
                <span className="case-tag">Social</span>
                <span className="case-tag">Recruiting</span>
              </div>
              <h4>OONA Insurance — recruiting + social, on autopilot</h4>
              <p className="blurb">Ran the full social calendar while hiring agents across the region.</p>
              <div className="result">
                <span className="num">3.4×</span>
                <span className="lbl">reach in 60 days</span>
              </div>
            </div>
          </div>

          {/* Card 3 — Lady Lampara inventory */}
          <div className="case-card w3 reveal">
            <div className="case-visual">
              <div className="cv slate">
                <div style={{ display: "flex", justifyContent: "space-between", color: "var(--fg-3)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>
                  <span>inventory · live</span>
                  <span>638 sku</span>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
                  {[
                    { n: "Pendant · brass · large", v: "low", color: "var(--bill-500)" },
                    { n: "Linen shade · 24\"", v: "ok", color: "var(--success-500)" },
                    { n: "Floor lamp · oak", v: "ok", color: "var(--success-500)" },
                    { n: "Bulb · E27 dimmable", v: "reorder", color: "var(--coral-500)" },
                  ].map((r) => (
                    <div key={r.n} className="cv-mock" style={{ padding: "8px 10px", fontSize: 10.5 }}>
                      <div className="l">
                        <span className="nm">{r.n}</span>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--ink-700)" }}>
                          <span className="ck" style={{ background: r.color }}></span>
                          {r.v}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="case-meta">
              <div className="case-tags">
                <span className="case-tag">Lighting · retail</span>
                <span className="case-tag">Inventory systems</span>
              </div>
              <h4>Lady Lampara — every fixture, counted nightly</h4>
              <p className="blurb">
                Replaced spreadsheets and clipboards with a live inventory system tied to the POS —
                reorder triggers, supplier sync, shrink monitoring built in.
              </p>
              <div className="result">
                <span className="num">~38%</span>
                <span className="lbl">less shrink / mo</span>
              </div>
            </div>
          </div>

          {/* Card 4 — Lumae Collectives website + SaaS */}
          <div className="case-card w3 reveal d1">
            <div className="case-visual">
              <div className="cv ink">
                <div style={{ display: "flex", justifyContent: "space-between", color: "rgba(255,255,255,0.5)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 14 }}>
                  <span>lumae · portal</span>
                  <span>v 1.4</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 10, flex: 1 }}>
                  <div className="cv-mock" style={{ background: "rgba(255,255,255,0.06)", borderColor: "rgba(255,255,255,0.12)", color: "rgba(255,255,255,0.7)" }}>
                    <div className="l"><span className="nm" style={{ color: "white" }}>Members</span><span className="v">1,284</span></div>
                    <div className="l"><span className="nm" style={{ color: "white" }}>Workshops</span><span className="v">36 live</span></div>
                    <div className="l"><span className="nm" style={{ color: "white" }}>MRR</span><span className="v" style={{ color: "var(--bill-300)" }}>↑ 21%</span></div>
                    <div className="l"><span className="nm" style={{ color: "white" }}>Conversion</span><span className="v">5.8%</span></div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    <div style={{ flex: 1, borderRadius: 8, background: "linear-gradient(135deg, var(--bill-500), var(--coral-500))" }}></div>
                    <div style={{ flex: 1, borderRadius: 8, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.1)" }}></div>
                    <div style={{ flex: 1, borderRadius: 8, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}></div>
                  </div>
                </div>
              </div>
            </div>
            <div className="case-meta">
              <div className="case-tags">
                <span className="case-tag">Community · SaaS</span>
                <span className="case-tag">Web build</span>
              </div>
              <h4>Lumae Collectives — website + custom platform in 6 weeks</h4>
              <p className="blurb">
                Designed and shipped Lumae's public site and the SaaS membership platform behind it —
                workshops, billing, and member portal in one codebase.
              </p>
              <div className="result">
                <span className="num">6 weeks</span>
                <span className="lbl">design → launch</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
window.Cases = Cases;