const STEPS = [
  {
    code: "01",
    title: "Listen",
    body: "A 60-minute conversation about what you actually want — not a product pitch. We map goals, fears, family and the wealth you already have.",
    duration: "60 minutes",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 3 a 9 9 0 0 0 -9 9 v 4 a 2 2 0 0 0 2 2 h 2 v -7 H 5 a 7 7 0 0 1 14 0 h -2 v 7 h 2 a 2 2 0 0 0 2 -2 v -4 a 9 9 0 0 0 -9 -9 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    )
  },
  {
    code: "02",
    title: "Diagnose",
    body: "We audit your existing investments, insurance, loans and tax filings. You receive a written report — usually 18–24 pages — flagging every gap and overlap.",
    duration: "2 weeks",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M15 15 L 20 20" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        <path d="M7 10.5 H 14 M10.5 7 V 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      </svg>
    )
  },
  {
    code: "03",
    title: "Design",
    body: "A bespoke plan written for your specific income, risk and timeline. Reviewed with you in person (or HD video), revised until you sign it off.",
    duration: "3-4 weeks",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M4 4 H 20 V 17 L 16 21 H 4 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        <path d="M8 9 H 16 M 8 13 H 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        <path d="M16 17 H 20 L 16 21 Z" fill="currentColor"/>
      </svg>
    )
  },
  {
    code: "04",
    title: "Steward",
    body: "Quarterly reviews, annual deep-dives, and an always-on line. As your life changes — marriage, kids, exit, inheritance — the plan changes with you.",
    duration: "Ongoing",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 3 L 20 6 V 12 C 20 17 16 20 12 21 C 8 20 4 17 4 12 V 6 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        <path d="M8.5 12 L 11 14.5 L 15.5 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    )
  },
];

const Process = () => {
  const [active, setActive] = useState(0);

  return (
    <section id="approach" className="block" style={{ background: "var(--cream)", color: "var(--ink)", overflow: "hidden" }}>
      <div className="container">
        {/* Heading */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, marginBottom: 72 }} className="proc-head">
          <div>
            <Marker index={3} total={7} label="The way we work"/>
            <h2 className="display" style={{ fontSize: "clamp(33px, 4.2vw, 51px)", lineHeight: 1.02, marginTop: 28, color: "var(--green-900)" }}>
              Four quiet steps. Repeated for <span style={{ color: "var(--gold-500)" }}>decades</span>.
            </h2>
          </div>
          <div style={{ alignSelf: "end", maxWidth: 460 }}>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", opacity: 0.82 }}>
              We don't run on dashboards and dopamine. The point of an advisor is to keep you out of your own way during the 30 weeks of every decade when markets are screaming.
            </p>
          </div>
        </div>

        {/* Modern timeline */}
        <div className="proc-track" style={{ position: "relative" }}>
          {/* Connecting rail */}
          <div className="proc-rail" style={{
            position: "absolute", left: "calc(12.5%)", right: "calc(12.5%)", top: 30,
            height: 1, background: "var(--hairline)", zIndex: 0
          }}/>
          {/* Animated progress on rail */}
          <div className="proc-rail-active" style={{
            position: "absolute", left: "calc(12.5%)", top: 30, height: 1,
            width: `calc((100% - 25%) * ${(active) / (STEPS.length - 1)})`,
            background: "var(--gold-500)", zIndex: 1, transition: "width .6s cubic-bezier(.2,.7,.2,1)"
          }}/>

          {/* Step nodes */}
          <div style={{
            position: "relative", zIndex: 2,
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)"
          }} className="proc-cards">
            {STEPS.map((s, i) => {
              const isActive = i === active;
              const isPast = i < active;
              return (
                <div key={i}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  tabIndex={0}
                  style={{
                    position: "relative",
                    padding: "0 18px",
                    cursor: "pointer",
                    outline: "none"
                  }} className="proc-card">
                  {/* Node circle on rail */}
                  <div style={{
                    margin: "0 auto",
                    width: 60, height: 60,
                    borderRadius: "50%",
                    background: isActive ? "var(--green-900)" : (isPast ? "var(--gold-500)" : "var(--cream)"),
                    border: `1.5px solid ${isActive ? "var(--green-900)" : (isPast ? "var(--gold-500)" : "var(--hairline)")}`,
                    color: isActive ? "var(--gold-400)" : (isPast ? "var(--green-900)" : "var(--green-800)"),
                    display: "flex", alignItems: "center", justifyContent: "center",
                    transition: "all .35s cubic-bezier(.2,.7,.2,1)",
                    boxShadow: isActive ? "0 14px 30px -10px rgba(5,36,26,0.35)" : "none",
                    transform: isActive ? "scale(1.04)" : "scale(1)",
                    position: "relative",
                  }}>
                    {s.icon}
                    {isActive && (
                      <span style={{
                        position: "absolute", inset: -8, borderRadius: "50%",
                        border: "1px dashed var(--gold-500)",
                        animation: "spinSlow 12s linear infinite"
                      }}/>
                    )}
                  </div>

                  {/* Step code */}
                  <div className="mono" style={{
                    textAlign: "center", marginTop: 20,
                    fontSize: 11, letterSpacing: "0.18em",
                    color: isActive || isPast ? "var(--gold-500)" : "var(--muted)"
                  }}>STEP {s.code}</div>

                  {/* Title */}
                  <h3 className="display" style={{
                    textAlign: "center", marginTop: 8,
                    fontSize: 28, fontWeight: 700, color: "var(--green-900)",
                    transition: "color .25s"
                  }}>{s.title}</h3>

                  {/* Duration pill */}
                  <div style={{ display: "flex", justifyContent: "center", marginTop: 10 }}>
                    <span style={{
                      padding: "5px 12px", borderRadius: 999,
                      fontSize: 11, fontWeight: 500,
                      background: isActive ? "var(--green-900)" : "transparent",
                      color: isActive ? "var(--gold-400)" : "var(--muted)",
                      border: `1px solid ${isActive ? "var(--green-900)" : "var(--hairline)"}`,
                      transition: "all .25s"
                    }}>{s.duration}</span>
                  </div>

                  {/* Body */}
                  <p style={{
                    textAlign: "center", marginTop: 18,
                    fontSize: 14, lineHeight: 1.6, color: "var(--muted)",
                    maxWidth: 260, marginInline: "auto"
                  }}>{s.body}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes spinSlow { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
        @media (max-width: 900px){
          .proc-head{ grid-template-columns: 1fr !important; gap: 28px !important; margin-bottom: 48px !important }
          .proc-rail, .proc-rail-active{ display: none !important }
          .proc-cards{ grid-template-columns: 1fr !important; gap: 32px !important }
          .proc-card{ padding: 0 !important }
        }
      `}</style>
    </section>
  );
};

window.Process = Process;