{
  /* ============================================================
     Content Stack Lab - Services Page (DB-backed)
     ============================================================ */
  const { useEffect } = React;
  const NS = window.ContentStackLabDesignSystem_cbb53c;
  const { Button } = NS;
  const D = window.CSL || {};
  const A = window.CSLAdmin || {};

  const CheckIcon = () => (
    <svg className="svc-check-icon" width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1 5L5.5 9.5L15 1" stroke="var(--brand)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );

  const slug = (text) => String(text || "service").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
  const renderBulletText = (text) => {
    const parts = [];
    const pattern = /\[([^\]]*)\]\(([^)]+)\)/g;
    let last = 0, match, idx = 0;
    while ((match = pattern.exec(text)) !== null) {
      if (match.index > last) parts.push(text.slice(last, match.index));
      parts.push(<a key={idx++} href={match[2]} target="_blank" rel="noreferrer">{match[1]}</a>);
      last = pattern.lastIndex;
    }
    if (last < text.length) parts.push(text.slice(last));
    return parts;
  };
  const hero = A.heroes && A.heroes.services ? A.heroes.services : null;
  const services = D.servicePages && Array.isArray(D.servicePages.landing) ? D.servicePages.landing : (Array.isArray(D.services) ? D.services : []);

  function ServicesHero() {
    return (
      <section className="sec services-hero" id="top">
        <div className="wrap services-hero__inner">
          <window.CSLRichDotTitle className="reveal" text={hero && hero.heading} fallback="Services" />
          <p className="services-hero__lead reveal">
            {hero && hero.subheading ? hero.subheading : "Senior growth support for B2B tech brands that need clarity, momentum, and execution."}
          </p>
          {services.length > 0 && (
            <div className="services-hero__nav reveal" aria-label="Service sections">
              {services.map((service, index) => (
                <a href={`#tier${index + 1}`} key={service.title || index}>{service.title || `Service ${index + 1}`}</a>
              ))}
            </div>
          )}
        </div>
      </section>
    );
  }

  function ServiceTier({ service, index }) {
    const points = Array.isArray(service.points) ? service.points : [];
    const reverse = index % 2 === 1;
    const tierId = `tier${index + 1}`;
    const ctaText = service.ctaText || "Let's Talk";
    const ctaLink = service.ctaLink || "contact";
    const visualId = `tier-${index + 1}-panel-img`;

    const content = (
      <div className="tier-content reveal">
        <span className="tier-badge">{service.n || `Tier ${index + 1}`}</span>
        <h2>{service.title}<span className="dot">.</span></h2>
        {service.tagline && <p className="tier-tagline">{service.tagline}</p>}
        {service.body && <div className="tier-desc" dangerouslySetInnerHTML={{ __html: service.body }} />}
        <Button className="tier-cta-btn" as="a" href={ctaLink} size="lg" iconRight={<window.Arrow />}>{ctaText}</Button>
      </div>
    );

    const visual = (
      <div className="tier-visual reveal">
        <div className="tier-card-panel">
          <h3 className="panel-title">What's included</h3>
          {points.length > 0 && (
            <ul className="included-list">
              {points.map((point, pointIndex) => (
                <li key={`${slug(point)}-${pointIndex}`}><CheckIcon /><span>{renderBulletText(point)}</span></li>
              ))}
            </ul>
          )}
          <div className="panel-visual-placeholder">
            {service.image
              ? <img className="panel-visual-img" src={service.image} alt={`${service.title || "Service"} visual`} loading="lazy" />
              : <image-slot id={visualId} shape="rect" placeholder={`${service.title || "Service"} visual`} fit="cover"></image-slot>}
          </div>
        </div>
      </div>
    );

    return (
      <section className={`sec ${index % 2 === 0 ? "sec--sunken " : ""}tier-sec`} id={tierId}>
        <div className="wrap">
          <div className={`tier-grid${reverse ? " tier-grid--reverse" : ""}`}>
            {reverse ? <>{visual}{content}</> : <>{content}{visual}</>}
          </div>
        </div>
      </section>
    );
  }

  function ServicesList() {
    if (!services.length) return null;
    return services.map((service, index) => <ServiceTier service={service} index={index} key={service.title || index} />);
  }

  function StartCallBlock() {
    const cta = A.ctas && A.ctas.services && A.ctas.services["start-call"] ? A.ctas.services["start-call"] : null;
    if (!cta || (!cta.heading && !cta.subheading)) return null;
    return (
      <section className="sec case-cta dark-theme">
        <div className="wrap case-cta__grid">
          <div className="sec-head reveal">
              <p className="eyebrow">Not Sure Where to Start?</p>
            {cta.heading ? <h2>{cta.heading}<span className="dot">.</span></h2> : null}
            {cta.subheading ? <p>{cta.subheading}</p> : null}
          </div>
          <div className="reveal">
            <window.ConsultationCard slotId="services-consultation-card-avatar" />
          </div>
        </div>
      </section>
    );
  }

  function ServicesCloser() {
    return (
      <div className="closer">
        <div className="closer__glow" aria-hidden="true" />
        <window.SiteFooter />
      </div>
    );
  }

  function ServicesPage() {
    window.useReveal();
    useEffect(() => window.scrollTo(0, 0), []);

    return (
      <div className="services-page-shell">
        <window.Header />
        <main className="dark-theme">
          <ServicesHero />
          <ServicesList />
          <window.Work />
          <StartCallBlock />
          <ServicesCloser />
        </main>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<ServicesPage />);
}