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

const PILLAR_DETAILS = {
  'strategic-transformation-decision-advisory': {
    activities: [
      'Decision briefs, options assessments and evidence-based recommendations.',
      'Transformation roadmaps, sequencing and prioritised uplift recommendations.',
      'Readiness, maturity, operating-model and service-model assessments.',
      'Business-case, procurement and vendor-evaluation support.',
      'Outcome, benefit and value-measurement structures.',
    ],
    capabilities: ['Decision support', 'Transformation readiness', 'Operating models', 'Procurement advisory'],
  },
  'enterprise-architecture-analysis': {
    activities: [
      'Capability, operating-model and business-architecture views.',
      'Current-state, future-state and gap analysis.',
      'Business, functional, non-functional and technical requirements.',
      'Process and workflow models with redesign recommendations.',
      'Solution, integration, interface, API and data requirements.',
    ],
    capabilities: ['Business architecture', 'Requirements', 'Process design', 'Integration analysis'],
  },
  'ai-governance-digital-trust': {
    activities: [
      'AI governance and adoption assessments with practical uplift recommendations.',
      'Governance, accountability, decision-rights and human-oversight models.',
      'Risk, control and assurance frameworks or mappings.',
      'AI-enabled platform governance and operating requirements.',
      'Cyber, data, privacy, records, accessibility and vendor-obligation traceability.',
    ],
    capabilities: ['AI governance', 'Digital trust', 'Risk & controls', 'Vendor accountability'],
  },
  'transformation-delivery-assurance': {
    activities: [
      'Delivery governance, implementation oversight and executive visibility.',
      'Operational and organisational readiness assessments with prioritised actions.',
      'Product, backlog and Agile or Hybrid delivery support.',
      'Vendor-delivery assurance and requirements-to-outcome traceability.',
      'Post-implementation assessment, value visibility and corrective recommendations.',
    ],
    capabilities: ['Delivery governance', 'Implementation readiness', 'Vendor assurance', 'Value realisation'],
  },
};

function ServiceDetailPanel({ title, children }) {
  return (
    <article className="service-detail-disclosure">
      <div className="service-detail-trigger">
        <span className="service-detail-title">{title}</span>
      </div>
      <div className="service-detail-body">
        <div className="service-detail-body-clip">
          <div className="service-detail-content">{children}</div>
        </div>
      </div>
    </article>
  );
}

function ServicesPage({ go, activeService }) {
  const [hoveredServiceCard, setHoveredServiceCard] = React.useState(null);
  const [focusedServiceCard, setFocusedServiceCard] = React.useState(null);
  const activeServiceCard = hoveredServiceCard || focusedServiceCard;

  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 page-header-grid--services">
            <div className="services-header-copy">
              <h1 className="display-1">Focused work, <em>honestly</em> scoped.</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>
            <aside className="services-hero-principle">
              <span className="services-hero-principle-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="8" />
                  <circle cx="12" cy="12" r="2.25" />
                  <path d="M12 4v3M12 17v3M4 12h3M17 12h3" />
                </svg>
              </span>
              <p>
                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>
            </aside>
          </div>
        </div>
      </section>

      <Reveal
        as="section"
        id="engagement-start"
        className="section service-engagement-section route-section-target"
        aria-labelledby="engagement-start-title"
      >
        <div className="container">
          <h2
            id="engagement-start-title"
            className="display-3 service-engagement-title"
            data-route-heading
            tabIndex="-1"
          >
            How to <em>engage with us.</em>
          </h2>
          <p className="lede service-engagement-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>
          <div className="engagement-band service-engagement-band">
            <div className="engagement-band-header">
              <h3 className="display-3 engagement-band-title">A clear three-step <em>start.</em></h3>
            </div>
            <ol className="engagement-flow" aria-label="Engagement sequence">
              <li className="engagement-step" tabIndex="0">
                <span className="engagement-flow-node" aria-hidden="true">01</span>
                <span className="engagement-step-num">Conversation</span>
                <h3 className="engagement-step-title">A frank initial <em>call</em></h3>
                <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>
              </li>
              <li className="engagement-step" tabIndex="0">
                <span className="engagement-flow-node" aria-hidden="true">02</span>
                <span className="engagement-step-num">Proposal</span>
                <h3 className="engagement-step-title">A short, specific <em>scope</em></h3>
                <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>
              </li>
              <li className="engagement-step" tabIndex="0">
                <span className="engagement-flow-node" aria-hidden="true">03</span>
                <span className="engagement-step-num">Work</span>
                <h3 className="engagement-step-title">A real <em>engagement</em></h3>
                <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>
              </li>
            </ol>
          </div>
        </div>
      </Reveal>

      <Reveal
        as="section"
        id="service-pillars-overview"
        className="section home-services route-section-target"
        aria-labelledby="service-pillars-overview-title"
      >
        <div className="container">
          <div className="home-services-panel">
            <div className="home-section-head home-services-head">
              <div className="home-section-head-copy">
                <h2 id="service-pillars-overview-title" className="display-3" tabIndex="-1" data-route-heading>Four connected service <em>pillars.</em></h2>
                <p className="lede">Each pillar can be engaged independently or combined around a decision, transformation stage, delivery risk or assurance need.</p>
              </div>
            </div>
            <div className="home-service-grid">
              {SERVICE_PILLARS.map((service) => (
                <a
                  key={service.id}
                  className={`home-service-card ${activeServiceCard === service.id ? 'is-expanded' : ''}`}
                  href={service.href}
                  onClick={(event) => { event.preventDefault(); go(service.href); }}
                  onMouseEnter={() => setHoveredServiceCard(service.id)}
                  onMouseLeave={() => setHoveredServiceCard(null)}
                  onFocus={() => setFocusedServiceCard(service.id)}
                  onBlur={() => setFocusedServiceCard(null)}
                >
                  <h3>{service.title}</h3>
                  <p>{service.summary}</p>
                  <div className="service-challenges">
                    <div className="service-challenges-inner">
                      <p className="service-challenges-lead">
                        Explore the challenges we help resolve, what the work can involve and the relevant capability areas.
                      </p>
                    </div>
                  </div>
                  <span className="link-arrow">Explore service <span aria-hidden="true">→</span></span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal
        as="section"
        id="service-pillars"
        className="section service-pillars-section route-section-target"
        aria-labelledby="service-pillars-detail-title"
      >
        <div className="container">
          <div className="service-pillars-panel">
            <div className="service-pillars-head">
              <h2 id="service-pillars-detail-title" className="display-3" tabIndex="-1" data-route-heading>
                How we help within each service <em>pillar.</em>
              </h2>
              <p className="lede">
                Each pillar connects a recognisable client challenge to focused advisory, analysis, design or assurance work. Start with one area, or combine them where the situation crosses organisational boundaries.
              </p>
            </div>

            <div className="service-pillars-lane">
              {SERVICE_PILLARS.map((service) => {
                const details = PILLAR_DETAILS[service.id];
                return (
                  <article
                    id={service.id}
                    key={service.id}
                    className={`service-pillar-record ${activeService === service.id ? 'is-active-service' : ''}`}
                    aria-labelledby={`${service.id}-title`}
                  >
                    <div className="service-pillar-overview">
                      <h3
                        id={`${service.id}-title`}
                        className="service-section-title"
                        data-route-heading
                        tabIndex="-1"
                      >
                        {service.title}
                      </h3>
                      <p className="service-section-purpose">{service.purpose}</p>
                    </div>

                    <div className="service-pillar-details">
                      <div className="service-pillar-detail-grid">
                        <ServiceDetailPanel title="Challenges we help resolve">
                          <ul>
                            {service.challenges.map((challenge) => <li key={challenge}>{challenge}</li>)}
                          </ul>
                        </ServiceDetailPanel>
                        <ServiceDetailPanel title="Services this can involve">
                          <ul>
                            {details.activities.map((activity) => <li key={activity}>{activity}</li>)}
                          </ul>
                        </ServiceDetailPanel>
                        <ServiceDetailPanel title="Capability areas">
                          <div className="service-tags" aria-label={`Capability areas related to ${service.title}`}>
                            {details.capabilities.map((capability) => (
                              <span className="service-tag" key={capability}>{capability}</span>
                            ))}
                          </div>
                        </ServiceDetailPanel>
                      </div>
                    </div>

                    <div className="service-pillar-cta-row">
                      <a
                        className="btn btn-primary btn-gold service-pillar-cta"
                        href="/services#service-pillars-overview"
                        onClick={(event) => { event.preventDefault(); go('/services#service-pillars-overview'); }}
                      >
                        Back to service pillars <span className="arrow" aria-hidden="true">→</span>
                      </a>
                    </div>
                  </article>
                );
              })}
            </div>
          </div>
        </div>
      </Reveal>

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

window.ServicesPage = ServicesPage;