/* eslint-disable */
// The 5-step journey strip: Build → Apply → Tools → Learn → Interview.

function JourneyStrip() {
  const steps = [
    { n: "01", title: "Build", sub: "Resume, cover, LinkedIn", icon: LI.doc,         color: "var(--indigo)", soft: "var(--indigo-soft)" },
    { n: "02", title: "Apply", sub: "Tailor & track every job", icon: LI.send,       color: "var(--rose)",   soft: "var(--rose-soft)" },
    { n: "03", title: "Tools", sub: "ATS, salary, outreach",     icon: LI.zap,       color: "var(--amber)",  soft: "var(--amber-soft)" },
    { n: "04", title: "Learn", sub: "Courses + career library",  icon: LI.bookOpen,  color: "var(--mint)",   soft: "var(--mint-soft)" },
    { n: "05", title: "Interview", sub: "Voice-driven rehearsal",icon: LI.mic,       color: "var(--violet)", soft: "var(--violet-soft)" },
  ];

  return (
    <section style={{
      padding: "100px 0 90px",
      background: "var(--paper-2)",
      position: "relative", overflow: "hidden",
    }}>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 60, flexWrap: "wrap", gap: 20 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eye" style={{ marginBottom: 14 }}>THE STUDIO, END-TO-END</div>
            <h2 style={{
              margin: 0,
              fontSize: "clamp(36px, 4.6vw, 58px)",
              lineHeight: 1.02,
              letterSpacing: "-0.025em",
              fontWeight: 700,
            }}>
              Five rooms, one <span className="ed" style={{ fontWeight: 500, color: "var(--indigo)" }}>career.</span>
            </h2>
          </div>
          <div style={{ fontSize: 16, color: "var(--fg-3)", maxWidth: 380, lineHeight: 1.55 }}>
            Most tools stop at the résumé. We stay with you from the first draft to the verbal offer — and the salary negotiation after.
          </div>
        </div>

        {/* Steps grid */}
        <div style={{ position: "relative" }}>
          {/* Connecting dashed line on desktop */}
          <svg style={{ position: "absolute", top: 36, left: "10%", width: "80%", height: 4, zIndex: 0 }} viewBox="0 0 800 4" preserveAspectRatio="none">
            <line x1="0" y1="2" x2="800" y2="2" stroke="var(--ink-2)" strokeWidth="1.5" strokeDasharray="4 6" opacity="0.25" />
          </svg>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(5, 1fr)",
            gap: 24,
            position: "relative",
            zIndex: 1,
          }} className="journey-grid">
            {steps.map((s, i) => (
              <div key={s.n} className="reveal" style={{ transitionDelay: `${i * 80}ms` }}>
                {/* Big circle with icon */}
                <div style={{
                  position: "relative",
                  width: 76, height: 76, borderRadius: 999,
                  background: s.soft,
                  display: "grid", placeItems: "center",
                  margin: "0 auto 24px",
                  border: `3px solid var(--paper-2)`,
                  boxShadow: `0 0 0 1px ${s.color}40, 0 12px 24px rgba(15,17,21,0.06)`,
                }}>
                  {/* pulse ring */}
                  <span style={{
                    position: "absolute", inset: -3,
                    borderRadius: 999, border: `2px solid ${s.color}`,
                    animation: `ping 2.4s ease-out ${i * 0.4}s infinite`,
                    opacity: 0.4,
                  }} />
                  <span style={{ color: s.color, transform: "scale(1.3)" }}>{s.icon}</span>
                </div>
                <div style={{ textAlign: "center" }}>
                  <div className="mono" style={{ fontSize: 11, color: s.color, fontWeight: 600, marginBottom: 6, letterSpacing: "0.08em" }}>{s.n}</div>
                  <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 4 }}>{s.title}</div>
                  <div style={{ fontSize: 13.5, color: "var(--fg-3)", lineHeight: 1.45 }}>{s.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .journey-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          .journey-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { JourneyStrip });