function Pricing() {
  return (
    <section id="pricing" style={{
      padding: "120px 0",
      background: "var(--paper)",
      position: "relative",
    }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "0.9fr 1.1fr",
          gap: 80, alignItems: "start",
        }} className="pricing-grid">
          <div style={{ position: "sticky", top: 100 }}>
            <p className="eyebrow" style={{ marginBottom: 20 }}>Fees & access</p>
            <h2 className="serif" style={{
              fontSize: "clamp(36px, 4.4vw, 52px)",
              lineHeight: 1.05, color: "var(--forest)",
              letterSpacing: "-0.015em", marginBottom: 24,
            }}>
              Therapy should be<br/>
              <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>
                affordable for all.
              </em>
            </h2>
            <p style={{
              fontSize: 16.5, lineHeight: 1.65, color: "var(--ink-2)",
              maxWidth: 460,
            }}>
              I currently work at an agency that doesn't accept insurance.
              To keep care accessible, I offer a sliding scale for clients
              who qualify — no paperwork gymnastics required.
            </p>

            <div style={{
              marginTop: 32, padding: 20,
              borderLeft: "3px solid var(--terracotta)",
              background: "rgba(232, 116, 74, 0.06)",
            }}>
              <p style={{ fontSize: 14.5, color: "var(--forest)", lineHeight: 1.55 }}>
                <strong style={{ fontWeight: 600 }}>Not sure if it's a fit?</strong> The
                first 15 minutes are free, and there's no pressure to continue
                after that. Sometimes the answer is "not yet" — and that's okay.
              </p>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              {
                title: "Free consultation",
                price: "Complimentary",
                dur: "15 minutes",
                inc: ["A phone or video call", "Get a feel for fit", "Ask any questions"],
                highlight: true,
              },
              {
                title: "Individual therapy",
                price: "$30–$60",
                dur: "60 minutes",
                inc: ["Sliding scale based on need", "Telehealth or in-person", "Weekly or bi-weekly"],
              },
              {
                title: "Couples & family sessions",
                price: "$50–$100",
                dur: "60 minutes",
                inc: ["Together or alongside individual work", "Family systems approach", "Co-parenting friendly"],
              },
              {
                title: "Single parent support group",
                price: "$30–$60",
                dur: "Fridays 3:30–5pm",
                inc: ["Alternating virtual & in-person", "Community + psychoeducation", "By interest form"],
              },
            ].map((p, i) => (
              <div key={i} className="pricing-card" style={{
                padding: "28px 30px",
                background: p.highlight ? "linear-gradient(135deg, #2d4a3a 0%, #1f3a2e 100%)" : "white",
                color: p.highlight ? "var(--cream)" : "var(--forest)",
                border: p.highlight ? "none" : "1px solid var(--line)",
                borderRadius: 8,
                display: "grid",
                gridTemplateColumns: "1fr auto",
                gap: 20, alignItems: "start",
                position: "relative",
                overflow: "hidden",
              }}>
                {p.highlight && (
                  <span style={{
                    position: "absolute", top: 16, right: 16,
                    fontSize: 11, padding: "4px 10px", borderRadius: 999,
                    background: "var(--sun)", color: "var(--forest)",
                    fontWeight: 600, letterSpacing: "0.04em",
                  }}>RECOMMENDED FIRST STEP</span>
                )}
                <div>
                  <h3 className="serif" style={{
                    fontSize: 24, marginBottom: 4, fontWeight: 500,
                    color: p.highlight ? "var(--cream)" : "var(--forest)",
                  }}>{p.title}</h3>
                  <p style={{
                    fontSize: 13, marginBottom: 14,
                    color: p.highlight ? "rgba(245, 239, 225, 0.7)" : "var(--ink-2)",
                  }}>{p.dur}</p>
                  <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
                    {p.inc.map(line => (
                      <li key={line} style={{
                        display: "flex", gap: 8, alignItems: "start",
                        fontSize: 14, lineHeight: 1.5,
                        color: p.highlight ? "rgba(245, 239, 225, 0.85)" : "var(--ink-2)",
                      }}>
                        <IconCheck size={16} stroke={p.highlight ? "var(--sun)" : "var(--moss)"} style={{ flexShrink: 0, marginTop: 2 }} />
                        {line}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="pricing-price" style={{ textAlign: "right", paddingTop: p.highlight ? 32 : 0 }}>
                  <div className="serif" style={{
                    fontSize: 28, lineHeight: 1,
                    color: p.highlight ? "var(--sun)" : "var(--terracotta)",
                  }}>{p.price}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .pricing-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .pricing-grid > div:first-child { position: relative !important; top: 0 !important; }
        }
        @media (max-width: 640px) {
          .pricing-card { grid-template-columns: 1fr !important; gap: 14px !important; padding: 20px !important; }
          .pricing-price { text-align: left !important; padding-top: 0 !important; }
        }
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;