/* global React, Button */

function ConsultingHero() {
  return (
    <section className="page-hero surface-bg motif motif-ripple" aria-labelledby="con-h">
      <span className="section-num-bg" aria-hidden="true">01</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">01 / Consulting</div></div>
        <h1 id="con-h">Fix the experience. Keep the customers.</h1>
        <p className="lede">
          Most businesses spend far more acquiring customers than keeping them. That’s where the money leaks. I work with businesses to fix the experience so customers come back, spend more, and tell others.
        </p>
        <p style={{ maxWidth: '60ch', marginTop: 'var(--space-5)' }}>
          I’m Michael Howlett. I’ve spent years building CX systems inside organisations, the kind of systems that have to actually work, not just look good in a presentation. Behaving is how I do that work for smaller businesses who can’t hire a full-time CX lead.
        </p>
        <p style={{ maxWidth: '60ch', fontWeight: 500 }}>
          Three packages. Fixed scope. Clear outcomes.
        </p>
      </div>
    </section>
  );
}

const PACKAGES = [
  {
    n: '01',
    title: 'Journey Mapping',
    body: 'You pick a customer journey that matters. Onboarding. A complaint. A renewal. I map it end to end, from the customer’s perspective. Where things break, where they slow down, where people drop off or give up. Then you get a prioritised list of what to fix and why.',
    walk: 'A clear picture of where your experience is failing, and what to address first.',
    best: 'Businesses that know something is wrong but aren’t sure where the problem actually sits.',
    time: '2 to 3 weeks',
  },
  {
    n: '02',
    title: 'VoC System Setup',
    body: 'Most businesses either don’t collect customer feedback at all, or they collect it and nobody acts on it. This sets up a simple, closed-loop feedback system that runs and produces something useful. The right questions, asked at the right moment, with a process so someone actually does something when a customer tells you there’s a problem.',
    walk: 'A VoC system that has an owner, a process, and a reporting format you’ll actually use.',
    best: 'Businesses that want to know what customers think and want a process that goes beyond collecting scores.',
    time: '3 to 4 weeks',
  },
  {
    n: '03',
    title: 'CX Operating Rhythm',
    body: 'CX only improves when someone is paying attention to it consistently. This package gives your business the cadence, governance, and reporting to make that happen. One full-day workshop to establish where you are and what needs to change. Then the design work to put a rhythm in place: meetings, reporting, ownership, escalation.',
    walk: 'A system where CX has a home. Someone owns it, it gets reviewed, and improvements don’t rely on one person remembering to care about it.',
    best: 'Businesses where CX is technically everyone’s responsibility, which usually means it’s nobody’s.',
    time: 'Workshop in week 1. Deliverables within two weeks of that.',
  },
];

function ConsultingPackages() {
  return (
    <section className="surface-cream" aria-labelledby="pkg-h">
      <span className="section-num-bg" aria-hidden="true">02</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">02 / Packages</div></div>
        <h2 id="pkg-h">What I offer.</h2>
        <p style={{ maxWidth: '58ch' }}>
          Each package is designed around a specific outcome. You know what you’re getting before we start, and there are no retainers or open-ended advisory arrangements.
        </p>
        <ol className="numbered-list" role="list">
          {PACKAGES.map((p) => (
            <li key={p.n} className="numbered-item">
              <span className="numbered-num">{p.n}</span>
              <div className="numbered-body">
                <h3 className="numbered-title">{p.title}</h3>
                <p>{p.body}</p>
                <p><strong>What you walk away with: </strong>{p.walk}</p>
                <p><strong>Best for: </strong>{p.best}</p>
                <div className="numbered-meta">
                  <span><strong>Timeframe:</strong> {p.time}</span>
                </div>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

const STEPS = [
  { n: '01', title: 'Discovery call', body: 'Free, 30 minutes. We talk through what’s going on in your business and whether I can help. No pitch. If I’m not the right fit, I’ll say so.' },
  { n: '02', title: 'Proposal', body: 'If there’s a fit, I send a short scope note: what I’ll deliver, when, and for how much. Nothing complicated.' },
  { n: '03', title: 'We start', body: 'You approve, I invoice 50% upfront, and we kick off within a week.' },
];

function ConsultingHow() {
  return (
    <section className="surface-bg" aria-labelledby="how-h">
      <span className="section-num-bg" aria-hidden="true">03</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">03 / How it works</div></div>
        <h2 id="how-h">How it works.</h2>
        <ol className="numbered-list" role="list">
          {STEPS.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>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function ConsultingWhy() {
  return (
    <section className="surface-cream" aria-labelledby="why-h">
      <span className="section-num-bg" aria-hidden="true">04</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">04 / Why Behaving</div></div>
        <h2 id="why-h">Why Behaving.</h2>
        <p>
          I’m not a consulting firm. I’m one person who has spent years doing this work inside real organisations. I know what it looks like when CX is done well and when it isn’t.
        </p>
        <blockquote className="pull">
          What I bring is practical experience, not a methodology. I don’t have a trademarked framework. I have a good eye for what’s breaking and a clear head for what to do about it.
        </blockquote>
        <p>
          I also write about CX. If you want to get a sense of how I think before you book a call, <a href="https://cxdecoded.substack.com/">read some of that first</a>.
        </p>
      </div>
    </section>
  );
}

function ConsultingCTA() {
  return (
    <section className="surface-bg" aria-labelledby="con-cta-h">
      <span className="section-num-bg" aria-hidden="true">05</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">05 / Get in touch</div></div>
        <h2 id="con-cta-h">Book a free discovery call.</h2>
        <p style={{ maxWidth: '52ch' }}>
          Thirty minutes, no obligation. We’ll figure out together whether one of these packages makes sense for your business.
        </p>
        <Button href="contact.html" variant="primary">Book a call</Button>
        <p style={{ marginTop: 'var(--space-6)', fontSize: '14px', color: 'var(--fg-muted)' }}>
          Or email me directly: <a href="mailto:michael@behaving.co">michael@behaving.co</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { ConsultingHero, ConsultingPackages, ConsultingHow, ConsultingWhy, ConsultingCTA });