/* global React, Reveal, SectionHead, CTABlock, SERVICE_PILLARS */

const SERVICE_OFFERS = [
  {
    n: '01',
    title: 'Business Analysis <em>Advisory</em>',
    body: 'Review, challenge, or augment your current analytical capability. Useful for programmes where the analysis has stalled, requirements are unclear, or confidence in the current approach is low.',
    tags: ['Programme review', 'BA capability', 'Embedded advisory'],
  },
  {
    n: '02',
    title: 'Process &amp; Requirements <em>Review</em>',
    body: 'An independent, structured assessment of existing requirements, process design, or ITSM service definitions — with clear findings, prioritised recommendations, and a defensible read of the work.',
    tags: ['Independent review', 'Requirements quality', 'ITSM'],
  },
  {
    n: '03',
    title: 'Transformation <em>Discovery</em>',
    body: 'Structured discovery work at the front-end of a transformation: understanding the real problem, mapping the landscape, and creating the clarity needed to design well — before tooling and vendor decisions get locked in.',
    tags: ['Pre-business case', 'Problem framing', 'Scope shaping'],
  },
  {
    n: '04',
    title: 'Documentation &amp; <em>Governance Uplift</em>',
    body: 'Improving the quality, rigour, and usefulness of documentation, standards, and governance practices — so they become assets rather than bureaucratic overhead.',
    tags: ['Standards', 'Assurance', 'Operating manuals'],
  },
  {
    n: '05',
    title: 'Workshop <em>Design &amp; Facilitation</em>',
    body: 'Design and delivery of structured workshops for alignment, discovery, retrospective, or decision-making — with honest facilitation that surfaces what\'s actually in the room.',
    tags: ['Alignment', 'Discovery', 'Retrospectives'],
  },
  {
    n: '06',
    title: 'Complexity-to-Clarity <em>Consulting</em>',
    body: 'Bespoke engagements for organisations or leaders navigating situations that are genuinely complex: where the problem isn\'t clear, the path isn\'t obvious, and the stakes are real.',
    tags: ['Bespoke', 'Executive-facing', 'High-stakes'],
  },
];

function ServicesPage({ go, activeService }) {
  const navigateToService = (event, href) => {
    event.preventDefault();
    go(href);
  };

  return (
    <div className="page-enter" data-screen-label="Services">
      <section className="page-header">
        <div className="container">
          <span className="label page-locator">Services · Strategic advisory</span>
          <div className="page-header-grid">
            <h1 className="display-1">Services</h1>
            <p className="page-header-lede lede">
              Services can be engaged independently or combined around a specific client problem, decision, transformation stage or assurance need.
            </p>
          </div>
        </div>
      </section>

      <Reveal as="section" className="section-sm service-positioning">
        <div className="container">
          <div className="service-positioning-inner">
            <span className="label section-eyebrow">How we work</span>
            <div className="service-positioning-content">
              <h2 className="display-3 service-positioning-title">Focused work, <em>honestly</em> scoped.</h2>
              <p className="lede service-positioning-intro">
                We work with organisations and teams on a selective, project basis. Engagements are structured to deliver clear value quickly, without unnecessary overhead. We are not a large consultancy and do not operate like one.
              </p>
              <p className="pull-quote service-positioning-copy">
                Focused expertise, direct engagement, and honest advice — <strong>including about what we cannot help with</strong>. The best engagements start with a frank conversation about whether we are the right fit.
              </p>
            </div>
          </div>

          <div className="engagement-band service-engagement-band">
            <div>
              <span className="label section-eyebrow" style={{ marginBottom: '12px' }}>How an engagement begins</span>
              <h3 className="display-3 engagement-band-title">A clear three-step <em>start.</em></h3>
            </div>
            <div className="engagement-step">
              <span className="engagement-step-num">01 · Conversation</span>
              <h4 className="engagement-step-title">A frank initial <em>call</em></h4>
              <p className="engagement-step-body">Free, 45 minutes. We talk through what you're working on and whether we can be useful. If we can't, we'll say so — and try to point you somewhere better.</p>
            </div>
            <div className="engagement-step">
              <span className="engagement-step-num">02 · Proposal</span>
              <h4 className="engagement-step-title">A short, specific <em>scope</em></h4>
              <p className="engagement-step-body">A two-page proposal: what we'd do, in what sequence, with what shape of outcome. Written in plain language, not consultancy bluster.</p>
            </div>
            <div className="engagement-step engagement-step--wide">
              <span className="engagement-step-num">03 · Work</span>
              <h4 className="engagement-step-title">A real <em>engagement</em></h4>
              <p className="engagement-step-body">Most engagements are 4–16 weeks. Daily rate, fixed scope, or retained advisory — whichever fits the work best. Honest progress reports throughout.</p>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal as="section" className="section service-offers-section">
        <div className="container">
          <SectionHead
            label="What we offer"
            title="Six ways of <em>working</em> together."
          />
          <div className="services-grid">
            {SERVICE_OFFERS.map((service) => (
              <article className="service-card" key={service.n}>
                <span className="service-num">{service.n}</span>
                <h3 className="service-title" dangerouslySetInnerHTML={{ __html: service.title }} />
                <p className="service-body">{service.body}</p>
                <div className="service-tags" aria-label={`${service.title.replace(/<[^>]+>/g, '')} engagement types`}>
                  {service.tags.map((tag) => <span className="service-tag" key={tag}>{tag}</span>)}
                </div>
              </article>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal as="section" className="section-sm service-index-section">
        <div className="container">
          <SectionHead
            label="Service index"
            title="Service <em>pillars.</em>"
          />
          <nav className="service-index" aria-label="Services on this page">
            {SERVICE_PILLARS.map((service) => (
              <a
                key={service.id}
                href={service.href}
                className={`service-index-link ${activeService === service.id ? 'is-active' : ''}`}
                aria-current={activeService === service.id ? 'location' : undefined}
                onClick={(event) => navigateToService(event, service.href)}
              >
                <span>{service.title}</span>
                <span className="arrow" aria-hidden="true">↓</span>
              </a>
            ))}
          </nav>
        </div>
      </Reveal>

      <Reveal as="div" className="service-sections">
        {SERVICE_PILLARS.map((service) => (
          <section
            id={service.id}
            key={service.id}
            className={`service-section ${activeService === service.id ? 'is-active-service' : ''}`}
            aria-labelledby={`${service.id}-title`}
          >
            <div className="container service-section-inner">
              <span className="label section-eyebrow">Service pillar</span>
              <div className="service-section-content">
                <h2
                  id={`${service.id}-title`}
                  className="service-section-title"
                  data-route-heading
                  tabIndex="-1"
                >
                  {service.title}
                </h2>
                <p className="service-section-purpose">{service.purpose}</p>
                <a
                  className="link-arrow"
                  href="/contact"
                  onClick={(event) => { event.preventDefault(); go('contact'); }}
                >
                  Start a Conversation <span className="arrow" aria-hidden="true">→</span>
                </a>
              </div>
            </div>
          </section>
        ))}
      </Reveal>

      <CTABlock go={go} />
    </div>
  );
}

window.ServicesPage = ServicesPage;