function Approach() {
  const steps = [
    {
      n: "01",
      title: "A free 15-minute call",
      desc: "We chat — no commitment, no clinical questions you aren't ready for. You tell me what brought you here, I tell you how I work, and we see if there's a quiet spark of fit.",
      icon: IconPhone,
    },
    {
      n: "02",
      title: "An intake session",
      desc: "Our first hour together. We slow down, take stock, and start to map what's been heavy. You're never asked to share more than feels okay.",
      icon: IconBranch,
    },
    {
      n: "03",
      title: "Weekly rhythm",
      desc: "Sessions on Thursdays or Fridays — virtual, in my Oakland office, or walking at Lake Merritt. We work at the pace your nervous system can hold.",
      icon: IconCalendar,
    },
    {
      n: "04",
      title: "Pause when you need",
      desc: "Therapy isn't a straight line. We name when something is working, when it isn't, and when it's time to take a breath, a break, or close.",
      icon: IconSun,
    },
  ];

  return (
    <section id="how" style={{
      padding: "120px 0",
      background: "var(--cream-2)",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Soft accent leaf in corner */}
      <div style={{
        position: "absolute", top: -80, right: -80,
        width: 380, height: 380,
        backgroundImage: "url(assets/section-bg.png)",
        backgroundSize: "cover",
        backgroundPosition: "top right",
        opacity: 0.4,
        mixBlendMode: "multiply",
        pointerEvents: "none",
        maskImage: "radial-gradient(ellipse at top right, black 30%, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at top right, black 30%, transparent 70%)",
      }} />

      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ maxWidth: 620, marginBottom: 72 }}>
          <p className="eyebrow" style={{ marginBottom: 20 }}>How it works</p>
          <h2 className="serif" style={{
            fontSize: "clamp(36px, 4.4vw, 56px)",
            lineHeight: 1.05, color: "var(--forest)",
            letterSpacing: "-0.015em",
          }}>
            Beginning therapy<br/>
            <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>
              shouldn't feel like another task.
            </em>
          </h2>
        </div>

        <div className="approach-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 32,
          position: "relative",
        }}>
          {/* Connecting line */}
          <div className="approach-line" style={{
            position: "absolute", top: 28, left: "12.5%", right: "12.5%",
            height: 1, borderTop: "1.5px dashed rgba(31, 58, 46, 0.25)",
            zIndex: 0,
          }} />

          {steps.map((s, i) => (
            <div key={i} style={{ position: "relative", zIndex: 1 }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: "var(--paper)",
                border: "1.5px solid var(--forest)",
                display: "grid", placeItems: "center",
                color: "var(--forest)", marginBottom: 24,
              }}>
                <s.icon size={24} />
              </div>
              <div style={{
                fontFamily: "var(--serif)", fontSize: 14, fontStyle: "italic",
                color: "var(--terracotta)", marginBottom: 6,
              }}>{s.n}</div>
              <h3 className="serif" style={{
                fontSize: 22, lineHeight: 1.2, color: "var(--forest)",
                marginBottom: 12, letterSpacing: "-0.01em",
              }}>{s.title}</h3>
              <p style={{
                fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)",
              }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .approach-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
          .approach-line { display: none; }
        }
        @media (max-width: 540px) {
          .approach-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Approach = Approach;