{
  /* ============================================================
     Content Stack Lab � Strategic Projects Sub-Offerings Page
     ============================================================ */
  const { useEffect } = React;
  const { Button } = window.ContentStackLabDesignSystem_cbb53c;

  const slug = (text) => String(text || "project").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 fallbackOfferings = [
    {
      num: "1",
      id: "brand-identity-rebranding",
      title: "Brand Identity & Rebranding",
      tagline: "You've outgrown your brand. Let's build one that matches where you're going.",
      body: "Whether you're starting fresh or refreshing a legacy identity, I build visual brand systems that hold up. I've rebranded a packaging division at Fatima Group, initiated a group-wide identity revamp at Sapphire, and built brand design systems for B2B tech companies launching across multiple markets.",
      included: [
        "Brand audit and competitive visual analysis",
        "Logo design and visual identity system",
        "Colour palette and typography",
        "Brand guidelines document",
        "Marketing collateral and templates"
      ],
      cta: "Let's Build Your Brand"
    },
    {
      num: "2",
      id: "gtm-launch-packages",
      title: "GTM Launch Packages",
      tagline: "Launching something? Let's make sure people actually notice.",
      body: "I've taken multiple B2B tech products from pre-launch to pipeline. OTNexus in cybersecurity, NSPIRE in business incubation, Sentinel EHS in industrial compliance, Irinatech Digital in enterprise AI. Every launch starts with getting the messaging right, then building everything around it, positioning, content, campaigns, and the sales tools your team needs to close.",
      included: [
        "Messaging framework (architecture, brand voice, value propositions, key messages)",
        "Market positioning and competitive analysis",
        "Launch content and campaign strategy",
        "Sales enablement (pitch decks, collateral, battlecards)",
        "Launch rollout plan"
      ],
      cta: "Let's Plan Your Launch"
    },
    {
      num: "3",
      id: "content-systems",
      title: "Content Systems",
      tagline: "Stop creating content randomly. Start building a machine.",
      body: "Most companies post when they remember to, about whatever feels relevant that week. I build content systems, strategy, calendars, the workflows so your content actually compounds instead of collecting dust. Pillar content, distribution strategy, repurposing workflows, and an editorial calendar your team can run without you having to think about it every Monday morning.",
      included: [
        "Content audit and gap analysis",
        "Content pillars and editorial calendar",
        "Distribution and channel strategy",
        "Repurposing and content recycling workflows",
        "Performance tracking framework"
      ],
      cta: "Let's Build Your Content Engine"
    },
    {
      num: "4",
      id: "founder-branding-visibility",
      title: "Founder Branding & Visibility",
      tagline: "Your product's first brand ambassador is you.",
      body: "In B2B tech, buyers don't just evaluate your product, they evaluate you. I build founder visibility systems that position you as the authority in your space. LinkedIn presence thought leadership content, PR framework, and an ongoing content system that keeps you visible without eating your calendar. I've built these systems for CEOs of enterprise tech companies and founders launching into competitive markets from strategy to execution.",
      included: [
        "Founder positioning and narrative strategy",
        "LinkedIn profile optimization and launch campaign",
        "Ongoing content strategy and calendar",
        "Thought leadership content creation",
        "PR framework and media outreach strategy",
        "Crisis preparedness plan"
      ],
      cta: "Let's Build Your Personal Brand"
    },
    {
      num: "5",
      id: "communications-frameworks-csr",
      title: "Communications Frameworks & CSR",
      tagline: "Purpose-driven programs, built from the ground up.",
      body: "Need to build a corporate communications structure, internal comms strategy, or employee engagement program from scratch? I've done it, multiple times, for industrial conglomerates and tech companies alike. I don't just write the strategy. I build the framework, design the playbooks, and hand you a system your team can run long after the engagement ends. When the organization is ready, I layer in CSR and sustainability programs aligned with SDGs and ESG reporting standards.",
      included: [
        "Corporate communications structure and playbooks",
        "Internal communications strategy",
        "Employee engagement program design",
        "CSR program design and initiative planning",
        "Sustainability communications strategy",
        "SDG mapping and stakeholder alignment"
      ],
      cta: "Let's Build Your Communications Framework"
    },
    {
      num: "6",
      id: "conference-positioning-execution",
      title: "Conference Positioning & Execution",
      tagline: "Show up at the right events. Show up the right way.",
      body: "Conferences are expensive. Most companies pick the wrong ones, negotiate the wrong packages, and show up with a booth that looks like everyone else's. I handle the entire journey, from competitive analysis of which conferences actually matter for your market, to sponsorship negotiation, branding, booth selection & setup, collateral, vendor coordination, and on-ground execution. I've managed conference participation across industries and geographies; GISEC Dubai and ISASAC KSA, Kingpins Amsterdam & New York, Premiere Vision Paris, and Functional Fabric Fair Oregon to name a few. Whether it's one flagship event or a full annual conference calendar, I own it end to end.",
      included: [
        "Conference selection and competitive positioning strategy",
        "Sponsorship package evaluation and negotiation",
        "Conference branding and collateral development",
        "Booth location, design coordination and setup management",
        "Organiser portal management and communications",
        "On-ground photography, videography, and vendor coordination",
        "Post-event reporting and lead follow-up strategy"
      ],
      cta: "Let's Plan Your Next Conference"
    },
    {
      num: "7",
      id: "award-positioning-proposals",
      title: "Award Positioning & Proposals",
      tagline: "Good work deserves recognition. Great proposals make it happen.",
      body: "Winning awards isn't about luck, it's about knowing which ones to go after, how to frame the story, and how to present the organization in a way that stands out. I evaluate award opportunities, build the narrative, develop the proposals, and position the organization for maximum impact. I've done this across industries from GDIB and NFEH sustainability awards to international climate change initiatives. If your organization is doing the work, I make sure the right people know about it.",
      included: [
        "Award landscape evaluation and opportunity mapping",
        "Narrative development and positioning strategy",
        "Proposal writing and submission management",
        "Supporting collateral and documentation",
        "Post-win communications and PR strategy"
      ],
      cta: "Let's Get You Recognized"
    }
  ];

  const dbOfferings = (window.CSL && window.CSL.servicePages && window.CSL.servicePages.subpage) || [];
  const projectOfferings = dbOfferings.length ? dbOfferings.map((item, index) => ({
    num: item.n || String(index + 1),
    id: slug(item.title),
    title: item.title,
    tagline: item.tagline,
    body: item.body,
    included: item.points || [],
    cta: item.ctaText || "Let's Talk",
    ctaLink: item.ctaLink || "contact"
  })) : fallbackOfferings.map((item) => ({ ...item, ctaLink: "contact" }));

  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 hero = (window.CSLAdmin && window.CSLAdmin.heroes && window.CSLAdmin.heroes["services-strategic-projects"]) || {};
  const ctaBoxes = (window.CSLAdmin && window.CSLAdmin.ctas && window.CSLAdmin.ctas["services-strategic-projects"]) || {};
  const pageCta = ctaBoxes.main || ctaBoxes["start-call"] || {};

  function ProjectsHero() {
    return (
      <section className="sec services-hero projects-sub-hero" id="top">
        <div className="wrap services-hero__inner">
          <p className="eyebrow reveal">Strategic Projects</p>
          <window.CSLRichDotTitle className="reveal" text={hero.heading} fallback="What's on the table" />
          <p className="services-hero__lead reveal">
            {hero.subheading || "Big moves. Defined scope. Done right. Choose the project you need now, then use the section links to jump straight to the details."}
          </p>
          <div className="services-hero__nav projects-sub-nav reveal" aria-label="Strategic project sub-offerings">
            {projectOfferings.map((item) => <a href={`#${item.id}`} key={item.id}>{item.title}</a>)}
          </div>
        </div>
      </section>
    );
  }

  function OfferingSection({ item, index }) {
    const isTinted = index % 2 === 1;
    return (
      <section className={`sec project-offering${isTinted ? " sec--sunken" : ""}`} id={item.id}>
        <div className="wrap project-offering__grid reveal">
          <div className="project-offering__main">
            <h2>{item.title}<span className="dot">.</span></h2>
            <p className="project-offering__tagline">{item.tagline}</p>
            <div className="project-offering__body" dangerouslySetInnerHTML={{ __html: item.body }} />
            <Button as="a" href={item.ctaLink} size="lg" iconRight={<window.Arrow />}>{item.cta}</Button>
          </div>
          <aside className="project-offering__included" aria-label={`${item.title} inclusions`}>
            <h3>What's Included</h3>
            <ul>
              {item.included.map((point) => (
                <li key={point}><CheckIcon /><span>{renderBulletText(point)}</span></li>
              ))}
            </ul>
          </aside>
        </div>
      </section>
    );
  }

  function StartCallBlock() {
    return (
      <section className="sec case-cta dark-theme">
        <div className="wrap case-cta__grid">
          <div className="sec-head reveal">
            <p className="eyebrow">Ready to scope it?</p>
            <window.CSLRichDotTitle as="h2" text={pageCta.heading} fallback="You don't need a giant retainer to make a serious move" />
            <p>{pageCta.subheading || "Pick the project that matches the problem in front of you. Book a 30-minute call and we'll map the right scope, deliverables, and handover."}</p>
          </div>
          <div className="reveal">
            <window.ConsultationCard slotId="strategic-projects-consultation-card-avatar" />
          </div>
        </div>
      </section>
    );
  }

  function StrategicProjectsPage() {
    window.useReveal();
    useEffect(() => {
      if (window.location.hash) {
        setTimeout(() => {
          const target = document.querySelector(window.location.hash);
          if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
        }, 120);
        return;
      }
      window.scrollTo(0, 0);
    }, []);

    return (
      <div className="services-page-shell projects-sub-page-shell">
        <window.Header />
        <main className="dark-theme">
          <ProjectsHero />
          {projectOfferings.map((item, index) => <OfferingSection item={item} index={index} key={item.id} />)}
          <StartCallBlock />
          <div className="closer"><div className="closer__glow" aria-hidden="true" /><window.SiteFooter /></div>
        </main>
      </div>
    );
  }

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