/* eslint-disable */
// Home — Hero with floating profile cards.

function HomeHero() {
  // Tiny live "now coaching" pulse — cycles through names.
  const liveStream = [
  { name: "Priya M.", action: "signed Staff Eng offer at", co: "Google", delta: "+$112K TC" },
  { name: "Marcus T.", action: "started Loop Calibration for", co: "Anthropic", delta: "L6" },
  { name: "Diane K.", action: "countered initial offer at", co: "Stripe", delta: "+$34K" },
  { name: "Hiro S.", action: "booked final loop with", co: "Meta", delta: "E6" },
  { name: "Alex R.", action: "negotiated comp at", co: "Datadog", delta: "+$28K base" }];

  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % liveStream.length), 3400);
    return () => clearInterval(id);
  }, []);
  const cur = liveStream[tick];

  return (
    <section style={{
      position: "relative",
      padding: "100px 0 80px",
      overflow: "hidden",
      background: "var(--navy-950)"
    }}>
      <div aria-hidden className="wc-glow-top-right" />
      <div aria-hidden className="wc-glow-bottom-left" />

      <div className="wc-container" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 60, alignItems: "center" }}>
        {/* Left — copy */}
        <div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "'DM Mono', monospace", fontSize: 11,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--navy-300)",
            background: "rgba(45,106,170,0.12)",
            border: "1px solid rgba(45,106,170,0.30)",
            padding: "6px 12px",
            borderRadius: 100,
            marginBottom: 28
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#34d399", animation: "wc-pulse 1.8s infinite" }} />
            June intake · 5 of 6 spots remain
          </div>

          <h1 style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 64,
            lineHeight: 1.03,
            letterSpacing: "-0.035em",
            color: "#fff",
            margin: 0
          }}>
            Land your next  role at{" "}
            <span style={{
              background: "linear-gradient(120deg, #4a89c8 0%, #b3d0ef 70%, #fff 100%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text"
            }}>$300K+ TC</span>
            <br />in under 90 days
          </h1>

          <p style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: 18, fontWeight: 400,
            color: "#9bbdd0",
            lineHeight: 1.55,
            maxWidth: 540,
            marginTop: 24
          }}>Private 1:1 coaching for senior engineers and engineering leaders targeting top-tier roles at FAANG, AI labs, F500, and high-growth startups/scaleups. Interview preparation, offer positioning, and done-for-you, targeted job applications.

          </p>

          <div style={{ display: "flex", gap: 12, marginTop: 36, alignItems: "center", flexWrap: "wrap" }}>
            <Button variant="cta" size="lg" href="contact.html" icon="calendar">Book a Discovery Call</Button>
            <Button variant="secondary" size="lg" href="process.html" iconRight="arrow-right">See How It Works</Button>
          </div>

          <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ display: "flex" }}>
              {[["JM", "navy"], ["DG", "steel"], ["AM", "success"], ["RP", "warm"]].map(([i, p], idx) =>
              <div key={i} style={{ marginLeft: idx === 0 ? 0 : -10 }}>
                  <Avatar initials={i} size={32} palette={p} />
                </div>
              )}
            </div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#7299b5", lineHeight: 1.4 }}>
              <div style={{ color: "#c6dce9", fontWeight: 500 }}>
                <span style={{ color: "#34d399" }}>★ 4.8</span> · 300+ placements
              </div>
              <div style={{ fontSize: 12 }}>Clients now at Meta, Google, Nvidia, Amazon & Riot Games</div>
            </div>
          </div>
        </div>

        {/* Right — floating profile collage */}
        <div style={{ position: "relative", height: 520 }}>
          {/* connecting dashed lines */}
          <svg aria-hidden viewBox="0 0 460 520" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
            <defs>
              <linearGradient id="line-grad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#4a89c8" stopOpacity="0.7" />
                <stop offset="100%" stopColor="#4a89c8" stopOpacity="0.1" />
              </linearGradient>
            </defs>
            <path d="M 140 130 Q 240 90 340 160" stroke="url(#line-grad)" strokeWidth="1" fill="none" strokeDasharray="3 4" />
            <path d="M 340 200 Q 280 320 150 350" stroke="url(#line-grad)" strokeWidth="1" fill="none" strokeDasharray="3 4" />
            <path d="M 160 380 Q 220 440 320 430" stroke="url(#line-grad)" strokeWidth="1" fill="none" strokeDasharray="3 4" />
          </svg>

          {/* Card 1 — upper left, Sarah */}
          <ProfileCard
            style={{ position: "absolute", top: 60, left: 0, animation: "wc-float-a 6s ease-in-out infinite", zIndex: 3 }}
            initials="SM" palette="navy"
            name="Radha P." role="SDM IV · Remitly " level="L6"
            chip={{ variant: "success", text: "Offer signed" }}
            stats={[["TC", "$414K"], ["Δ", "+$114K"]]} />
          

          {/* Card 2 — upper right, Jonathon */}
          <ProfileCard
            style={{ position: "absolute", top: 120, right: 0, animation: "wc-float-b 7s ease-in-out infinite", zIndex: 4, width: 220 }}
            initials="JR" palette="success"
            name="Jonathan McNeil" role="Principal Architect · Riot" level="L7"
            chip={{ variant: "accent", text: "76 days to offer" }}
            stats={[["TC", "$340K"], ["Δ", "+$160K"]]} />
          

          {/* Card 3 — middle, currently coaching */}
          <div style={{
            position: "absolute", top: 290, left: 20,
            zIndex: 5,
            animation: "wc-float-c 5.5s ease-in-out infinite",
            background: "rgba(13,31,53,0.85)",
            backdropFilter: "blur(12px)",
            border: "1px solid rgba(74,137,200,0.30)",
            borderRadius: 14,
            padding: "10px 14px",
            display: "flex", alignItems: "center", gap: 10,
            minWidth: 280,
            boxShadow: "0 8px 32px rgba(0,0,0,0.45)"
          }}>
            <div style={{
              width: 6, height: 6, borderRadius: "50%", background: "#34d399",
              animation: "wc-pulse 1.5s infinite", flexShrink: 0
            }} />
            <div key={tick} style={{
              fontFamily: "'DM Sans', sans-serif", fontSize: 12,
              color: "#c6dce9", lineHeight: 1.4,
              animation: "wc-ticker 3.4s ease-out"
            }}>
              <strong style={{ color: "#fff", fontWeight: 600 }}>{cur.name}</strong>{" "}{cur.action}{" "}
              <strong style={{ color: "#7aade0", fontWeight: 600 }}>{cur.co}</strong>
              <span style={{ marginLeft: 8, color: "#34d399", fontFamily: "'DM Mono', monospace", fontSize: 11 }}>{cur.delta}</span>
            </div>
          </div>

          {/* Card 4 — lower left, comp readout */}
          <div style={{
            position: "absolute", bottom: 30, left: 10,
            zIndex: 3,
            animation: "wc-float-a 7.5s ease-in-out infinite",
            background: "var(--navy-900)",
            border: "1px solid rgba(255,255,255,0.10)",
            borderRadius: 16, padding: 16, width: 200,
            boxShadow: "0 8px 32px rgba(0,0,0,0.55)"
          }}>
            <div className="wc-kicker" style={{ marginBottom: 10, color: "#527b9b" }}>CHANGE COMPANIES → GET PAID</div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, color: "#fff", lineHeight: 1, letterSpacing: "-0.04em", fontSize: "34px" }}>+$300K TC

            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: "#34d399", marginTop: 8 }}>↑ 97d · Paycom → Fetch 

            </div>
          </div>

          {/* Card 5 — lower right, calendar mock */}
          <div style={{
            position: "absolute", bottom: 60, right: 20,
            zIndex: 4,
            animation: "wc-float-b 6.5s ease-in-out infinite",
            background: "var(--navy-800)",
            border: "1px solid rgba(255,255,255,0.10)",
            borderRadius: 16, padding: 18, width: 200,
            boxShadow: "0 8px 32px rgba(0,0,0,0.45)"
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <span className="wc-kicker">Discovery Call</span>
              <i data-lucide="calendar" style={{ width: 14, height: 14, color: "#4a89c8" }} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4, marginBottom: 12 }}>
              {[16, 17, 18, 19].map((d) =>
              <div key={d} style={{
                textAlign: "center", padding: "6px 0",
                background: d === 18 ? "var(--navy-400)" : "rgba(255,255,255,0.04)",
                borderRadius: 6,
                color: d === 18 ? "#fff" : "#7299b5",
                fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600
              }}>{d}</div>
              )}
            </div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#9bbdd0" }}>
              Tue · 10:30am MST — <span style={{ color: "#fff", fontWeight: 600 }}>30 min</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function ProfileCard({ style, initials, palette, name, role, level, chip, stats }) {
  return (
    <div style={{
      background: "var(--navy-800)",
      border: "1px solid rgba(255,255,255,0.10)",
      borderRadius: 16, padding: 18,
      width: 240,
      boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
      ...style
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
        <Avatar initials={initials} size={42} palette={palette} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 14, color: "#fff", letterSpacing: "-0.01em" }}>
            {name}
          </div>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#7299b5", marginTop: 2 }}>
            {role}
          </div>
        </div>
      </div>
      {chip && <div style={{ marginBottom: 12 }}><Badge variant={chip.variant} dot>{chip.text}</Badge></div>}
      {stats &&
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.06)" }}>
          {stats.map(([k, v]) =>
        <div key={k}>
              <div className="wc-kicker" style={{ fontSize: 9.5, marginBottom: 3 }}>{k}</div>
              <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 16, color: "#fff", letterSpacing: "-0.01em" }}>{v}</div>
            </div>
        )}
        </div>
      }
    </div>);

}

window.HomeHero = HomeHero;