// ServiceShared.jsx - shared service nav, accordion, detail template, and copy data

Object.assign(window, {
  /** WebP poster only (no scrim) — instant paint while live LUMEN arms. */
  dsBackdropPoster: function dsBackdropPoster(slug) {
    var url = '/assets/backdrops/' + slug + '.webp?v=2';
    return {
      backgroundImage: 'url("' + url + '")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundColor: darkTheme.bg,
    };
  },

  /** Scrimmed photo backdrop — variant 'hero' | 'band'. */
  dsBackdrop: function dsBackdrop(slug, variant) {
    var url = '/assets/backdrops/' + slug + '.webp?v=2';
    var t = darkTheme;
    if (variant === 'band') {
      return {
        backgroundImage: 'linear-gradient(rgba(2,2,43,0.88), rgba(2,2,43,0.85)), url("' + url + '")',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundColor: t.bg,
      };
    }
    return {
      backgroundImage: 'linear-gradient(100deg, rgba(2,2,43,0.94) 0%, rgba(2,2,43,0.84) 55%, rgba(2,2,43,0.68) 100%), url("' + url + '")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundColor: t.bg,
    };
  },

  /** Wrap first occurrence of keyword in a brand accent span. */
  dsHighlight: function dsHighlight(text, keyword, color) {
    if (!text || !keyword) return text;
    var idx = text.indexOf(keyword);
    if (idx < 0) return text;
    return [
      text.slice(0, idx),
      React.createElement('span', { key: 'hl', style: { color: color } }, keyword),
      text.slice(idx + keyword.length),
    ];
  },

  /** Two-column prose + curated backdrop image (fills negative space on wide screens). */
  DsProseSplit: function DsProseSplit({ heading, image, reverse, reveal, children }) {
    const t = darkTheme;
    var h2Style = {
      fontFamily: "'Funnel Display', sans-serif",
      fontWeight: 300,
      fontSize: 'clamp(24px, 4vw, 40px)',
      color: t.fg,
      lineHeight: 1.15,
      marginBottom: 20,
    };
    var revealAttr = reveal !== false ? { 'data-ds-reveal': true } : {};
    return (
      <div className={'ds-prose-split' + (reverse ? ' ds-prose-split--reverse' : '')} {...revealAttr}>
        <div className="ds-prose-split-copy">
          {heading ? <h2 style={h2Style}>{heading}</h2> : null}
          <div className="ds-prose-split-body">{children}</div>
        </div>
        <div className="ds-prose-split-media" aria-hidden="true">
          {typeof DsLumenTile === 'function' ? (
            <DsLumenTile slug={image} />
          ) : (
            <img
              src={'/assets/backdrops/' + image + '.webp?v=2'}
              alt=""
              loading="lazy"
              decoding="async"
              width={960}
              height={1200}
            />
          )}
        </div>
      </div>
    );
  },

  /**
   * Prose-split tiles: soft shaders (aura / bloom / silk / reeded) — readable in 4:5 panels.
   * No blue-smoke here; home CTA band is the only blue-smoke band on the site.
   */
  SERVICE_SPLIT_IMAGES: {
    'strategy-positioning': { problem: 'red-wall', why: 'neon-trails' },
    'pr-media': { problem: 'red-glow', why: 'string-lights' },
    'brand-identity': { problem: 'string-lights', why: 'red-wall' },
    'web-design-dev': { problem: 'red-glow', why: 'neon-trails' },
    'content-social': { problem: 'neon-trails', why: 'red-wall' },
    'podcast-production': { problem: 'red-wall', why: 'string-lights' },
    'paid-advertising': { problem: 'red-glow', why: 'blue-stripes' },
    'email-marketing': { problem: 'blue-stripes', why: 'string-lights' },
  },

  SERVICE_NAV: [
    { slug: 'strategy-positioning', label: 'Strategy & Positioning' },
    { slug: 'pr-media', label: 'PR & Media' },
    { slug: 'brand-identity', label: 'Brand Identity' },
    { slug: 'web-design-dev', label: 'Web Design & Development' },
    { slug: 'content-social', label: 'Content & Social Media' },
    { slug: 'podcast-production', label: 'Podcast Production' },
    { slug: 'paid-advertising', label: 'Paid Advertising' },
    { slug: 'email-marketing', label: 'Email Marketing' },
  ],

  SERVICE_SLUGS: [
    'strategy-positioning',
    'pr-media',
    'brand-identity',
    'web-design-dev',
    'content-social',
    'podcast-production',
    'paid-advertising',
    'email-marketing',
  ],

  /** @deprecated use DS_TRUSTED_LOGO_KEYS in case-study-logos.js */
  DS_TRUSTED_LOGOS: [],

  /** @deprecated About page uses DsSocialProof marquee (same as Home). */
  DS_ABOUT_CLIENTS: [],

  DsAccordion: function DsAccordion({ items, defaultOpen, onItemNavigate, linkLabel }) {
    const t = darkTheme;
    const [open, setOpen] = React.useState(defaultOpen != null ? defaultOpen : -1);

    return (
      <div style={{ borderTop: '1px solid ' + t.border2 }}>
        {items.map(function (item, i) {
          var isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: '1px solid ' + t.border2 }}>
              <button
                type="button"
                onClick={function () { setOpen(isOpen ? -1 : i); }}
                aria-expanded={isOpen}
                style={{
                  width: '100%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 16,
                  padding: '20px 0',
                  background: 'none',
                  border: 'none',
                  cursor: 'pointer',
                  textAlign: 'left',
                  fontFamily: "'Rethink Sans', sans-serif",
                  fontSize: 16,
                  fontWeight: 500,
                  color: t.fg,
                  minHeight: 44,
                }}
              >
                <span>{item.label}</span>
                <span aria-hidden="true" style={{ color: t.a2, flexShrink: 0, fontSize: 18, lineHeight: 1 }}>
                  {isOpen ? '\u2193' : '\u2192'}
                </span>
              </button>
              {isOpen ? (
                <div style={{ paddingBottom: 24, paddingRight: 8 }}>
                  <p style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 400, color: t.fg2, lineHeight: 1.7, margin: '0 0 16px' }}>
                    {item.body}
                  </p>
                  {item.slug && onItemNavigate ? (
                    <button
                      type="button"
                      onClick={function () { onItemNavigate(item.slug); }}
                      className="ds-link"
                      style={{
                        fontFamily: "'Rethink Sans', sans-serif",
                        fontSize: 16,
                        fontWeight: 500,
                        color: t.a2,
                        background: 'none',
                        border: 'none',
                        cursor: 'pointer',
                        padding: 0,
                      }}
                    >
                      {`${linkLabel || 'Learn more'} \u2192`}
                    </button>
                  ) : null}
                </div>
              ) : null}
            </div>
          );
        })}
      </div>
    );
  },

  DsSocialProof: function DsSocialProof({ heading, microLabel, inline }) {
    const t = darkTheme;
    var logoKeys = typeof DS_TRUSTED_LOGO_KEYS !== 'undefined'
      ? DS_TRUSTED_LOGO_KEYS
      : (typeof DS_TRUSTED_LOGOS !== 'undefined' ? DS_TRUSTED_LOGOS.map(function (e) { return e.key; }) : []);

    var inner = (
      <div className={inline ? undefined : 'ds-content-wrap'} data-ds-reveal={inline ? undefined : true}>
        {microLabel ? (
          <div style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 600, color: t.a2, marginBottom: 12 }}>{microLabel}</div>
        ) : null}
        {heading ? (
          <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(24px, 4vw, 40px)', color: t.fg, lineHeight: 1.15, marginBottom: 32 }}>
            {heading}
          </h2>
        ) : null}
        <div className="ds-logo-marquee-wrap">
          {typeof DsLogoMarquee !== 'undefined' ? (
            <DsLogoMarquee logoKeys={logoKeys} speed={36} />
          ) : null}
        </div>
      </div>
    );

    if (inline) return inner;

    return (
      <section style={{ background: t.bgMid, padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>
        {inner}
      </section>
    );
  },

  DsServiceCta: function DsServiceCta({ heading, body, buttonLabel, onNavigate, backdrop }) {
    const t = darkTheme;
    if (backdrop) {
      return (
        <DsBackdropSection slug={backdrop} variant="band" style={{ padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter) max(48px, env(safe-area-inset-bottom))', textAlign: 'center' }}>
          <div className="ds-content-wrap" style={{ maxWidth: 'min(720px, 100%)', margin: '0 auto' }} data-ds-stagger>
            <h2 data-ds-reveal style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5vw, 48px)', color: t.fg, lineHeight: 1.1, marginBottom: body ? 20 : 32 }}>
              {heading}
            </h2>
            {body ? (
              <p data-ds-reveal className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, lineHeight: 1.65, marginBottom: 32, marginLeft: 'auto', marginRight: 'auto' }}>
                {body}
              </p>
            ) : null}
            <div data-ds-reveal>
              <button type="button" onClick={function () { onNavigate('contact'); }} className="ds-btn-primary" style={{ background: t.a1, color: t.onAccent, border: 'none', cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 600, fontSize: 16, padding: '14px 32px', borderRadius: 2, minHeight: 44 }}>
                <span>{buttonLabel || 'Book a discovery call'}</span>
              </button>
            </div>
          </div>
        </DsBackdropSection>
      );
    }
    return (
      <section style={{ background: t.bgMid, padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter) max(48px, env(safe-area-inset-bottom))', textAlign: 'center' }}>
        <div className="ds-content-wrap" style={{ maxWidth: 'min(720px, 100%)', margin: '0 auto' }} data-ds-stagger>
          <h2 data-ds-reveal style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5vw, 48px)', color: t.fg, lineHeight: 1.1, marginBottom: body ? 20 : 32 }}>
            {heading}
          </h2>
          {body ? (
            <p data-ds-reveal className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, lineHeight: 1.65, marginBottom: 32, marginLeft: 'auto', marginRight: 'auto' }}>
              {body}
            </p>
          ) : null}
          <div data-ds-reveal>
            <button type="button" onClick={function () { onNavigate('contact'); }} className="ds-btn-primary" style={{ background: t.a1, color: t.onAccent, border: 'none', cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 600, fontSize: 16, padding: '14px 32px', borderRadius: 2, minHeight: 44 }}>
              <span>{buttonLabel || 'Book a discovery call'}</span>
            </button>
          </div>
        </div>
      </section>
    );
  },

  SERVICE_PAGES: {
    'strategy-positioning': {
      backdrop: 'red-wall',
      ctaBand: 'red-glow',
      eyebrow: 'Brand Strategy & Positioning',
      h1: 'The strategy is the product',
      h1Highlight: 'the product',
      heroBody: 'Most brands aren\u2019t invisible because they\u2019re bad. They\u2019re invisible because the thinking hasn\u2019t been done. Who you\u2019re speaking to, what you stand for, and why anyone should care. That\u2019s where we start.',
      ctaPrimary: 'Book a strategy call',
      problemHeading: 'When the pieces don\u2019t connect',
      problemBody: 'Many brands invest heavily before positioning is locked in, without seeing a hint of ROI. Slick campaigns, expensive design assets and content spread everywhere. All that just isn\u2019t enough without a solid strategy underneath it. Get strategy right first and everything else will click.',
      whatHeading: 'Strategy as an ecosystem',
      whatBody: 'We build strategy across the full picture: brand, marketing, content, advertising, PR, social, podcast and community. Each is designed to work on its own and stronger as part of a whole.',
      accordion: [
        { label: 'Brand & marketing strategy', body: 'We define where you\u2019re headed, who you\u2019re speaking to, and how you grow. Brand strategy, go-to-market planning, audience segmentation, marketing roadmap and competitive positioning.' },
        { label: 'PR & social strategy', body: 'We plan how you earn attention and where you show up. PR strategy, earned media, communications planning, social media strategy, LinkedIn strategy and organic channel planning.' },
        { label: 'Content strategy', body: 'We build content frameworks grounded in what your audience responds to. Content strategy, messaging frameworks, SEO content strategy, and content governance.' },
        { label: 'Podcast & community', body: 'We develop branded podcast strategies and community frameworks for brands building audiences for the long term.' },
      ],
      whyHeading: 'How we think about strategy',
      whyBlocks: ['There\u2019s no shortage of ways to get seen. The question is whether being seen is building anything. We\u2019ve spent over a decade inside the media, watching what earns genuine audience trust. Less volume, more moving the right people.'],
      socialHeading: 'Trusted by founders and teams building for the long term',
      ctaHeading: 'Let\u2019s figure out what your brand needs',
      ctaBody: 'Book a call and we\u2019ll give you an honest take on where the gaps are.',
    },
    'pr-media': {
      backdrop: 'red-glow',
      ctaBand: 'neon-trails',
      eyebrow: 'PR & Media',
      h1: 'Your ideas deserve a bigger room',
      h1Highlight: 'bigger room',
      heroBody: 'You\u2019ve built something real and you have a point of view worth hearing. But if the right people aren\u2019t seeing it, it\u2019s not working hard enough. That\u2019s what a digital PR agency should fix.',
      ctaPrimary: 'Book a PR call',
      problemHeading: 'Expertise without visibility = obscurity',
      problemBody: 'A lot of genuinely smart people look invisible online. Most founders and executives have more credibility than their public profile suggests. What doesn\u2019t help is weak positioning, PR agencies that pitch into the void, and LinkedIn cobwebs. The cost is missed influence and missed revenue.',
      whatHeading: 'PR and media strategy with something to say',
      whatBody: 'We work with founders and leaders ready to build a public profile that reflects what they\u2019ve built. As a media agency grounded in editorial thinking, we develop strategy for where you show up, what you say, and how consistently you say it.',
      accordion: [
        { label: 'Media relations & earned media', body: 'We know how journalists think, what editors want, and what makes a story a hit. We place clients in the publications and outlets that matter to their industry.' },
        { label: 'Executive & founder personal branding', body: 'We build the strategic bedrock: your positioning, your narrative, your key messages. The version of you that is immediately legible to anyone who Googles your name or lands on your LinkedIn profile.' },
        { label: 'Ghostwriting & thought leadership content', body: 'We write in your voice. Long-form pieces for industry publications, sharp opinion articles, media kits. We extract your thinking and turn it into content that sounds like you on your best day.' },
        { label: 'LinkedIn & social thought leadership', body: 'We build and manage LinkedIn content strategies for leaders who want consistent presence without spending their week writing posts. Never generic, always credible.' },
        { label: 'Media kit & professional bio writing', body: 'Speaker bios, executive profiles, LinkedIn bios, media backgrounders. Made to make publications and event organisers sit up and take notice.' },
      ],
      whyHeading: 'We know the media from the inside',
      whyBlocks: [
        'TBS Digital Labs was founded by a team that spent more than a decade building and running an independent news and opinion platform from 2013. We\u2019ve spent that time on the other side of the editorial pitch: deciding what gets published, what gets ignored, and why.',
        'Most PR agencies guess at what gets media attention. We know, because we\u2019ve lived as editors and journalists. That background shapes how we approach every media strategy, every piece of thought leadership content, and every pitch we make.',
      ],
      socialHeading: 'Trusted by founders who have something to say',
      ctaHeading: 'Your point of view is an asset',
      ctaBody: 'Book a call and we\u2019ll tell you exactly where media opportunities are and what it would take to own them.',
    },
    'brand-identity': {
      backdrop: 'string-lights',
      ctaBand: 'lit-cubes',
      eyebrow: 'Brand Identity',
      h1: 'Your brand should look as good as the work behind it',
      h1Highlight: 'look as good',
      heroBody: 'Make your brand look the way you\u2019ve always wanted it to, whether it\u2019s bold, understated or something in between. We help you develop a rich set of visual assets across digital, print and video. Logo design, colour palettes, fonts, and brand guidelines to tie it all together.',
      ctaPrimary: 'Book a branding call',
      problemHeading: 'Good brands look the part',
      problemBody: 'Inconsistent brand design hurts your sales and marketing process. It undermines your content, your PR and your campaigns. If it\u2019s time to start building a consistent visual foundation for buyers to land on, we can take it from here.',
      whatHeading: 'Brand design built to work everywhere',
      whatBody: 'We build brand identities for founders and businesses who are ready to look as good as they sound. From brand refreshes, logo design and visual identity systems to branded collateral, we develop everything your brand needs to create a credible and memorable presence.',
      accordion: [
        { label: 'Brand positioning, messaging & TOV', body: 'We define how your brand thinks, speaks and positions itself. Your core messages, value proposition and a tone of voice that sounds unmistakably like you.' },
        { label: 'Logo design', body: 'A logo made to look good everywhere it counts - mobile devices, conference backdrops, or reversed out on dark backgrounds. Delivered as a full logo suite with clear usage guidelines.' },
        { label: 'Visual identity', body: 'Colour palette, typography system, graphic design system, image direction and visual language. The full toolkit that keeps your brand consistent whether it\u2019s a pitch deck or a social post.' },
        { label: 'Brand guidelines', body: 'A practical brand manual your team will use. Clear rules for how your brand looks, sounds and works. Made for the people executing it.' },
        { label: 'Branded assets & collateral', body: 'Presentation templates, stationery, business cards, branded document templates and corporate materials. Everything your team needs to show up every day.' },
      ],
      whyHeading: 'How we think about brand design',
      whyBlocks: ['We come at brand identity from a media and editorial background. That means we think about how your brand reads in the wild, in a news article, on a podcast platform, in a LinkedIn feed. If you\u2019re competing with giants, we\u2019ll make your visuals match your message.'],
      socialHeading: 'Brands designed to be taken seriously',
      ctaHeading: 'Let\u2019s build creative that makes your brand work',
      ctaBody: 'Book a call and we\u2019ll show you exactly what your brand needs to compete at the level you\u2019re aiming for.',
    },
    'web-design-dev': {
      backdrop: 'blue-stripes',
      ctaBand: 'string-lights',
      eyebrow: 'Web Design & Development',
      h1: 'Websites that support how you sell',
      h1Highlight: 'how you sell',
      heroBody: 'Website projects go wrong when design starts before strategy. We begin with what your site needs to say, who it needs to convert, and how it fits into your broader growth plan. Then we build it to support where your business is headed.',
      ctaPrimary: 'Book a website call',
      problemHeading: 'Your website shouldn\u2019t just sit there',
      problemBody: 'The brief for most web design projects is some version of \u2018make it look better.\u2019 Pretty is nice, but if it\u2019s not structured to move the right people toward the right action, it\u2019s not doing its job. We\u2019ve seen enough to know where a new site build or website redesign breaks down.',
      whatHeading: 'End-to-end web development services',
      whatBody: 'We bring strategy, UX, copywriting, design and development together under one roof. That means fewer handovers, fewer gaps between disciplines, and a website that works as one connected system.',
      accordion: [
        { label: 'UX and content audits', body: 'Before anything is redesigned or rebuilt, we audit what you have. Where users drop off, where content is working against you, and what the site is actually telling people about your brand. Honest findings, not a sales pitch for a full rebuild.' },
        { label: 'Sitemap & user journeys', body: 'We map the architecture of your site around how your audience moves through it. Not how you wish they did. Clear information architecture, logical navigation and user flows built for conversion.' },
        { label: 'Wireframes & prototyping', body: 'Low and high-fidelity wireframes that let you see and test the structure before a single line of code is written. No surprises at dev stage, because the right decisions were made earlier.' },
        { label: 'Copywriting', body: 'Website copywriting written by people who understand SEO, UX and brand voice simultaneously. Every page has a job to do. We write copy that does it.' },
        { label: 'Responsive web design', body: 'Mobile-first, cross-device design that holds up everywhere your audience finds you. We build to standards as a matter of course.' },
        { label: 'Web development', body: 'Front-end and CMS development built for performance, SEO and ease of use. We work across WordPress, Webflow, Shopify and Squarespace, selecting the platform that best suits your goals and budget.' },
        { label: 'QA & launch', body: 'Browser testing, quality assurance and a structured go-live process so your site launches clean. We don\u2019t hand over a URL and disappear. We stay on it through launch and into the stabilisation period.' },
      ],
      whyHeading: 'How we think about web design',
      whyBlocks: [
        'We built and ran a high-traffic media platform for over a decade. That means we understand how audiences actually behave online. What they read, what they skip, where they drop off, and what makes them act. We bring that behavioural intelligence into every web project, whether it\u2019s a web redesign or a site built from scratch.',
        'We also write. Most web design agencies outsource copywriting or treat it as the client\u2019s problem. We do it in-house, which means the structure, the content and the design are developed together. The site launches with copy that\u2019s already doing the work. No placeholder text waiting to be replaced.',
      ],
      socialHeading: 'Sites built to work and to impress',
      ctaHeading: 'Let\u2019s build a website that grows with you',
      ctaBody: 'Book a call and we\u2019ll give you an honest rundown on what your site needs, whether that\u2019s a full rebuild, a targeted redesign, or a content and UX fix instead of starting from scratch.',
    },
    'content-social': {
      backdrop: 'red-digital',
      ctaBand: 'geometric-facets',
      eyebrow: 'Content & Social Media',
      h1: 'Content like you mean it',
      h1Highlight: 'mean it',
      heroBody: 'Content is everywhere, but is yours saying anything? The difference is whether there\u2019s a strategy behind it, a consistent brand voice and a sharp editorial instinct. That\u2019s what a content marketing agency should deliver - and that\u2019s what we do.',
      ctaPrimary: 'Book a content call',
      problemHeading: 'Producing content \u2260 content strategy',
      problemBody: 'When your LinkedIn page has three posts over four months and your blog is invisible in search results, it\u2019s time to get unstuck from the \u2018lack of direction\u2019 trap. Start creating content that positions your brand as an authority and convinces buyers to care.',
      whatHeading: 'Content production made with editorial brains',
      whatBody: 'We produce content across all the spaces and formats your audience plays in: words, social and influencer, video and email. Based on a content strategy that connects everything back to your brand and your commercial goals. Every piece has a purpose and nothing is made to fill a slot.',
      accordion: [
        { label: 'Blog & article writing', body: 'Long-form content written by people who understand editorial craft, SEO/GEO content strategy and what audiences will click on.' },
        { label: 'Social media content', body: 'Social media content for LinkedIn, Instagram and more - developed from your brand strategy and content calendar, in your voice.' },
        { label: 'Micro-content & short-form video editing', body: 'Reels, TikToks, short-form social video, edited and formatted for the platforms where your audience scrolls.' },
        { label: 'Email marketing content', body: 'EDM copy, newsletter and campaign content written to drive action.' },
        { label: 'Marketing templates & content calendars', body: 'Branded marketing templates, Canva assets, social media templates and structured content calendars your team can execute against without endless briefing.' },
        { label: 'Influencer marketing & campaign management', body: 'We identify, brief and manage influencer campaigns based on your brand strategy.' },
      ],
      whyHeading: 'How we think about content',
      whyBlocks: ['We come from publishing - the real kind, with ruthless deadlines, fussy audiences, strict editorial standards and daily plot twists. We know what content production looks like from the inside. We understand the difference between content that performs on a platform and content that builds a brand.'],
      socialHeading: 'Content that says something',
      ctaHeading: 'Let\u2019s build a content engine worth running',
      ctaBody: 'Book a call and we\u2019ll tell you what a functional content strategy looks like for your brand. What to produce, where to publish it, and what to stop doing.',
    },
    'podcast-production': {
      backdrop: 'blue-smoke',
      ctaBand: 'concrete-stairs',
      eyebrow: 'Podcast Production',
      h1: 'Podcast marketing for founders with a point of view',
      h1Highlight: 'point of view',
      heroBody: 'So you\u2019ve got an idea for a show, maybe a guest list, and wisdom you want to share. To make it worth listening to, you need solid podcast development and execution. We build it all - from the initial concept, to podcast scripts and runsheets, to launch campaigns and distribution.',
      ctaPrimary: 'Book a podcast call',
      problemHeading: 'Branded podcasts go silent too soon',
      problemBody: 'Branded podcasts start with enthusiasm before dying off after a few episodes. That\u2019s because it\u2019s harder than it looks. The production burden is high and the concept must be compelling. Before you turn the mic on, we\u2019ll have the infrastructure built to deliver thoughtful, engaging content positioned to your commercial goals.',
      whatHeading: 'From podcast strategy to production',
      whatBody: 'We handle the full scope of a branded podcast, from initial concept and podcast strategy through to recording, audio production, distribution and audience growth. The goal is a podcast that builds your brand authority without burning out after six episodes.',
      accordion: [
        { label: 'Podcast strategy & positioning', body: 'We define what your podcast is for before you hit \u2018record\u2019. Format, frequency, audience, topic territory and competitive positioning.' },
        { label: 'Podcast development & launch', body: 'From concept to live. Show name, episode structure, run sheets, descriptions, artwork and distribution setup across Spotify, Apple Podcasts and beyond.' },
        { label: 'Podcast production & recording', body: 'End-to-end podcast production including recording coordination, audio editing, mixing and mastering.' },
        { label: 'Show notes, scripts & episode copy', body: 'Episode descriptions, show notes, chapter markers and supporting copy written to SEO and platform standards.' },
        { label: 'Podcast distribution & audience growth', body: 'We manage submission across major podcast platforms and build a distribution and podcast marketing plan to grow your audience beyond your existing network. Social clips, email integration and cross-promotion included.' },
        { label: 'Ongoing podcast management', body: 'For brands running an active podcast, we offer ongoing production and management retainers to keep the show shipping.' },
      ],
      whyHeading: 'How we think about podcasting',
      whyBlocks: ['We come from a media publishing background, which means we understand audio as a distribution channel, not just a content format. We develop and run podcast productions with an ecosystem in mind: generating repurposable content, attracting media attention and a loyal audience.'],
      socialHeading: 'Podcasts made with media savvy',
      ctaHeading: 'Let\u2019s build a follow-worthy podcast',
      ctaBody: 'Book a call and we\u2019ll tell you whether a podcast is the right move for your brand right now - and if it is, exactly what it would take to build one worth running.',
    },
    'paid-advertising': {
      backdrop: 'neon-hallway',
      ctaBand: 'blue-stripes',
      eyebrow: 'Paid Advertising',
      h1: 'Paid media that earns its budget',
      h1Highlight: 'earns its budget',
      heroBody: 'Deliver targeted, powerful ad campaigns without turning your budget into confetti. We lock in the essentials before a single dollar moves: Audience, messaging, channel mix, success metrics. You get campaign management that connects spend to outcomes.',
      ctaPrimary: 'Book a paid media call',
      problemHeading: 'Stop paying for empty clicks',
      problemBody: 'Most brands come to paid advertising after organic channels have plateaued and leads are drying up. When the brief is \u2018run some ads\u2019, that\u2019s the fastest way to burn money. We help you avoid that pain with a considered budget plan, on-brand creative and reporting that tracks actual revenue.',
      whatHeading: 'Paid media management, on target',
      whatBody: 'We manage paid advertising across search, social and programmatic, from initial strategy and audience targeting through to ad campaign management, creative direction and performance reporting. Every decision is tied to business goals.',
      accordion: [
        { label: 'Paid advertising strategy', body: 'Before any budget moves, we define the audience, the message, the channel mix and the measurement framework.' },
        { label: 'Google Ads & paid search', body: 'Search campaign setup, keyword strategy, ad copy and ongoing optimisation.' },
        { label: 'Meta Ads & paid social', body: 'Facebook and Instagram ad campaign management across awareness, consideration and conversion goals. Audience targeting strategy, creative direction and performance advertising optimisation.' },
        { label: 'Programmatic & display advertising', body: 'Programmatic advertising and display campaigns for brands scaling reach beyond search and social. We manage the targeting, the creative specifications and the performance reporting.' },
        { label: 'Ad campaign management & reporting', body: 'Ongoing paid media management with structured reporting tied to business outcomes. Budget pacing, creative testing, audience refinement and clear recommendations.' },
        { label: 'Creative strategy & ad copy', body: 'We write and direct the creative for your campaigns - headlines, ad copy, creative briefs and messaging frameworks.' },
      ],
      whyHeading: 'How we think about paid advertising',
      whyBlocks: [
        'We approach paid media the way a publisher approaches distribution \u2014 with a clear point of view on where the audience is, what they respond to and what makes them act. That means the creative strategy and the media strategy are developed together, not handed off between separate teams after the brief.',
        'We also connect paid advertising to the broader brand and content work we do. Ads that land in front of a cold audience and point to a weak landing page, an inconsistent brand or a site that doesn\u2019t convert will underperform regardless of how well the campaign is managed. We fix the full picture.',
      ],
      socialHeading: 'Ad spend connected to real results',
      ctaHeading: 'Let\u2019s make your ad budget work harder',
      ctaBody: 'Book a call and we\u2019ll show you what a properly structured ad campaign looks like for your brand.',
    },
    'email-marketing': {
      backdrop: 'geometric-facets',
      ctaBand: 'cubist-building',
      eyebrow: 'Email Marketing',
      h1: 'Your email list is your most direct line to your audience',
      h1Highlight: 'most direct line',
      heroBody: 'No algorithm controls who sees it. No platform change can take it away. Nothing builds trust, drives repeat behaviour and hooks buyers like email marketing. We build the strategy and the system to make that happen.',
      ctaPrimary: 'Book an email marketing call',
      problemHeading: 'Email is an underused asset',
      problemBody: 'The average email list represents months or years of audience building. The best way to undo all that work is with half-assed campaigns or no clear email strategy. Stop subscriber list decay and start growing an eager audience that clicks in the right direction. We\u2019ll help you make email a growth engine.',
      whatHeading: 'Email marketing services made for humans',
      whatBody: 'We handle email strategy, campaign production, email automations and list management. End to end, or in the specific areas where your current setup is breaking down. Every email we produce has a clear job to do and a clear measure of whether it did it.',
      accordion: [
        { label: 'Email marketing strategy', body: 'We build the email strategy before we write the campaign - audience segmentation, send frequency, content framework and the role email plays in your broader marketing system.' },
        { label: 'Email campaigns & newsletters', body: 'EDM campaigns and newsletter content written to move subscribers into a decision.' },
        { label: 'Email automations & drip sequences', body: 'Welcome sequences, nurture flows, re-engagement campaigns and post-purchase automations.' },
        { label: 'Email list management & segmentation', body: 'Audience segmentation, list health, suppression management and CRM email marketing integration.' },
        { label: 'Email template design', body: 'HTML email templates designed for your brand, optimised for mobile and tested across email clients.' },
        { label: 'Performance reporting & optimisation', body: 'Open rates, click-through rates and conversion data tied back to campaign objectives.' },
      ],
      whyHeading: 'How we think about email marketing',
      whyBlocks: ['We grew up in media and publishing land. We understand what makes people open, read and act. And it starts well before the subject line: content, cadence, segmentation. We build email programmes that treat every variable seriously.'],
      socialHeading: 'Email that drives action',
      ctaHeading: 'Let\u2019s get more from your email list',
      ctaBody: 'Book a call and we\u2019ll tell you what your email marketing should be doing that it isn\u2019t, and what it would take to fix it.',
    },
  },

  /** Overview accordion rows for Services page (includes slug for deep links). */
  SERVICES_OVERVIEW: [
    { slug: 'strategy-positioning', label: 'Strategy & Positioning', body: 'The thinking that has to happen before anything else moves. Brand strategy, marketing planning, content strategy, PR strategy, social media and LinkedIn strategy. We get the plan right before budget goes anywhere.' },
    { slug: 'pr-media', label: 'PR & Media', body: 'Earned media, thought leadership, ghostwriting, executive profiling and LinkedIn content strategy. For founders and leaders who have something to say and need the right places to say it in.' },
    { slug: 'brand-identity', label: 'Brand Identity', body: 'Logo design, visual identity, brand guidelines and branded collateral. Built to make your brand look as credible as the work behind it.' },
    { slug: 'web-design-dev', label: 'Web Design & Development', body: 'UX audits, sitemap, wireframes, copywriting, responsive design, development and launch. Websites built around how your business sells.' },
    { slug: 'content-social', label: 'Content & Social Media', body: 'Blog writing, social media content, short-form video, email content, influencer campaigns and content calendars. Produced with editorial discipline, connected to your brand strategy.' },
    { slug: 'podcast-production', label: 'Podcast Production', body: 'Podcast strategy, development, recording, production, distribution and ongoing management. For brands building an engaged audience.' },
    { slug: 'paid-advertising', label: 'Paid Advertising', body: 'Google Ads, Meta Ads, paid social, programmatic and creative strategy. Ad campaign management that ties spend to commercial logic.' },
    { slug: 'email-marketing', label: 'Email Marketing', body: 'Email strategy, campaigns, automations, list management and performance reporting. Your most direct line to your audience, built for loyalty and conversions.' },
  ],

  ServiceDetail: function ServiceDetail({ slug, onNavigate }) {
    const t = darkTheme;
    var data = typeof SERVICE_PAGES !== 'undefined' ? SERVICE_PAGES[slug] : null;

    if (!data) {
      return (
        <div style={{ background: t.bg, minHeight: '100svh', padding: 'max(120px, var(--ds-header-offset)) var(--ds-page-gutter)', textAlign: 'center' }}>
          <p style={{ fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, marginBottom: 16 }}>This service page is not available.</p>
          <button type="button" className="ds-btn ds-btn--primary" onClick={function () { onNavigate('services'); }} style={{ background: t.a1, color: t.onAccent }}>View all services</button>
        </div>
      );
    }

    return (
      <div style={{ background: t.bg, minHeight: '100svh' }}>
        <DsBackdropSection slug={data.backdrop} variant="hero" className="ds-page-hero-pad ds-page-hero-fill">
          <div className="ds-content-wrap">
            <div data-ds-enter style={{ ['--ds-enter-delay']: '40ms', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div data-ds-rule style={{ width: 24, height: 1, background: t.a2 }} />
              <span style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 500, color: t.a2 }}>{data.eyebrow}</span>
            </div>
            <h1 data-ds-enter className="ds-hero-h1" style={{ ['--ds-enter-delay']: '120ms', fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5.25vw + 8px, 80px)', color: t.fg, lineHeight: 1.08, letterSpacing: '-0.02em' }}>
              {data.h1Highlight ? dsHighlight(data.h1, data.h1Highlight, t.hl) : data.h1}
            </h1>
            <p data-ds-enter className="ds-prose-wide" style={{ ['--ds-enter-delay']: '260ms', fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, lineHeight: 1.65, marginTop: 24, marginBottom: 32 }}>
              {data.heroBody}
            </p>
            <div data-ds-enter style={{ ['--ds-enter-delay']: '380ms', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button type="button" onClick={function () { onNavigate('contact'); }} className="ds-btn-primary" style={{ background: t.a1, color: t.onAccent, border: 'none', cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 600, fontSize: 16, padding: '14px 28px', borderRadius: 2, minHeight: 44 }}>
                <span>{data.ctaPrimary}</span>
              </button>
              <button type="button" onClick={function () { onNavigate('work'); }} className="ds-btn-ghost" style={{ background: 'transparent', color: t.fg2, border: '1px solid ' + t.border, cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 400, fontSize: 16, padding: '13px 28px', borderRadius: 2, minHeight: 44 }}>
                See our work
              </button>
            </div>
          </div>
        </DsBackdropSection>

        <section style={{ padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <DsProseSplit
              heading={data.problemHeading}
              image={(typeof SERVICE_SPLIT_IMAGES !== 'undefined' && SERVICE_SPLIT_IMAGES[slug] ? SERVICE_SPLIT_IMAGES[slug].problem : 'neon-trails')}
            >
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, margin: 0 }}>{data.problemBody}</p>
            </DsProseSplit>
          </div>
        </section>

        <section style={{ background: t.bgMid, padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <div data-ds-reveal style={{ marginBottom: 40 }}>
              <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(24px, 4vw, 40px)', color: t.fg, lineHeight: 1.15, marginBottom: 16 }}>{data.whatHeading}</h2>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7 }}>{data.whatBody}</p>
            </div>
            <div data-ds-reveal="fade">
              <DsAccordion items={data.accordion} defaultOpen={-1} />
            </div>
          </div>
        </section>

        <section style={{ padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <DsProseSplit
              heading={data.whyHeading}
              image={(typeof SERVICE_SPLIT_IMAGES !== 'undefined' && SERVICE_SPLIT_IMAGES[slug] ? SERVICE_SPLIT_IMAGES[slug].why : 'red-glow')}
              reverse
            >
              {data.whyBlocks.map(function (block, i) {
                return (
                  <p key={i} className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, marginBottom: i < data.whyBlocks.length - 1 ? 20 : 0 }}>
                    {block}
                  </p>
                );
              })}
            </DsProseSplit>
          </div>
        </section>

        <DsSocialProof heading={data.socialHeading} />
        <DsServiceCta heading={data.ctaHeading} body={data.ctaBody} onNavigate={onNavigate} backdrop={data.ctaBand} />
      </div>
    );
  },
});
