/* eslint-disable */
// Home — Testimonial carousel.

function HomeCarousel() {
  const items = [
  {
    quote: "\"I went from ~$160K to $298K TC in 76 days. Before this, I was on a short contract role and couldn't find a full-time, permanent role. This is the best ROI investment I've made in my entire career — period.\"",
    initials: "JR",
    palette: "navy",
    name: "Jonathon M.",
    role: "Principal Architect · Riot Games",
    delta: "+$148K TC · 76 days",
    stats: [["Before", "~$160K"], ["After", "$298K"], ["Level", "Senior SWE/EM → Principal Architect"]]
  },
  {
    quote: "\"I started working with Weekly Commit, Regan, and Allan back in February. By April, I had a full-time offer. I tried everything before this, and I can say this is the only thing that really worked.\"",
    initials: "SM",
    palette: "success",
    name: "Ahn Ming ",
    role: "Freelance SWE → Sr. Front-end Deployed Engineer · Tailor",
    delta: "+$200K TC · 68 days",
    stats: [["Before", "$0K"], ["After", "$~200K"], ["Level", "Freelance → Sr SWE"]]
  },
  {
    quote: "\"Regan walked me through every counter, line by line. I came in expecting $325K and signed at $487K. The DFY negotiation paid for the whole program twice over.\"",
    initials: "RM",
    palette: "steel",
    name: "Rusten M.",
    role: "Senior Engineer (E5) · Meta",
    delta: "+$167K negotiation · 5 days",
    stats: [["Initial offer", "$325K"], ["Final offer", "$487K"], ["Days", "5"]]
  },
  {
    quote: "\"Completely on my own I would have low-balled myself. Not because I don't think I'm worth it, but especially when out of a job currently and laid off, you get really nervous. This is exactly what a great coach is worth.\"",
    initials: "DG",
    palette: "warm",
    name: "Dustin G.",
    role: "Director of Engineering · Expedia",
    delta: "+$450K TC · 78 days",
    stats: [["Before", "$0K (laid off)"], ["After", "$~450K"], ["Level", "Director → Director"]]
  }];


  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx((i) => (i + 1) % items.length), 7000);
    return () => clearInterval(id);
  }, [paused]);

  function go(n) {setIdx((n % items.length + items.length) % items.length);}
  const t = items[idx];

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        padding: "120px 0",
        background: "var(--navy-950)",
        position: "relative",
        overflow: "hidden"
      }}>
      
      <div aria-hidden style={{
        position: "absolute", top: "10%", right: "-15%",
        width: 720, height: 720,
        background: "radial-gradient(circle, rgba(45,106,170,0.16) 0%, rgba(45,106,170,0) 60%)",
        pointerEvents: "none"
      }} />

      <div className="wc-container" style={{ position: "relative" }}>
        <Reveal>
          <SectionHeader
            num="04"
            kicker="Proof"
            title="Clients on what changed."
            desc="Every testimonial pairs a comp figure with a timeframe. Proof is the product — no curation." />
          
        </Reveal>

        <div style={{
          background: "linear-gradient(135deg, rgba(30,60,100,0.55), rgba(20,48,79,0.85))",
          border: "1px solid rgba(74,137,200,0.30)",
          borderRadius: 24,
          padding: "56px 64px",
          position: "relative",
          minHeight: 320
        }}>
          <div key={idx} style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 56, animation: "wc-fade-up 320ms cubic-bezier(0.4,0,0.2,1)" }}>
            <div>
              <div style={{
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 48,
                color: "#4a89c8", lineHeight: 0.7, marginBottom: 14
              }}>"</div>
              <p style={{
                fontFamily: "'DM Sans', sans-serif",
                fontStyle: "italic",
                fontSize: 22, fontWeight: 400,
                color: "#fff",
                lineHeight: 1.45,
                margin: "0 0 32px",
                maxWidth: 620,
                textWrap: "pretty"
              }}>{t.quote}</p>

              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Avatar initials={t.initials} size={48} palette={t.palette} />
                <div>
                  <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 16, color: "#fff", letterSpacing: "-0.005em" }}>{t.name}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#9bbdd0", marginTop: 2 }}>{t.role}</div>
                  <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: "#34d399", marginTop: 4, letterSpacing: "0.05em" }}>{t.delta}</div>
                </div>
              </div>
            </div>

            <div style={{
              alignSelf: "stretch",
              background: "rgba(6,14,26,0.45)",
              border: "1px solid rgba(255,255,255,0.06)",
              borderRadius: 16,
              padding: 28,
              display: "flex", flexDirection: "column", justifyContent: "center"
            }}>
              <div className="wc-kicker" style={{ marginBottom: 18 }}>The math</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                {t.stats.map(([k, v]) =>
                <div key={k} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, paddingBottom: 14, borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#7299b5" }}>{k}</div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 22, color: "#fff", letterSpacing: "-0.015em", textAlign: "right" }}>{v}</div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Controls */}
          <div style={{
            position: "absolute",
            bottom: 32, right: 64,
            display: "flex", alignItems: "center", gap: 12
          }}>
            <div style={{ display: "flex", gap: 6, marginRight: 14 }}>
              {items.map((_, i) =>
              <button key={i} onClick={() => go(i)} aria-label={`Slide ${i + 1}`} style={{
                width: i === idx ? 24 : 6, height: 6, borderRadius: 100,
                background: i === idx ? "#fff" : "rgba(255,255,255,0.2)",
                border: "none", cursor: "pointer",
                transition: "all 280ms cubic-bezier(0.4,0,0.2,1)",
                padding: 0
              }} />
              )}
            </div>
            <button onClick={() => go(idx - 1)} aria-label="Prev" style={carouselBtn}>
              <i data-lucide="arrow-left" style={{ width: 16, height: 16 }} />
            </button>
            <button onClick={() => go(idx + 1)} aria-label="Next" style={carouselBtn}>
              <i data-lucide="arrow-right" style={{ width: 16, height: 16 }} />
            </button>
          </div>

          {/* "1/4" indicator */}
          <div style={{
            position: "absolute", bottom: 36, left: 64,
            fontFamily: "'DM Mono', monospace", fontSize: 12, color: "#527b9b", letterSpacing: "0.08em"
          }}>
            <span style={{ color: "#fff" }}>{String(idx + 1).padStart(2, "0")}</span> · {String(items.length).padStart(2, "0")}
          </div>
        </div>
      </div>
    </section>);

}

const carouselBtn = {
  width: 40, height: 40, borderRadius: "50%",
  background: "rgba(255,255,255,0.06)",
  border: "1px solid rgba(255,255,255,0.15)",
  color: "#fff",
  display: "inline-flex", alignItems: "center", justifyContent: "center",
  cursor: "pointer",
  transition: "all 180ms cubic-bezier(0.4,0,0.2,1)"
};

window.HomeCarousel = HomeCarousel;