/* eslint-disable */
// Home — "Why Weekly Commit" benefits + workspace mock.

function HomeBenefits() {
  const benefits = [
  {
    icon: "compass",
    title: "Calibrated to your level",
    body: "Coaching for L4–L7 ICs and engineering leaders. We diagnose what's stopping you on call one and build a plan around that specific gap. No generic curriculum, no one-size playbook."
  },
  {
    icon: "git-branch",
    title: "Real interview operators",
    body: "Mock loops run by Engineers and Certified Interview Coaches. Not generic interview advice that doesn't move the needle. Real advice with enough meaningful repetitions to see a difference."
  },
  {
    icon: "shield-check",
    title: "Negotiation done for you",
    body: "Our standalone negotiation service is flat-fee and guaranteed: we get you a minimum 10% above the offer on the table, or you don't pay. We've negotiated over $50M in total compensation since 2020."
  },
  {
    icon: "rocket",
    title: "We fix what's actually broken",
    body: "Most engineers fail interviews for one specific, invisible reason. We diagnose it on the first call and build the entire engagement around fixing that specific thing. "
  }];


  return (
    <section style={{ padding: "120px 0", background: "var(--navy-950)" }}>
      <div className="wc-container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 80, alignItems: "center" }}>
          <Reveal>
            <div>
              <SectionHeader
                align="stack"
                num="02"
                kicker="Why Weekly Commit"
                title="Built by engineers, for engineers."
                desc="The same system. 300+ times. Calibrated to your level, your target, and the specific thing standing between you and the offer. "
                maxTitle={420} />
              
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
                {benefits.map((b) =>
                <div key={b.title} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <div style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: "rgba(74,137,200,0.10)",
                    border: "1px solid rgba(74,137,200,0.25)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0
                  }}>
                      <i data-lucide={b.icon} style={{ width: 17, height: 17, color: "#7aade0" }} />
                    </div>
                    <div>
                      <div style={{
                      fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 15,
                      color: "#fff", letterSpacing: "-0.005em", marginBottom: 6
                    }}>{b.title}</div>
                      <div style={{
                      fontFamily: "'DM Sans', sans-serif", fontSize: 13.5,
                      color: "#7299b5", lineHeight: 1.6
                    }}>{b.body}</div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </Reveal>

          {/* Right: dashboard mock */}
          <Reveal delay={120}>
            <DashboardMock />
          </Reveal>
        </div>
      </div>
    </section>);

}

function DashboardMock() {
  return (
    <div style={{
      position: "relative",
      background: "var(--navy-900)",
      border: "1px solid rgba(255,255,255,0.10)",
      borderRadius: 20,
      padding: 24,
      boxShadow: "0 20px 60px rgba(0,0,0,0.55)",
      overflow: "hidden"
    }}>
      {/* terminal-ish chrome */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <div style={{ display: "flex", gap: 6 }}>
          {["#ef4444", "#f59e0b", "#10b981"].map((c) =>
          <div key={c} style={{ width: 10, height: 10, borderRadius: "50%", background: c, opacity: 0.6 }} />
          )}
        </div>
        <div className="wc-kicker" style={{ fontSize: 10 }}>ENGAGEMENT · RADHA P.</div>
        <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: "#34d399" }}>
          <span style={{ color: "#34d399" }}>●</span> Finished · Week 9 / 12
        </div>
      </div>

      {/* TC trajectory chart */}
      <div style={{
        background: "rgba(255,255,255,0.02)",
        border: "1px solid rgba(255,255,255,0.06)",
        borderRadius: 12,
        padding: 18,
        marginBottom: 14
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 16 }}>
          <div>
            <div className="wc-kicker" style={{ marginBottom: 6 }}>TC trajectory</div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 30, color: "#fff", letterSpacing: "-0.02em", lineHeight: 1 }}>
              Earning ~$300K TC <span style={{ color: "#34d399", fontSize: 14, fontWeight: 600 }}>↑  +$114K</span>
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="wc-kicker" style={{ marginBottom: 6 }}>ACHIEVED</div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 16, color: "#7aade0", letterSpacing: "-0.01em" }}>$414K TC</div>
          </div>
        </div>
        {/* sparkline */}
        <svg viewBox="0 0 280 60" style={{ width: "100%", height: 60 }}>
          <defs>
            <linearGradient id="spark-grad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#4a89c8" stopOpacity="0.4" />
              <stop offset="100%" stopColor="#4a89c8" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M 0 50 L 40 45 L 80 38 L 120 32 L 160 22 L 200 18 L 240 12 L 280 8 L 280 60 L 0 60 Z" fill="url(#spark-grad)" />
          <path d="M 0 50 L 40 45 L 80 38 L 120 32 L 160 22 L 200 18 L 240 12 L 280 8" stroke="#4a89c8" strokeWidth="1.5" fill="none" />
          {/* target line */}
          <line x1="0" y1="6" x2="280" y2="6" stroke="#7aade0" strokeWidth="0.8" strokeDasharray="3 3" opacity="0.5" />
          {/* current dot */}
          <circle cx="280" cy="8" r="4" fill="#fff" stroke="#4a89c8" strokeWidth="2" />
        </svg>
      </div>

      {/* loop progress */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <MiniMetric label="Mock loops" value="8/8 Completed" pct={88} color="#4a89c8" />
        <MiniMetric label="Active offers" value="2" pct={66} color="#34d399" />
      </div>

      {/* pipeline list */}
      <div style={{ marginTop: 18 }}>
        <div className="wc-kicker" style={{ marginBottom: 10 }}>Pipeline · this week</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {[
          ["Rippling", "Senior Engineering Manager · 45-Min HM Round", "Thurs", "success"],
          ["Upstart", "Senior Software Development Manager · HM Round", "Fri", "primary"],
          ["Remitly", "SDM IV · Final Offer Consultation ", "Mon", "warning"]].
          map(([co, stage, day, v]) =>
          <div key={co} style={{
            display: "grid", gridTemplateColumns: "1fr auto auto", alignItems: "center", gap: 10,
            padding: "8px 12px",
            background: "rgba(255,255,255,0.02)",
            borderRadius: 8,
            border: "1px solid rgba(255,255,255,0.05)"
          }}>
              <div>
                <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 13, color: "#fff" }}>{co}</span>
                <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11.5, color: "#7299b5", marginLeft: 8 }}>{stage}</span>
              </div>
              <Badge variant={v}>{day}</Badge>
              <i data-lucide="chevron-right" style={{ width: 14, height: 14, color: "#527b9b" }} />
            </div>
          )}
        </div>
      </div>
    </div>);

}

function MiniMetric({ label, value, pct, color }) {
  return (
    <div style={{
      background: "rgba(255,255,255,0.02)",
      border: "1px solid rgba(255,255,255,0.06)",
      borderRadius: 10,
      padding: 14
    }}>
      <div className="wc-kicker" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 20, color: "#fff", letterSpacing: "-0.01em", marginBottom: 10 }}>{value}</div>
      <div style={{ height: 4, background: "rgba(255,255,255,0.05)", borderRadius: 100, overflow: "hidden" }}>
        <div style={{ width: pct + "%", height: "100%", background: color, borderRadius: 100, transition: "width 800ms cubic-bezier(0.4,0,0.2,1)" }} />
      </div>
    </div>);

}

window.HomeBenefits = HomeBenefits;