/* global React, Button, QuoteBreak */

function AboutHero() {
  return (
    <section className="page-hero surface-bg motif motif-ripple" aria-labelledby="ab-h">
      <span className="section-num-bg" aria-hidden="true">01</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">01 / About</div></div>
        <h1 id="ab-h">I’m Michael Howlett, a CX practitioner based in Australia.</h1>
      </div>
    </section>
  );
}

function AboutBody() {
  return (
    <section className="about surface-cream" aria-labelledby="ab-body-h">
      <span className="section-num-bg" aria-hidden="true">02</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">02 / Background</div></div>
        <img className="headshot" src="assets/headshot.png" alt="Michael Howlett" />
        <h2 id="ab-body-h">I do the work, then I write about it.</h2>
        <p>
          I’ve spent my career at the practical end of customer experience. Not strategy decks. The part where you have to make it work inside a real organisation, with real constraints, and real people who have other priorities.
        </p>
        <p>
          Most recently I’ve been leading the CX function at a regional bank. I built the VoC program, the NPS closed-loop process, the exec dashboards, the governance. The unglamorous stuff that doesn’t make it into conference talks but that determines whether CX is a real capability or just a slide.
        </p>
        <blockquote className="pull">
          I started Behaving because I kept meeting CX leaders in the same spot: they knew what good looked like, they just didn’t have the systems, the buy-in, or the roadmap to get there.
        </blockquote>
        <p>
          That’s the gap I work in. Financial services is where I have the most depth. Compliance pressures, customer trust issues, merger complexity, I’ve worked through it. But if you’re outside financial services and what I do sounds relevant, I’m happy to have a conversation.
        </p>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section className="surface-bg" aria-labelledby="ab-cta-h">
      <span className="section-num-bg" aria-hidden="true">03</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">03 / Next</div></div>
        <h2 id="ab-cta-h">Book a call.</h2>
        <p style={{ maxWidth: '52ch' }}>Thirty minutes. You tell me what you’re working on, I’ll tell you honestly whether I can help.</p>
        <Button href="contact.html" variant="primary">Get in touch</Button>
        <p style={{ marginTop: 'var(--space-6)', fontSize: '15px', color: 'var(--fg-muted)' }}>
          I also write about CX. <a href="https://cxdecoded.substack.com/">Read on Substack →</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { AboutHero, AboutBody, AboutCTA });