/* global React, Button, ContactForm, QuoteBreak */

function ServicesHero() {
  return (
    <section className="page-hero surface-bg motif motif-ripple" aria-labelledby="srv-h">
      <span className="section-num-bg" aria-hidden="true">01</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">01 / Services</div></div>
        <h1 id="srv-h">What I do.</h1>
        <p className="lede">
          I work with businesses on CX strategy and systems. Most engagements start with a conversation about what isn’t working.
        </p>
      </div>
    </section>
  );
}

const SERVICES = [
  { n: "01", title: "CX Snapshot", body: "Not sure where to start? This is a fast, independent read on your current customer experience. I look at what you\u2019ve got, feedback data, NPS scores, support tickets, your onboarding flow, and come back with a one-page assessment of your biggest risks and opportunities. Useful on its own, and a natural starting point if you want to go deeper." },
  { n: "02", title: "Why are customers leaving?", body: "Churn is up and nobody can agree on why. You\u2019ve got theories, maybe a few complaints in the inbox, but no clear picture of what\u2019s actually driving it. I dig into your data, your feedback, and your team\u2019s understanding of the experience, and come back with a short, honest report on what\u2019s happening and what to fix first. Not a 60-slide deck. A diagnosis and a place to start.", cta: true },
  { n: "03", title: "Why aren\u2019t people converting?", body: "People are finding you, showing interest, and then disappearing. The drop-off is somewhere between first contact and becoming a real customer, but you\u2019re not sure exactly where. I review your acquisition and early experience, map where the friction is, and identify where the experience doesn\u2019t match the promise. You get a clear picture of what\u2019s causing the drop-off and what to change.", cta: true },
  { n: "04", title: "What are customers actually telling you?", body: "You\u2019re collecting feedback somewhere. NPS scores, support tickets, reviews. But the insights aren\u2019t getting to the people who can act on them, and decisions about the customer experience are still mostly based on gut feel. I help you set up a simple, working system for capturing and using customer feedback. Not a massive platform implementation. A practical setup that fits your team and actually gets used.", cta: true },
  { n: "05", title: "Get your team on the same page", body: "Everyone has a different picture of what the customer experience actually looks like. This full-day workshop brings your team together to map the customer journey, identify where it breaks down, and agree on what to fix first. You leave with a shared map and a prioritised list of issues, not just a day of good conversation. Available remote or in-person." },
  { n: "06", title: "Advisory", body: "Sometimes you need someone who has done this work to think alongside you. I work with CX leaders and executives on specific challenges or longer-term roadmaps, without a big engagement attached. Good for new CX leads getting their bearings, or anyone facing a merger, restructure, or major change where the customer experience is at risk." },
];

function ServicesList() {
  return (
    <section className="surface-cream" aria-labelledby="srv-list-h">
      <span className="section-num-bg" aria-hidden="true">02</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">02 / The work</div></div>
        <h2 id="srv-list-h">Six ways I usually help.</h2>
        <ol className="numbered-list" role="list">
          {SERVICES.map((s) => (
            <li key={s.n} className="numbered-item">
              <span className="numbered-num">{s.n}</span>
              <div className="numbered-body">
                <h3 className="numbered-title">{s.title}</h3>
                <p>{s.body}</p>
                {s.cta && <a className="service-cta" href="contact.html">Sounds familiar? Get in touch →</a>}
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function ServicesCTA() {
  return (
    <section className="surface-bg" aria-labelledby="srv-cta-h">
      <span className="section-num-bg" aria-hidden="true">03</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">03 / Get in touch</div></div>
        <h2 id="srv-cta-h">Talk to me about your situation.</h2>
        <p style={{ maxWidth: '52ch' }}>Thirty minutes on the phone is usually enough to work out whether one of these is a fit. No pitch.</p>
        <Button href="contact.html" variant="primary">Let’s talk</Button>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesHero, ServicesList, ServicesCTA });