/* eslint-disable */
// Home — "How Weekly Commit Works" with click-to-reveal step detail.

function HomeProcess() {
  const steps = [
    {
      n: "01",
      title: "Discovery Call",
      meta: "Week 0 · 30 min",
      brief: "We diagnose your current TC vs. target band, identify gaps, and agree on what's credibly achievable in 90 days.",
      detail: [
        "Total comp deconstruction: base, bonus, RSU vest schedule, sign-on",
        "Target band mapping (e.g. Meta E5 → E6 vs. Google L5 → L6)",
        "Honest gap analysis — we'll tell you if the band isn't realistic yet",
        "Outcome: a written plan, even if you don't sign on",
      ],
    },
    {
      n: "02",
      title: "Positioning Sprint",
      meta: "Week 1–2 · async + 2× 1:1",
      brief: "Resume + LinkedIn rewrite. Outreach scripts. Target-company shortlist calibrated to your YOE and band.",
      detail: [
        "ATS-tested and value-prop driven resume optimized for your level and unique differentiating factors ",
        "LinkedIn rewrite — banner, headline, about, all sections",
        "Outreach scripts for warm + cold paths (recruiters, hiring managers)",
        "30-company target list with rationale and entry strategy",
      ],
    },
    {
      n: "03",
      title: "Loop Calibration",
      meta: "Week 3–8 · weekly 1:1",
      brief: "System design, behavioral STARs, technical screens. Live mock loops with engineers who interviewed at your target companies.",
      detail: [
        "8+ mock interviews across system design, coding, behavioral",
        "STARs rewritten for IC vs. leadership signal — calibrated by level ",
        "Mock interviewers who are CIC certified, or work in Engineering at top companies ",
        "Recorded debriefs with line-by-line feedback within 24h",
      ],
    },
    {
      n: "04",
      title: "Offer & Negotiation",
      meta: "Week 8–12 · DFY",
      brief: "We'll teach you how to negotiate or run the counter entirely on your behalf.  Clients average +$35K on top of initial offer — paid only on success.",
      detail: [
        "Done-for-you counter-offer drafting and recruiter comms",
        "Competing-offer playbook (with or without one)",
        "Compensation deep-dive: refresher RSUs, sign-on, equity refresh",
        "Paid only if you earn 10% over the initial offer extended to you",
      ],
    },
  ];

  const [active, setActive] = React.useState(0);

  return (
    <section style={{
      padding: "120px 0",
      background: "var(--navy-900)",
      borderTop: "1px solid rgba(255,255,255,0.05)",
      borderBottom: "1px solid rgba(255,255,255,0.05)",
    }}>
      <div className="wc-container">
        <Reveal>
          <SectionHeader
            num="03"
            kicker="The Process"
            title="Four weeks of work. Twelve weeks to offer."
            desc="Click any step to inspect what's inside. Sequential by default — flex on cadence per client."
          />
        </Reveal>

        {/* Step nav row */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16,
          marginBottom: 28, position: "relative",
        }}>
          {/* connecting line behind circles */}
          <div aria-hidden style={{
            position: "absolute", top: 36, left: "12.5%", right: "12.5%", height: 1,
            background: "linear-gradient(90deg, rgba(74,137,200,0.6), rgba(74,137,200,0.2))",
          }} />
          {steps.map((s, i) => (
            <button
              key={s.n}
              onClick={() => setActive(i)}
              style={{
                background: "transparent",
                border: "none",
                padding: 0,
                textAlign: "left",
                cursor: "pointer",
                position: "relative",
                outline: "none",
              }}
            >
              <div style={{
                width: 72, height: 72, borderRadius: "50%",
                background: i === active ? "var(--navy-400)" : "var(--navy-900)",
                border: i === active ? "1px solid rgba(74,137,200,0.9)" : "1px solid rgba(74,137,200,0.35)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: 22,
                color: i === active ? "#fff" : "#7aade0",
                letterSpacing: "-0.02em",
                marginBottom: 20,
                transition: "all 220ms cubic-bezier(0.4,0,0.2,1)",
                boxShadow: i === active ? "0 0 0 6px rgba(45,106,170,0.18)" : "none",
                position: "relative", zIndex: 2,
              }}>{s.n}</div>
              <div className="wc-kicker" style={{ marginBottom: 6, color: i === active ? "#4a89c8" : "#3d6585" }}>{s.meta}</div>
              <div style={{
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18,
                color: i === active ? "#fff" : "#9bbdd0",
                letterSpacing: "-0.01em",
                transition: "color 180ms",
              }}>{s.title}</div>
            </button>
          ))}
        </div>

        {/* Active step detail card */}
        <div key={active} 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: 20,
          padding: "36px 44px",
          display: "grid", gridTemplateColumns: "1.1fr 1fr",
          gap: 56,
          animation: "wc-fade-up 280ms cubic-bezier(0.4,0,0.2,1)",
        }}>
          <div>
            <Badge variant="primary" dot>Step {steps[active].n} of 04</Badge>
            <h3 style={{
              fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 30,
              color: "#fff", letterSpacing: "-0.02em", margin: "16px 0 14px", lineHeight: 1.15,
            }}>{steps[active].title}</h3>
            <p style={{
              fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: "#c6dce9",
              lineHeight: 1.6, margin: 0, maxWidth: 480,
            }}>{steps[active].brief}</p>
          </div>
          <div>
            <div className="wc-kicker" style={{ marginBottom: 14 }}>What's inside</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {steps[active].detail.map(d => (
                <div key={d} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <div style={{ marginTop: 4, color: "#34d399", fontSize: 14 }}>✓</div>
                  <div style={{
                    fontFamily: "'DM Sans', sans-serif", fontSize: 13.5,
                    color: "#b3d0ef", lineHeight: 1.55,
                  }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomeProcess = HomeProcess;