function Services() {
  const openBookingModal = () => {
    let modal = document.getElementById('booking-modal');
    if (!modal) {
      modal = document.createElement('div');
      modal.id = 'booking-modal';
      modal.style.cssText = `
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); display: flex; align-items: center;
        justify-content: center; z-index: 9999;
      `;
      modal.innerHTML = `
        <div style="background: white; border-radius: 12px;
          width: 90vw; height: 90vh; max-width: 1200px; max-height: 800px;
          overflow: hidden; position: relative;">
          <button id="modal-close" style="position: absolute; top: 20px; right: 20px;
            background: white; border: none; font-size: 24px; cursor: pointer;
            color: #666; z-index: 10000; width: 36px; height: 36px;
            border-radius: 50%; display: flex; align-items: center;
            justify-content: center;">&times;</button>
          <iframe id="calendar-iframe"
            src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ1reaYeikSmVMJn2-PxYgQ0PiwKIqdmx6K8NZHazWXDjkiNuK9MG6PTyF6utsUZU7rFxn8tJtSF?gv=true"
            style="width: 100%; height: 100%; border: none; border-radius: 12px;">
          </iframe>
        </div>
      `;
      document.body.appendChild(modal);

      document.getElementById('modal-close').addEventListener('click', () => {
        modal.remove();
      });

      modal.addEventListener('click', (e) => {
        if (e.target === modal) modal.remove();
      });
    } else {
      modal.style.display = 'flex';
    }
  };

  const services = [
    {
      icon: IconFamily,
      title: "Parents & Families",
      desc: "Untangling the knots of family life — co-parenting, attachment, generational patterns, and finding your way back to one another.",
      tags: ["Parenting", "Family systems", "Single parents"],
    },
    {
      icon: IconPerson,
      title: "Individual Therapy",
      desc: "A quiet place to understand yourself more fully — for anxiety, life transitions, caregiver fatigue, and the question of what's next.",
      tags: ["Anxiety", "Transitions", "Self-understanding"],
    },
    {
      icon: IconHeart,
      title: "Perinatal Support",
      desc: "Tender, informed care through pregnancy, postpartum, and the early years — including the parts no one warned you about.",
      tags: ["Prenatal", "Postpartum", "New parents"],
    },
    {
      icon: IconShield,
      title: "Veterans & Caregivers",
      desc: "Drawing on eight years in uniform, I hold space for those who hold space for others — and the weight that comes with it.",
      tags: ["Veterans", "Caregivers", "Trauma-informed"],
    },
  ];

  return (
    <section id="services" style={{
      padding: "120px 0",
      background: "var(--forest)",
      color: "var(--cream)",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Soft texture */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 80% -10%, rgba(240, 193, 120, 0.18), transparent 50%), radial-gradient(ellipse at -10% 110%, rgba(155, 200, 165, 0.15), transparent 50%)",
        pointerEvents: "none",
      }} />

      <div className="wrap" style={{ position: "relative" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "end",
          gap: 40, marginBottom: 64, flexWrap: "wrap",
        }}>
          <div style={{ maxWidth: 560 }}>
            <p className="eyebrow" style={{ color: "var(--sun)", marginBottom: 20 }}>What I work with</p>
            <h2 className="serif" style={{
              fontSize: "clamp(36px, 4.4vw, 56px)",
              lineHeight: 1.05, letterSpacing: "-0.015em",
            }}>
              Care that meets you<br/>
              <em style={{ fontStyle: "italic", color: "var(--sun)" }}>exactly where you are.</em>
            </h2>
          </div>
          <p style={{
            maxWidth: 360, fontSize: 16, lineHeight: 1.6,
            color: "rgba(245, 239, 225, 0.75)",
          }}>
            Sessions are <em>$30–60</em> with a sliding scale. I offer a free
            15-minute consultation so we can see, together, whether we're a
            good fit.
          </p>
        </div>

        <div className="services-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 1,
          background: "rgba(245, 239, 225, 0.12)",
          border: "1px solid rgba(245, 239, 225, 0.12)",
          borderRadius: 4,
          overflow: "hidden",
        }}>
          {services.map((s, i) => (
            <div key={i} style={{
              background: "var(--forest)",
              padding: "36px 32px 32px",
              minHeight: 280,
              display: "flex", flexDirection: "column",
              transition: "background .25s ease",
            }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--forest-2)"}
               onMouseLeave={(e) => e.currentTarget.style.background = "var(--forest)"}>
              <s.icon size={32} stroke="var(--sun)" />
              <h3 className="serif" style={{
                fontSize: 26, lineHeight: 1.15, marginTop: 24, marginBottom: 12,
                color: "var(--cream)", letterSpacing: "-0.01em",
              }}>{s.title}</h3>
              <p style={{
                fontSize: 14.5, lineHeight: 1.6,
                color: "rgba(245, 239, 225, 0.72)",
                flexGrow: 1, marginBottom: 20,
              }}>{s.desc}</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 16 }}>
                {s.tags.map(t => (
                  <span key={t} style={{
                    fontSize: 11.5, padding: "4px 10px", borderRadius: 999,
                    border: "1px solid rgba(245, 239, 225, 0.2)",
                    color: "rgba(245, 239, 225, 0.85)",
                  }}>{t}</span>
                ))}
              </div>
              <button
                onClick={openBookingModal}
                style={{
                  display: "inline-block",
                  padding: "10px 16px",
                  borderRadius: "6px",
                  background: "var(--sun)",
                  color: "var(--forest)",
                  fontSize: "14px",
                  fontWeight: "600",
                  border: "none",
                  textDecoration: "none",
                  transition: "all 0.2s ease",
                  cursor: "pointer",
                }}>
                Book appointment
              </button>
            </div>
          ))}
        </div>

        {/* Modalities band */}
        <div className="modalities-band" style={{
          marginTop: 56, padding: "28px 32px",
          background: "rgba(245, 239, 225, 0.06)",
          border: "1px dashed rgba(245, 239, 225, 0.2)",
          borderRadius: 4,
          display: "flex", alignItems: "center", gap: 32,
          flexWrap: "wrap",
        }}>
          <span className="serif" style={{
            fontSize: 18, fontStyle: "italic", color: "var(--sun)",
            whiteSpace: "nowrap",
          }}>Drawing from —</span>
          <ul className="modalities-list" style={{
            listStyle: "none", display: "flex", flexWrap: "wrap",
            gap: "10px 22px", fontSize: 14.5, color: "rgba(245, 239, 225, 0.85)",
          }}>
            {[
              "Attachment-based", "CBT", "Eco-therapy",
              "Family Systems", "Narrative", "Person-Centered",
              "Relational", "Strength-Based", "Trauma-Focused",
            ].map(m => (
              <li key={m} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{
                  width: 4, height: 4, borderRadius: "50%",
                  background: "var(--sun)",
                }}></span>
                {m}
              </li>
            ))}
          </ul>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 640px) {
          .services-grid { grid-template-columns: 1fr !important; }
          .modalities-band { gap: 16px !important; padding: 20px 20px !important; }
          .modalities-band > span { white-space: normal; }
          .modalities-list { gap: 8px 14px !important; font-size: 13.5px !important; }
        }
      `}</style>
    </section>
  );
}

window.Services = Services;